Integrate as iFrame Section to Shopify

This page describes how to integrate the Skin Consultant app as widget, available only as a section of single page of your Shopify web store.

iFrame Section is a good way to integrate the Haut.AI #skin-consultant-app into your Shopify web store. This option provides you with the advantage to lead traffic directly to the page wtih AI skin analysis during marketing events.

Integrating step-by-step

1. Navigate to Skin consultant tab on the menu of SaaS platform.

2. Navigate to your Skin Consultant App details by clicking on name of your app in the list of apps .

3. Open the (3) Integration tab.

   
4. Select "Shopify" as platform.

5. Select "Widget on a page" as Type of integration.

6. Follow the guide for iFrame integration. Check more detailed guide below: More detailed guide on integration.

7. Follow the guide for Cart integration.

More detailed guide on integration

1. Navigate to your Shopify admin.

2. Navigate to Online Store -> Pages.

3. Create a new page.

4. In the "Content" section, click on the "Show HTML" button.

   
5. Navigate back to SaaS -> Skin Consultant -> Integration tab.

6. Copy the Script from step 1. Paste it into this page editor.

7. Copy the iFrame holder from step 2. Paste it into the same page editor.

   
8. Add a title to your page, click "Save."

9. Preview your page by clicking on the "View page" button for a preview.

   

---

FAQ

Can I integrate the Skin Consultant app to the main page of my Shopify?

Yes, you can integrate Skin Consultant app to the main page.

To achieve this, instead of creating a new page in Shopify, follow these actions:

1. Navigate to your Shopify admin.

2. Navigate to Online Store -> Themes -> Customize.

3. Select Add section -> Custom Liquid.

4. Navigate back to SaaS -> Skin Consultant -> Integration tab.

5. Copy the Script from step 1. Paste it into Liquid code section.

6. Copy the iFrame holder from step 2. Paste it into Liquid code section.

7. Save changes.