Shopify Review Masonry Section

Description of the Section

The Review Masonry section is a customizable Shopify section built using the Sections Pro app. This section allows you to display customer reviews in a visually appealing masonry grid layout. It supports both image and video reviews, making it a versatile tool for showcasing customer feedback on your e-commerce store.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Review Masonry"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Page Reviews: Enhance your product pages by displaying customer reviews directly under the product images to build trust and credibility.
2. Homepage Testimonials: Feature customer testimonials on your homepage to highlight positive experiences and encourage new visitors to make a purchase.
3. Video Review Gallery: Create a dedicated page for video reviews where customers can watch and read about real user experiences with your products.
4. Seasonal or Promotional Campaigns: Utilize the section during special sales or promotional periods to showcase time-sensitive reviews and create urgency.

Overview of the Configuration Settings

• Text Settings

  • Text Font: Choose the font for the review text.
  • Text Size: Adjust the font size for the review text (10px to 50px).
  • Headline Font: Choose the font for the review headlines.
  • Headline Size: Adjust the font size for the review headlines (10px to 50px).

• Colors

  • Background: Select the background color or gradient for the section.
  • Text Color: Set the color of the text in the reviews.
  • Highlight Color: Choose a color to highlight certain elements like SVGs.

• Dimensions

  • Max Width: Define the maximum width of the section (in pixels).
  • Columns: Choose the number of columns (1, 2, or 3) for the masonry grid.
  • Mobile Columns: Decide the number of columns to display on mobile devices (1 or match the desktop columns).
  • Gap Between Reviews: Set the gap size between reviews (in pixels).
  • Padding: Adjust the padding around the section (top, bottom, left, right).

• Media Settings

  • Round Borders on Media: Specify the border radius for images/videos in the reviews (0px to 50px).
  • Subtle Shadow on Media: Toggle a subtle shadow effect on images/videos.

• Block Settings (Image Review)

  • Image: Upload an image for the review.
  • Quote: Add the review text.
  • Cite: Cite the reviewer.
  • Call to Action Link: Add an optional link for a call to action.

• Block Settings (Video Review)

  • Hero Video: Upload a video for the review.
  • Optional Link: Add an optional link for a call to action.
  • Play Inline: Toggle inline video play.
  • Autoplay: Toggle video autoplay.
  • Loop Video: Toggle video looping.
  • Show Video Controls: Toggle the display of video controls.
  • Mute Video: Toggle video mute.
  • Quote: Add the review text.
  • Cite: Cite the reviewer.
  • Call to Action Link: Add an optional link for a call to action.