Dawn theme - stylize ATC button :before - image or css stylize

Store Design
, , , ,
1

Just looking to add an image or CSS styles contained in my default button size (not change size of button). How can I do so?

2

Hi @xnyjyh

The easiest way is to add your image to buy-buttons.liquid file

Screenshot 2024-03-14 at 09.18.51.png
Screenshot 2024-03-14 at 09.18.51.png1126Ă—691 97.5 KB

3

I found a different way that works, but I cant seem to find how to find the max width so my button design fits perfectly and have it 100% responsive .

4

Could you send me your product page to check?

5

https://www.howahoriginals.com/products/unisex-t-shirt?variant=40834320007270

6

You did not add image to your ATC button

7

I had a test one, I put the test image back on for you. It doesn’t fit right to the end. I guess stretch…

8

You can try to update your code to this and check

#MainContent .product-form__submit {
    background-image: url(https://cdn.shopify.com/s/files/1/0564/3046/1030/files/test_button_atc.png?v=1710383992) !important;
    background-size: cover;
    background-repeat: no-repeat !important;
    display: flex;
    justify-content: center;
    background-position: center center;
}
9

Yes! Thank you, it worked! :slightly_smiling_face: