Shopify Masonry Feature Section

Description of the Section

The Masonry Feature section is a highly customizable, visually engaging section designed to enhance your Shopify store's user experience. This section allows you to showcase images and videos in a masonry grid layout, creating a dynamic and modern look for your store. With various font, background, and button customization options, you can tailor this section to match your brand's style and capture the attention of your visitors effectively.

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Gallery: Use the Masonry Feature section to display a variety of product images or videos, highlighting different angles, colors, or features of your products. This creates an engaging way for customers to explore what's available in your store.

2. Customer Testimonials: Showcase customer reviews and testimonials with accompanying images or videos. This adds social proof and builds trust with potential buyers.

3. Seasonal Promotions: Perfect for marketing campaigns, you can use this section to feature seasonal sales, limited-time offers, or holiday-specific products with eye-catching images and promotional videos.

4. Brand Storytelling: Tell your brand's story through a mosaic of images and videos, engaging your visitors with behind-the-scenes looks, team introductions, and brand milestones.

5. Lookbooks: Fashion and lifestyle brands can use this section to create inspiring lookbooks, combining images and videos to give customers styling ideas and complete looks.

Overview of the Configuration Settings

Font Settings

• Override Theme Fonts: Option to override the existing theme fonts.
• Text Font: Choose the font for text.
• Headline Font: Choose the font for headlines.

Text Settings

• Text Size: Adjust the size of the text (10px - 50px).
• Text Line Height: Set the line height for text (range of preset values).
• Text Color: Choose the color of the text.

Headline Settings

• Headline Size: Adjust the size of the headline text (10px - 50px).
• Headline Line Height: Set the line height for headline text (range of preset values).
• Headline Color: Choose the color of the headline text.

Background Settings

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

Cover Settings

• Cover Background: Set the background of the cover overlay.
• Cover Opacity: Adjust the opacity of the cover (0% - 100%).
• Cover Opacity Increase on Hover: Set the increase in opacity on hover (0% - 100%).

Button Style Settings

• Button Background Color: Choose the background color of the button.
• Button Text Color: Choose the text color of the button.
• Padding Top/Bottom: Set the padding for top and bottom of the button.
• Padding Left/Right: Set the padding for left and right of the button.
• Border Radius: Set the border radius of the button.

Dimensions Settings

• Max Width of Section: Adjust the section's maximum width in pixels.
• Columns: Set the number of columns (1, 2, or 3).
• Gap Between Images: Adjust the gap between images in pixels.
• Padding: Set the padding for top, bottom, left, and right of the section.

Advanced Settings

• Zoom on Hover: Enable zoom effect on hover.
• Round Borders on Media: Adjust the roundness of borders on media (0px - 50px).
• Subtle Shadow on Media: Enable subtle shadow effect on media.

Block Settings

Each block can be either an image or a video and includes additional settings:

• Image: Choose an image, set a headline, call to action text, and a call to action link.
• Video: Choose a video, set various video playback options like autoplay, loop, mute, etc., along with headline and call to action elements.