I'm trying to create another section and apply CSS from the assets folder. But when I put {{ 'style-section-block.css' | asset url | stylesheet_tag }} to the page where I want to apply the CSS, it also affects the other sections, even though I only Put in the parts I want to change.
I want to be able to edit part of a page
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you want to apply a specific section of CSS, first add a unique class or ID to the section you want to style. After using this unique class or ID in your CSS file, you can style the section. Example is
"my-section" is the unique class name of the section. You can use the class name to add styles to a section.
.my-section { font-size: 24px; }Based on Shopify themes. You can conditionally use CSS files based on the current page handle or page template. From my idea, you can do this "template" or "page.handle" variable in your theme's "layout" file. I mean the "theme.liquid" file. You can add the following code to the "head" section of your "layout" file.
{% if template contains 'your-specific-template' or page.handle == 'your-specific-page-handle' %} {{ 'style-section-block.css' | asset_url | stylesheet_tag }} {% endif %}Replace "your specific template" with your template name, or "your specific page handle" with your page handle name. And remove CSS links from other sections.