# Shop the feed

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(51)_iiHWfZqv.jpg)

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 type="success">

Steps:

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

</Hint>

## 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)

#### Section header

<Expandable title="See settings">

* **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.

✍ [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **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.

</Expandable>

#### 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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_0JSdVNPw.png)

#### Carousel setting

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_ZJqLztZz.png)

#### **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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_WR61q9fO.png)

### 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 type="info">

Videos play automatically on hover on desktop. 🔁

</Hint>

#### 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?**

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