How do i change this header

Solved

How do i change this header

MerlijnMol
Tourist
4 0 1

HOW IT CURRENTLY IS:

Schermafbeelding 2024-06-09 om 22.55.05.png

HOW I WANT IT TO BE:

Schermafbeelding 2024-06-09 om 22.55.48.png

 

DOMAIN:

ttrsportswear.com

 
 
 
 

ANY HELP WOULD BE APPRECIATED

Accepted Solution (1)

PageFly-Amelia
Shopify Partner
603 165 236

This is an accepted solution.

Hello @MerlijnMol 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.header__icon--cart {
   flex-direction: row-reverse;
}

.cart-count-bubble {
   position: unset !important;
    background-color: unset !important;
    color: unset !important;
   font-size: 16px !important;
}
</style>

<script>
window.addEventListener('load', () => {
	let temp = document.querySelector('.cart-count-bubble span').textContent;
	document.querySelector('.cart-count-bubble span').innerHTML = `(${temp})`;
})
</script>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

PageFly-Amelia
Shopify Partner
603 165 236

This is an accepted solution.

Hello @MerlijnMol 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.header__icon--cart {
   flex-direction: row-reverse;
}

.cart-count-bubble {
   position: unset !important;
    background-color: unset !important;
    color: unset !important;
   font-size: 16px !important;
}
</style>

<script>
window.addEventListener('load', () => {
	let temp = document.querySelector('.cart-count-bubble span').textContent;
	document.querySelector('.cart-count-bubble span').innerHTML = `(${temp})`;
})
</script>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
10042 1999 2045

Hi @MerlijnMol 

Do you mean display (0) next to the cart text when it is not an item added to the cart and 1 number next to the cart text when adding a product to the cart? 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.