Image with hover
A list of items that change the image on hover.
Explain your process step by step (Sourcing, Roasting, Packing) with a photo for each.
How to add it
- In Shopify admin, go to Online Store → Themes and click Customize.
- Open the page from the page picker at the top of the editor.
- In the sidebar, click Add section and choose Image with hover.
- Fill in the content, then click Save.
Tips
- On phones each item shows its image above it.
Screenshots
Settings
| Setting | Options | What it does |
|---|---|---|
| Section appearance | ||
| Color scheme | Color scheme | |
| Content | ||
| Subheading | Text (bold, italic, links) | |
| Subheading size | Small · Medium · Large | |
| Heading | Text (bold, italic, links) | Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them. |
| Heading size | Small · Medium · Large · Extra large | |
| Heading level | H1 · H2 · H3 · H4 · H5 · H6 | Adjust for page structure — one H1 per page. Size is controlled separately. |
| Settings | ||
| Image placement | Image first · Image second | |
| Item heading size | Small · Medium · Large | Larger sizes suit short headings. Long headings wrap onto a second line. |
| Text size | Small · Medium · Large | |
| Item shown first | 1–6 | Whose image shows when the section loads. Numbers past the last item fall back to the first. |
| Highlight the active item | On / Off | Fills the item whose image is showing with a tinted panel. Desktop only. |
| Highlight shade | Recessed · Lifted | Both shades come from the section's color scheme, so they stay legible on every scheme. |
| Show lines between items | On / Off | |
| Show state marker | On / Off | A small disc beside each item that fills in when its image is showing. Desktop only. |
| Animations | ||
Blocks
Click Add block under the section in the sidebar. Drag blocks to change their order.
Item
| Setting | Options | What it does |
|---|---|---|
| Image | Image | Shows in the image card on desktop when this item is hovered or focused, and above the item on phones. |
| Mobile image | Image | Optional. Falls back to the desktop media when empty. |
| Subheading | Text (bold, italic, links) | |
| Heading | Text (bold, italic, links) | Italicized words switch to the Accent font from Theme settings → Typography. They stay italic and keep the color of the text around them. |
| Text | Rich text | |
| Link text | Text | |
| Link | Link | |
| Open in a new tab | On / Off |
It also has the shared Animate on scroll and Section spacing settings.