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

Chaning CSS for Home Page Only | Shopify

I’m using Shopify to build out my website and I like the home page nav how it is, but I’d like to change the other pages nav bar to 100% width. Since they all share the same code I know I’ll have to build out an if statement, I’m just not familiar enough with Shopify to build it out.

{%if page.handle == "Home page"%}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif %}

Here is the code I was working with that doesn’t work. I was just seeing if I could get the if statement to work but I could not.

Tags:

2

Answers


  1. 0

    On the index page, you don’t have a "page" object.

    You can try with this:

    {% if template.name == "index" %}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif %}

    Which uses the template name to check if it’s the index page (Home Page).

    Or this:

    {% if request.path == "/" %}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif%}

    Which uses the path of the URL to check if it’s the index page.

    Login or Signup to reply.
  2. 0

    Asset files do not know what page you’re on

    The files in your assets folder are intended to be static resources that can be strongly cached by the server and the browser. This means that every time a resource in the assets folder is requested, the exact same file will be returned by the server.

    This means that asset files do not know about any of the dynamic information on your website – including what page the viewer is on, what product they’re viewing, the contents of the cart, etc. The only Liquid variables that you should be accessing in your asset files are the theme’s settings variables and translations.

    There are many ways that you could rearrange your code or site structure to accommodate for this, though. Some ideas include:

    • If you have a lot of rules that apply to a specific page, make an asset file for those rules and in your theme files wrap that file’s inclusion with the conditional check.

    Example:

    {% if template.name == 'index' %}
  {{ 'index-styles.css' | asset_url | stylesheet_tag }}
{% endif %}
    • Add the {{ template.name }} and/or {{ template.suffix }} as class names or data attributes to the <body> tag or some other high-level tag. You can then scope your selectors for specific pages quite easily.

    Example:

    HTML:
<body class="template-{{ template.name }}">`

CSS:
.template-index .page-width {
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search