Customer Review
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Customer Review".
Section settings
General
| Settings | Meaning |
|---|---|
Layout | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Padding Container Full Width | Determine the left and right spacing of the Full Width layout. |
Style | Select the position layout for the section content. The options are: - Style 1: Title, description are on top, and the reviews are on the bottom. - Style: Title and description are to the left. The reviews become scrollable to the right. |
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately. |
Background Color | Apply Color on the background of the section. |
Background Gradient | Apply Color on the background gradient of the section. |
Background Image | Upload / Select an image as the section background. |
Section
| Settings | Meaning |
|---|---|
Title | Enter the title for the section. |
Title Color | Apply color on the section title. |
Title Margin Bottom | Determine the spacing of the title from the bottom. |
Title Font Size | Determine the font size of the title. |
Title Font Size Mobile | Determine the font size of the title on Mobile. |
Description | Specify the text for the section description. |
Description Color | Apply color on the description text. |
Description Spacing Bottom | Determine the spacing of the description from its bottom. |
Description Font Size | Determine the font size of the description. |
Alignment | Select the align of title and description to be either to be to the Left, Right or Center. |
Settings review block
| Settings | Meaning |
|---|---|
Layout Block | Select the layout for all blocks. - Layout 1: The review content is aligned to the left of the block. The rating stars lie above the review message. - Layout 2: The review content is aligned to the center of the block. The rating stars lie below the review message. |
Review Row | Select the row count for reviews to render. |
Show Arrows (For Layout 2) | Toggle the arrows on review slider for Layout 2. |
Avatar Margin Bottom | Set the spacing of the reviewer's avatar from the bottom. |
Color Heading | Set the color for the review heading. |
Font Size Heading | Determine the font size of the review heading. |
Heading Margin Bottom | Determine the spacing of the heading from the bottom. |
Font Weight | Select the font weight of the heading to be either Normal, Medium, SemiBold, Bold, Bolder, Black. |
Color Sub Heading | Set the color for the review subheading. |
Font Size Sub Heading | Determine the font size for the review subheading. |
Sub Heading Margin Bottom | Determine the spacing of the review subheading from the bottom. |
Color Name | Set the color for the reviewers' names. |
Font Size Name | Determine the font size of the reviewers' names. |
Color Date | Set the color for the review dates. |
Font Size Date | Determine the font size of review dates. |
Color Content | Set the color for the review message. |
Font Size Content | Determine the font size of the review message. |
Body Margin Bottom | Determine the spacing of the review message from the bottom. |
Color Icon | Set the color for the icons. |
Background Color | Set the color for the icon backgrounds. |
Star Margin Bottom | Determine the spacing of the rating stars from the bottom. |
Show Avatar? | Toggle to show reviewers' avatars. |
Star Position (For Layout 2) | For layout 2, ratings always appear above review message. This setting is to specify whether the stars are above or below the title as well. |
Star Color | Set the color of the stars. With no color specified, the rating star color will fallback to its default (orange). |
Block Settings
Review
| Settings | Meaning |
|---|---|
Avatar | Select/Upload image for reviewer's avatar. |
Heading | Fill in the heading for the review card. |
Sub Heading | Enter the subheading for the review card. |
Rating (Star) | Select the rating start from 0 to 5. |
Name | Enter the reviewer's name. |
Date | Enter the review date. |
Content | Enter the review message for the review card. |
Last updated
