Shopify-Symbol 2.png

Shopify Instructions

Once you have received your custom widget code by email, follow the instructions below to add it to your Shopify site.

Embed the snippet code to the product page

1. Sign in to your Shopify account.

2. Click Products from the Shopify menu.

3. Select the product where you want to add your widget.

4. Click the <> icon at the top-right corner of the product content editor.

shopify_product_editor.png

5. Paste the code snippet.

6. Click Save.

embed_interactive_calculator_to_product_page.png

Need a hand adding the widget to your website? Contact us via email support@mcards.com

Embed the snippet code to the page

1. Sign in to your Shopify account.

2. Click Online Store from Shopify menu.

3. Click Pages.

shopify_click_pages.png

4. Select the page where you want to add your widget.

5. Click the <> icon at the top-right corner of the product content editor.

shopify_page_editor.png

6. Paste the code snippet (please find pictures above)

7. Click Save.

paste_code_snippet_to_page.png

Need a hand adding the widget to your website? Contact us via email support@mcards.com

Embed the snippet code to the liquid file

1. Sign in to your Shopify account.

2. Click Online Store from the Shopify menu.

3. Click Themes.

shopify_product_editor.png

4. Click the Actions button to extend the drop-down menu.

5. Click Edit Code from the drop-down menu.

shopify_product_editor-1.png

6. Scroll down the list of liquid files until you find the product-template.liquid file and click it.

7. We recommend pasting your code snippet right after the checkout form (after the Add to Cart button). Usually, this form ends with the {% endform %} tag. Find this tag and paste your code snippet right below it.

embed_calculator_to_liquid_file.png

8. Click Save.

Need a hand adding the widget to your website? Contact us via email support@mcards.com