Shoppable feed
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
In the editor side panel, click (+) Add section and select Shoppable feed. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit the Header and general section styles for colors, width, and spacing:
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
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
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.
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.
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.
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.
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.
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
Check out to learn how to crop images to have the same ratio.
Section colors
Section width
Section padding
Section header
