Install the app
Add Foxr - Shoppable Videos & UGC to your store and find your way around the Home page.
Install from the Shopify App Store
Search for Foxr - Shoppable Videos & UGC in the Shopify App Store and open its listing.
Click Install and choose the store you want to install on.
Approve the permissions Shopify shows. What each permission is for is explained at the bottom of this page.
You land on the app's Home page.
Installing doesn't change what shoppers see. Nothing shows to them until you've built a widget and added it to your theme. The rest of Getting started walks you through that.
The first time you open the app, it also adds the FOXR attribution pixel to your store. The pixel is what credits orders to the videos that led to them, so there's nothing for you to set up.
The app never edits your theme
Foxr can read your live theme to check your setup, but it can't change it. Adding the widget block and turning on the app embed always happen in Shopify's theme editor. Nothing changes until you click Save there.
The app menu
Everything lives in the app's menu in the Shopify admin sidebar:
| Menu item | What it's for |
|---|---|
| Video library | Every clip you can use in a widget. Upload, import from Instagram and TikTok, tag products, and add subtitles. The page itself is headed Media. |
| Widgets | Your widgets and how each one is performing. Create, edit, and A/B test them. |
| Analytics | Views, plays, product clicks, add-to-carts, orders, and revenue from your videos. |
| Settings | Shop-wide settings for every widget: colours, product cards, the buy button, the player, video quality, search engine data, and the wording of the shop buttons in each language. |
To get back to Home, click the app's name, Foxr - Shoppable Videos & UGC, in the sidebar.
The Home page
Home tells you what's left to do before shoppers can see your videos. From top to bottom:
Banners
Banners appear at the top of Home when something needs your attention. The theme banners only show once you've saved at least one widget.
| Banner | What it means | What to do |
|---|---|---|
| Could not load widgets | The app couldn't load your widgets just now. | Reload the page. If it keeps happening, chat with us using Book a call at the bottom of Home. |
| Widgets need media | At least one widget has no clips, usually because its clips were deleted from the library. A widget with no clips doesn't show on your storefront. | Open Widgets, find the widget marked No media, and add clips to it. |
| Your videos are not on your storefront yet | There's no UGC widget block in your live theme. | Click Add to home page. See Add the widget to your theme. |
| Choose a widget in your theme | The block is in your theme, but no widget is selected in it, so shoppers only see a placeholder. | Click Open theme editor. Use the menu at the top of the editor to open the page the banner names, click the UGC widget block, and pick a widget under Widget. |
| Your widget is turned off in your theme | The block, or the section it's in, is hidden in the theme editor. | Click Open theme editor, open the page the banner names, and show the block again. |
| This theme cannot use app blocks | Your theme is a vintage theme without Online Store 2.0 templates. | Click Get the Liquid snippet, which opens your latest widget, then click Embed code and paste the snippet into your theme. See Embed code. Or switch to an Online Store 2.0 theme. |
The theme banners also have a Recheck theme button. Click it after you change something in the theme editor.
You can close a banner with its X. The app remembers that in your browser, not in your store. A theme banner comes back if the app finds a different problem.
Add media opens your latest widget
The Add media link on the Widgets need media banner opens your most recently updated widget. That isn't always the one missing clips. Look for the No media badge on the Widgets page instead.
Setup guide
A three-step checklist. Each step ticks itself off when the app detects it's done:
| Step | Done when | Buttons inside the step |
|---|---|---|
| Create a widget | You've saved at least one widget. | Create widget |
| Add videos and tag products | At least one widget has at least one clip. Tagging products is strongly recommended, but the step doesn't check for it. | Add media, Tag products in Library |
| Add the widget to your theme | Your live theme has a visible UGC widget block with a widget selected, and the app embed is on. | Add to home page, Open theme editor, or Turn on app embed, depending on where you are. And Recheck. |
Click the arrow beside a step to open or close it. The app opens the first unfinished step for you until you open or close one yourself. The header shows how many steps are done, for example 2 out of 3 steps completed, and a small message appears each time a step completes. When all three are done, the header shows Done and Setup complete. Your videos are live. appears.
Step 3 shows a badge that tells you exactly where you are:
| Badge | What it means | What to do |
|---|---|---|
| Live | The block is visible, a widget is selected, and the app embed is on. The step lists the pages where it found the block, such as Home page or Product pages. | Check your storefront. A widget can still hide itself, for example because its placement doesn't allow that page, or it has too few clips. |
| App embed off | The block is ready, but the app embed is off, so the block stays hidden. | Click Turn on app embed, check FOXR - Shoppable Video is on, and click Save in the theme editor. |
| No widget selected | The block is in your theme with nothing picked in it. | Click Open theme editor and open the page the block is on. Click the UGC widget block, then under Widget click Select and choose your widget. Click Save. |
| Turned off | The block is hidden in the theme editor. | Open the theme editor and show the block again. Add to home page would add a second block instead. |
| Not added | There's no UGC widget block in your live theme. | Click Add to home page. |
After you change anything in the theme editor, come back and click Recheck. Home also checks again every time you open it.
Only your live theme is checked
Home looks at your published theme. A block you add to a draft theme isn't detected until that theme is published.
Can't tick step 3?
If the app can't read your theme, or your theme is a vintage theme, step 3 becomes a checkbox you tick yourself once your widget shows on your storefront. Widgets added with embed code are never detected, so step 3 stays unticked for them. That's expected.
Dismissing the guide
The X next to Setup guide, and the Dismiss guide button that appears when all three steps are done, hide the guide for good in that browser. There's no button to bring it back. If you only want it out of the way, collapse it with the arrow instead.
Overview
Three numbers that show where your widgets stand right now. They aren't totals over a time period:
| Number | What it counts | Click it to |
|---|---|---|
| Widgets | All your widgets. | Open the Widgets page. |
| With media | Widgets with at least one clip. It shows Ready once you have one. | Open your most recent widget. |
| Needs attention | Widgets with no clips. It shows Clear when there are none. | Open a widget that needs clips, or your most recent widget if none do. |
Recent widgets
Until you've created a widget, this part of Home shows Create your first widget with a Create widget button. After that, it's a table of your widgets, most recently updated first, with each one's clip count and last update. If any widget has no clips, the table shows only those, under Widgets needing attention. Click a widget to edit it, or Add widget to create a new one.
The table's Template column currently shows Stories for every widget. The Widgets page shows each widget's real layout.
For views, orders, and revenue, go to Widgets or Analytics.
Need a hand?
The last box on Home, Book an onboarding call with a founder, has a Book a call button. It opens a live chat with our team. The chat bubble is on every page of the app too, so you can ask for setup help or send us a question at any time.
What the permissions are for
| Permission | Why Foxr needs it |
|---|---|
| Read products | To let you tag products on your clips, and to show their title, image, price, and rating on your videos. |
| Read themes | To check on Home whether the widget block and app embed are set up in your live theme. Foxr can't change your theme. |
| Write files | To upload your videos and images, including Instagram and TikTok imports, to Shopify Files, and to list your files so you can add them to the library. Foxr never deletes files. |
| Write metaobjects and metaobject definitions | Your library clips and widgets are stored in your own store as metaobjects. This lets Foxr create, save, and delete them. |
| Write app proxy | To answer requests from your storefront under /apps/ugc: counting views, plays, product clicks, and add-to-carts, receiving purchase reports from the attribution pixel, and serving live product tags, subtitles, and the embed code script. |
| Read customer events, read and write pixels | To add the FOXR attribution pixel, which credits orders to the videos that led to them. It doesn't give Foxr access to customer profiles. |
| Read locales (optional) | Not asked for when you install. Shopify only asks when you click Allow access in Settings → Translation, so Foxr can list the languages your store sells in and let you reword the shop buttons for each one. It only reads which languages are published. |
See Data and privacy for what is and isn't stored.
Next
Add your first videos: put a few clips in your library and tag the products they show.