# Image Swap Grid

> Feature a grid of images that swap to an alternate image on hover.

URL: https://sectionstar.app/sections/image-swap-grid/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**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

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.

## 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 | — |