Search code examples
cssstylesshopifyliquid

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}
}
Solution

  • 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.