Trying to reduce the size of an svg on my product card

Store Design
, , ,

Topic summary

Oversized SVG “sold‑out” badge on desktop product cards; mobile looked correct. Attempts to adjust size via CSS/HTML (including edits in product-card.liquid) didn’t affect desktop.

Suggested fix: place the CSS globally in the theme layout rather than in a component file.

  • Steps: Online Store → Themes → Edit code → open theme.liquid → add the CSS before the tag → Save.
  • Purpose: ensure desktop-specific rules (e.g., targeting the badge or using media queries) apply sitewide.

References: Screenshots illustrate the desired desktop sizing after the change. The exact CSS snippet contents are not shown in the excerpt.

Outcome: Applying the CSS in theme.liquid resolved the desktop scaling issue. Original poster confirmed success and thanked contributors.

Status: Resolved; no remaining open questions.

Summarized with AI on December 20. AI used: gpt-5.
1

Hello there,

I hope you are doing well.

I am currently trying to add a sold-out badge on my sold-out product cards by using an SVG file, which I’ve managed to do.

The problem is that on desktop the SVG file is way too big you can check it on this page:
https://aestheticanvas.com/collections/limited-art

I managed to scale it down on mobile which looks great, but I’ve tried many different CSS and HTML codes to scale it down on desktop but nothing works, it only changes on mobile but not on the desktop version, I am not sure what I am missing here.

Thank you in advance for your time and help.

1 Like
2

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724980548003.png
BSSTekLabs_0-1724980548003.png1829×890 150 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

AnneLuo_0-1724981025875.png
AnneLuo_0-1724981025875.png1484×813 140 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

4

Thank you everyone!

I can’t believe it was that simple! I lost so much time yesterday trying to add some CSS and adding code directly into the product-card.liquid.

Thank you again for your time and help!