Embed code

Place a widget by pasting a Liquid snippet into your theme's code, for vintage themes or custom spots.

The UGC widget block is the easiest way to place a widget. Use embed code instead when:

Your theme is a vintage theme without Online Store 2.0 templates, so it can't use app blocks. Home tells you with the banner This theme cannot use app blocks. Its Get the Liquid snippet button opens your latest widget, where you can copy the code.
You or your developer want the widget somewhere a block can't go.

You'll be editing your theme's code, so consider duplicating your theme first.

Copy the code

In the app, click Widgets and open your widget. If it's new, click Save first. Embed code is only available for saved widgets.

Click Embed code in the top bar. The snippet is copied to your clipboard and you'll see Snippet copied.

The snippet looks like this, with your widget's own handle. You don't need to type it, because Embed code fills it in for you:

<script src="/apps/ugc/embed/widget.js" async></script>
{%- assign widget_meta = metaobjects['app--412193456129--ugc_widget']['your-widget-handle'] -%}
{%- assign foxr_settings = shop.metafields['app--412193456129']['widget_settings'].value -%}
{%- if foxr_settings -%}<script type="application/json" data-foxr-settings>{{ foxr_settings | json }}</script>{%- endif -%}
{{- widget_meta.content.value -}}

Paste it into your theme

In your Shopify admin, go to Online Store → Themes.

Next to your theme, click the … menu, then Edit code.

Open the file for the page where you want the widget, for example templates/index.liquid for the home page on a vintage theme, or a product template file for product pages.

Paste the snippet where you want the widget to appear, then click Save.

Open that page on your storefront and check the widget is there.

The snippet always shows the latest saved version of the widget. You don't need to paste it again after editing the widget.

	UGC widget block	Embed code
Needs the app embed on	Yes	No, it shows either way
Detected on the Home page	Yes	No. On a vintage theme, tick step 3 of the Setup guide yourself. On an Online Store 2.0 theme it stays unticked, which is expected.
Follows the widget's placement	Yes	Yes
Uses your Settings	Yes	Yes
Shop button text in the shopper's language, such as Add to cart	Yes, built in	English only, unless the app embed is also on. Your own wording from Settings → Translation still applies.
Removed when you uninstall the app	Yes, by Shopify	No. Remove it from your theme code yourself.

A Product page widget placed with embed code only shows if the app embed is on, because the embed tells the widget which product the page is for. On vintage themes, the app embed is under Theme settings → App embeds in the theme editor, if your theme supports it.

Good to know

The widget's handle. The snippet finds your widget by its handle, which is shown under Basics on the Media tab, with a copy button. You only need it if you write the Liquid yourself.
Keep the app proxy at /apps/ugc. Embed code, analytics, and product tags all rely on that address, so don't change the app's proxy URL in your Shopify settings.
If you delete the widget, the snippet outputs nothing. Remove it from your theme code too.

Embed code

Copy the code

Paste it into your theme

How it differs from the block

Good to know

On this page