Image as Add to cart Button backround ?

Store Design
, , ,

Topic summary

A user wanted to replace their add-to-cart button’s solid color background with an SVG image but struggled with the implementation for several days. They had the SVG file ready and hosted on Shopify’s CDN.

Resolution:

  • The user found their own solution before receiving detailed help
  • Another community member later provided step-by-step instructions involving custom code in the theme.liquid file
  • The solution required adding CSS/markup code above the closing </body> tag
  • A screenshot was shared showing the expected result

Status: Resolved independently by the original poster, though a working code solution was subsequently posted for reference.

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

Hey i would like to have a svg image as the backround of my add to cart button rather then just a color. Have been trying to figure it out myself for days and can’t

I have the SVG ready but I am having trouble with the coding: https://cdn.shopify.com/s/files/1/0925/2775/5599/files/add_to_cart.png?v=1742652856

1 Like
2

Hey @luveee

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

I found a fix thanks!

1 Like
4

Hey @luveee

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742815829391.png
Moeed_0-1742815829391.png1396×856 123 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed