Superdesk

Shopify Visual UGC guide · Updated August 2026

Add UGC to Shopify product pages—without editing theme code

Tag customer photos and videos with Shopify products once, add one gallery block to your product template, and let each product page show the content that belongs to it.

Follow the six stepsExplore Visual UGC
  • One product-template block
  • Automatic per-product matching
  • Separate desktop and mobile controls
alba-running.com/products/pace-one
Customer lacing a cobalt blue running shoe on pale stone steps@runwithmaya
ALBA RUNNING

Pace One

$118.00

Worn by the community4 customer posts
Product context: Pace OneMatching posts only

The short answer

How do you add UGC to a Shopify product page?

Use a Shopify theme app block connected to a product-aware UGC gallery. In Superdesk, approve the customer content, tag each post with the relevant Shopify product, customize the Product page gallery, then add the Shoppable UGC Gallery block to your product template in Shopify’s theme editor. The block reads the current product and displays matching posts automatically.

01

Content is tagged once

A post can carry one or several Shopify product tags, including precise hotspots for multi-product looks.

02

The template supplies context

On a product page, the gallery block uses the current Shopify product unless you deliberately choose an override.

03

Each PDP stays relevant

The same template can show shoes on a shoe page and a jacket on a jacket page without maintaining separate embeds.

Before you open the theme editor

Prepare the content before you place the gallery

A clean installation starts with approved, product-connected content. Complete these checks first so the storefront preview is meaningful.

  • 1

    Superdesk is installed on the Shopify store.

  • 2

    The customer photos or videos are approved in Content Library.

  • 3

    Every post you expect on a product page is tagged with that Shopify product.

  • 4

    Your active theme supports Shopify app blocks or app sections.

  • 5

    You can preview an unpublished theme before saving changes to the live storefront.

Step-by-step tutorial

From content library to live product page

This is the current Superdesk workflow. Complete the steps in order and test both a populated and an empty product before publishing.

  1. 01

    Superdesk · Content Library

    Approve the photos and videos you want to use

    Bring in Instagram posts, review media, customer uploads, or merchant uploads, then approve the content that is ready for storefront use. For third-party Instagram content, complete your rights workflow before publishing.

    • Content appears in Content Library
    • Source and creator are correct
    • Permission status is appropriate
    Content LibraryApproved
    Ready for galleries
  2. 02

    Superdesk · Post editor

    Tag each post with its Shopify products

    Open a post, search your Shopify catalog, and connect every product visible in the content. Place a hotspot directly on the relevant item when the post contains a complete look or several products.

    • Correct product or variant selected
    • Hotspot sits on the product
    • Post changes are saved
    Search Shopify products
    Pace OneBlue · $118
  3. 03

    Superdesk · Galleries

    Open the Product page gallery

    Choose the default Product page gallery. It is designed to filter by the product currently being viewed, so you do not need to create a gallery for every SKU or product page.

    • Product page gallery selected
    • Dynamic product context remains enabled
    • A sample product is selected for preview
    Product page galleryDefault gallery

    On each product page, this gallery shows posts tagged with that product.

    Dynamic product context
  4. 04

    Superdesk · Gallery editor

    Choose the layout and preview a real product

    Set the gallery style, spacing, columns, post appearance, hotspots, and click behavior. Switch between desktop and mobile previews, then use a product with tagged content to confirm the gallery result before saving.

    • Desktop and mobile both reviewed
    • Product links open the intended PDP
    • Gallery settings saved
    Gallery editor Desktop · Mobile
    Save changes
  5. 05

    Shopify · Theme editor

    Add the Shoppable UGC Gallery to the product template

    Copy the Gallery ID from Superdesk. In Shopify, go to Online Store → Themes → Edit theme, open the product template you want, select Add section → Apps → Shoppable UGC Gallery, paste the Gallery ID, position the section, and save.

    • Correct product template open
    • Gallery ID pasted exactly
    • Override Product left blank for dynamic matching
    Shopify theme editorProducts · Default product

    Gallery section

    Save
  6. 06

    Shopify · Storefront preview

    Test the gallery before publishing

    Preview one product with tagged content and one without it. Test image and video posts, hotspots, the product list, outbound product links, keyboard focus, and the mobile layout. Publish only after both the populated and empty states behave as intended.

    • Matching content is correct
    • Empty product does not show unrelated content
    • Mobile interaction is comfortable
    Storefront QAPreview
    Desktop4 columns · links pass
    Mobile2 columns · no overflow

Where should the gallery go?

Choose a position that supports the shopping decision

There is no universal winning position. Start with the role the content plays, keep the purchase path clear, and compare behavior in your own store analytics.

01

Below product information

