Shoppable feed
The Shoppable feed section allows customers to shop multiple ‘looks’ directly from a gallery of images. Add images to showcase multiple products that pair well together, which customers can quickly view and buy in a ‘shop the look’ drawer.
Set up section
In the editor side panel, click (+) Add section and select Shoppable feed. Click and hold the drag handles ⋮⋮ to re-order sections.
Section styles
Click the section to edit the Header and general section styles for colors, width, and spacing:
Section layout
In the section settings, you can adjust the overall layout of the shoppable images
Display images in a Grid (multiple rows) or Slider (single row)
Select the number of columns to show per row
Choose to show the slider indicator bar
Click section to find settings
Layout
Display shoppable feed items in multiple rows (grid) or in a single row slider that visitors rotate through.
Slider Default Grid
Show slider indicator
When enabled, a bar below the slider that shows how far visitors have scrolled.
Number of columns on desktop
Select the number of images per row on desktop screens.
2 3 Default 4
Number of columns on mobile
Select the number of images per row on mobile screens.
1 Default 2
Add shoppable feed items
The Shoppable feed items are image cards that open a list of products that customers can view and purchase. Click a block to set up a shoppable item:
Add an image that showcases multiple products that pair well together
Select the products to show in the 'Shop the look' drawer
The uploaded image will appear in the section gallery and at the top of the "Shop the look" drawer.
Click Shoppable feed item block for settings
Image
Select or upload an image that shows the products.
Products
Select the products that will appear in the 'shop the look' drawer
Change shop button icon
In the section settings, you can select the Shop button icon that overlays the image card.
Shop button icon
Select the Bag or Cart icon for the Shop button.
Change image ratio (shape)
The Image aspect ratio setting lets you crop your uploaded images to make them all Square (1:1), Landscape (3:2), or Portrait (2:3). You can select the Natural option to show all images with their original orientation.
In the section settings, select an image ratio for both the card images and drawer images. By default, the image ratio uses your theme settings.
Use consistent image ratios
If you select the natural aspect ratio, it's important that your images use the same image ratio. Using images with varying image ratios (for example, landscape and portrait) can affect the layout of the section.
Check out Shopify's guide for the image editor to learn how to crop images to have the same ratio.
What are aspect ratios?
The aspect ratio describes the relation between the image width (w) and height (h). An image that's 400px by 200px has an aspect ratio of 2:1 because its width is twice as large as its height. Square images have an aspect ratio of 1:1 because the width and height are equal.
Click section for settings
Card image aspect ratio
Select an aspect ratio to crop card images to be a uniform shape, or select Natural to display images in their original shape. For Natural, we recommend using images that have the same aspect ratio or shape.
Drawer image aspect ratio
Select an aspect ratio to crop the images in the 'shop the look' drawer to be a uniform shape, or select Natural to display images in their original shape.
Product shop now link
In the drawer, the "Shop now" links can either open the product page or the Quick view popup, allowing customers to add the products directly to their cart.
For "Quick view", make sure Quick shopping is enabled in Theme settings > Product listings.
Click section for settings
Show vendor
Show the product vendor name above the product titles.
Shop now link action
When the "Shop now" link is clicked, choose to direct customers to the product page or open "Quick view" to allow them to add the products directly to their cart.
Last updated
Was this helpful?