The Styled Square | Premium Squarespace Website Templates

View Original

How to customize Squarespace 7.1 shop categories design with CSS

Pin to save for later!

In this Squarespace tutorial, we guide you through 4 options to customize your shop page categories with CSS:

  1. Update shop category font size

  2. Remove vertical line separator between shop category options

  3. Transform your shop categories into buttons

  4. Stack shop categories on mobile devices

Whether you're looking to add a personal touch of design or add functionality to your Squarespace shop — this post is your step-by-step tutorial to tweaking your template to perfection. Perfect for beginners and seasoned designers alike, this guide is all about empowering you to make your Squarespace shop truly your own.

Option 1:

Update category font size

From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below


Update “1rem” to font size of choice.

EX. change value to 0.75rem for a smaller font size. You may also use pixel units — 16px instead of 0.75rem

See this content in the original post

Shop Musing / Squarespace 7.1 website template

Option 2:

Remove vertical line separator between shop category options

From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below

See this content in the original post

Shop Musing / Squarespace 7.1 website template

Option 3:

Transform your shop categories into buttons

From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below

See this content in the original post

The CSS breakdown:

  1. ‘border-radius’ controls the rounded edges on the button. For square buttons, update 5px to 0px or remove line of CSS completely.

  2. ‘color’ controls the color of the text, update HEX code #000000 to color of choice.

  3. ‘background-color’ controls the background color of the button. Update HEX code #ffffff to color of choice. Remove line of CSS if you prefer a transparent background.

  4. ‘border’ controls the thickness and color of the button border:

    For a thicker border — change 1px to a larger value like 3px.

    Update HEX code #000000 to color of choice.

  5. ‘padding’ controls the padding of the button:

    The first value, 5px, controls the height of the button.

    The second value, 20px, controls the width of the button.

Shop Musing / Squarespace 7.1 website template

Option 4:

Stack shop categories on mobile devices

From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below

See this content in the original post

Don’t forget to save all changes!

Use discount code STYLEDSQUARE10 to save 10% off your Squarespace subscription

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!

More tutorials

See this gallery in the original post