Image with product cards
One large lifestyle image beside a set of product cards, giving products a context shot without per-product photography.
At a glance: Add it to any page with Add section.
Good for
- Shop-the-look: a styled photo beside the products in it
- Showing a collection in use next to its products
- Campaign pages that pair one strong image with a few products
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Image with product card and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Media
| Desktop image | Background image used on desktop.
2880 x 1280px (large) .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. |
| Image position | Which side of the text the image sits on.
Side layout appears on desktop only. Mobile uses the top layout. Choose Top, Side (default) or Behind. |
| Card position | Which side the product cards sit on in the side-by-side layout. The image takes the other side. On mobile the image always goes on top.
Choose Left or Right (default). Only appears when Image position is Side. |
| Text position | Above cards places the heading, text and button above the products. Over image lays them on the image, with the overlay darkening it so the text stays readable.
Choose Above cards (default) or Over image. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 40%). Only appears when Text position is Over image or Image position is Behind. |
| Desktop content position | Where the text block sits over the image on desktop.
Choose Top left, Top center, Top right, Middle left, Middle center (default), Middle right, Bottom left, Bottom center or Bottom right. Only appears when Text position is Over image and Image position is not Behind. |
| Desktop content alignment | Text alignment on desktop.
Default: Left. Only appears when Text position is Over image. |
| Mobile content position | Where the text block sits over the image on mobile.
Choose Top left, Top center, Top right, Middle left, Middle center (default), Middle right, Bottom left, Bottom center or Bottom right. Only appears when Text position is Over image and Image position is not Behind. |
| Mobile content alignment | Text alignment on mobile.
Default: Left. Only appears when Text position is Over image. |
Products
| Collection | The collection this section pulls products from. |
| Products | Choose the products to show, and in what order.
Used only when no collection is selected. |
| Products to show | Maximum number of products shown in the section.
Adjustable from 2 to 12 (default 4). |
| Card style | Visual treatment of each card.
Choose Default (default) or Mini. |
| Desktop columns | How many items sit side by side on desktop.
Choose 3, 4 (default) or 5. Only appears when Image position is not Side and Card style is not Mini. |
| Desktop columns | How many mini product cards sit side by side on desktop. Mini cards are compact, so they only come in 3 or 4 columns. Not used by the side-by-side layout, which always has two columns next to the image.
Choose 3 or 4 (default). Only appears when Image position is not Side and Card style is Mini. |
| Enable carousel on desktop | Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.
Off by default. Only appears when Image position is Top or Image position is Behind. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Tips
- Pick an image that shows the products in use. Shoppers connect the photo to the cards beside it.
- Keep it to four products in the side-by-side layout. It shows two columns next to the image, so more products just make it longer.
- Use Over image for short text. A heading and one line sit well on a photo, but longer copy is easier to read above the cards.
Troubleshooting
Desktop columns and desktop carousel aren't available
The side-by-side layout always shows two columns next to the image, so those settings only appear for the other image positions.
The cards are a carousel on mobile even though I turned the carousel off
On mobile the products are always a swipeable carousel. The carousel setting only affects desktop.
The section ignores my product list
When a Collection is selected it takes priority. Clear it to use the products you picked.