Chaning CSS for Home Page Only | Shopify

1 0 0

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

{%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.

Reply 1 (1)
Shopify Expert
803 71 236

Without seeing your shop I can't say if that CSS code will work or not, but the Liquid if statement will definitely not work. If you want to insert the CSS on the homepage only you would have to use something like this:


{% if template == "index" %}
...CSS code...
{% endif %}



The page.handle is the internal URL-encoded title of a page, e. g. if the title is "FAQ Page", the handle would be "faq-page" (if the auto-generated handle wasn't manually modified). The page Liquid object also only applies to actual Pages, the things you can find under Online store > Pages. So that code would not work on the homepage because the page object isn't set in that case because the homepage isn't a Page.

★ Smart Upgrades, Tips and Tutorials for Shopify themes:
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up