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

Shopify (liquid) – add class to div if page template is equal to

Is this possible? I’m working on an existing website and I need to overwrite some styles but only on pages that use my new templates as overwriting the main styles might break the other pages. This is the markup:

<div id="page">

  <main role="main" id="MainContent">
     {{ content_for_layout }}
   </main>

   {% section 'footer' %}

</div>

So adding a class to the page or main element would be ideal.

I’ve managed to achieve this with an if statement to display content but only on a certain template, like this:

{% if template == 'page.job-detail' %}
    <!-- CODE HERE -->
{% endif %}

Not sure how that’d work in relation to classes on a div? There’s probably a few pages I’d need to include so an array or a way I was specify multiple templates would be ideal. Templates like “page.faq”, “page.jobs”, “page.job-detail”.

Tags:

3

Answers


  1. 0

    Why don’t you just add a custom class to all of your pages and target that based on the templates you like to target.

    So you can add the following to the body tag.

    <body class="template-{{ template | replace: '.', '-' | replace: '/', '-' }}">

    And you will get classes like:

    • template-page-faq
    • template-page-jobs
    • template-collection
    • template-index
    • template-customer-login
      etc..

    From there you can use only CSS to style only what you need using the above classes.

    Login or Signup to reply.
  2. 0

    In your template name, you can add a string that would give you a hint that it is a custom page like so,

    "page.custom-faq", "page.custom-jobs", "page.custom-job-detail"

    And you can do this to your HTML

    <div id="page">

  <main role="main" id="MainContent" class="{% if template.suffix contains 'custom' %}your-custom-class-here{% endif %}">
     {{ content_for_layout }}
   </main>

   {% section 'footer' %}

</div>
    Login or Signup to reply.
  3. 0 
    template-{{ template | replace: '.', '-' | handle }}

    Will print template-page-donate for page template with the name "donate"

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

Back To Top
Search