How to change header icons in dawn theme

[Ecomsmartify]

can anyone help me how to change any header icons like this reffrence website I want these website icons in my theme. Thanks

 

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, Please add this code to the style tag above: 

.header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
svg.icon.icon-cart {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%) !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, Yes, It is necessary. Let's add it inside that style tag

[Ecomsmartify · Accepted solution]

so sorry to keep messaging you again and again I'm not soo good at code should I add code like this 👇in this way I use code it's fixed the displacing issue only for cart icon. my other icons like login account, search is behaaving when I hover on that icons the gose up as like the before cart icon. Please can you help me to fix this as well. Please. Thanks I really appriceiate 

<style>
    svg.icon.icon-cart {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%) !important;
}
    .header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

[BSSCommerce-HDL]

Hi @Ecomsmartify, You can try change this: 
Go to Shopify Admin -> Online Store ->Theme -> Edit code. And find these 2 files then change them

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Ecomsmartify]

hi @BSSCommerce-HDL thanks for replying I have tried to add the cart icon in my theme and I got something like this icon upside and not equal space or height. Please help me how I can fix this. As you can see in the below picture the logo that I add is bit up as compare to other icons. I copied this from this website: https://krosskulture.com/

 

[BSSCommerce-HDL]

Hi @Ecomsmartify, 
Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

[Ecomsmartify]

Hey @BSSCommerce-HDL here is the my store URL https://tesdmo.myshopify.com/

And password is 4.

Thanks 

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[Ecomsmartify]

hey @BSSCommerce-HDL 

Thankyou soo much giving your time at this matter thanks. now it's fixed the position issue. But now when I hover on the icon it's gose down and when I add-to-cart something than it's gose up. please check thanks again 😍

 

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, Please add this code to the style tag above: 

.header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Ecomsmartify]

Hey @BSSCommerce-HDL 
Sorry to disturb you again actually now it's my fixed displace icon position only for empty cart icon. Now that icons displace position happening/refelecting to others icons like account & search... When I add to cart than cart icon gose again or displace from the position. Please can you help me to fix this. Thanks 😍😍😍😍
Refrence website : https://krosskulture.com/
My website: https://tesdmo.myshopify.com/

 

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
svg.icon.icon-cart {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%) !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Ecomsmartify]

should I remove this code and add that code you provide?

<style>
    .header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

[Ecomsmartify]

Please can you tell me should I add in this code or ?

<style>
    .header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, Yes, It is necessary. Let's add it inside that style tag

[Ecomsmartify · Accepted solution]

so sorry to keep messaging you again and again I'm not soo good at code should I add code like this 👇in this way I use code it's fixed the displacing issue only for cart icon. my other icons like login account, search is behaaving when I hover on that icons the gose up as like the before cart icon. Please can you help me to fix this as well. Please. Thanks I really appriceiate 

<style>
    svg.icon.icon-cart {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%) !important;
}
    .header__icon:hover .icon {
    transform: translate(-33%, -33%) !important;
}
a#cart-icon-bubble {
    position: relative;
}

svg.icon.icon-cart-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-33%, -33%);
}
</style>

[BSSCommerce-HDL · Accepted solution]

Hi @Ecomsmartify, Pls add this code inside that style tag: 

.header__icon.header__icon--account:hover .icon,
.header__icon.header__icon--search:hover .icon
{
  transform: scale(1.07) !important;
}

It will fix this error. 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Ecomsmartify]

yep now it's fixed Thanks alot again you are amazing if in future I need any help can I message you ? 
Thaaaaannnnnkkkksssss 😍😍😍😍

[BSSCommerce-HDL]

@Ecomsmartify Yes, I'm glad I could help you 😍