Use a full-width gallery after the core product details when you want shoppers to see the item in real customer contexts without interrupting variant selection.

Strong default for most stores
02

Near reviews

Place visual UGC beside or immediately before the reviews area when customer evidence is part of one broader social-proof sequence.

Useful for proof-led PDPs
03

Higher on long pages

Move a compact slider higher when product explanation is long and real-world use is essential to understanding fit, scale, color, or styling.

Test carefully against CTA visibility

Launch checklist

Test relevance first, then presentation

A beautiful gallery with the wrong products is worse than no gallery. Verify matching, behavior, and responsiveness in that order.

Content relevance

  • Every post belongs to the current product
  • No unapproved content appears
  • Multi-product posts show the right product list
  • An empty product has a deliberate empty state

Shopper behavior

  • Images, videos, and modal navigation work
  • Hotspots remain on the product at each breakpoint
  • Product links reach the correct PDP
  • Keyboard focus and close controls are usable

Mobile presentation

  • Text and controls do not cover the media
  • The selected column count is readable
  • Videos do not surprise visitors with sound
  • No horizontal page overflow is introduced

Troubleshooting

If the product-page UGC gallery is empty or incorrect

Work from content to template. Most problems come from a missing product tag, the wrong gallery identifier, the wrong template, or an unsaved change.

What you seeLikely causeWhat to do
The app block is not listed

The theme section does not accept app blocks, or the app is not available to that theme.

Try Add section → Apps on the product template. Confirm Superdesk is installed and the theme supports Shopify app blocks.

The block shows no gallery

The Gallery ID is missing, mistyped, or the Superdesk gallery has not been saved.

Copy the ID again from Embed Gallery, paste it without extra spaces, save Superdesk, then save the Shopify theme.

A product has no posts

No approved post is tagged with the product currently being viewed.

Open Content Library, tag the expected posts with that exact Shopify product, save, and refresh the preview.

The same posts appear on every PDP

A non-dynamic gallery is embedded, or Override Product is set in the theme block.

Use the Product page gallery and leave Override Product blank so the current product supplies context.

Changes are visible in Superdesk but not Shopify

One side was not saved, the wrong theme/template is open, or a cached preview is being viewed.

Save both editors, verify the active template and theme, then reload the storefront preview without cache.

The gallery disappeared after a theme change

Shopify app blocks are configured per theme.

Open the new theme and add the Shoppable UGC Gallery block to its product template before publishing it.

Shopify’s official app-block instructions

Build the complete workflow

Collect, approve, tag, and publish

The product-page block is the final storefront step. Superdesk keeps it connected to Instagram discovery, customer uploads, review media, rights, product tagging, and gallery design.

Explore Visual UGCBuild a shoppable Instagram feedUnderstand UGC rights

Product-page UGC FAQ

Questions Shopify merchants ask before adding a customer gallery

Do I need a separate UGC gallery for every Shopify product?

No. Superdesk’s Product page gallery is dynamic. Add one gallery block to a product template and it uses the current product to request the posts tagged with that product.

How does Superdesk know which UGC belongs on each product page?

The connection comes from Shopify product tags saved on each approved post. When the gallery loads on a product page, the current product ID is used to return matching content.

Can one UGC post link to multiple products?

Yes. A post can contain several tagged Shopify products. Hotspots can identify their positions, and the gallery detail view can present the related product list.

Can I use Instagram posts, review photos, and uploads together?

Yes. Product-page galleries can draw from approved Instagram content, photo and video review media, customer uploads, and merchant uploads as long as the posts are connected to the relevant product.

Does adding the gallery require editing Shopify theme code?

No for compatible Shopify themes. Superdesk uses a Shopify theme app extension, so merchants add and position the Shoppable UGC Gallery through the theme editor as an app section or app block.

Where should UGC sit on a product page?

A strong starting point is a full-width section below the main product information or near reviews. Keep variant selection and the primary Add to cart path clear, then test placement using your own shopper behavior.

What happens when a product has no matching UGC?

The gallery should not substitute unrelated products. Treat the empty state deliberately: add tagged content for the product, use a configured fallback only when it is genuinely relevant, or hide the empty section.

Will the gallery work on mobile?

Yes, and Superdesk provides separate mobile layout controls. Preview the exact product template on a phone-sized viewport and check columns, video behavior, hotspots, modal controls, and horizontal overflow before launch.

What should I do after changing Shopify themes?

Re-add and verify the Superdesk app block in the new theme. Shopify theme configuration is theme-specific, so app blocks are not automatically active in a newly published theme.

Put real customer content where products are decided

Build product-aware galleries from Instagram posts, customer uploads, review media, and your own content—inside the same Superdesk workspace.
Start for free
5.0 on the Shopify App Store