# Shop the feed

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FmWRlRC0GN6RWHkhviEZn%2FHyper%20docs%20screenshot%20do%20not%20delete%20(51).jpg?alt=media&#x26;token=6695cbaf-44f2-4d1d-aa77-f103f36d2cb4" alt=""><figcaption></figcaption></figure>

The **Shop the Feed** section allows you to display short-form video or image cards styled like TikTok or Instagram posts. Each post can feature:

* A social media-style layout
* Video autoplay on hover (desktop)
* Product tag and direct shopping link

📹 *Perfect for influencer content, real user reviews, or behind-the-scenes storytelling.*

## How to add a Shop the feed section to your Shopify store

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Shop the feed**.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Shop the feed section

### Section settings

#### General

* **Color scheme**: Choose a theme color preset. *Learn more:* [colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")

#### Section header

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")

* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

#### Grid settings

* **Number of columns on desktop:** Choose how many posts show in a row (2–6).
* **Column gap / Row gap:** Control spacing between cards.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FE2zQAuL7FU67u3kiMVQG%2Fimage.png?alt=media&#x26;token=96022fd2-ade5-4e90-b27c-3b285fc15f4b" alt=""><figcaption></figcaption></figure>

#### Carousel setting

* **Enable carousel on desktop:** Toggle to make the feed swipeable (good for larger lists).

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FokeXuCEtteKl0jtrGSRG%2Fimage.png?alt=media&#x26;token=e3156f70-9f64-4794-8511-549b6a457e14" alt=""><figcaption></figcaption></figure>

#### **Card settings**

* **Color scheme:** Set a specific color scheme for the feed cards.
* **Image ratio:** Choose between *Adapt to image*, *Square*, *Portrait (3:4)*, or *Landscape*.

#### **Mobile layout**

* **Enable swipe on mobile:** Activate swipe interaction for smoother mobile experience.

If disabled, the video feeds display in grid layout.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FwWRTAoKSdcGCC7zPTfs9%2Fimage.png?alt=media&#x26;token=234845bb-8b04-4cf8-af13-7b605a3eb83c" alt=""><figcaption></figcaption></figure>

### Block settings

Each video/image card is added as a block:

#### Media

* Image: Thumbnail to display if the video doesn't play or for fallback.
* Video: Upload a short .mp4 file (recommended size: under 5MB for performance).

{% hint style="info" %}
Videos play automatically on hover on desktop. 🔁
{% endhint %}

#### Info

* **Link:** Optional link for the card (e.g., blog, product, collection).
* **Avatar:** Upload the influencer or author profile picture.
* **Author:** Name of the influencer or social media poster.
* **Account:** Social handle (e.g., @glamourgirl).
* **Icon:** Choose a social media platform (TikTok, Instagram, YouTube, etc.).

**Product**

* **Product:** Connect the post to a product on your store. The product name and icon will display below the video.

## Best practices

✅ Keep videos short (under 10s) for better performance and engagement.

✅ Link each video to a product to increase click-through.

## FAQs

### Do video autoplay?

👉 Yes, on desktop they autoplay when users hover over the card.

### **Why isn’t my video playing on mobile?**&#x20;

👉 Mobile browsers often block autoplay by default. Use the image fallback or encourage touch-to-play.

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>