How can I make CSS in different sections independent?

react-beginer
Shopify Partner
12 0 0

3EA452EF-E73C-4964-BB89-6D9F6084F32F.png

 

5CFEA011-1B5F-43ee-904F-471B19D13787.png

07A9B135-71B0-48a1-BFBC-6F68484336F3.png

EF427DBD-60E6-4bd9-B3B5-A2E088768116.png

 Can the files in each Section be shared? The CSS in my two pages can be affected by the CSS defined in one page. How can I solve the problem so that they can be used independently?

 

   

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7532 1454 1451

You must add ID of section to your CSS code so it will not affect to other sections are using same class

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

react-beginer
Shopify Partner
12 0 0

rendered size

intrinsic size

Can the files in each Section be shared? The CSS in my two pages can be affected by the CSS defined in one page. How can I solve the problem so that they can be used independently?


It means that the Sections nodes in shopify are interoperable. I can't treat Sections as an independent page but a module, so I have to follow CSS and cannot repeat IDs in one page, right?

Dan-From-Ryviu
Shopify Partner
7532 1454 1451

You can add !important to your CSS so it will not be affected by same code from another file or you can add that code to Custom CSS of section Screenshot 2023-11-29 at 10.49.21.png

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

react-beginer
Shopify Partner
12 0 0

You can use !important to avoid being affected, but what should I use to prevent my JS code from being affected?
Is the custom CSS principle provided by Shopify !important? Is there a solution for JS?

Dan-From-Ryviu
Shopify Partner
7532 1454 1451

You must change class of your div to avoid JS

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

react-beginer
Shopify Partner
12 0 0

Then isn't this Sections block equivalent to a Div, not an independent page?

react-beginer
Shopify Partner
12 0 0

Also, can I define my own search content with the Shopify liquid template? Use Axious to request the interface provided by Shopify