To sell Payhip products on your Squarespace site, we'll guide you through three integration methods:
This method lets you add a direct link to your Payhip store on your Squarespace site.
The most straightforward method to include a link is by integrating it into your Squarespace website's navigation menu. To achieve this, begin by accessing the Pages panel and then click the "+" icon next to the main navigation.
This action will prompt you to input a link title and the URL for your Payhip store. Once you've entered those details in the text field, don't forget to click on " Save" and publish your changes afterward.
This method lets you add a direct link to a specific product page on your Squarespace site.
If you wish to feature a product on your site but intend to sell it using Payhip, you can easily direct potential buyers to your Payhip product page through the addition of a product link. To achieve this, you'll first need to create a section to showcase your product.
After manually the product image and description, your next step is to create a button. By clicking the " Add Block" feature, you should see the different elements you can add to fully customize your site.
Select the " Button" option, and this will prompt you to enter the product page URL, which you can get from Payhip by clicking the "Share / Embed" button on your products page here: https://payhip.com/products.
How you choose to insert product links into your Squarespace site is entirely up to you — be it through buttons or hyperlinked images. Regardless of your selection, you'll need to utilize Squarespace's "Add Block" feature to accomplish this.
This method lets you embed Payhip's cart system on your Squarespace site.
Please note that this process requires you to add Javascript to your Squarespace site, which is only available on their Business plan and above.
There are two types of buttons that you can select from when embedding Payhip:
Once you’re done creating your button, click the " Get Your Embed Code" button. This will give you two snippets of code.
Step 2: You'll have to utilize Squarespace's "Add Block" functionality and choose the "Embed" option. This will enable you to insert the code generated to display the Payhip buttons. In this example, we opted for the "Add to Cart" button type, which lets you embed Payhip's cart system into your site.
Keep in mind that you won't be able to test the embedded buttons in preview mode, so you'll need to save and publish your changes first. If everything is functioning as intended, it will add the product to the customer's cart and display the cart system on the side.
When your customer is ready to proceed with the checkout, it will seamlessly direct them to the checkout page without navigating away from your Squarespace site, and that's it.