The follow steps will allow you to update your Squarespace with:

1. code to initialize the Thirstie SDK and enable ecommerce on the site through Thirstie's platform.
2. implement an Add to Cart button on a Product Detail Page (PDP)
3. implement a shopping cart icon to allow users to navigate to checkout, and
4. implement a checkout page.
5. optionally, add a Thirstie age gate to the site.

You will need the Thirstie SDK credentials for your storefront, and the Thirstie Product Line ID(s) for your product(s), which will be provided to you by Thirstie during onboarding.

Step One: Initializing the SDK

Use the CDN version of the Thirstie SDK and Squarespace's Code Injection feature.

In the Squarespace page editor, navigate to Pages -> Custom Code -> Code Injection and add the following snippet.

<!-- BEGIN THIRSTIE SDK CODE -->
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstiebase.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.thirstie.cloud/css/latest/thirstieecomm.css" />

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.thirstie.cloud/js/latest/thirstie-ecomm-vue.js"></script>

<script defer type="module">
  const initializeThirstieSDK = () => {
    const { APIKEY, MAPSKEY, THENV, BRAND_LOGO_URL, SUPPORT_EMAIL } = {
      "APIKEY": "Your Thirstie API Key",
      "MAPSKEY": "Your Google Maps API Key",
      "THENV": "'sandbox' or 'prod'",
      "SUPPORT_EMAIL": "Provided by Thirstie, support@<yourbrand>.thirstie.com",
      "BRAND_LOGO_URL": "The url for your brand logo, displayed during checkout"
    };
    window.thirstieEcommVue.initApp({
        APIKEY: APIKEY,
        MAPSKEY: MAPSKEY,
        environment: THENV,
        supportEmail: SUPPORT_EMAIL,
        brandLogo: BRAND_LOGO_URL,
        primaryColor: '#000',
        secondaryColor: '#fff',
        primaryContrastingColor: '#fff',
        secondaryContrastingColor: '#000',
        routes: {
            checkout: '/thirstie-checkout',
            shopping: '/'
        }
    });
  }

  globalThis.__VUE_PROD_DEVTOOLS__ = false;
  globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
  globalThis.__VUE_OPTIONS_API__ = false;
  initializeThirstieSDK();
</script>

Step Two: Setup product page

On the page where you want users to be able to add a product to their shopping cart, place a code block with the following code snippet.

The other content on the page, such as product images and supporting text, are fully under your control to setup as you want.

<div>
  <th-pdp-commerce product-line-id="1042349"  hide-details-footer>
    <div class="px-4" slot="additional-content" style="border-radius:var(--th-border-radius);background-color: rgb(16, 16, 16);">
      <section style="border-radius:var(--th-border-radius);padding:0;width: 100%">
        <th-zipcode-check style="width: 95%" text-color="white" />
      </section>
    </div>
  </th-pdp-commerce>
</div>

NOTES:

• The styling options for the elements can be updated to your preferences
• If you want the user to enter their full address, instead of just the postal code, replace <th-zipcode-check> with <th-address-check>
  • If you use the zip code entry, the user will be prompted for their full address during checkout

Step Three: Place the shopping cart icon

Place the shopping cart icon on the top of the page (Squarespace does not allow you update the navigation header).

<div id="top" class="flex items-end justify-end p-4">
  <th-cart-nav tooltip-text="Click to Checkout"></th-cart-nav>
</div>

Step Four: Implement the Thirstie checkout pages

Create a new page in Squarespace, named ThirstieCheckout with the "URL Slug" value of /thirstie-checkout, matching the routes value included in initApp in Step One.

The page should have only the following code block:

<div class="checkout-container">
  <th-checkout>
      <div id="th-stripe-mount-point" slot="th-stripe-payment"></div>
  </th-checkout>
</div>

Your site is now able to process orders. If you are using the sandbox credentials provided by Thirstie, you can run test orders using test credit cards, with no real money changing hands, using the information on the Testing pages.

You will update the credentials in Step One to production values after Thirstie reviews the site.

Step Five: (Optional) Implement Thirstie's Age Gate

If you already have an age gate implemented, you can keep that in place. Consumers will be prompted to enter date of birth during checkout, as a precaution.

If you would prefer to use Thirstie's age gate, add the following snippet to the "Footer" section of "Custom Code" under Pages -> Custom Code -> Code Injection

<th-agegate-modal type="dob" class="th-fouc-block">
 <h2 slot="header">Are you 21 or older?</h2>
      <div slot="fail-msg">You must 21 or older to enter. Click <a href="https://responsibility.org" target="_blank">here</a></div>
</th-agegate-modal>

NOTES:

• you can update the text to correspond to your brand requirements.
• change the type from "dob" to "yesno" to allow the user to select a yes or no response.