Solved

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

xnyjyh
Explorer
200 0 9

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?

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

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;
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @xnyjyh 

The easiest way is to add your image to buy-buttons.liquid file Screenshot 2024-03-14 at 09.18.51.png

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

xnyjyh
Explorer
200 0 9

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 .

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Could you send me your product page to check?

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

You did not add image to your ATC button

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

xnyjyh
Explorer
200 0 9

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...

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

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;
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

xnyjyh
Explorer
200 0 9

Yes! Thank you, it worked! 🙂