How to customize Product Reviews block in Website Builder
The Product Reviews block in Website Builder is a feature that allows you to showcase your customers' reviews of your products. Product reviews can significantly influence the purchasing decisions of your visitors, continuously driving conversions and sales for your business. Let's learn how to add and customize the Product Reviews block on your website.
A. Add a Product Reviews block
B. Customize the content tab of Product Reviews block
C. Customize the design tab of Product Reviews block
On admin dashboard, go to Online Store > Design > Customize.
To add a new Product Reviews block to your web page, from the Website Builder, open the Insert panel and drag your block into the desired position.
Select the Product Reviews block > Content tab.
Review of: This option allows you to select which product's reviews you wish to display. There are three choices:
Product in cart: Opt for this to show reviews for the items a customer has placed in their shopping cart.
All products: Choose this to display an aggregation of reviews from across your entire product range
Specific product: This setting allows you to showcase reviews for a particular product of your choice.
Only when the option Specific product is selected, the Write a Review button will be available.
Featured reviews only: When enable, only your featured review will be displayed. This can be set up in the Settings section of the Product Reviews app.
Default sorting: Display the reviews following a predefined order. This order can be set according to following methods:
Most Recent: Lists the latest reviews for fresh feedback.
Oldest: Shows earliest reviews to display product durability.
With Media: Features reviews with photos or videos for deeper insight.
Highest Ratings: Puts top-rated reviews first to highlight satisfaction.
Lowest Ratings: Leads with low-rated reviews to show problem-solving.
Review header: Toggle on this option if you wish to display the review header, which includes the All Reviews Button and Promotion message.
All review button: Select the button action to any pages or choose to hide the button.
Promote message: Write a message to encourage customers to leave a review in exchange for a discount code. You can refer to this article for more information.
Card: Decide which information to display, such as review title, author avatar, or date posted, etc. Simply toggle on the options you wish to show or toggle off to hide them.
To change the review icon and color, go to the Review rating section within Website settings, or you can directly click on this link (see below image).
Select the Product Reviews block > Design tab.
Always show rating bar: Toggle this option to control the visibility of the rating bar.
Lay out: There are 4 layout options:
Masonry:
Size card: Choose between Small and Large sizes.
Review per page: Set the number of reviews displayed per page with options of 5, 10, 20, 50, or 100.
Align card: Align the cards to the left, center, or right of the block.
Carousel single image:
Review per slide: Select from 2 to 6 or set it to auto-adjust.
Size card: Options include Small and Large.
Align card: Arrange the cards to the left, center, or right.
Quantity: Determine the number of cards to display, ranging from 1 to 20.
Arrows: Allows you to choose the display style of the arrow: None, inside, on edge, outside, and bottom.
Slide Nav: This option refers to the navigation dots under the cards that let users jump to a specific slide.
Loop: Decide whether the carousel should loop continuously.
List:
Review per page: Set the number of reviews displayed per page with options of 5, 10, 20, 50, or 100.
Carousel multiple images: All settings are the same as Carousel single image layout.
Spacing: Control the spacing between review cards.
Radius: Set the border-radius for the review cards for a rounded appearance.
Show filters: Choose whether to display filters for sorting reviews. This option is only available for the Masonry and List layouts.
You can design general settings for the block. Please visit this article for more information.
Get started with Website Builder
Launch a web page using Website Builder
Set up sections on Website Builder
In this article
A. Add a Product Reviews block
B. Customize the content tab of Product Reviews block
C. Customize the design tab of Product Reviews block
A. Add a Product Reviews block
On admin dashboard, go to Online Store > Design > Customize.
To add a new Product Reviews block to your web page, from the Website Builder, open the Insert panel and drag your block into the desired position.
B. Customize the content tab of Product Reviews block
Select the Product Reviews block > Content tab.
Review of: This option allows you to select which product's reviews you wish to display. There are three choices:
Product in cart: Opt for this to show reviews for the items a customer has placed in their shopping cart.
All products: Choose this to display an aggregation of reviews from across your entire product range
Specific product: This setting allows you to showcase reviews for a particular product of your choice.
Only when the option Specific product is selected, the Write a Review button will be available.
Featured reviews only: When enable, only your featured review will be displayed. This can be set up in the Settings section of the Product Reviews app.
Default sorting: Display the reviews following a predefined order. This order can be set according to following methods:
Most Recent: Lists the latest reviews for fresh feedback.
Oldest: Shows earliest reviews to display product durability.
With Media: Features reviews with photos or videos for deeper insight.
Highest Ratings: Puts top-rated reviews first to highlight satisfaction.
Lowest Ratings: Leads with low-rated reviews to show problem-solving.
Review header: Toggle on this option if you wish to display the review header, which includes the All Reviews Button and Promotion message.
All review button: Select the button action to any pages or choose to hide the button.
Promote message: Write a message to encourage customers to leave a review in exchange for a discount code. You can refer to this article for more information.
Card: Decide which information to display, such as review title, author avatar, or date posted, etc. Simply toggle on the options you wish to show or toggle off to hide them.
To change the review icon and color, go to the Review rating section within Website settings, or you can directly click on this link (see below image).
C. Customize the design tab of Product Reviews block
Select the Product Reviews block > Design tab.
Review header section:
Always show rating bar: Toggle this option to control the visibility of the rating bar.
Review list section:
Lay out: There are 4 layout options:
Masonry:
Size card: Choose between Small and Large sizes.
Review per page: Set the number of reviews displayed per page with options of 5, 10, 20, 50, or 100.
Align card: Align the cards to the left, center, or right of the block.
Carousel single image:
Review per slide: Select from 2 to 6 or set it to auto-adjust.
Size card: Options include Small and Large.
Align card: Arrange the cards to the left, center, or right.
Quantity: Determine the number of cards to display, ranging from 1 to 20.
Arrows: Allows you to choose the display style of the arrow: None, inside, on edge, outside, and bottom.
Slide Nav: This option refers to the navigation dots under the cards that let users jump to a specific slide.
Loop: Decide whether the carousel should loop continuously.
List:
Review per page: Set the number of reviews displayed per page with options of 5, 10, 20, 50, or 100.
Carousel multiple images: All settings are the same as Carousel single image layout.
Spacing: Control the spacing between review cards.
Radius: Set the border-radius for the review cards for a rounded appearance.
Show filters: Choose whether to display filters for sorting reviews. This option is only available for the Masonry and List layouts.
Common section:
You can design general settings for the block. Please visit this article for more information.
Related articles
Get started with Website Builder
Launch a web page using Website Builder
Set up sections on Website Builder
Updated on: 30/05/2024
Thank you!