remove cart icon from home page

painnpill · ‎10-21-2024

Hi I am trying to figure out how to hide the cart icon from my homepage header but have it still show on the product page header. Is this possible?

Moeed · ‎10-21-2024

Hey @painnpill

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
a#cart-icon-bubble {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

rajweb · ‎10-21-2024

Hey @painnpill ,

Yes, it’s possible to hide the cart icon from the homepage header but keep it visible on the product page header by applying conditional logic using Liquid and CSS.

Follow these steps:

1. Online Store > Themes > Edit Code

2. Open your header.liquid or theme.lioquid file (depending on your theme).

3. Find the code block responsible for the cart icon. It may look something like:

<a href="/cart" class="cart-icon">
  <img src="{{ 'icon-cart.png' | asset_url }}" alt="Cart">
</a>

Wrap the cart icon's code inside a conditional Liquid statement like this:

{% unless template.name == 'index' %}
  <a href="/cart" class="cart-icon">
    <img src="{{ 'icon-cart.png' | asset_url }}" alt="Cart">
  </a>
{% endunless %}

This ensures that the cart icon won't show on the homepage (index template) but will appear on other pages, including product pages.

2. Using CSS with Liquid

1. Add the following code in the theme.liquid or header.liquid:

<a href="/cart" class="cart-icon {% if template.name == 'index' %}hide-cart{% endif %}">
  <img src="{{ 'icon-cart.png' | asset_url }}" alt="Cart">
</a>

Go to Assets and open your theme’s CSS file (e.g., theme.css or styles.css).

Add this CSS at the bottom:

.hide-cart {
  display: none;
}

Let me know if this works for you!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

Moeed · ‎10-21-2024

Hey @painnpill

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

painnpill · ‎10-21-2024

deadiloveyou.com

Moeed · ‎10-21-2024

Hey @painnpill

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
a#cart-icon-bubble {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

painnpill · ‎10-21-2024

ive looked everywhere for the </body> tag in theme.liquid and can't find it, do you have a line number it may be on?

Moeed · ‎10-21-2024

It should be in the end of the file and just incase if you can't find </body> then you can also add it below <head>

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

painnpill · ‎10-21-2024

worked perfect thank youu

Moeed · ‎10-21-2024

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

ZestardTech · ‎10-21-2024

Hello @painnpill

Yes, it’s possible. Could you please share the store URL and password with me so I can check and provide you with the exact solution?

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

painnpill · ‎10-21-2024

deadiloveyou.com pass:iloveyou

ZestardTech · ‎10-21-2024

Hello @painnpill

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Layout > theme.liquid and paste this at the bottom of the file:

{% if template == 'index' %}
    <style>
      #cart-icon-bubble {
    display: none;
}
    </style>
{% endif %}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

remove cart icon from home page