Goal: set different background images on Shopify Ride theme product cards based on product vendor (e.g., Adidas → Z, Bullpadel → Y, Nox → X) across collection/search/featured listings, while keeping product page media transparent.
Current state: a CSS rule targets .product-card-wrapper .card__media .media with a single background; product page media is explicitly set to be transparent.
Proposed approach: output per-vendor identifiers on product card elements, then target them in CSS. Example: add a data attribute using Liquid, e.g., data-{{ product.vendor | handleize }}; “handleize” converts text to a lowercase, hyphenated handle.
Alternative: add distinct classes per vendor on the product card markup. This is practical only if the shop has few vendors.
Implementation notes: requires editing the theme’s product card/snippet/template to check product.vendor and print the class/data attribute. Then write CSS selectors for each vendor to apply the corresponding background.
Limitations: considered an advanced theme customization and beyond forum scope; no step-by-step Ride file paths or code were provided.
Status: unresolved/ongoing. Action items: modify product card Liquid to include vendor-based classes/data attributes, add matching CSS; or seek expert assistance.
Central artifacts: CSS and Liquid code snippets are key to understanding the solution.
Summarized with AI on November 25.
AI used: gpt-5.
Hi everyone,
I need help with customizing product card backgrounds based on brand/vendor.
Right now I’m using this CSS to add a background to all product cards:
/* Target ONLY product cards */
.product-card-wrapper .card__media .media {
background-image: url();
background-size: cover;
background-position: center;
}
/* Keep images on the product page transparent */
.product__media-list .media {
background-image: none !important;
background-color: transparent !important;
}
This works, but now I need different background images for each brand (e.g., Nox has its own background, Bullpadel a different one, Adidas another one, etc.).
I’m using the Ride theme, and I want something like:
If vendor = “Nox” → use background X
If vendor = “Bullpadel” → use background Y
If vendor = “Adidas” → use background Z
Basically, apply a different background-image based on product vendor only on product cards (collection page, search, featured collection, etc.).
Hi @KBOTRBNT the vendor, or image reference, needs to be data on the elements themselves somewhere to conditionally style them.
e.g. <div class="card-wrapper underline-links-hover" data-{{product.vendor | handleize }}>
Meaning files changes making it an advanced theme customization beyond the scope of the forums.
IF the theme has custom-liquid blocks for such areas then possibly could use that to give each a style override based on the closest products vender
You can reach out to me for theme customization services if you don’t know development. CLICK profile-pic on forums for options to connect. ALWAYS provide contact in new communications, eg. reference urls, post urls etc
Not really, I’m not familiar with coding. I only understand basic CSS, but I don’t know how to edit product card Liquid files or where exactly to add the vendor class.
If you can guide me I would be glad, then I can try to follow the steps.
the vendor, or image reference, needs to be data on the elements themselves somewhere to conditionally style them.
IF the theme has custom-liquid blocks for such areas then possibly could use that to give each a style override based on the closest products vender
CLICK profile-pic on forums for options to connect.