Change Color Scheme of Product Cards for Different Collections

[Amarann]

I am trying to change the color scheme for the product cards for each of my collections (Save collection is assigned the test-grid theme template; Lost and Found collection is assigned the lost-and-found theme template). When I attempt to edit the product card color scheme from each of the theme templates, it changes the color scheme on both collections. I am using differing color schemes to change the shadow color. I also tried various css syntax to target the shadow color change. I have a feeling I am overcomplicating this. Thanks for your help.

https://buenobites.org/collections/lost-and-found

https://buenobites.org/collections/save/Adopt

[AcidPi]

Hi,

Could be a couple of issues

1. Check that Admin > Products > Collections > Theme Template drop-down for each collection are pointing to the new theme templates with different colour schemes.
   Save collection = test-grid theme template
   Lost and Found collection = lost-and-found theme template

2. Your updating the same colour scheme used on both templates,
   Save collection is assigned the test-grid theme template = scheme 5
   Lost and Found collection is assigned the lost-and-found theme template = scheme 6
   if they are both using scheme 5 updates to that scheme will change both

Regards

[Amarann]

Thank you.
I do have the Theme templates assigned to the collections in admin
[image: image.png]

[image: image.png]

So I assume I am setting up my Theme Templates incorrectly.
I thought that changing the color scheme from within lost-and-found
collection would only update that collection, but it is updating the theme
for all collections.

[image: image.png]

I am very new to shopify and have tried searching for tutorials on this
specific scenario but haven’t found a simple way to do this through the
editor.

Thanks so much for your time.

[AcidPi]

Hi,

Glad to hear you found a solution, you’re on the right track
Suspect you’re editing the same Colour Scheme from the Section used on both “Collections Templates”

The Colour Schemes are related to Sections, as in the Collections Templates use the available Colour Schemes from the Sections they are using (for example Product grid), the Section is shared between both Collections Templates and defines the available Colour Schemes the Collections Templates have access to and will use.

Editing Scheme 1 will change both Collections Templates
“Collections Template 1” <> “Section - Product Grid” (Scheme 1)
“Collections Template 2” <> “Section - Product Grid” (Scheme 1)

Editing Scheme 1 will only change “Collections Template 1”
“Collections Template 1” <> “Section - Product Grid” (Scheme 1)
“Collections Template 2” <> “Section - Product Grid” (Scheme 2)

If you create a new Colour Scheme in “Collections Template 1” <> “Section - Product Grid” that scheme will be the same / available in “Collections Template 2” <> “Section - Product Grid”, the same if you edit a scheme in one Template that change will reflect to the other Template where the same Section is in use.

Hopefully this makes sense…
Regards

[Amarann]

So do I need another product grid item?

Here is where I edited the color scheme for the Save Collection

Based on your comment, I tried to create a new ‘product grid’ but didn’t have that option so I created a featured collection and selected lost-and-found. Then I attempted to update the theme settings while in that featured collection, but it changed it on both collections.

Is there CSS that I can use to the effect of ‘if tag = adopt or if collection=lost and found then change product card shadow to be red’?

[AcidPi]

Hi,

On Collection > Lost and Found Template
Remove Featured Collection and use Product grid again.
Add the CSS below to Collection > Lost and Found Template > Product gird > Custom CSS
Leave Collection > Test Grids Template to use the colour defined in the Colour Scheme.

CSS: Update —color-shadow-custom: value, value, value to the colour you want as an RGBA value (excluding the A value).

.card--card::after, .card--standard .card__inner::after {
--color-shadow-custom: 253, 107, 112;
box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow-custom),var(--shadow-opacity));
}

This styling is done via Theme Settings - Product cards with Shadow horizontal and Vertical offset etc. + Colour Scheme and can be modified via theme editor under Theme Settings - Colour Scheme however you cant change this via my suggestions to be different as its only set in one place Theme Settings - Product cards > Colour Scheme

Regards