---
title: "How to Add a UGC Section to Any Shopify Theme (Dawn, Horizon, Custom)"
description: "A UGC section puts customer videos and photos on your store where shoppers are deciding. Here are four ways to add one to Dawn, Horizon or a custom theme, from built-in sections to a coded block."
author: "Aashish Kaushik"
published: 2026-09-08T05:00:16.335Z
updated: 2026-09-08T05:00:16.529Z
url: https://blog.swipereel.app/add-ugc-section-any-shopify-theme-dawn-horizon
---
# How to Add a UGC Section to Any Shopify Theme (Dawn, Horizon, Custom)

## Key takeaways

- Every Online Store 2.0 theme can host a UGC section through built-in sections, an app block, or a small custom Liquid section; you do not need a developer for the first two.
- Get written permission from each creator before a clip goes on your store, and keep a record of it with the file.
- Built-in sections are fine for a handful of static clips, but they have no product tagging, no analytics and no lazy loading, so they stop scaling fast.
- Place the section where a shopper is still deciding: below the buy box on product pages, and below the hero on the home page.

A UGC section is a block on your store that shows customers using the product: a grid of short videos, a row of clips under the buy box, a strip of story bubbles on the home page. It works because it is proof from someone who paid, placed at the moment a shopper is deciding.

You can add one to any Online Store 2.0 theme in an afternoon. This guide covers four routes, from Dawn's built-in sections to a coded Liquid block, and the two things that matter more than the method: getting permission, and not wrecking your page speed.

If you are still collecting the content itself, the [UGC video guide for Shopify](/ugc-video-shopify-guide) covers how to ask customers and what to ask for. This article picks up once you have clips in hand.

## Before you add anything: rights and records

A customer posting a video about your product on TikTok or Instagram has not given you a licence to put it on your website. Reposting it without asking is a rights problem, and it is also the fastest way to turn a happy customer into an annoyed one.

The process that works is short:

1. Message the creator, say where the clip will appear and for how long, and ask for a yes.
2. Keep a screenshot of the reply in the same folder as the video file, named to match.
3. Offer credit on the section (a handle under the clip) and honour a request to remove it, promptly, if it ever comes.

Do not scrape hashtags or pull clips with a downloader tool and hope. Apps that import from Instagram or TikTok still expect you to have the right to use the content; the import is a convenience, not a licence.

> **One rule for every method below**
> 
> No clip goes live without a recorded yes from the person who made it. This applies equally to the theme editor, a custom section and an app widget.

## Four ways to add the section

### Route 1: Dawn's built-in sections

Dawn ships sections that will hold UGC without any code. None of them are designed for it, but three work well enough for a static set of clips.

**Collage.** A mixed grid of image, product and video cards. Add a Collage section, add Video blocks, and pick a Shopify-hosted video from Files (or paste a YouTube or Vimeo link, depending on your Dawn version) for each. Good for three to four clips on the home page.

**Multicolumn.** A row of columns, each with an image, heading and text. Use it for photo UGC with a caption crediting the customer and a link to the product.

**Video.** A single full-width video with a cover image and play button. Works for one hero UGC clip.

To add any of them: Online Store, Themes, Customize, pick the template (Home page or Products, Default product), then Add section, choose the section, and add blocks. Upload the video files first through Content, Files, because the video picker in the editor reads from there.

What you give up with this route is everything that makes UGC sell rather than decorate. There is no product tag inside the video, no add-to-cart, no per-clip view or revenue data, and every new clip is a manual upload and a manual block. It is fine for a launch with six clips. It is a chore by clip thirty.

### Route 2: Horizon's block-based sections

Horizon, Shopify's newer flagship theme, takes a different approach: instead of fixed sections, most content is built from blocks that can be nested and arranged. The practical effect for UGC is that you can build a grid or row of video blocks inside almost any section, and set each block's playback behaviour in the editor.

The steps are similar. Customize the theme, open the template, add a section (a grid or group works), then add video blocks inside it and pick files from Files. Check each video block's settings for autoplay and loop, and confirm on a phone that the theme is emitting muted inline playback, because the browser rules described in the [mobile autoplay guide](/shopify-video-autoplay-not-working-mobile) apply to Horizon exactly as they do to Dawn.

The same limitation applies as with Dawn: it is a layout, not a UGC system. Tagging, analytics and imports are still missing.

### Route 3: an app block

An app block is a section supplied by an installed app that you place in the theme editor like any other section. For UGC this is the route most stores end up on, because the app handles the parts a theme never will: importing from Instagram and TikTok, product tagging, lazy loading, and reporting what each clip earned.

