Add virtual try-on to Shopify

The Macgi Shopify app is in the works. Meanwhile you can use the widget today with one script tag in your theme.

Shopify app (coming soon)

The app will install from the Shopify App Store, add the “Try it on” button as a theme app block without code, and let you turn it on per product. Stores in the beta hear as soon as it is ready. When you switch to the app, just remove the script tag you added below.

Interim 1: the script in theme.liquid

1. In the Shopify admin, go to Online Store → Themes.
2. On your live theme, click ⋯ and choose Edit code.
3. In the layout folder, open theme.liquid.

4. Find the </body> tag and paste this just above it:

   layout/theme.liquidCopy

   <script src="https://cdn.macgi.app/widget.js"
           data-key="pk_live_..."
           data-auto
           defer></script>

5. Click Save, then open a product page and look for the “Try it on” button.

Shopify themes already output product data and an og:image, so auto mode usually finds the right page and photo. To have trousers and dresses tried on correctly, add data-slot-rules (see the Quick start).

Interim 2: place the button with a Custom Liquid block

No theme code to edit beyond the script tag, and you can drag the button exactly where you want it on the product page.

1. Add the script tag to theme.liquid as in interim 1, but without data-auto:

   layout/theme.liquidCopy

   <script src="https://cdn.macgi.app/widget.js" data-key="pk_live_..." defer></script>

2. Go to Online Store → Themes → Customize and open the Products → Default product template.
3. In the product information section, click Add block → Custom Liquid and drag it below the “Add to cart” button.

4. Paste this into the block’s Liquid box:

   Custom LiquidCopy

   <button type="button" class="button button--secondary button--full-width" data-macgi-tryon
           data-garment-image="{{ product.featured_image | image_url: width: 1200 }}"
           data-garment-slot="{% if product.tags contains 'macgi-bottom' %}bottom{% elsif product.tags contains 'macgi-one-piece' %}one_piece{% else %}top{% endif %}"
           data-garment-description="{{ product.title | escape }}">
     Try it on
   </button>

   Tag trousers and skirts with macgi-bottom, dresses with macgi-one-piece. The image_url filter returns a URL starting with //; the widget understands it, so there is no need to add https:. Adjust the button classes to your theme.

5. Click Save.

Notes

• Domains: give us both your own domain and your .myshopify.com domain when you sign up.
• Switching themes: the script lives in the theme, so paste it into the new theme before you publish it.
• Options, JavaScript events and troubleshooting: see the Quick start.