How can I make CSS in different sections independent?

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
10860 2141 2276

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
10860 2141 2276

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
10860 2141 2276

You must change class of your div to avoid JS

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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