The steps, in the theme editor:

1. Install the app and build a feed in its admin: import or upload clips, tag the product each one shows.
2. Open Customize, pick the template (Home page, or Products, Default product).
3. Click Add section (or Add block inside an existing section), open the Apps tab, and choose the app's widget.
4. Drag it to the position you want, set the layout (grid, carousel, inline row, stories), and save.

Because it is a block in the section list, you can place it differently per template: a stories row on the home page, an inline row under the buy box on products, a grid on a dedicated "as seen on customers" page. Theme updates do not touch it, and switching from Dawn to Horizon means re-adding one block rather than rebuilding anything.

## UGC section routes compared
| Route | Effort | Product tagging | Updates | Speed handling |
| --- | --- | --- | --- | --- |
| Dawn built-in sections | Low, no code | No | Manual upload per clip | Cover image, tap to play |
| Horizon video blocks | Low, no code | No | Manual upload per clip | Per-block settings |
| App block | Low, no code | Yes, tap to add to cart | Import from Instagram and TikTok | Lazy loading built in |
| Custom Liquid section | Medium, needs Liquid | Link only, unless you build it | Manual, via theme editor | Whatever you write |

### Route 4: a custom Liquid section

If you have a developer or are comfortable in the code editor, a small custom section gives you full control over the markup. This is the right route when the design has to match something specific and an app's layouts do not fit.

Here is a minimal section that renders a grid of Shopify-hosted videos, each linked to a product. Add it as `sections/ugc-grid.liquid`:

```liquid

<div class="ugc-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px">

  {% if section.settings.heading != blank %}

    <h2 style="grid-column:1/-1">{{ section.settings.heading | escape }}</h2>

  {% endif %}

  {% for block in section.blocks %}

    <figure class="ugc-item" {{ block.shopify_attributes }}>

      {% if block.settings.video %}

        {{ block.settings.video | video_tag: image_size: '600x', muted: true, loop: true, controls: true, preload: 'none' }}

      {% endif %}

      {% if block.settings.product %}

        <figcaption>

          <a href="{{ block.settings.product.url }}">{{ block.settings.product.title | escape }}</a>

        </figcaption>

      {% endif %}

      {% if block.settings.credit != blank %}

        <small>{{ block.settings.credit | escape }}</small>

      {% endif %}

    </figure>

  {% endfor %}

</div>

{% schema %}

{

  "name": "UGC grid",

  "settings": [

    { "type": "text", "id": "heading", "label": "Heading", "default": "Seen on customers" }

  ],

  "blocks": [

    {

      "type": "video",

      "name": "Customer video",

      "settings": [

        { "type": "video", "id": "video", "label": "Video" },

        { "type": "product", "id": "product", "label": "Product" },

        { "type": "text", "id": "credit", "label": "Credit" }

      ]

    }

  ],

  "max_blocks": 12,

  "presets": [{ "name": "UGC grid" }]

}

{% endschema %}

```

Once saved, the section appears under Add section in the theme editor, and each block has a video picker, a product picker and a credit field. The `video` setting type reads from Files, so upload there first.

What this does not do: autoplay (deliberately, since twelve autoplaying videos on a page is a speed problem), tap-to-add-to-cart inside the video, or any tracking of which clip was watched. Adding those is real work, and it is the point at which most stores decide the app block was cheaper.

## Where to put the section

Placement decides whether the section is watched or scrolled past. Three positions earn their place; the rest are decoration.

**Product page, below the buy box.** On mobile, the shopper has just seen the price. A row of customers using the product, right there, answers "is it actually like that?" before they scroll into the description. This is the single highest-value spot.

**Home page, below the hero.** A stories row or a short grid here tells a first-time visitor what the product looks like in real life within one scroll. Keep it to one row.

**Collection page, top or between rows.** A single UGC clip per collection, above the product grid, sets context without competing with the cards.

Avoid the footer. UGC that lives below related products and the newsletter signup is seen by almost nobody.

For more on how placement changes what gets watched, the [product page optimisation guide](/shopify-product-page-optimization-conversions-2026) goes through the buy-box zone in detail.

## Keeping the section fast

A UGC section is the easiest way to add two megabytes to a product page without noticing. The rules that prevent it:

- Every video has a poster image, and nothing downloads until the clip is on screen or tapped.
- preload="none" on every element you write yourself.
- No more than one autoplaying video visible at a time on mobile.
- Clips exported at 720p vertical, short, and compressed for the web. A 15-second clip should be a few megabytes at most.
- The section's JavaScript, if any, loads deferred and not in the head.

