Chaning CSS for Home Page Only | Shopify
Question
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.
2 answers
solution1
0 2021-11-20 20:27:48
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.
solution2
0 2021-11-25 16:44:41
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 {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.