I have created a custom block item that my client plans to use on multiple pages. For each block rendered on a page, there is a parent div that gets rendered with the class .index-section that has a vertical margin with my theme. I’m looking for someway to edit this parent element’s margin only if the block is my of my custom type (title-bar). I don’t want to have to add custom CSS to each page. Is there a way to make this happen from my liquid Snippet?
First you need to add another class to distinguish this section from other sections, because class “index-section” will use for many sections and when css on it, it will not be good. Refer https://shopify.dev/themes/architecture/sections/section-schema#class
Ex: https://i.imgur.com/pcwtIjE.png
If this section shows up on a lot of pages and you want to differentiate it, you can add a template for the body and differentiate it. Refer https://community.shopify.com/c/Technical-Q-A/How-do-I-add-a-custom-page-id-so-I-can-make-individual/m-p/1281484#M63446
https://i.imgur.com/rQio29T.png
Hope it clear to you.
