How can I customize the location and appearance of my Webflow cart icon?

Store Design

Topic summary

A user is attempting to customize the Shopify Buy Button cart icon integrated into their Webflow site, facing three main challenges:

Primary Issues:

  • Replacing the default cart icon with a custom image
  • Repositioning the cart toggle from its default right-side placement to the top-right corner
  • Making the cart icon appear globally across all pages, not just shop pages

Partial Solutions Provided:
A community member offered CSS code snippets to:

  • Hide the default SVG icon and add a custom background image
  • Reposition the cart toggle using absolute positioning
  • Adjust the cart number display using flexbox

However, the custom icon replacement ultimately failed because the button exists within an iFrame, making pure CSS solutions insufficient. The helper suggested hiring a developer on platforms like Fiverr (estimated <$50) for a complete solution.

Current Status:
The original poster appears to have eventually resolved the global cart display issue, as later users visiting the site noticed the cart appearing in the header across all pages. Multiple users have since requested details on how this was achieved, but no follow-up explanation has been provided. The thread remains open with unanswered questions about the final implementation method.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I’m working on a website on webflow and i’m using the shopify buy button for the online store. I’m happy with how the buy button looks, only the the toggle part with the cart icon, that you click on to go your cart, is still not to my liking.

First of all I would like to change the icon itself. I’ve uploaded the wanted icon on shopify but I’m not sure now were to put this link..

Secondly, I would like to change the placement of the cart icon. It is by default placed on the right side of the screen, but I want to place it somewhere else. I’ve noticed if I put: ’ “sticky”: false, ’ under toggle, the icon will move to the bottom of the body. But I want it to be in the right top corner. How can I get it there?

Thirdly, I want the cart icon to appear on all pages of my site and not only on the shop pages. Does someone have a workaround for that as well? I wanted to place the code for the buy button on all my pages, but than i couldn’t click it.

My shopify store URL is https://orangeorred.myshopify.com/
The URL for my webflow website is: https://mariekes-initial-project-fd666c.webflow.io/shop-en/blends-tote-anthracite
This is how my website looks right now:

Capture3.JPG
Capture3.JPG1920×894 65.6 KB
1 Like
2

I can partially help

#1 Shopify injects an SVG, you can hide what it injects by using something like this

svg.shopify-buy__icon-cart.shopify-buy__icon-cart--side {
    display: none;
}

and then add your own icon by using something like this

.is-sticky.shopify-buy__cart-toggle:after {
    content: '';
    background-image: url(https://previews.123rf.com/images/flatdesign/flatdesign2009/flatdesign200900083/154640851-shopping-cart-icon-vector-shopping-cart-icon-shopping-cart-illustration-for-web-mobile-apps-shopping.jpg);
    background-size: 20px;
    height: 20px;
}

#2 Shopify adds the button in an iFrame, you could use something like this to relocate

.shopify-buy-frame.shopify-buy-frame--toggle.is-sticky.is-active {
    position: absolute;
    top: 30px;
}

to display the number below the cart icon, something like this could be used

.is-sticky.shopify-buy__cart-toggle {
    display: flex;
    flex-direction: column-reverse;
    padding: 10px;
}

#3 No idea

Hope that helps

1 Like
3

Thanks for helping Bunty! One more question, where exactly do I place there codes in my original code? I’d now placed it at the end of the code, but before

});
});
}
})();
/]]>/

But now the whole code stopped working..

Thanks in advance!

4

You need to include it inside HTML tags

Refer and try it out here if you want https://www.w3schools.com/html/html_css.asp

2 Likes
5

Oh thank you so much! It’s working!

Only 1 thing: in the place where I put the URL of the icon, I placed the URL of the icon I uploaded on shopify, this one: https://cdn.shopify.com/s/files/1/0565/6425/2845/files/bag.png?v=1620071971

But is still shows the old one, what am I doing wrong here?

2 Likes
6

@Orangeorred you haven’t done anything wrong. It was my mistake to tell you this would work. In normal circumstances, it would, but the button is inside an iFrame, so it doesn’t.

It’s a bit more complicated and a pure CSS solution any more, so apologies it would be very time-consuming to test it and make it work for you. What you can do is to post a short job on a site like Fiver with this scope. Should cost you less than $50 to make that work.

All the best

3 Likes
7

Hi @Orangeorred ,

I visited your website and noticed you got the cart to show up globally and remain in your header. I’m struggling to do the same thing and was wondering if you can share how you did it?

Beautiful work by the way! :slight_smile:

Bests,

Oli

8

Hi Bunty, I’m trying to do the same thing but haven’t been successful in pasting in the code. Could you explain where to insert it with a little more detail, I am very new to this…

Many thanks,

9

Hi. I’m struggling with the same issue. Looking at your page I see you found a solution. How did you do it?