Add virtual try-on to a Haravan store

There is no Macgi app for Haravan yet, but the widget works well as a script tag in your theme. You edit one file; placing your own button and tagging products are optional. It takes about 10 minutes. Haravan’s admin is in Vietnamese, so menu names are given as they appear there.

Before you start

• Your pk_live_... key from the beta email. No key yet? Join the beta.
• A Haravan account that can edit the theme.
• When you sign up, give us both your own domain (with and without www) and your .myharavan.com domain so the key works on both.
• Back up the theme (or work on an unpublished copy) before editing code.

Step 1: add the script to theme.liquid

1. Go to Trang quản trị → Website → Giao diện (Admin → Website → Themes).
2. On your live theme, click Chỉnh sửa code (Edit code).
3. In the Layouts folder, open theme.liquid.

4. Find the </body> tag (usually at the end; press Ctrl+F or Cmd+F) and paste this just above it:

   layout/theme.liquidCopy

   <script src="https://cdn.macgi.app/widget.js"
           data-key="pk_live_..."
           data-auto
           data-slot-rules='{"quần":"bottom","chân váy":"bottom","váy liền":"one_piece","đầm":"one_piece"}'
           defer></script>
   </body>

   The data-slot-rules line makes trousers (“quần”), skirts (“chân váy”) and dresses (“váy liền”, “đầm”) try on correctly based on words in the product name. Adjust the keywords to how you name products, or remove the line if you only sell tops.

5. Click Lưu (Save).

Step 2: check a product page

Open a product page on your store (reload it if it is already open). The “Thử đồ” (Try it on) button appears next to the add-to-cart button. Try it once with a full-body photo to make sure everything works.

If the button does not show, open the Console (F12) and type window.Macgi. See troubleshooting below and in the Quick start.

Tag bottoms and dresses

When a product name has no clear keyword (say, “Set Mây xanh”), tag the product under Sản phẩm (Products) → the product → tags:

• macgi-bottom for trousers and skirts;
• macgi-one-piece for dresses and jumpsuits.

Then open the product template (in Chỉnh sửa code, the Giao diện folder, file product.liquid) and paste this at the top. It outputs a macgi:slot tag for tagged products, which takes priority over the keyword rules:

{% if product.tags contains 'macgi-bottom' %}
  <meta name="macgi:slot" content="bottom">
{% elsif product.tags contains 'macgi-one-piece' %}
  <meta name="macgi:slot" content="one_piece">
{% endif %}

Optional: place your own button in the template

To put the button in one exact spot with your theme’s button style, add it to the product template instead of using auto mode.

1. In theme.liquid, remove data-auto (and data-slot-rules) so the page does not show two buttons:

   layout/theme.liquidCopy

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

2. Open product.liquid and find the add-to-cart form, <form action="/cart/add". Many themes move it into a file in the Snippets folder; if you cannot see it, search the snippets for /cart/add.

3. Paste the button right after the add-to-cart button (or after </form>):

   product.liquidCopy

   <button type="button" class="btn" data-macgi-tryon
           data-garment-image="{{ product.featured_image | product_img_url: 'master' }}"
           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 }}">
     Thử đồ
   </button>

   Change class="btn" to the button class your theme uses. The product_img_url filter returns a URL like //cdn.haravan.com/...; the widget understands it, so there is no need to add https:.

4. Click Lưu (Save) and check a product page again.

Notes and troubleshooting

• Image size: Haravan’s docs show the 'medium' and 'compact' sizes. If 'master' does not return the original photo in your theme, try 'grande' or 'large'. Sharper photos give better results.
• No button on your own domain or on .myharavan.com: that domain is not allowed for your key yet. Message us and we add it.
• Switching themes: the script lives in the theme, so paste it into the new theme before you publish it.
• Which photo is used: the featured image should be a front-facing shot of the whole item. If it is a posed model shot, use the macgi:garment-image tag (see options).