Skip to main content

Shopify

Embedding the widget in your Shopify store

Introduction​

The Regular Quote Widget is an embeddable <script> 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:
<body>
<!-- Your website content -->
<script>
    (function (w, d, s, o, f, js, fjs) {
        w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
    bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
</script>
</body
  1. Paste the Embed code into the Editor
  2. Add a <div> element with the id equal to your widget key where you want the Widget to appear. For example:
<div id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
  1. 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:
<body>
<!-- Your website content -->
<script>
    (function (w, d, s, o, f, js, fjs) {
        w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
    bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
</script>
</body
  1. Paste the Embed code into the Liquid code box.
  2. Add a <div> element with the id equal to your widget key where you want the Widget to appear. For example:
<div id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>

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.

Improving performance​

The script tag of the widget is loaded asynchronously, which means it won't block the rendering of the page. However, it's recommended to add the script tag at the end of the body tag to ensure the page is rendered before the widget is loaded. This will improve the performance of your website.

To do so, follow these steps:

  1. Log into your Shopify Admin
  2. From the left navigation go to Online Store -> Themes
  3. Locate your currently active theme and click on the ... button (if you are not feeling very confident editing your raw theme code, you can duplicate the theme just in case)
  4. Click on the Edit code button
  5. From the left panel locate the theme.liquid file under the layout folder and click on it.
  6. Scroll down to the very end of the file and paste your embed code right before the closing </body> tag.
<body>
    <!-- Your website content -->
    <script>
        (function (w, d, s, o, f, js, fjs) {
            w['bpz-regular-widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
            js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
            js.id = o; js.src = f; js.async = 1; js.type = 'module'; fjs.parentNode.insertBefore(js, fjs);
        }(window, document, 'script', 'bpzRegularWidget', 'https://quote-regular.buildplatez.com/assets/index.js'));
        bpzRegularWidget('init', { widgetKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', lng: 'en' });
    </script>
</body

You can still place the <div> element wherever you want the widget to appear. The widget will be rendered in the place where the <div> element is located. Adding the <div> element can either be done via the page Editor or the Theme Editor.

You can further improve the loading speed by including a preload tag in the head of your Shopify store. Repeat steps 1 - 5 about improving performance but this time paste the following code right before the closing </head> tag, located right above the opening <body> tag.

<head>
    <!-- Your website content -->
    <link rel="preload" href="https://quote-regular.buildplatez.com/assets/index.js" as="script">
</head>

This will preload the widget script and improve the loading speed of the widget.

You will still need to place the div wherever you want the widget to be rendered.