Shopify Masonry Section

Description of the Section

The Masonry section is a versatile and visually appealing way to display a mixture of images and videos in a grid layout. The section's responsive design ensures that your media content looks great on any device. You can easily adjust various settings, such as the number of columns, spacing between items, and media appearance options, to customize it to your store's aesthetic.

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 "Masonry"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Gallery: Showcase your product images and videos in an engaging grid layout. This is useful for stores with diverse product lines, giving customers a clear and attractive visual experience.
2. Customer Testimonials: Feature customer testimonial videos alongside images of happy customers using your products, providing social proof and enhancing credibility.
3. Blog Visuals: Create a rich media section for your blog articles by embedding related images and videos to accompany your text content.
4. Portfolio Display: Use the masonry section to present a portfolio of your work, ideal for businesses such as photographers, designers, or architects.
5. Event Highlights: Recap events through a mix of pictures and videos, perfect for stores that host or participate in events and want to showcase memorable moments.

Overview of the Configuration Settings

1. Colors:

   • Background: Set the background color or gradient for the section.

2. Dimensions:

   • Max Width of Section: Specify the maximum width of the section in pixels.
   • Columns: Choose the number of columns (1, 2, or 3) for the grid layout.
   • Gap Between Images: Set the space between grid items in pixels.
   • Padding: Adjust the padding around the section (top, bottom, left, and right).

3. Advanced:

   • Zoom on Hover: Enable or disable a slight zoom effect when hovering over media items.
   • Round Borders on Media: Set the border radius for media items, making them rounded if desired.
   • Subtle Shadow on Media: Add a subtle shadow effect to media items for depth and emphasis.

4. Blocks:

   • Image:
     • Image: Select the image to display.
     • Optional Link: Add an optional hyperlink to the image.
   • Video:
     • Hero Video: Choose the video file to display.
     • Optional Link: Add an optional hyperlink to the video.
     • Play Inline: Enable or disable inline playback for the video.
     • Autoplay: Set the video to automatically play when loaded.
     • Loop Video: Enable the video to loop continuously.
     • Show Video Controls: Display video play controls.
     • Mute Video: Mute the video by default.