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

custom css on certain url Liquid Shopify

I am trying to add css on certain URL Liquid Shopify. Only on that subpage I need that element in different style than other pages.
I found in the other liquid code some examples attached inside, but it is not working. Those are my examples I’ve tried:
The element I would like to style has no unique class or id.

<style>
{% if page.url == 'fullUrl' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
</style>

I have tried other things in pure CSS, like:

@document url("http://www.example.com/subpade/") {
#someEmelent {margin: 0 auto}
}
Tags:

2

Answers


  1. 0

    You may use the request object:
    https://shopify.dev/docs/themes/liquid/reference/objects/request#request-path

    So something like this should work:

    {% if request.path contains 'variable_part_of_url' %}
    <style>
        /* your styles */
    </style>
{% endif %}

    Another way would be to create and apply a specific template to your page.
    Then you might add a specific class to body and use it in your CSS file.

    Login or Signup to reply.
  2. 0

    I think what you want is to base your CSS on template title. ex: if you want to a CSS class for a specific collection your can use :

    class="{{ collection.title | handleize }}"

    you can change collection with any template name

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

Back To Top
Search