Shop the Feed
The section is designed to integrate social media content or curated feeds directly into the store, allowing customers to shop any featured products.
This section emphasizes visual engagement and inspiration, turning curated content into shoppable product listings and creating a seamless connection between social media activity and the online store.
Products are displayed in a grid or row layout, with consistent product cards showing images, product names, vendor, price, review stars, and optional badges like Sale, Sold Out, or Feature. The layout is designed to highlight both the visual content of the feed and the product information, making it easy for customers to discover and purchase items directly from the feed.
The section supports interactive features, such as hover effects on images, clickable links, “Add to Cart” buttons, and responsive adjustments to ensure proper display across desktop and mobile devices. Merchants can also customize headings, text alignment, spacing, and colors to ensure the feed matches the store’s theme and branding.
Location: Sections -> Templates -> Products: Shop the Feed
Shop the Feed – Options Overview
Heading
Subheading
Adds a small label above the main heading.
Heading
Sets the primary title of the section.
Description
Displays supporting text beneath the heading.
Heading alignment: Left / Center
Aligns all heading text within the section.
Secondary button 1
Icon 1 (example: instagram)
Select an icon to represent a social media platform.
Name
Label for the button (such as the platform name).
Link
URL to the social media page.
Secondary button 2
Icon (example: tiktok)
Select another platform icon.
Name
Label for the second button.
Link
URL to this social media page.
Layout
Top spacing: None / Small / Medium / Normal
Controls spacing above the section.
Width: Default / Boxed / Wide
Controls section width; Wide applies on 1440px+ screens.
Number of columns: 4–8
Defines how many items show in one row on desktop.
Number of columns on tablet: 2–4
Defines how many items show per row on tablets.
Slider settings
Enable slider
Converts the feed into a horizontal slider.
Desktop navigation: Disable / Dots / Arrows / Dots and arrows
Sets navigation style for desktop.
Mobile navigation: Disable / Dots
Sets navigation style for mobile.
Video
Video mode
Controls how videos play (autoplay, hover play, click to play, with or without sound).
Image overlay opacity
Adjusts transparency of the overlay on video thumbnails.
Product
Align text relative to image: Top / Center / Bottom
Controls where text appears around the product image.
Image hover effect
Selects the animation when the product image is hovered.
Image ratio
Sets shape/format of product images.
Show second image on hover
Displays the product’s alternate image on hover.
Customize
Opens advanced styling for product cards.
Dividing line
Show
Enables a line separating this section from others.
Background
Background: Hide / Color / Gradient / Image
Sets the section’s background style.
Colors
Base
Adjusts base text and basic UI color.
Accent
Sets highlight color.
Lines
Sets the color of borders and dividers.
Product
Vendor
Controls text color for vendor name.
Heading
Color for product title.
Heading hover
Hover color for product title.
Regular Price
Color for standard product price.
Sale Price
Color for discounted price.
Old price
Color for crossed-out original price.
Review stars
Stars active
Color for filled rating stars.
Stars base
Color for empty (base) rating stars.
Link buttons
Show background
Enables a background fill for product buttons.
Background / Gradient / Border / Text / Icon
Customize button appearance.
Background hover / Gradient hover / Border hover / Text hover / Icon hover
Customize hover behavior.
Enable shadow / Shadow / Shadow hover
Controls shadow styling for buttons.
Social media
Base
Default color for social media icons.
Hover
Hover color for social media icons.
Video button
Background / Icon / Background hover / Icon hover
Styles for the video play button.
Media button
Slider arrows / Slider dots
Styles navigation buttons for sliders.
Other
Image overlay color
Changes the color used as an overlay on images or videos.
This section allows you to add multiple Banner subsections. Each banner can feature a product, an image, or a video, and can include links to social media platforms. You can create as many Banner subsections as needed to highlight different promotions, campaigns, product groups, or lifestyle visuals.
Banner Options Overview
Product
Product
Select a product to display directly within the banner. Useful for shoppable landing visuals.
Shopify-hosted video
Video
Upload or select a Shopify-hosted video to use as the banner’s main media. This can help create dynamic, animated visuals.
Media button 1
Icon (example: instagram)
Choose an icon representing a social media platform or link action. Common choice: Instagram icon.
Link
Add the URL that will open when the icon is clicked (e.g., your Instagram profile).
Media button 2
Icon (example: tiktok)
Choose a second icon for another platform or link. Example: TikTok icon.
Link
Add the destination URL for this second icon.
Last updated