Skip to main content

Shopify

Embedding the widget in your Shopify store

Introduction​

The Basic Quote Widget is an embeddable <iframe> and can be easily integrated into various website builders, as well as custom coded websites.

What is important is properly setting up the Host URL in the Quote Widget settings. This URL is important, because it serves as a security measure, preventing 3rd parties from copying your Quote Widget.

Embedding in a page via the Editor​

If you wish to add the Quote Widget to a basic page as content, follow the steps below:

  1. Log into your Shopify Admin
  2. From the left navigation go to Online Store -> Pages
  3. Select an existing page to edit or create a new one by clicking on the "Add page" button in the top right corner
  4. In the Content Editor click on the </> icon to toggle the HTML mode of the editor
  5. Copy the Embed code with your preferred language from the BuildPlateZ platform. The code should look something like this:
<iframe style="border: none; max-width: 600px; width: 100%; height: 440px;" 
        src="https://quote.buildplatez.com/?widgetKey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&lng=en"></iframe>
  1. Paste the Embed code into the Editor
  2. Toggle back the Preview mode of the Content Editor by clicking on the </> icon.

You should see a gray rectangle appear in the Editor with the following message 'quote.buildplatez.com refused to connect.'.

This is because the Shopify Admin URL is https://admin.shopify.com/ and not your Host URL.

  1. Click on the "View page" button and make sure the Widget loads and functions properly on the loaded webpage.
  2. If you are satisfied with the result, save the page.

Embedding via the Theme Editor​

If you wish to add the Quote Widget to a Page Template, follow the steps below:

  1. Log into your Shopify Admin
  2. From the left navigation go to Online Store -> Themes
  3. Click on the "Customize" button of the currently used theme
  4. Navigate to the page template where you wish to add the Widget
  5. Add a new section to the page, choosing the </> Custom Liquid section type
  6. Copy the Embed code with your preferred language from the BuildPlateZ platform. The code should look something like this:
<iframe style="border: none; max-width: 600px; width: 100%; height: 440px;" 
        src="https://quote.buildplatez.com/?widgetKey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&lng=en"></iframe>
  1. Paste the Embed code into the Liquid code box.

You should see a gray rectangle appear in the Editor with the following message 'quote.buildplatez.com refused to connect.'.

This is because the Shopify Admin URL is https://admin.shopify.com/ and not your Host URL.

  1. Save the page template and visit a page that uses this page template.