App widgets built for speed do all of this by default, and it is worth confirming with a Lighthouse run on a product page before and after adding one. The [bounce rate and video article](/reduce-shopify-bounce-rate-video-2026) has the before-and-after method.

## UGC section launch checklist
- Written permission recorded for every clip
- Creator credit shown where requested
- Clips trimmed to under 20 seconds and exported vertical at 720p
- Section placed below the buy box on product templates
- ![A UGC video rail on the Insane Look Shopify storefront, each tile tagged with a product and price](https://blog-media.cdn.byteinfy.com/media/01/01a7560f4a6a7dd04a28256138a140d0/original.webp)
- Poster frame chosen so the still reads as a photo
- Tested on a real phone: nothing autoplays with sound, nothing opens full-screen unexpectedly
- Lighthouse run before and after, mobile, on a product page
- Each clip tagged to the product it shows, if the route supports tagging

## Keeping the section stocked

A UGC section with the same six clips for a year stops working. Shoppers who return see nothing new, and the clips age: packaging changes, models change, the product gets a new colour. Plan for a steady trickle of new content from the start.

The reliable source is the post-purchase moment. A week or two after delivery, ask the customer for a short video, and make the ask specific: "a ten-second clip of the bag on your shoulder" gets more replies than "share your experience". Offer something in return if you want to, but check the rules where you sell; several jurisdictions require any incentive to be disclosed when the content is shown, and Instagram and TikTok have their own disclosure requirements if the customer also posts it there.

Other sources that work without a campaign:

- Reels and TikTok videos your own team shoots on a phone. They count as UGC-style content if they look like it, and they need no permission.
- Tagged posts and mentions, with a message asking for permission before import.
- Replies to a support conversation where a customer sent a video to show something working. Ask before using it.

Keep a folder of approved, credited clips and rotate three or four into the section each month. The [TikTok to Shopify sales guide](/tiktok-to-shopify-sales-guide) has more on asking for and importing TikTok clips specifically.

## One section or a dedicated page

Stores with a lot of UGC sometimes build a dedicated "as seen on customers" page and link to it from the navigation. That page is useful as a bio-link destination from Instagram and as a place for a full swipe feed, but it is not a substitute for the section on the product page.

The reason is where the doubt happens. A shopper on the product page is deciding now. A shopper who navigates to a UGC page is browsing. The section on the product page meets the first shopper; the dedicated page meets the second. Do the product page section first, and add the page when you have enough content to fill it.

## Measuring whether it works

A UGC section that cannot be measured turns into a debate. Two numbers settle it.

The first is watch behaviour: views and average watch time per clip. A clip that gets views but no watch time has the wrong first three seconds, and swapping it is cheap.

The second is attributed revenue: add-to-cart and orders from shoppers who watched a specific clip. This is only available if the section carries product tags and the app reports per-video revenue, which is the strongest argument for the app block route. A clip that has earned nothing over a month should be rotated out; a clip that outperforms should move up the page and into the home page row.

If you are comparing apps for this, look at whether the free plan includes analytics at all. Some cap uploads and live videos but still report views, watch time and revenue per video, which is enough to run the rotation above.

**A UGC section that tags products and reports revenue**
SwipeReel imports Instagram Reels and TikTok videos into inline, overlay, swipe feed and stories widgets, with product tagging, lazy loading and per-video revenue. Free plan: 25 uploads, 5 live.

[Install SwipeReel free](https://apps.shopify.com/swipereel)

## FAQ

### What is a UGC section on a Shopify store?

It is a block on a page that shows customer-made content, usually short videos or photos of the product in use, with a link or tag to the product.

### Can I add a UGC section to Dawn without an app?

Yes. Dawn's Collage, Multicolumn and Video sections accept images and Shopify-hosted videos from Files, so you can build a static UGC grid in the theme editor.

### Do I need permission to use customer videos on my store?

Yes. A customer posting about your product on Instagram or TikTok does not grant you a licence to use it on your website.

### Where should a UGC section go on a product page?

Below the buy box and above the long description on mobile, so a shopper who has seen the price and is hesitating sees proof before scrolling into the specifications.

### Will a UGC video section slow down my Shopify store?

It will if every clip downloads on page load. Use poster images, preload none, and a widget or section that loads a video only when it is on screen or tapped.

### What is the difference between an app block and an app embed for UGC?

An app block is placed inside a page's section list in the theme editor, so you control exactly where it sits on each template.
