Shopify Media Grid Section

Description of the Section

The Media Grid section provides a sleek, customizable grid layout for displaying images and videos on your Shopify store. It's designed to enhance the visual appeal and user experience by offering various display options and configurations, including responsive design for mobile devices.

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Showcases: Ideal for displaying a collection of featured products with high-quality images and videos.
2. Customer Testimonials: Use the grid to showcase customer reviews and video testimonials in a visually appealing manner.
3. Brand Storytelling: Narrate your brand's story through a combination of images and videos, giving customers an engaging browsing experience.
4. Events and Promotions: Highlight upcoming sales, events, or promotions with captivating media content.
5. Blog Features: Create an engaging media-rich blog section that draws readers' attention with stunning visuals.

Overview of the Configuration Settings

1. Colors:

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

2. Dimensions:

   • Media Aspect Ratio: Choose from multiple aspect ratios (21:9, 16:9, 4:3, 1:1, 9:16, Auto).
   • Max Width of Section: Set the maximum width of the section in pixels.
   • Gap Between Images: Define the gap between images in the grid.
   • Padding: Customize padding for top, bottom, left, and right.

3. Advanced:

   • Mobile Display: Choose between 'Slideshow' or 'Stacked' for mobile devices.
   • Columns (when stacked): Configure the number of columns (1, 2, or 3) for stacked display on mobile.
   • Slideshow Progress Background Color: Set the background color for the slideshow progress bar.
   • Slideshow Progress Foreground Color: Set the foreground color for the slideshow progress bar.
   • Slideshow Indicator Color: Customize the color of the slideshow indicators.
   • Enable Autoplay: Option to enable autoplay for the slideshow.
   • Autoplay Time: Choose from several time intervals for autoplay (2s to 10s).
   • Show Big Play Button: Toggle visibility of a large play button for videos.
   • Media Radius: Adjust border radius to create rounded edges on media.
   • Subtle Shadow on Media: Add or remove a shadow effect on media.
   • Show Zoom on Hover?: Enable or disable a zoom effect on hover.

4. Blocks:

   • Image Block:
     • Image: Upload an image.
     • Optional Link: Add an optional link.
   • Video Block:
     • Video: Upload a video file.
     • Poster Image: Upload an optional poster image for the video.
     • Optional Link: Add an optional link.
     • Play Inline: Toggle inline play for videos.
     • Autoplay: Enable or disable video autoplay.
     • Loop Video: Enable or disable looping of the video.
     • Show Video Controls: Toggle visibility of video controls.
     • Mute Video: Mute or unmute the video.

These settings allow you to tailor the Media Grid section to fit your store's design and functionality needs seamlessly.