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:-

  • A button that follows your Squarespace styling and pops up an overlay for your item
  • A standard Selz button that pops up an overlay for your item
  • A standard Selz widget
  • A simple hyperlink

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. Once within settings, click Advanced.

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:-

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>

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 and select 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. Within the URL field paste in the short link from Selz as an External link and click Apply.

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!

All done. Too easy.

Selz button

First copy the button 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.

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. Paste the code copied from Selz and click Apply.

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.

Selz widget

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.

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. Paste the code copied from Selz and click Apply.

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.

Hyperlink

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. Once within settings, click Advanced.

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:-

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>

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 1