One of our most popular tools at Coveloping is the pricing table generator, and one of the most common questions we get is how to embed pricing table code into a squarespace site. In this article we'll show you how, step-by-step.
Generate your pricing table
To get started, generate your pricing table using the coveloping pricing table generator. For tips on how to use the tool, and how to design a good pricing table check out our earlier article on using the generator.
Once you've finished creating your pricing table you will have two sets of code - HTML and CSS, which you can obtain from the final section titled 'HTML & CSS'.
Applying the CSS to squarespace
Next, login to your squarespace account to edit your site. In the editing section you will see a menu like below:
From the menu, select 'DESIGN' and then 'Custom CSS'. In this screen you can copy the CSS code from the Coveloping page into the box provided. Click save.
Applying the HTML to squarespace
Next, go back to the main menu and select 'PAGES'. Choose the page where you want to put the pricing table, in this example we're going to place it into a default 'About' page.
On the page, hover over the section that you want to edit and click the 'EDIT' tab.
If you now hover over the content you will see that grey droplet icons appear on the left side - if you hover over these a thin black line will appear that will represent where the block will go (e.g. a small box on the left or a full width block). Choose one that suits where you would like to put the pricing table and click it (we recommend using a full length block).
You will now be given an option of what type of content you would like to add - select 'code'.
Finally, copy in the HTML code from Coveloping, paste it into this box and click save. The pricing table should now appear in your preview mode. Using the default functionality you can also drag the block to a different location if you wish to move it.