How to Showcase Reviews on BigCommerce

Overview

Sendlane Reviews allows you to create a hand curated carousel or other testimonial layout for your BigCommerce store. Read on to learn how to highlight reviews in your BigCommerce store with layouts that perfectly match your store's branding!

In This Guide


1

 Save Content From Reviews

Use the Reviews Moderation page to search for review copy and images to promote on your hand curated layout. To find high quality reviews:

  1. Click the Reviews icon
  2. Click Moderation
  3. Click the filter icon
  4. Select With Images
  5. Select 5 stars
  6. Select a review with images and copy that best represents your brand
  7. Click on the image preview
  8. Right click on the image to save it to your desktop

Copy your selected reviews' text and the name of the reviewer to a document for easy reference and have that document plus your saved images handy before moving on to create your layout.

If you want to match the color of the stars in your reviews widget on your displayed reviews, navigate to the main widget styling page and copy the hex code of the star color:

2

 Determine a Layout For Your Displayed Reviews

Because we're using BigCommerce's existing theme blocks instead of a Sendlane-created carousel widget, you have multiple options for the layout of your carousel or other reviews display.

Click on the images in the table below to view examples of each layout type, then click on the layout type to see instructions on creating the layout in your BigCommerce store:

Layout Preview
Carousel
Horizontal Layout
Column Layout
3

 Create Your Layout

Create a Carousel

BigCommerce's carousel block is a great way to create a traditional carousel that can be set to auto-scroll or click to rotate the slides. Read about BigCommerce's carousel block for detailed information about the available customization options!

To create a carousel block like the one shown in the preview above:

  1. Click Storefront
  2. Click Themes
  3. Next to your active theme's name, click Customize
  4. Drag a Carousel widget into your theme where you want your reviews showcase to appear
  5. Click the edit icon next to Background
  6. Click the image to add an image from your BigCommerce library (My Images tab), upload a file from your desktop (Upload tab), or paste an image URL (Image URL tab)
  7. Click the eye icon next to Button and Box to hide these elements if desired
  8. Adjust the text color
  9. Copy the following text based star symbols and paste them into the larger text block: ★★★★★
  10. Copy the text of the review and paste it into the smaller text box
  11. Repeat steps 1-10 for each slide

Check out the video below for a demonstration of creating the carousel widget and editing the first slide:

Create a Horizontal Layout

BigCommerce's layout widget is a great way to horizontally display multiple hand picked reviews with images. Read about BigCommerce's layout block for detailed information about the available customization options!

To create an image with text block like the example above:

  1. Click Storefront
  2. Click Themes
  3. Next to your active theme's name, click Customize
  4. Drag a Layout block into your theme where you want your reviews showcase to appear
  5. Drag the column layout bar to the fourth divider from the left
  6. Click the back arrow icon to return to the Page Builder
  7. Drag an image widget into the layout's smaller lefthand container (Column 1)
  8. Click the placeholder image
  9. Add an image from your BigCommerce library (My Images tab), upload a file from your desktop (Upload tab), or paste an image URL (Image URL tab)
  10. To set a static size for your image, click the Image dimensions dropdown and select Custom
  11. Click into Column 1
  12. Click the Column background dropdown
  13. Select Color
  14. Click the back arrow twice to return to the Page Builder
  15. Drag a text widget into the layout's larger righthand container (Column 2)
  16. Select the placeholder text and paste your review's text
  17. Adjust the font size, color, and alignment
  18. Click the back arrow to return to the Page Builder
  19. Drag another text widget into Column 2
  20. Select the placeholder text and paste the following text based star symbols: ★★★★★
  21. Adjust the color of the stars
  22. Click the back arrow to return to the Page Builder
  23. Drag a spacer widget into Column 2 between the review and star text widgets
  24. Click into Column 2
  25. Click the Column background dropdown
  26. Select Color
  27. Repeat steps 1-26 for each review

Check out the video below for a demonstration of creating an image with text block:

Create a Column Layout

Shopify's multicolumn block is a great way to display multiple hand picked reviews with images. Read about BigCommerce's column layout for detailed information about the available customization options!

To create a multicolumn block like the example above:

  1. Click Storefront
  2. Click Themes
  3. Next to your active theme's name, click Customize
  4. Drag two Layout blocks into your theme where you want your reviews showcase to appear and set the columns to 3
  5. Drag an image widget into the top left layout section
  6. Click the placeholder image
  7. Add an image from your BigCommerce library (My Images tab), upload a file from your desktop (Upload tab), or paste an image URL (Image URL tab)
  8. To set a static size for your image, click the Image dimensions dropdown and select Custom
  9. Click into the column
  10. Click column background to adjust the background color
  11. Click the back arrow icon twice to return to the Page Builder
  12. Drag two text widgets into the bottom left layout section
  13. Click into the column
  14. Click column background to adjust the background color
  15. Select the placeholder text in the top text widget and paste the following text based star symbols: ★★★★★
  16. Adjust the text color for the stars
  17. Select the placeholder text in the bottom text widget and paste the review text
  18. Adjust the review text's size, color, and alignment
  19. Add spacers above and below the stars
  20. Repeat steps 1-19 for each review
  21. Adjust padding and spacing options when all of your content is completed

Check out the video below for a demonstration of creating a multicolumn layout:

Did this answer your question? Thanks for your feedback! There was a problem submitting your feedback. Please try again!