Squarespace Plugin: Installation and Configuration Guide

🎥 Watch the Plugin Setup Screencast

Prefer watching instead of reading? Here's a quick video walkthrough showing how to install, configure, and customize the Squarespace plugin.

Estimated watch time: < 3 minutes

• 0:00–Step 1 - Go to settings
• 0:17–Step 2 - Copy script from sizeez docs
• 0:46–Step 3 - Add sizeez code
• 0:55–Step 4 - Replace shop ID
• 1:15–Step 5 - Save changes
• 1:20–Step 6 - Add size recommendation button
• 1:45–Step 7 - Copy size chart ID from admin portal
• 2:03–Step 8 - Add size chart ID to product

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 extension in our Squarespace demo shop.

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 the custom Code Injection section by selecting Website -> Pages -> Custom Code -> Code Injection.

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

Video tutorial:

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 products page by selecting Products & Services --> Products
• Select a product
• Navigate to the product's additional information settings Details --> Additional Information
• 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 className 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 className 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 -> Pages -> Custom Code -> Custom CSS.
• 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.