Best practices when using ids as selectors on duplicated theme

[Alba_SE]

Hey there,

On our published template (Dawn) we're using ids to select divs and sections and overwrite their styles, which works pretty well. As we'd like to test different styles and sections without affecting our store, we duplicated our main theme.

The problem arises when Shopify duplicates the sections of our original template, as it assigns different ids to everything. What was id="ImageWithText--template--21413701845331__image_with_text_KBzkXt" becomes id="ImageWithText--template--22588519907667__image_with_text_KBzkXt", which defeats our main purpose of using this duplicate theme to test things as DOM elements can't be selected on our custom css anymore.

How can we avoid this and use the same selectors on both templates? Which best practices should we follow here to achieve styles' overwriting using the same selectors on both templates?

Any help with this would be much appreciated!

[webwondersco]

@Alba_SE Hope you are doing well.

Instead of using the id for the CSS selectors use class. by using class you can apply that CSS to all available sections which have that class.

so it is easy for you to not write too much code for the same design.

Hope you get an idea

[PageFly-Amelia]

Hello @Alba_SE 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Instead of using IDs like in the example above, it's recommended to utilize classes and selectors like >, +, or :has to accurately target the desired element in your CSS.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[dreamtechzone_5]

Hello PageFly-Amelia!

I am using the Shopify Dawn theme. I have added the social share icon to the product page through coding. I want to keep the icons inside the button. I have added the image below of how I want the button to be placed. And please check my social share is working? Is it possible? Thank you.

Store: https://puppies-paws-shop.myshopify.com/products/50pcs-dog-bowtie-pet-supplies-small-dog-cat-bow-tie...
Password: Admin

Social Share Button

[PageFly-Amelia]

Hello @dreamtechzone_5 

I have tested it. Your social share is working fine.

[dreamtechzone_5]

Thank you so much. But I want to keep the social share icons inside the button. I want to keep it like this image. Is it possible?

[Alba_SE]

Indeed classes and selectors like :has and + seem like the only solution here. As refactoring would take too long with our liberal use of ids, we ended up replacing automatically all of them on VSCode. A 1min solution that, although not particularly elegant, worked.

Thanks!