Embed a pricing table into a squarespace site

Step-by-step guide

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:

step1

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.

selectcustomcss

step2

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.

aboutpage

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).

droplets

You will now be given an option of what type of content you would like to add - select 'code'.

selectcode

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.

end

David Bainbridge

Coveloping co-founder and regular contributor to the Coveloping blog. David is a contract web developer based in Bristol, UK also posting code snippets and tutorials on the Code Synthesis blog.

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

Your email address will not be published. Required fields are marked *

Code Copied!