Solved

How can I change the basket icon color on different pages?

domo2
Excursionist
42 0 12

Hello, 

 

I need the basket icon on the first page in white but on all the other pages in black. At the moment its white on every page. Can somebody help me, please? 

 

https://z74af298jnd88iq8-69711397132.shopifypreview.com

 

Thank you

Accepted Solutions (3)

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Hi @domo2 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

 

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

{% unless page.url == '/' %}
<style>
  .header__icon--cart>svg>g {
    fill: black;
}
</style>
{% endunless %}

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

View solution in original post

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Sorry about that, You can try again with this code below:

{% if template == 'index' %}
  <style>
    .header__icon--cart>svg>g {
      fill: black;
    }
  </style>
{% else %}
  <style>
    .header__icon--cart>svg>g {
      fill: white;
    }
  </style>
{% endif %}

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

View solution in original post

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Hi @domo2 ,

You can add more this code below to theme.liquid:

<style>
.header__icon--cart>svg {
    width: 30px;
    height: 30px;
}

</style>

Note: You can adjust value to fit your store

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

View solution in original post

Replies 11 (11)

webizito
Shopify Partner
77 5 6

Hello @domo2 

Please follow this step:
In your Shopify theme, find the theme.liquid or layout/theme.liquid file and locate the <body> tag. Add a unique class to it for the first page. For example:

<body class="{% if template.name == 'index' %}first-page{% endif %}">


Then add CSS in your css file:

/* Default (black) cart icon color */
.header__icon--cart svg g{
    fill: #000;
}

/* Change cart icon color on the first page (white) */
.first-page .header__icon--cart svg g{
    fill: #fff;
}


Thanks.

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
domo2
Excursionist
42 0 12

Unfortunately now its black on all pages

webizito
Shopify Partner
77 5 6
<body class="{% if template.name == 'index' %}first-page{% endif %}">


Add this condition in your body tag

✌ We are volunteering to help | Likes and Accept as Solution will be much appreciated.
Need a Shopify developer?  | Chat on WhatsApp | Hire us at Email: info@webizito.com || Website: www.webizito.com
domo2
Excursionist
42 0 12

don't know what I'm doing wrong, it's still black on all pages..

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Hi @domo2 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

 

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

{% unless page.url == '/' %}
<style>
  .header__icon--cart>svg>g {
    fill: black;
}
</style>
{% endunless %}

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
domo2
Excursionist
42 0 12

Its also black now on all pages

 

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Sorry about that, You can try again with this code below:

{% if template == 'index' %}
  <style>
    .header__icon--cart>svg>g {
      fill: black;
    }
  </style>
{% else %}
  <style>
    .header__icon--cart>svg>g {
      fill: white;
    }
  </style>
{% endif %}

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
domo2
Excursionist
42 0 12

it worked, thank you very much! Last question: how do I change the height and width of the basket icon? Thank you!

Beae_Anthony
Shopify Partner
436 167 175

This is an accepted solution.

Hi @domo2 ,

You can add more this code below to theme.liquid:

<style>
.header__icon--cart>svg {
    width: 30px;
    height: 30px;
}

</style>

Note: You can adjust value to fit your store

 

Best regards,

Anthony

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
domo2
Excursionist
42 0 12

Appreciate you my guy!!

Beae_Anthony
Shopify Partner
436 167 175

Glad that helps you! Have a good day 😊

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog