(Squarespace) How to Assign Class Name for Section?

Pro Tips Other Tips
1

When you need to target a section in Squarespace, you will need to use [data-section-id].
When you need code that affects multiple sections, you will need to use [data-section-id1], [data-section-id2,…

If you intend to build templates to sell to customers, your customers will need to learn how to find data-section-id, which will be annoying for them.

You can use this code to assign a class name to a specific section
First, add a Code Block to section where you want to assign class name

<div class="section1"></div>

Next, add this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
 jQuery(document).ready(function($){
  $(".code-block .section1").parents(".page-section").addClass("section1");
  $('.code-block .section1').parents('.code-block').addClass('hide-code-block');
 })
</script>
<style>
.hide-code-block {
        display: none !important;
}
</style>

These code mean

  • Find a Code Block, if Code Block code contains class “section1”, then add this class name to Section Tag
  • Find a Code Block, if Code Block code contains class “section2”, then add class name: hide-code-block
  • Remove Code Block

and when you want to use data-section-id, just use this class name instead

section.section1