SquareSpace Integration

Overview

The following examples show how Zyler Go will look when you integrate it into your SquareSpace site. The next section explains the simple steps required to achieve this.

Imagine your PLP on desktop looks something like the following:

After integrating Zyler Go, Try On buttons will then appear below the product image:

These Try On buttons can be customized to match the brand of your website as you see fit. Upon clicking the Try On button for an outfit, the Zyler Go widget will be displayed in the bottom left of the window showing the user visualized in that outfit. For example:

On mobile, the widget will occupy the whole screen as can be seen below:

In both views, you are able to swipe vertically to view all your other outfits that are available for visualization.

As with the PLP, integrating Zyler Go on the PDP will add Try On buttons. Imagine your PDP on desktop looks like the following (before integrating Zyler Go):

After integrating Zyler Go, a Try On button will appear under the "Add to Cart" button:

As before, upon clicking the Try On button, the Zyler Go widget will be displayed with the outfit visualized on the user. For example:

On mobile once again, the widget will occupy the whole screen as can be seen below:

Integration Steps

There are two simple steps for integrating Zyler Go on SquareSpace:

1. Including the Script
2. Styling Using CSS

Step 1: Including the Script

There are two ways in which you can add the script to your site. Which one you use depends on whether you are using SquareSpace at Business tier or higher. These options are:

• Using Code Injection (available only with SquareSpace at Business tier or higher)
• Using Markdown

Using Code Injection

If you have a SquareSpace account at Business tier or higher, you can use Code Injection to include the script. Follow these steps:

1. Navigate to "Settings" -> "Developer Tools" -> "Code Injection".
2. Scroll down to "Footer".
3. Copy and paste the script below into the "Footer" textbox, replacing <partner-id> with your value from the Partner Portal.

<script partner-id="<partner-id>" platform="squarespace" src="https://www.zyler.com/js/platform-integration/v1/index.js"></script>

Using Markdown

Alternatively, you can use a Markdown block in the footer to include the script:

1. Navigate to "Website" and select your "Home" page.
2. Scroll down to the bottom of the editor and click "Edit Site Footer".
3. Click "Add Block" and select "Markdown".
4. Copy and paste the script below into the "Markdown" block, replacing <partner-id> with your value from the Partner Portal.

<script partner-id="<partner-id>" platform="squarespace" src="https://www.zyler.com/js/platform-integration/v1/index.js"></script>

Step 2: Styling Using CSS

To style your Try On buttons, copy and paste the following CSS into the same section as the script, either above or below it. You can edit it to match the brand of your website as you see fit.

    <style>
      .zyler-try-on-cta {
        display: block;
        border: 1px black solid;
        border-radius: 2rem !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        background-color: white !important;
        cursor: pointer;

        &:hover {
          background-color: #f0eff0 !important;
        }
      }

      .zyler-button-div {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 15px 0;
        order: 4;
      }

    </style>

The .zyler-button-div selector contains an order property with the value of 4. This works with the layout in SquareSpace to set the position of the Try On button on the PDP to below the "Add to Cart" button. Using a value of 1, 2 or 3 shifts the button to below the product title.

This completes the integration steps. Zyler Go is now part of your SquareSpace site.