How to Select Content Blocks with CSS

For users wanting more flexibility and customisations for their store, there are CSS selectors that allow users to select content blocks, child content blocks and other elements for full styling with your own custom CSS.

The StoreConnect system allows the use of custom CSS and JavaScript throughout your store. Adding Custom CSS is covered here, and store global styles here.

To select content blocks for styling, each has it’s own unique identifier that can be used to select the elements and apply styles to them.

The identifier is user generated and specified underneath the Content Block Name, as you can see here:

Contact Block Identifier


 

Using the Contact Block ID as a CSS Selector

In your custom CSS Field, you can simply insert your unique identifier into the following code
[data-cb="your-id-here"] to select and style your Content Block.

For example:

[data-cb="main-cta"] {
   max-width: 1200px;
   margin: 0 auto;  
}

If you need to apply the same style to multiple Content Blocks - you can aggregate selectors for the styles to be applied.

This could be achieved as follows:

[data-cb="main-cta"], [data-cb="main-info"],
[data-cb="secondary-cta"], [data-cb="main-new"] {
   max-width: 1200px;
   margin: 0 auto;  
}

Using your Page as a CSS Selector

You can also target a whole page which helps it terms of css specificity, some examples:

Home page: #SC-pages-home Page template: #SC-pages-show Articles Index: #SC-articles-index Category template: #SC-categories-show Product page template: #SC-products-show

 

 
Back to Documentation