Best practices when using ids as selectors on duplicated theme

Alba_SE
Visitor
2 0 0

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!

Replies 6 (6)

webwondersco
Shopify Partner
1110 165 162

@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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

PageFly-Amelia
Shopify Partner
471 146 211

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

dreamtechzone_5
Shopify Partner
284 1 34

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

dreamtechzone_5_0-1716038172094.png

 

 

PageFly-Amelia
Shopify Partner
471 146 211

Hello @dreamtechzone_5 

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

dreamtechzone_5
Shopify Partner
284 1 34

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?

Screenshot 2024-03-25 210915.png

Alba_SE
Visitor
2 0 0

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!