Add to Cart-Button on Webflow

Technical Q&A
1

I’ve embedded Add to Cart-Buttons on Webflow. All works, however I’d like to customize the cart icon a little that is fixed to the middle right. I tried lots of thing but by now I don’t have big expectations anymore. Initially I wanted to hide it and have the slide-in-cart-drawer triggered by my own svg. Don’t think this is achievable as you can’t really access the cart toggle in the code. There’s a nasty blue outline showing when having clicked on the icon and also on the closing-X when drawer is open. By now I would just be happy if I can get rid of this. I don’t understand why Shopify is building such a static element. Can anybody help?

2 Likes
2

@MathiasVinz Thank for posting here, Just to confirm, are you using the default Shopify Buy Button embed, or a custom integration with the Storefront API?

3

Hey @MathiasVinz,

The requested changes are really possible with the help of CSS. Could you please share your webflow site url so that I can take a look and provide you with the solution code.

Thanks

4

Hey @MathiasVinz kindly check your Inbox

6

I completely understand your frustration Shopify’s embedded cart (especially when using the Buy Button or Cart Drawer SDK inside Webflow) can be pretty restrictive since a lot of its behavior is controlled by injected scripts.

Here’s what I can do to fix this for you:

1. Remove that blue outline (focus ring) that’s just a default browser accessibility style. I can safely override it with CSS so it disappears from both the cart icon and the drawer’s close button.

2. Customize the cart icon styling or replace it even though Shopify’s cart toggle isn’t directly editable, I can use JavaScript or CSS targeting to inject your custom SVG icon or restyle the existing one (color, size, hover effects, etc.)

3. (Optional) If you’d like to trigger the slide-in cart with your own button or icon, I can connect your custom SVG element to Shopify’s cart drawer script using the Shopify Buy SDK or a custom event listener, so it works exactly like the native toggle but looks 100% custom.

So yes, it’s definitely achievable and I can cleanly implement it without breaking your existing Webflow layout or checkout connection.

Would you like me to take a quick look at your Webflow site link or code snippet so I can suggest the cleanest fix right away?

Best regards,

[Edwardlyn]

Shopify + Webflow Integration Expert

7

Thanks for your reply.

Shop page: SHOP

Product page: PRODUCT — SERVICE 2 Olivier Kervern

If you click on the cart icon you get this blue outline on icon and on closing-X. Would be just great if I could remove this.

1 Like
8

Thanks for your reply.

Shop page: SHOP

Product page: PRODUCT — SERVICE 2 Olivier Kervern

9

On it i will check it out.

10

using default ‘Add to Cart-Button’

Can I creaate a customized Cart-Element (icon + Slide in drawer) that I can integrate in webflow?

12

Using a default add to card button, it is not possible to create a custom cart icon or drawer. it’s inside an iframe. For a fully custom cart in webflow, you will need to use A Shopify STOREFRONT API Instead of the standard Buy button.

1 Like
13

I see exactly what you mean, that the blue outline appears from the default browser focus state. I can remove it cleanly with a short CSS fix so it won’t reappear on the icon or the close “X,” while keeping everything functional.

Let me know your opinion.

14

It’s not possible to do it with CSS.
If you, however can add JS code, you may try this Javascript code:

window.addEventListener('load', ()=>{
  document.querySelector('.shopify-buy-cart-wrapper iframe')?.contentDocument?.styleSheets[0].addRule('*', 'outline:none');
});