How to add a border image to product cards? It says 'invalid URL'

Store Design
, ,

Topic summary

A user is attempting to add a decorative border image to product cards using custom CSS in their theme’s “Additional CSS” section. They’ve uploaded the border image to the theme’s Assets folder but are encountering an “invalid URL” error.

Current approach:

  • Using /assets/IMAGE NAME as the file path
  • Applying CSS with a ::before pseudo-element on .card__media
  • Setting the border as a background image with absolute positioning

Key issue:
The URL syntax for accessing uploaded theme assets appears incorrect, preventing the border image from loading properly.

Note: The CSS code snippet in the post appears reversed/encoded (text is backwards), which may indicate a copy-paste formatting issue but doesn’t affect the core question about asset URL structure.

Status: Question remains unanswered; user needs guidance on the correct URL format for accessing theme assets in Shopify.

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

I tried adding a border image with a script in the “Additional CSS” box in the editor. I have uploaded the image to ‘Assets’ in the theme editor but have no idea how to find the URL to it so I go with “/assets/IMAGE NAME”.

How do I do?

EDIT: I’m using this script:

.card__media::before {
content: “” !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: url(‘/assets/images/cardborder1.png’) no-repeat !important;
background-size: cover !important;
z-index: 1 !important;
}