Skip to main content

Squarespace Plugin: Installation and Configuration Guide

Introduction​

This documentation is designed to guide you through the initial steps to integrate sizeez Size Recommendation features to your Squarespace online shop.

Experience the plugin in our Squarespace demo shop: Link

img alt

Prerequisites​

  • Access to your Squarespace Store Settings page.
  • The unique Shop ID provided by sizeez.
  • Access to sizeez Admin Portal to create and manage Size Charts.

Integration Steps​

1. Access Squarespace Store Settings​

  • Log in to your Squarespace account.
  • Navigate to your website tools by selecting Website -> Utilities -> Website Tools.

2. Add Script to Page Header Code Injection​

  • Paste the code below in the HEADER of the Code Injection section as shown in the video tutorial below:
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // sizeez will provide shop-id once a customer signs contract with us
    const shopID = 'your_shop_id'
    // get size chart id from html
    // client must add an html element in their product additional info setting as html code like below
    // <p id="VRQRSizeChartID" data-sizingchartid='sizeChart_xyz'></p>
    let sizeChartID = null;
    const sizeChartIDContainer = document.getElementById('VRQRSizeChartID');
    if (sizeChartIDContainer) {
      sizeChartID = sizeChartIDContainer.dataset.sizingchartid;
    }

    // get language from html tag
    let language = 'en';
    if (document.documentElement.lang) {
      language = document.documentElement.lang.split('-')[0];
    }

    // set get size recommendation button text based on language
    let getSizeRecommendationBtnText = 'Get Size Recommendation';
    if (language === 'de') {
      getSizeRecommendationBtnText = 'Erhalte Größenempfehlung';
    }

    const parentDivs = document.getElementsByClassName("product-quantity-input");
    const parentDiv = parentDivs[0];

    // only append shopfront plugin elements if parent div and size chart id exist
    if (parentDiv && sizeChartID) {
      // Create a button element
      const button = document.createElement("button");
      // Set the button's attributes
      button.id = "sizeezButton";
      button.className = 'sqs-button-element--secondary';
      button.innerText = getSizeRecommendationBtnText;
      parentDiv.appendChild(button);
      // Create a new div element
      const sizeezDiv = document.createElement("div");
      sizeezDiv.id = "sizeezModal";
      sizeezDiv.setAttribute('data-sizingchartid', sizeChartID);
      sizeezDiv.setAttribute('data-countrycode', '');
      sizeezDiv.setAttribute('data-language', language);
      sizeezDiv.setAttribute('data-shopid', shopID);

      // Append the new div after the button
      parentDiv.appendChild(sizeezDiv);

      const scriptTag = document.createElement("script");
      scriptTag.src = "https://resources.sizeez.com/scripts/vrqrsolution/bundle.js";
      scriptTag.defer = true;
      scriptTag.crossOrigin = "anonymous";

      // Append the script tag to the head of the document
      document.body.appendChild(scriptTag);
    }
  })
</script>

Video tutorial:

3. Enter Shop ID​

  • In the script, replace your_shop_id with the unique shop ID provided by sizeez.
  • Save your changes.
Please Note

Without a valid shop ID, the plugin will not be activated in shopfront

4. Set Size Chart ID for Each Product to Provide Size Recommendation​

The size recommendation function is not automatically enabled for all products in the shopfront. To activate it for a specific product page, kindly follow these configuration steps for that particular product.

  • Navigate to the product's additional information settings.
  • Add an HTML element with a unique ID and a data attribute for the Size Chart ID. Use the following format: 
    <p id="VRQRSizeChartID" data-sizingchartid='your_size_chart_id'></p>
    Replace your_size_chart_id with its associated size chart ID. You can easily copy this information from the sizeez Admin Portal.
  • Please refer to the video tutorial below:
Please Note

If you do not fill in a size chart ID, the Get Size Recommendation button will not be displayed for this product on the shopfront.

5. Optional: Positioning of the "Get Size Recommendation" button​

  • In the (first) script, find the line: 
    const parentDivs = document.getElementsByClassName("product-quantity-input");
    Replace product-quantity-input with the class name of the div where you want the Get Size Recommendation button to appear.
  • Save your changes.
Please Note

The Get Size Recommendation button will only be visible if the specified div class is available on the product page.

6. Optional: Customize the look and feel of the "Get Size Recommendation" button​

  • You can customize the appearance of the Get Size Recommendation button by using its unique ID.
  • Navigate to your website tools by selecting Website -> Utilities -> Website Tools.
  • Add custom styles to the button in the Custom CSS section with the following format: 
    #sizeezButton {
      padding: 2px;
      /* Add more custom styles as needed */
    }
    Adjust the padding and other styles to achieve the desired look and feel.
  • Save your changes.

7. Verify Integration​

  • Visit a product page where you have set the Size Chart ID on your Squarespace store to ensure that the Get Size Recommendation button appears.

Congratulations! You have successfully integrated sizeez into your Squarespace store.