> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/shoppable-content/shop-the-feed.md). # Shop the feed A shoppable image feed styled like a social media grid. Each tile is tagged with products — customers click a tile to open a product panel and add the items shown in the photo to cart without leaving the page. ![Shop the Feed overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-f2534864c31d1b0697c2bc0704716ceb719acf97%2Fglobal-sections-shop-the-feed-overview.png?alt=media) *** ## Settings ### Layout | Setting | Description | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | ### Gap | Setting | Description | | ------- | --------------------------------------------------------- | | Desktop | Space between the section header and the feed on desktop. | | Mobile | Space between the header and the feed on mobile. | {% hint style="info" %} To change the spacing **between tiles**, use [Feeds gap](#feeds-gap) instead — this group only separates the header from the feed below it. {% endhint %} ### Media | Setting | Description | | ----------------- | --------------------------------------- | | Ratio | Aspect ratio applied to all feed tiles. | | Social media icon | Platform badge shown on each tile. | ### Product thumbnail and icon | Setting | Description | | ---------------- | ----------------------------------------------------------- | | Desktop behavior | When the product indicator appears on each tile on desktop. | | Mobile behavior | When the product indicator appears on mobile. | ### Feeds layout | Setting | Description | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Type | **Grid** — Tiles sit in a fixed grid of rows and columns. **Carousel** — Tiles scroll sideways as a swipeable slider. | | Desktop columns | Number of tiles per row on desktop. | | Mobile columns | Number of tiles per row on mobile. | | Enable swipe on mobile | Grid only — lets the grid be swiped sideways on mobile instead of stacking. | | Show next slide preview on desktop | Carousel only — peeks the edge of the next tile to hint that more can be swiped. | | Custom columns | Set the number of columns per screen size yourself instead of using the standard breakpoints. | | Columns per breakpoint | The custom column values, entered per screen size. See [How to set up custom columns](/helix/how-to-guides/how-to-set-up-custom-columns.md) for the value syntax. | ### Feeds gap | Setting | Description | | ------------------- | --------------------------------------------- | | Horizontal | Grid only — gap between tiles on desktop. | | Vertical | Grid only — gap between rows on desktop. | | Horizontal — Mobile | Grid only — gap between tiles on mobile. | | Vertical — Mobile | Grid only — gap between rows on mobile. | | Desktop | Carousel only — gap between tiles on desktop. | | Mobile | Carousel only — gap between tiles on mobile. | {% hint style="info" %} A small gap keeps the feed reading as a social grid rather than a product listing. Widen it only if your photography needs more breathing room. {% endhint %} ### Navigation Carousel only. | Setting | Description | | -------------------------- | ------------------------------------------- | | Show navigation on desktop | Shows previous/next arrows on the carousel. | | Position | Where the arrows sit. | | Style | Visual style of the arrow buttons. | | Icon | Arrow shape. | | Behavior | When the arrows appear. | ### Pagination Carousel only. | Setting | Description | | -------------------------- | --------------------------------------------------------------------------------- | | Show pagination on desktop | Shows a progress indicator beneath the carousel. | | Type | Style of the pagination indicator. | | Top padding | Space between the carousel and the indicator. | | Limit width | Caps the progress bar to a **Max width** instead of letting it span the carousel. | | Max width | The widest the progress bar can run. Available when Limit width is on. | ### Autoplay Carousel only. | Setting | Description | | -------------- | ------------------------------------------------------ | | Autoplay | Advances the carousel automatically. | | Pause on hover | Stops the timer while the cursor is over the carousel. | | Speed | How long each tile stays before advancing. | ### Popup layout | Setting | Description | | ------- | -------------------------------------- | | Mobile | How the product popup opens on mobile. | ### Popup product card Controls the product card shown inside the feed popup. | Setting | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------- | | Layout | **Featured** — a large card with the image on top. **List** — a compact row with the image beside the text. | | Border thickness | Card border width. | | Shadow | Card shadow depth. | | Add to cart position | Where the add-to-cart button sits. | | Add to cart style | Visual style of the add-to-cart button. | | Show variant selector | Lets shoppers pick a variant on the card. | ### Background | Setting | Description | | --------------- | ------------------------------------------------- | | Media | Section background media type. | | Video | Shopify-hosted background video. Autoplays muted. | | Image | Section background image. | | Image — Mobile | Separate background image for mobile. | | Overlay | Adds a color layer over the background media. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll effect applied to the background media. | ### Color | Setting | Description | | ------------ | ----------------------------- | | Color scheme | Color scheme for the section. | ### Padding | Setting | Description | | ----------------------- | ----------------------------------------------------- | | Padding top / bottom | Outer spacing above and below the section. | | Custom padding — Mobile | Override desktop padding with separate mobile values. | *** ## Available Blocks ### Section Header The heading area above the feed. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### Feed A single feed tile. Add one block per tile. | Setting | Description | | ---------------------------- | ------------------------------------------------ | | Media type | Whether the tile shows an image or a video. | | Image / Video | The tile's media. | | Products | The products tagged in this tile. | | Avatar | Profile image shown in the popup. | | Show Instagram avatar border | Adds a ring around the avatar. | | Username | Account name shown in the popup. | | Post date | Date shown in the popup. | | Post content | Caption shown in the popup. | | Account link | Links the username through to a profile or page. | | Open in new tab | Opens the account link in a new browser tab. | | Media 2–4 | Extra images or videos shown in the popup. |