Pricing Plan Table: Box Design

What does this code do?

This technique will allow you to add a pricing plan table with the option for an outline, growing animation on hover, and shadow. This design uses images to create a box or rectangle style table.

Create Your Images

This table is actually created by using Stacked Image Blocks instead of code. The first thing you need to do is create an image that contains the name of the pricing option. Make sure you name the image the name of the pricing option for SEO reasons. It is also a good idea to compress these images. The pricing plan above was created using the following 800px by 200px images in Canva.

Create and Style the Table

Click to edit the page where you want the pricing table to be and place two (or more) stacked image blocks beside each other. The number of image blocks should reflect the number of pricing options you have.

Place the price in the image title and the details of the plan in the image’s description. In the Design Tab choose the Image Link to be displayed as a button.

You can then style the text and button for the image block in Site Styles.

Code Snippets

The following code will add an outline, shadow and growing hover animation to your pricing table.

Copy and paste this code into Design > Custom CSS

Squarespace 7.0

#PAGEID {
  .image-block-outer-wrapper {
    outline: 2px solid black; /* outline */
    padding-bottom: 20px; /* space between button and bottom outline */
    -webkit-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    -moz-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    -webkit-transition: transform ease 0.8s; /*growing animation*/
    transition: transform ease 0.8s; /*growing animation*/
  }

  .image-block-outer-wrapper:hover {
    -webkit-transform: scale(1.03) !important; /*growing animation*/
    transform: scale(1.03) !important; /*growing animation*/
  }
}

Squarespace 7.1

#COLLECTIONID #page .page-section:nth-of-type(1) {
  .sqs-block-image-figure {
    outline: 2px solid black; /* outline */
    padding-bottom: 20px; /* space between button and bottom outline */
    -webkit-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    -moz-box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    box-shadow: 13px 14px 13px -10px rgba(0, 0, 0, 0.78); /*shadow*/
    -webkit-transition: transform ease 0.8s; /*growing animation*/
    transition: transform ease 0.8s; /*growing animation*/
  }

  .sqs-block-image-figure:hover {
    -webkit-transform: scale(1.03) !important; /*growing animation*/
    transform: scale(1.03) !important; /*growing animation*/
  }
}

If you would like a background colour added to the table add the following code before outline code but after the “ { “.

background: white;

Customize

If you do not want the outline, shadow, and/or hover animation just delete that part of the code.

If you would like a different shadow, go to Box Shadow CSS Generator by CSmatic and create the shadow you would like to appear. Then replace the shadow code above with the code from the generator.

How To Use It

1. Create and style the images and table.

2. Copy and paste the code as indicated above.

3. To learn how to find a collection id or page id check out our Start Here guide.

4. If using Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Customize the outline, shadow, and or growing animation.