Sell on Squarespace using Selz

If you’re using Squarespace to build your website but want the simplicity of Selz for selling your products – no problem. Here’s how to do it.

Getting started

To begin with, you’ll need to have your own Squarespace account and have created an item within Selz.

There are few ways to add your Selz items to Squarespace:-

  1. A button that follows your Squarespace styling and pops up an overlay for your item
  2. A standard Selz button that pops up an overlay for your item
  3. A standard Selz widget
  4. A simple hyperlink

1. Create a Squarespace styled button with overlay


To do this you need to add some additional code to your Squarespace page but fear not – it is super-simple.

First, select the Settings for your Squarespace page, this is usually a cog next to the page name.

Screen Shot 2017-04-28 at 9.34.37 AM

Once within settings, click Advanced.

Screen Shot 2017-04-28 at 9.34.52 AM
  • Next, you need to paste in some code that uses our jQuery plugin. It sounds techie but it’s not (if you want the full jQuery details you find them here). But to do it the simple way just copy and paste the code below into the Advanced box, we’ve included two options:-

1. Display the item detail page first:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz(); });</script>

2. Fast checkout option:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz({checkout:true}); });</script>
  • Click Save and that’s your Squarespace page settings done.
  • Next copy the short link for your Selz item. To do that go to your Selz dashboard select Items > All, and find the item and click Options for the item you want to sell. Then select Share.
  • Select Short link and copy the URL.
  • Go back to Squarespace and select add a Button to your page.
Screen Shot 2017-04-28 at 9.37.24 AM
  • Within the URL field paste in the short link from Selz as an External link, update the Button text to something like ‘Shop’ and click Apply.
Screen Shot 2017-04-28 at 9.37.47 AM
  • At this stage, you won’t be able to preview the Selz button due to Squarespace restrictions on embedded code. Simply sign out of Squarespace to see your Selz button working in all its glory!
Screen Shot 2017-04-28 at 9.40.22 AM

2. Create a Selz button on your Squarespace site


First copy the button code for your Selz item. To do this, either select Buttons & Widgets from the main menu and select your item or select Items > All from the main menu and Options > Embed on the item you want to sell. You’ll now be within the button and widget editor page. Copy the code from the right-hand panel.

Screen Shot 2017-04-28 at 10.02.16 AM
  • Go back to Squarespace and add a Code content block to your Squarespace page. This will allow you to enter HTML direct into your page.
Screen Shot 2017-04-28 at 10.00.14 AM
  • Paste the code copied from Selz and click Apply.
Screen Shot 2017-04-28 at 10.01.10 AM

At this stage, you won’t be able to preview the Selz button due to Squarespace restrictions on embedded code. Simply sign out of Squarespace to see the Selz button.

Screen Shot 2017-04-28 at 10.05.56 AM

3. Create a Selz widget on your Squarespace site


First copy the widget code for your Selz item. Either select Buttons & Widgets from the main menu and select your item or select Items from the main menu and Options > Embed on the item you want to sell. You’ll now be within the button and widget editor page. Copy the code from the right-hand panel.

Screen Shot 2017-04-28 at 10.02.16 AM

Go back to Squarespace and add a Code content block to your Squarespace page. This will allow you to enter HTML direct into your page.

Screen Shot 2017-04-28 at 10.00.14 AM

Paste the code copied from Selz and click Apply.

Screen Shot 2017-04-28 at 10.01.10 AM

At this stage, you won’t be able to preview the Selz widget due to Squarespace restrictions on embedded code. Simply sign out of Squarespace to see the Selz widget.

Screen Shot 2017-04-28 at 10.01.55 AM

 4. Add a Hyperlink


To do this you need to add some additional code to your Squarespace page.

First, select the Settings for your Squarespace page, this is usually a cog next to the page name. Once within settings, click Advanced.

Screen Shot 2017-04-28 at 9.34.37 AM

Next, you need to paste in some code that uses our jQuery plugin. It sounds techie but it’s not (if you want the full jQuery details you find them here). But to do it the simple way just copy and paste the code below into the Advanced box, we’ve included two options:-

Screen Shot 2017-04-28 at 9.34.52 AM

1. Display the item detail page first:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz(); });</script>

2. Fast checkout option:

<link href="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.selz.com/jquery/1.0.13/jquery.selz.min.js"></script>
<script>$(function() { $.selz({checkout:true}); });</script>
  • Click Save. Now that’s your Squarespace page settings all complete.
  • Next, you need to add a link to your Selz item. To do this you need to add some HTML code.
  • The code is a little different to the Selz embed button code and looks like this:
<a href="http://selz.co/1gfLTzi">Buy now</a>
  • Copy this code but replace this part “1gfLTzi” within your items shortcode
  • Next, within your Squarespace page add a Code content block to your page. This will allow you to enter HTML direct into your page.
  • Paste the HTML code from Selz and click Apply. If you want to edit the hyperlink text simply edit the section Buy now with your own text.

Was this helpful?

4 3