Changing the position of my Cart Icon Dawn theme

Shopify Discussion
1

Hi i am wondering if anyone can help me change the position of my cart icon in the top to align with the Search icon and the other text on my header?

Link - https://egco6qhh6rc0ajqt-71948271909.shopifypreview.com

1 Like
2

Hi @InnHaus

The issue is the size of the window of you SVG. However, this can be fix by the code below

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#cart-icon-bubble svg {
    top: 10px;
    left: 10px;
    position: relative;
}
  • SAVE

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @InnHaus ,

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

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/base.css file.

  3. Add the code at the end of the file:

.header__icon--cart {
    top: 10px
}

Best regards,

Anthony

1 Like
4

Hi, Thanks for this it has worked and now aligns with everything else! I have another question one this icon.

When I add a product to the cart it will just add a small black circle instead of the number of products in the cart, would you have an idea on how to fix this? Please let me know if you need an example or if you can view this from the store preview?

1 Like
5

Hi @InnHaus

Your welcome. You can add the code below to fix the issue with the cart bubble.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.cart-count-bubble span {
    color: white;
}
  • SAVE

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

That’s great it worked thank you :slightly_smiling_face: