Storefront Widgets
SPREEAI adds its entry points to your storefront as app blocks that you place in Shopify's theme editor, without code. This page covers what each block does, how to add it, and how to customize it.
Choose an Entry Point
| Block | Where it goes | What it does |
|---|---|---|
| SPREEAI Fitting Room | Product page | A card with a Try it on you button and optional Compare looks and Build a look shortcuts |
| SPREEAI Find your size | Product page, near the size picker | A button that opens the fitting room on a size recommendation |
| SPREEAI Compare | Product cards, for example on a collection page | A button that lets shoppers pick up to three pieces and compare them side by side |
| SPREEAI Try On Button | Product page | Deprecated. The original try-on button, replaced by the Fitting Room. See Set Up Your Storefront |
The blocks only appear on products that are synced with SPREEAI and whose try-on is live, and only while the feature behind the block is on in Feature Settings. You can safely add a block to a template your whole catalog uses: it stays hidden on every other product.
Before You Start
- Connect your store and approve your subscription
- Sync the products you want to support and resolve any Action Required issues
- Find out which theme and product templates those products use
- Review Feature Settings and choose the features you want shoppers to see
- Keep products disabled until you are ready for shoppers to use their try-on
Add a Widget
- In Shopify, open Online Store → Themes and click Customize. You can also open the Settings tab in SPREEAI and click Customize storefront, which adds the SPREEAI Fitting Room block to your product page for you
- Use the page picker at the top to open the product page template you want. For SPREEAI Compare, open a page that shows product cards, such as a collection page, instead
- In the left sidebar, find the section where you want the block
- Click Add block, open Apps, and choose the SPREEAI block
- Drag the block to the position you want
- Adjust its settings and click Save
- Open an enabled product on your storefront and check the result. See Testing Your Storefront
A block only shows on products whose template contains it. If your products use more than one template, add the block to each one, and if you switch themes, add the blocks to the new theme as well.
SPREEAI Fitting Room
The Fitting Room card opens the SPREEAI fitting room from a product page. It shows your store emblem, a main button, a subtitle, and optional shortcuts.
| Setting | Default | Description |
|---|---|---|
| Button text | Try it on you | The label of the main button |
| Emblem text | Your store's initials | The text shown in the emblem. Leave it empty to use your store's initials |
| Emblem image | None | Replaces the emblem text, for example with your logo |
| Subtitle | Your fitting room · Powered by SPREEAI | The line under the button |
| Show Compare looks | On | Shows the Compare looks shortcut |
| Compare looks text | Compare looks | The label of that shortcut |
| Show Build a look | On | Shows the Build a look shortcut |
| Build a look text | Build a look | The label of that shortcut |
| Text color, Border color, Background color | Your theme's colors | Leave the text color empty to use your theme's text color |
| Enable Add look to bag | Off | Lets shoppers add this product to their cart from the fitting room |
A shortcut only shows while its feature is also on in Feature Settings: Compare looks needs Compare, and Build a look needs Build a look. Checking the box in the block cannot turn on a feature that is off.
When Enable Add look to bag is on, the size the shopper picked in the fitting room is matched to the product's variant with the same option value. Only this product is added to the cart; pieces from other products in the look are not.
What shoppers see: clicking Try it on you opens the fitting room. A shopper who hasn't added a photo yet can upload their own or choose a Twin, one of SPREEAI's models, to see the product on.
SPREEAI Find your size
Place this button in the product form, for example next to your size guide or size picker. It opens the fitting room on its size recommendation.
| Setting | Default | Description |
|---|---|---|
| Button text | Find your size | The label of the button |
| Text color, Border color, Background color | Your theme's colors | Leave the text color empty to use your theme's text color |
| Enable Add to bag | Off | Lets shoppers add this product to their cart from the fitting room |
When Enable Add to bag is on, shoppers can add the product to their cart in the size recommended or chosen in the fitting room.
The button is hidden while Size-aware fit is off in Feature Settings. Size-aware fit does not depend on Virtual Try-On, so Find your size keeps working when you turn Virtual Try-On off.
SPREEAI Compare
This block belongs on product cards, so add it to the section that shows them, such as the product grid on a collection page.
| Setting | Default | Description |
|---|---|---|
| Product | The card's product | Filled in automatically for the product the card shows |
| Button text | ＋ Compare | The label before the shopper selects the product |
| Selected button text | ✓ In comparison | The label once the product is selected |
The button only shows while Compare is on in Feature Settings.
What shoppers see:
- They click ＋ Compare on up to three products
- A tray at the bottom of the page shows their selection, for example 2 / 3 pieces selected
- They click Compare in the tray, and the fitting room opens with the selected pieces side by side, on the shopper
Troubleshooting
| Problem | What to check |
|---|---|
| A widget is missing on one product | The product is synced, Ready, and enabled, its page is visible on your storefront, and it uses the template that contains the saved block |
| A widget is missing on every product | The feature is on in Feature Settings, the block is saved in your published theme, your subscription is approved, and the Billing card shows no usage or spending-cap warning |
| A shortcut is missing in the Fitting Room card | Its checkbox is on in the block and its feature is on in Feature Settings |
| A shortcut is still visible after you turned its feature off | Reload the storefront page: feature changes apply on the next page load |
| A block is missing from Add block | SPREEAI is installed on this store, you are editing the right theme and template, and the section supports app blocks. See Check Your Theme |
If the placement you want isn't available, open the Settings tab and click Email SPREEAI support.