Hi I would like to change the color of my header and the icons there but only on the homepage and does not carry to the other pages, how can I do that?
Hello @Spankmedaddy1 ,
Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?
Hello @Spankmedaddy1
You can achieve this by adding some CSS that targets only the homepage. Here’s how:
Steps:
1.Go to your Shopify admin panel > Click Online Store > Click Themes.
2.Find your current theme and click Customize.
3.Click on Theme settings and open the Custom CSS section (if available).
4.If there’s no direct Custom CSS option, go to Online Store > Actions > Edit code.
5.Open your theme.liquid file.
6.Find the section and add the following CSS inside a tag:
CSS Code:
{% if template == 'index' %}
{% endif %}
Explanation:
The {% if template == ‘index’ %} condition ensures that the styles only apply to the homepage.
.site-header changes the background color of the header.
.site-header .icon changes the color of icons in the header.
Notes:
.Replace #your-color with your desired background color (e.g., #ff0000 for red).
.Replace #your-icon-color with your preferred icon color.
Thank you
Hi @Spankmedaddy1 ,
Please go to Actions > Edit code > Layout > theme.liquid file and add the code before the ‘’ tag:
{%- if request.page_type == 'index' -%}
// code CSS
{%- endif -%}