Image Swap Grid is a Shopify theme section in the Section Star library. Feature a grid of images that swap to an alternate image on hover.
About the Image Swap Grid 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.
Live demo
Use cases
- Product Features: Highlight specific products with a hover-over swap feature that can showcase different angles or uses of a product.
- Collection Highlights: Use the grid to display multiple collections, enticing customers to explore various categories.
- Promotions and Discounts: Showcase special deals or limited-time offers with engaging visuals that swap on hover, catching visitor attention.
- Customer Testimonials: Display customer reviews with a static image and swap to a picture of the customer or product being reviewed.
- Brand Storytelling: Use images of the brand’s journey or milestones which swap to detailed descriptions or call-to-action buttons.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set settings for the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Testimonials | Number | 20 |
Feature Design
Set design for the feature blocks
| Setting | Type | Default |
|---|---|---|
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Feature Text Color | Color | #fff |
Image Design
Set the display of the images
| Setting | Type | Default |
|---|---|---|
| Image Aspect Ratio | Select (4:1, 21:9, 16:9, 4:3, 1:1) | 1 / 1 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Image Width | Number | 1000 |
| Mobile Image Width | Number | 600 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Round Borders on Button | Range | 5 |
| Border Size on Button | Range | 0 |
| Border Color on Button | Color | #888 |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Feature block settings
| Setting | Type | Default |
|---|---|---|
| Background Image | Image | — |
| Sawp Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Call to Action | Inline rich text | <b>Shop Now</b> |
| Call to Action Link | URL | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Image Swap Grid”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.