In this guide, we'll show you how to display Superdesk review widgets on your Shopify store.
Superdesk allows you to showcase customer feedback seamlessly. Follow these simple steps to add Superdesk review widgets and enhance your store's credibility and conversion rates.
Installing Superdesk Review Widgets on Shopify
For Theme 2.0
If your Shopify store uses a Theme 2.0, installing Superdesk review widgets is straightforward. Open the Shopify theme editor and add the appropriate Superdesk block (Product Rating Summary, Product Reviews, or Featured Reviews Carousel) to your theme.
For Vintage Themes
For stores using vintage themes, the installation process involves a bit of coding. Locate the section in the Superdesk documentation that provides the necessary code snippet for each widget. Copy and paste this code into your website where you want the widget to appear.
Displaying the Summary Stars Widget
The Summary Stars widget provides a quick visual representation of product ratings.
Customizing Margins
You can customize the margins of the Summary Stars widget to fit your store's design:
- Margin Top: Set the top margin.
- Margin Bottom: Set the bottom margin.
- Margin Left: Set the margin from the left.
- Margin Right: Set the margin from the right.
Appearance When No Reviews
To manage the widget's appearance when there are no reviews, enable the "Hide when there are no reviews" option. If enabled, the widget will not appear on product pages without reviews.
Displaying the Product Reviews Widget
The Product Reviews widget displays detailed customer reviews for individual products.
Customizing Margins
Similar to the Summary Stars widget, you can customize the top and bottom margins for the Product Reviews widget:
- Margin Top: Set the top margin.
- Margin Bottom: Set the bottom margin.
Style Options for Product Reviews
Customize the appearance of the Product Reviews widget to match your store’s theme:
- Layout: Choose between a Grid or List layout.
- Summary Position: Select whether the summary appears at the top or left.
- Widget Max Width: Set the maximum width of the reviews section.
- Override Global Star Color: Change the full and empty star colors specifically for this widget.
- Star Full Color: Set the color of filled stars.
- Star Empty Color: Set the color of empty stars.
- Show Border: Enable to add borders around the reviews.
- Border Color: Set the color of the borders.
- Border Radius: Adjust the corner softness of the borders.
- Primary Text Color: Set the main text color.
- Secondary Text Color: Set the secondary text color.
- Accent Color: Set the accent color.
Content Adjustments for Product Reviews
Customize the content and behavior of the Product Reviews widget:
- Enable Empty State: Show a message like "Be the first to comment" when there are no reviews.
- Enable Media Gallery: Display images or videos in reviews.
- Enable Write a Review Button: Make the Write a Review button visible.
- Show Title: Display the titles of reviews.
- Show Date: Display the dates of reviews.
- Show Verified Badge: Display a Verified Buyer badge.
- Show Recommend Badge: Display a Recommend badge.
- Show Product Name: Display the product name in reviews.
- Show Custom Questions: Display custom questions in reviews.
- Show Media in Reviews: Display images or videos in reviews.
Displaying the Featured Reviews Carousel Widget
The Featured Reviews Carousel widget showcases a rotating selection of top reviews.
Customizing Margins
Adjust the top and bottom margins for the Featured Reviews Carousel widget:
- Margin Top: Set the top margin.
- Margin Bottom: Set the bottom margin.
Style Options for Featured Reviews Carousel
Tailor the style of the Featured Reviews Carousel to match your store’s aesthetic:
- Horizontal Alignment: Align the carousel contents to the left or center.
- Widget Max Width: Set the maximum width of the carousel.
- Override Global Star Color: Change the full and empty star colors for this widget.
- Star Full Color: Set the color of filled stars.
- Star Empty Color: Set the color of empty stars.
- Show Border: Enable borders around the carousel elements.
- Border Color: Set the color of the borders.
- Border Radius: Adjust the corner softness of the borders.
- Primary Text Color: Set the main text color.
- Secondary Text Color: Set the secondary text color.
Content Adjustments for Featured Reviews Carousel
Adjust the content and mechanics of the Featured Reviews Carousel:
- Carousel Autoplay: Enable to have the carousel autoplay.
- Show Product Name: Display product names in the carousel.
- Show Verified Buyer Badge: Display a Verified Buyer badge.
- Show Carousel Dots: Enable to show navigation dots below the carousel.
- Sort Reviews By: Sort carousel elements by rating score or date.
- Max Number of Reviews: Set the maximum number of reviews to display.
- Slides Per Page (Medium Screen): Specify the number of elements side by side on medium screens (e.g., tablets).
- Slides Per Page (Large Screen): Specify the number of elements side by side on large screens (e.g., desktops).
- Maximum Rows per Review Body: Set the maximum number of rows per review in the carousel.
Conclusion and Saving Changes
Once you’ve customized and installed your Superdesk review widgets, ensure you save your changes. Navigate to the top right of the settings page and click "Save Changes" to apply your configurations. By following these steps, you can effectively display and manage customer reviews on your Shopify store, enhancing your store's credibility and boosting conversions.
