Shopify themes, liquid, logos, and UX
Hey everyone,
Searched through the community and couldn't find an answer so hoping someone can help me modify the HTML code for this issue.
I added the following code to my theme.scss.liquid:
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
Everything works fine. Except, I want this image to appear on every page of my site EXCEPT the home page (I have a Slideshow section on the home page acting as a header). Can anyone help me edit the HTML so that it displays the header on every page except the home page? Thank you!
Solved! Go to the solution
This is an accepted solution.
Change "unless" to "if" and "endunless" to "endif". Sorry not at a pc right now or I'd just repost it corrected for you.
What kind of file did you add that into? If it's a css.liquid file you can check the template name with liquid:
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless %}
Alternatively if you take that out of a css file, you can perform that action at the opening <body> tag in theme.liquid and wrap it in style tags:
<style>
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless %}
</style>
Thanks for the response Ninthony! I'm not sure exactly how to check the template name? I just added the previous html code into theme.scss.liquid. The header shows up on every page; but it overlaps with the homepage. You can see what the issue is on my site here:
Website: wewantgoodkarma@gmail.com
Password: Wewantgoodkarma
I tried the html you provided on both theme.scss.liquid (in assets) as well as theme.liquid (in layout). But that didn't seem to work. Alternatively, if I could somehow add the Slideshow image thats on the home page to every page, that could work as well. Thanks in advance 🙂
Hi Ninthony, you sent me the following code to add to my theme.liquid in my layout code section. I tried it again and realized I actually need the opposite lol.
This code is only displaying the header image on the home page, and removing it on all other pages (works very well for that). But could you help me with code that removes the header image from the home page, and displays it on all the other pages? Thank you in advance 🙂
<style> {% unless template.name == 'index' %} .site-header { background-image: url("(image name).jpg"); background-size: 100%; } {% endunless %} </style>
This is an accepted solution.
Change "unless" to "if" and "endunless" to "endif". Sorry not at a pc right now or I'd just repost it corrected for you.
Thank you so so so much!!! That worked perfectly! I should've realized it was the opposite. Thank you again for all your help; wishing you a blessed year!
No problem, glad it helped.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024