Question 355948 in Shopify Question posted in
The Shopify help center can be found here.

How to load CSS on specific section on Shopify Themes?

I am trying to create another section and apply a CSS that is in assets folder. But when I put the {{ 'style-section-block.css' | asset_url | stylesheet_tag }} to the page that I want to apply the CSS to, it affects the other sections as well even though I only put in the section that I want to change.

I am expecting to be able to edit one section page

Tags:

2

Answers


  1. 0

    If you want to apply CSS specific section, first you add a unique class or ID to the section you want to style. After use that unique class or ID in CSS file you can style section. Example is

    <div class="my-section">
  <!-- section content -->
</div>

    "my-section" is the unique class name of the this section. You can use that class name add style to section.

    .my-section {
      font-size: 24px;      
    }

    According to shopify themes. You can conditionally use the CSS file based on the current page handle or page template. According my thinking you can do this ‘template’ or ‘page.handle’ variable in your theme’s ‘layout’ file. I mean ‘theme.liquid’ file. You can add below code into ‘layout’ file ‘head’ section.

    {% 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 link from the other sections.

    Login or Signup to reply.
  2. 0

    To apply CSS styling to a section in Shopify, you have several options:

    1. Include a Separate CSS File:

      • You can create a separate CSS file and link it to the section in question. This allows for organized and reusable styling across your Shopify theme.

    2. Inline CSS within Section File:

      • Within the section file, you can utilize the {%- style -%} block to add specific CSS rules directly. This method is useful for section-specific styling.

      Example:

      {%- style -%}
  .separator {
    border-bottom: 1px solid #000000;
  }
{%- endstyle -%}

    3. Dynamic CSS with Liquid:

      • If you need dynamic CSS based on settings or variables, you can use Liquid within a <style> block. This approach allows for customizing styles based on user-defined parameters.

      Example:

      <style>
  .separator {
    border-bottom: {{ section.settings.separator_bottom_size }}px solid {{ section.settings.separator_bottom_color }};
  }
</style>

    These methods provide flexibility in applying CSS styles to sections within your Shopify theme, catering to various styling requirements and scenarios.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search