Creating a product on Shopify

When you want to add a new product, you’re going to need to first add it to Shopify. The process is fairly straightforward, and there’s a lot of really useful guides already online in case you get stuck, but I’ll outline the most important info to add. On the products page accessible from the sidebar to the left, there’s an “Add product” button in the top-right corner. From there, you can mostly copy-paste information about the product, like the name, description, images, and price. The SKU, inventory tracking, and shipping weight are all for your own convenience, so it’s up to you how you use that. If you want a reference for what information to fill in, you can look at some of the products that I’ve made.

The other details are pretty simple, but I’d really recommend add customising the search engine listing preview at the bottom, and adding alt text for product images, which you can get to by hovering over images you’ve uploaded and clicking ALT. This helps Google know what the image is about, and also increases accessibility for people who can’t view the images.

Creating a product page on Squarespace

Once you’ve got the product on Shopify, you can move to adding it onto your site. Because we’re subverting the built-in ecommerce tools Squarespace has, it takes a few more steps to complete. Instead of adding products to Squarespace’s “inventory”, we have to manually create pages for each product. However, this is pretty easy to do, since all you have to do is duplicate the pages I’ve already made. To do this, you have to find the product pages located inside the “pages” tab.

While most of the pages I’ve created are all basically the same, you can just duplicate one of them and replace the info you need. You can duplicate a page by hovering over one and clicking the gear icon that pops up. This will open up a dialogue box, which has a “duplicate page” button add the bottom. You can then replace the new page’s title with the name of the product, and you’ve just created a new product page!

Customising a page is probably the most technical part of the process. The components of a page are the breadcrumb (navigation header), Product name, Shopify buy button, Description, and Image gallery.

The product name, description, and image gallery are all normal Squarespace blocks. These can easily be changed by clicking the “edit” button when you hover over the product info on a page.

The breadcrumb and buy button are a bit more complicated. In order to customise these, you’re going to have to mess with a little bit of code.

Changing the breadcrumb is fairly straightforward. When you hover over the block, a button will appear with the option to edit the code. When you click on the edit button, you’ll see text that looks like this:

There are two parts to this code. First, there’s a link to the preview page, (either the gift boxes page or the artisanal products page) and the current product you’re looking at. In order to change these, all you have to do is replace the link of the current page, and the name of the product.

The buy button is the most complicated aspect of the page, but it only involves copying code from Shopify and pasting it into Squarespace.

To change the buy button to link to the current product, you have to go back into Shopify and click the “Buy Button” tab at the bottom of the sidebar. From here, you can select your product, choose the template on the left, and click “Generate code”. This will generate all of the code for the buy button, but you only need to replace the very top 35 lines, ending with moneyFormat: '%24%7B%7Bamount%7D%7D',

Back in Squarespace, click on the “edit” button on the “embedded scripts” block. You can then highlight to the end of moneyFormat: '%24%7B%7Bamount%7D%7D', and paste the code you copied from Shopify. Now hit apply, save, and refresh the page. Your product page is done!

Adding products to the gallery

The last step is to add the product page to either the “artisanal products” or “gift boxes” page. To do this, go to the page and click the edit button that pops up when you hover over the list of products. From here, you have to move your cursor next to where you where you want your product to go, and a black line will pop up. When you click on the line, you can choose which block you want to create. All of the products are made with the “stack” block. Once you select the block, hover over it and click edit. You can then add an image and link it to the page it belongs to by clicking on “Design” in the top right of the window. Here you can tell the block to have the “Image link” appear “On Image”. Once selected, you’ll have the option to say where the link should go. To do this, click on the “Clickthrough URL” button, click on the “Content” tab, and scroll down to the name of the product page.

After that, all you have to do it enter in the title and price of the product, click save, and you’re done!

If you guys have any questions, feel free to ask me or Squarespace’s customer support. They’re available to chat most of the day, and can give step-by-step instructions on how to fix any problem you’re having.