Shopify Grid Premium Section

Description of the Section

The Grid Premium section provides a highly customizable grid layout designed to display various media types, including images, videos, and custom liquid content. This section uses advanced CSS and JavaScript to ensure seamless integration and performance across devices, including a mobile-optimized slideshow with autoplay functionality.

Demo of the Section

Installation Instructions

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Highlights: Use the Grid Premium section to showcase your top-selling products or new arrivals in a visually appealing grid format.
2. Brand Stories: Incorporate videos and images about your brand story to engage customers and build brand loyalty.
3. Promotional Banners: Create stunning promotional banners to highlight ongoing sales, discounts, or special events.
4. Customer Reviews: Display customer review quotes alongside product images or videos to build trust and showcase product satisfaction.
5. Custom HTML Content: Use the custom liquid option to add unique HTML content, such as embedded social media posts or third-party widgets.

Overview of the Configuration Settings

• Font Settings:

  • Override theme fonts
  • Choose Headline Font
  • Choose Text Font

• Text Settings:

  • Text Size (10px to 50px)
  • Text Color
  • Headline Size (10px to 50px)
  • Headline Color

• Colors:

  • Background
  • Cover Background
  • Cover Opacity (0% to 100%)
  • Progress Background Color
  • Progress Foreground Color
  • Indicator Color

• Dimensions:

  • Height of Tile
  • Height of Tile (Mobile)
  • Max Width of Section
  • Gap Between Grid
  • Padding (Top, Bottom, Left, Right)

• Design:

  • Grid Type (Options: Feature Left, Feature Right, 2 Column, 3 Column, 4 Column, 5 Column)
  • Round Borders on Media (0px to 50px)
  • Subtle Shadow on Media

• Slideshow (Mobile Only):

  • Enable Autoplay
  • Autoplay Time (Options: Slowest - 10s, Slower - 7.5s, Normal - 5s, Faster - 3s, Fastest - 2s)

• Block Types:

  • Image Block:

    • Background Image
    • Headline
    • Text (Optional)
    • Show Arrow on Hover
    • Tile link (Optional)

  • Video Block:

    • Video
    • Headline
    • Text (Optional)
    • Show Arrow on Hover
    • Tile link (Optional)
    • Additional Video Settings: Play Inline, Autoplay, Loop Video, Show Video Controls, Mute Video

  • Custom Liquid Block:

    • Custom Liquid Code