How to Set Up the Shop the Feed Section in Concept

Add product hotspots

• Each Feed block supports up to four product hotspots.

• A hotspot is a clickable marker placed on top of the feed image or video.

• Customers can use hotspots to discover the product linked to that part of the media.

Setting	Description
Color	Controls the hotspot marker color.
Vertical position	Moves the hotspot up or down.
Horizontal position	Moves the hotspot left or right.
Product	Selects the product connected to the hotspot.

• Use Vertical position and Horizontal position to place the hotspot directly over the product in the image or video.

• When a Feed block has selected hotspot products, the feed drawer can display those products as shoppable items.

Configure the drawer account area

• Each Feed block also has account settings for the drawer footer.

Setting	Description
Account avatar	Displays a profile image inside the feed drawer.
Account name	Displays the account name.
Account description	Adds short supporting text below the account name.
Account button	Adds a button in the drawer footer.
Account link	Adds the button destination.
Open link in new window	Opens the account link in a new tab.

• Use these settings when each feed card should have its own social profile or call-to-action.

Adjust colors and section spacing

• Use the color settings to match the feed with your store design.

Setting	Description
Text	Changes the section text color.
Background	Changes the section background color.
Background gradient	Adds a gradient background.
Highlight	Changes the highlighted heading color.
Highlight gradient	Adds a gradient to highlighted heading text.
Button text	Changes the section button text color.
Button background	Changes the section button background color.
Button gradient	Adds a gradient to the section button.

• Each Feed block also has its own color settings for text and buttons.

• Use the section settings to control the overall section colors.

• Use the Feed block settings to control the drawer and card-specific colors.

• You can also adjust:

  • Top padding
  • Bottom padding
  • Divider
  • Full width layout
  • Rounded section style

Preview the Shop the Feed section

• After setting up the section, preview the storefront.

• Check that the feed cards display the correct image or video.

• Check that the desktop and mobile layouts look correct.

• Check that carousel or swipe behavior works as expected.

• Check that feed buttons open the correct drawer or link.

• Check that hotspots are positioned correctly over the media.

• Check that hotspot products display correctly in the drawer.

• Check that product vendor and price settings display as expected.

• Check that account avatar, account name, and follow buttons link correctly.

Troubleshooting

If the Shop the Feed section does not look correct, check the following:

• Make sure each Feed block has an image or video selected.
• Make sure hotspot products are selected if you want shoppable products to appear.
• Make sure hotspot positions are not too close to the edge of the media.
• Make sure the button link is empty if you want the button to open the feed drawer.
• Make sure the button link is filled in if you want the button to redirect to another page.
• Make sure Show price is enabled if you want product prices to appear.
• Make sure Show vendor is enabled if you want product vendors to appear.
• Make sure Carousel on desktop or Swipe on mobile is enabled if you want slider behavior.
• If a video does not autoplay, check the video autoplay setting and browser autoplay restrictions.
• If the section is too narrow or too wide, adjust Full width, Columns, and Image ratio.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.