Remove Background Of Image - Only Leave The Chosen Shape - Dawn Theme

Store Design
,

Topic summary

A Shopify store owner using the Dawn theme wants to remove the background from product images, leaving only the custom shape (in this case, an arch) visible from their product customizer.

Problem: Product images display with backgrounds instead of showing only the selected shape overlay.

Solutions Provided:
Multiple users offered CSS-based solutions with slight variations:

  • Method 1 (DaisyVo & B2Bridge): Add CSS code to theme.liquid file above the </head> tag
  • Method 2 (LizHoang): Add the same CSS to base.css file at the end

Both approaches use the CSS rule:

.card__inner {
    background: transparent !important;
}

Outcome: The issue appears resolved, with the original poster thanking all contributors. The solution makes product card backgrounds transparent, allowing only the shaped product images to display.

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

Hi there,

I am hoping someone can help me please.

I would like to remove the background of the product images so that it is only the shape that is chosen in the customiser left.

So in this case it would be the arch.

What would be the best way to go about this?

Thanks in advance!

6FF53F12-24E4-42C0-9468-F507892F07B7.jpeg
6FF53F12-24E4-42C0-9468-F507892F07B7.jpeg1280Ă—634 99.3 KB

1 Like
2

Hi, Can you share store URL?

3

Hi there,

Yep sure!

https://inkspiredavenue.com

password: 123

4

Hi @Kelly-D

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.card__inner {
    background: transparent !important;
}
{% endstyle %}

DaisyVo_0-1738893329566.png
DaisyVo_0-1738893329566.png1351Ă—811 255 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
5

Hi Kelly-D

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.card__inner {
    background: none !important;
}

Result:

LizHoang_0-1738893608475.png
LizHoang_0-1738893608475.png584Ă—671 487 KB

Best,
Liz

6

Hi @Kelly-D , you can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Insert this code above tag

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
7

Amazing! Thank you so much!

8

Thank you so much for your reply!

9

Thank you so much for your reply!