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 Integration section.

  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.

Limitations

You can read about the current limitations of the Skin Consultant App on the Know Limitations Page.

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 and paste it into Liquid code section.

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

  7. Save changes.

Not a Haut.AI client yet?

Talk to sales

PreviousChange the stack of the order (z-index) of the Floating ButtonNextKnown Limitations

Last updated

Was this helpful?