Shopify Image Swap Grid Section

Description of the Section

The Image Swap Grid section is an engaging and interactive feature designed for Shopify stores. This section allows store owners to present products or highlights in a grid format where images swap upon hovering. Perfect for showcasing featured products, collections, or promotions, the Image Swap Grid enhances visual appeal and encourages user interaction.

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

Sample Use Cases for a Shopify E-commerce Store

1. Product Features: Highlight specific products with a hover-over swap feature that can showcase different angles or uses of a product.
2. Collection Highlights: Use the grid to display multiple collections, enticing customers to explore various categories.
3. Promotions and Discounts: Showcase special deals or limited-time offers with engaging visuals that swap on hover, catching visitor attention.
4. Customer Testimonials: Display customer reviews with a static image and swap to a picture of the customer or product being reviewed.
5. Brand Storytelling: Use images of the brand’s journey or milestones which swap to detailed descriptions or call-to-action buttons.

Overview of the Configuration Settings

• Text Settings:

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

• Color Settings:

  • Background: Set the background color with a linear gradient.
  • Cover Background: Set the cover background color with a linear gradient.
  • Cover Opacity: Adjust the opacity of the cover (0% to 100%).
  • Button Background Color: Set the background color for buttons.
  • Button Text Color: Set the text color for the buttons.
  • Text Color: Set the color for textual elements in the section.

• Dimension Settings:

  • Image Aspect Ratio: Choose from various aspect ratios like 4:1, 21:9, 16:9, 4:3, and 1:1.
  • Max Width of Section: Set the maximum width of the section in pixels.
  • Gap Between Images: Define the gap between grid elements in pixels.
  • Padding: Set padding for the top, bottom, left, and right areas of the section.
  • Round Borders on Media: Adjust the roundness of the image borders (0px to 50px).
  • Subtle Shadow on Media: Option to add a subtle shadow effect to the images.

• Block Settings:

  • Background Image: Upload the primary image for each block.
  • Swap Image: Upload the image that appears on hover.
  • Headline: Add a headline for the block.
  • Call to Action (CTA): Add a call-to-action button text.
  • CTA Link: Set the link for the call-to-action button.