How To Target One Thing in Squarespace with Code // CSS Targeting Tips for Squarespace

---
This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.

We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!

I am using my Squarespace version 7.1 demo site; block ID’s exist in version 7 but things like page sections and collections are a little different depending on what theme you are using.

Here is a quick recap of order of ops discussed in the video:
#collection-id [data-section-id] #block-id .selector

Here is a quick rundown of the typical symbols used:
Using a data section? Add [square brackets]
Using a block ID? Start with a #
Making one code change to multiple targets? Separate them with a comma.

Here is an example of changing H2 text color in a block id:
#block-123456 h2{color: orange}

And here is an example of changing all the buttons in a data section to blue:
[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}
---
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Edited
Just Starting with Squarespace CSS?

Awesome! 😍

---

This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.

We’ll take a look at the three main types of unique ID’s - collection, section, and block - and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!

I am using my Squarespace version 7.1 demo site; block IDs exist in version 7, but elements like page sections and collections are a little different depending on what theme you are using.

Here is a quick recap of order of ops discussed in the video:

#collection-id [data-section-id] #block-id .selector

Here is a quick rundown of the typical symbols used:

Using a data section?
Add [square brackets]

Using a block ID?
Start with a #

Making one code change to multiple targets?
Separate them with a comma

Here is an example of changing the H2 text color in a block id:

#block-123456 h2{color: orange}

And here is an example of changing all the buttons in a data section to blue:

[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}

---
---
---
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

[InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!

[cinemaric]

Thank you becca for all that you do. You are very much appreciated!

[marie-stellamakoumbou]

I rarely comment on Youtube videos, but THANK YOU SO MUCH! I was trying to upload videos with the 9:16, so I watched your video about how to change the video block ratio on SquareSpace, which, worked, but it did so for ALL the videos on the site!

[patriciomartinez]

You are a star! Thanks for sharing all this knowledge. The best SS tutorials.

[fitzmauriceworks]

Terrific. So well explained and enabling.

[JeannetteWeinstein]

Hello - thank you for all of your help. Is there a way to put the summary image below the title and description?

[browsersydney]

thank you so much. You've saved me several times already. I was wondering if you are able to add CSS code to one element across your whole site. Eg. Change all image carousels or all people carousels but it won't change it in simple list.

[ydillon]

Hi, I was curious if you knew of a way to make multiple product variation buttons all different styles. I found a way to use an image as a product variant button, only problem is it uses that image for all the buttons and not just my 1st product variant.

[ruthhowsamdesign]

Hey Becca!
Thanks for the great code.

I'm trying to use this to target about 15 different text/images on one page, same section.

I'm trying to target multiple block-ids within the same section, but when I add a comma to separate them, it doesn't work, and code only applies to the last block-id I enter.

For example, here I am trying to target 2 block ID's:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1694528858998_6548, #block-0b61a32fa7be91cf579f {
opacity: 0;
transition: opacity 1s
}

#block-yui_3_17_2_1_1694528858998_6548, {
opacity: 1;
transition: opacity 1s
}
}


But the effect only works on the last block-id (in this case, the one ending in 79f).

Ideally, I'd like to target 15 text/images, just separated by a comma - is this possible? I've been trying for about a week to be able to do this but really struggling!

THANKS!!

[elijahaaron]

What about changing atributes to entire blocks on the whole site (like changing how to the add to cart loooks or giving all code injection and image blocks no padding)

[AmyFeiman]

I have my color palette set, but I'd like to change a section background color - outside of my color palette - I have located the section ID but when I code {background-color: #hexcolor} it doesn't change the color. What am I doing wrong?

[sarahnikas]

hello! I just did this and it worked! But then all of a sudden, my code is showing up at the top of the actual page! I even tried deleting the code all together and it's still there! Help!

[zahraarcher]

Thanks Becca. I've tried and tried and failed with this: I want to hover over text and change the section background colour. I can only manage to get the text background to change colour on hover.

[and.coaching]

Appreciate all the content support- however, when I put in the code (and the collection ID) it doesn't do anything? Can you help I'm on 7.1

[KatharineForgan]

Hi, super useful but struggling to integrate with another of your tutorials: I made 2 columns for simple lists on the mobile view by adding your code to the page header code injection, but I only want it to target one data section of the page. Does this targeting not work in the page header code injection? See my attempt to integrate, where am I going wrong as this code still affects the whole page! Thank you so much.


<style>
@media only screen and (max-width: {grid-template-columns: repeat(2, 1fr); grid-gap: 10px!important} 1rem!important}  .list-item{padding: .5rem!important}}
</style>

[BlueMAnimations]

Hi! I have a question... How do you change the Language text to uppercase?

[MARVELousBros]

HELP! I HAVE A GRIDDED PORTFOLIO PAGE AND WHEN U HOVER OVER A THING IN THE GRID IT SAYS THE NAME OF THE PAGE IT TAKES YOU TO OVER IT HOW DO I CHANGE THE FONT OF THAT!?!?

[anawile]

Not kidding, my first thought was Is it Tuesday? 😁

[ElishaZepeda]

This is honestly where Squarespace loses me to Wix. They make it so difficult to simple change a specific single item on a page - whereas Wix makes it so that you simply click the exact item you want to change.

Want to change the color of a button? On Wix, click that button, all your options are there. Easy!

Well on Squarespace, you have to:
save your site -> edit site styles in a different window -> choose color (want to change font? different window! start again!) -> scroll down to the specific button (is this a primary, secondary, etc.) -> etc.

Or you can learn how to custom code. Which defeats the purpose of "easily" building your site.

If it weren't for helpful accounts like these I'd be completely lost.

[fezenstein]

Hello - I'm targeting specific section on page and am able to do that by searching for data-section-id - and finding the long string of numbers. that's fine once. I want this section to be on many pages, so I save the section - and add it to a new page, but then finding the id again and again makes for cumbersome code? is there a way of saying this section has an id of "sticky-categories" and then everytime I place that section into a page - the styling that is associated with "sticky-categories" gets applied?

doing this: [data-section-id=”63d2d9da32af660a9bb515e7”],
[data-section-id=”63d3f99f03e4472872bcea8a”],
[data-section-id=”63d3f9d3e68141630f2d2375”],
[data-section-id=”63d3fa0096f1a24a26e4a399”],
[data-section-id=”63d3fa337d11266dadde5407”],
[data-section-id=”63d3fa5bfc703f102cee7de3”],
[data-section-id=”63d3fa9ff18e2f67b26f99ed”]

for every page of a 30-40page website isn't a good solution? any ideas how to streamline this?