HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to add a Shop the feed section to your Shopify store
  • How to edit a Shop the feed section
  • Section settings
  • Block settings
  • Best practices
  • FAQs
  • Do video autoplay?
  • Why isn’t my video playing on mobile?
  1. Theme sections

Shop the feed 🔥

Showcase authentic user-generated content (UGC) from social media to increase trust and drive conversions

PreviousRich textNextScrolling banner

Last updated 29 days ago

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

Steps:

  1. In the theme editor (Customize), click Add section.

  2. Locate Shop the feed.

  3. Make necessary changes.

  4. Save.

How to edit a Shop the feed section

Section settings

General

  • Color scheme: Choose a theme color preset. Learn more: Colors

Section header

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

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

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.

Carousel setting

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

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.

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

Videos play automatically on hover on desktop. 🔁

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.