Adding colour scheme settings to various sections

[tyleralsbury]

Why are these changes introduced?

Fix #966

What approach did you take?

For the sake of simplicity, we are applying this to each section in mostly the same way - generally by adding a wrapping element that has color-{{ section.settings.color_scheme }} gradient and adding it to the schema.

Other considerations

There may be more nuanced approaches that could be taken for some sections / other sections that allow for more tweaking to happen on block levels, etc... but this initial implementation is meant to simply add flexibility to the ones that are the quickest and easiest to add the setting to.

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[ludoboludo]

Looking good 👌 Noticed a few small things.

I think it needs to be also added to the contact form section. And maybe they announcement bar as well ? screenshot

Should the video section have it as well 🤔 It only would come in handy when using a vimeo video and if the image is a different aspect ratio than the video. screenshot

Also I feel like the position of the setting can vary a little from section to section. Like header and footer have it as the first option but the rest of the section have it somewhere else.

[tyleralsbury]

I think it needs to be also added to the contact form section. And maybe they announcement bar as well ? screenshot

Each individual announcement bar block does have a colour scheme setting, so I think we're good for those.

[ludoboludo]

Looking good! Just noted a couple things

[ludoboludo]

There are still a few things to figure out I think with how show seconday background should work with the color scheme chosen 🤔
screenshot

[tyleralsbury]

Alright, stuck the class further down the chain - it was overriding the foreground colour with white which was causing the issue. 🤦

[Oliviammarcello]

We were going to remove the secondary background and add a Container color scheme picker here similar to collapsible content. If that isn't possible to do right now, the secondary background should take on the text colour used in the colour scheme picker. So if the secondary background is 4% of text when set to background 1, it should be 4% of the button label when set to accent 1. Does that work as a solution? @tyleralsbury Happy to pair if needed

[tyleralsbury]

I see - okay, I think that's the behaviour we had before because it was giving it a white background when the text was white. I'll do it that way and we can test to ensure that it's what we're looking for.

For now, we can keep the secondary background because adding a second picker adds complexity.

[tyleralsbury]

Okay, I think I've got it working the way we expect it to.

1. If secondary background is not selected, it gets a full screen background with the same colour as the internal container
2. If it is selected, the text colour is taken (either the actual text colour for background, the background colour for inverse, or the button outline colour for accent)

Should be working like that now - I also fixed the gradient so that it works in both cases.

[ludoboludo]

Should we also add it to the Video section, Slideshow (for when it's using the grid layout) and maybe Custom liquid as well? 🤔

Should collection list also get that setting (not the section) ? 🤔 Since on the collection page we can do it for the header and product grid, I'm wondering if that'd make sense to had it there too.
But then that'd mean adding it to the templates like page, product page, etc. So maybe I'm overthinking it and we can look into this later 😅

Other than this ^ and what I mentioned in my couple comments, things look good 👌

[Oliviammarcello]

Looking good!

• Helper text is missing under color scheme dropdown on the collection list, product recommendations, collage, blog posts, and featured collection section. "To change the card color scheme, update your theme settings." should be added underneath
• Featured product is broken, but I left a comment above about a potential solution
• For blog posts: Secondary background should be removed. The color scheme should be applied to the background of the sections and the color of the cards can be changed in global settings.
• Multicolumn: The section should work the same as collapsible content where there is both a container color scheme and a color scheme picker. Secondary background should be remove.
• Collage: The colour scheme picker should be removed on the image block. All blocks in collage should be affected by the card colour scheme in the global settings.
• Not sure if this happened here, but on the collage product and collection block Add image padding and its helper text is missing.
• There shouldn't be a colour picker on any of the template pages like cart or the product grid. The only exceptions are collection banner and product recommendations.

I know some of the changes may be complex to change, so I'd be happy to pair and help find a solution that works. Thanks @tyleralsbury !

[Oliviammarcello]

Should we also add it to the Video section, Slideshow (for when it's using the grid layout) and maybe Custom liquid as well? 🤔

Should the collection list also get that setting (not the section) ? 🤔 Since on the collection page we can do it for the header and product grid, I'm wondering if that'd make sense to had it there too. But then that'd mean adding it to the templates like page, product page, etc. So maybe I'm overthinking it and we can look into this later 😅

It shouldn't be on the product grid because then we would have to add it to all templates like you've specified. We opted not to add it to the slideshow and video since they are full width and it would add unnecessary complexity for video. Also, the slideshow has a colour picker for the text box.

Interesting point about custom liquid. Do either of you have any thoughts? I'm not too sure of the use cases @ludoboludo @tyleralsbury

[tyleralsbury]

Should collection list also get that setting (not the section) ? 🤔 Since on the collection page we can do it for the header and product grid, I'm wondering if that'd make sense to had it there too.
But then that'd mean adding it to the templates like page, product page, etc. So maybe I'm overthinking it and we can look into this later 😅

Probably, but I think we should do them as a follow-up in the interest of time.

[tyleralsbury]

It shouldn't be on the product grid because then we would have to add it to all templates like you've specified.

I actually did add it to the product grid because otherwise you can't have a custom colour for the banner that matches the rest of the page. I also did the same for the cart page so you can have a more branded cart.

We can definitely add it to other templates as well, but I would prefer for us to do a proper pass and handle it as a follow-up severity 2 issue. Many of them have pretty simple implementations - the toughest one (as we've seen with featured product) is the product page itself.

[tyleralsbury]

Interesting point about custom liquid. Do either of you have any thoughts? I'm not too sure of the use cases @ludoboludo @tyleralsbury

Custom Liquid is a bit of a weird one. I'd go with not including it there simply because the person adding in the content can kinda do whatever they want with it - so if they want to add colours, they can just add the class directly themselves. Custom Liquid is somewhat of a blank slate.

On the other hand, we did add the padding setting there, so we could add this too so give them some controls that don't require code.

[tyleralsbury]

There shouldn't be a colour picker on any of the template pages like cart or the product grid. The only exceptions are collection banner and product recommendations.

Should we remove them? I can, but if we are going to eventually add them then should we keep them and just add to more template sections in the future as iterations?

[tyleralsbury]

Multicolumn: The section should work the same as collapsible content where there is both a container color scheme and a color scheme picker. Secondary background should be remove.

This is beyond what I'd consider to be a quick win. Can we instead keep it as-is and remove the "as section background" option from the dropdown. That will still allow them to have a secondary colour for the columns themselves and also to remove the secondary background entirely.

[tyleralsbury]

Collage: The colour scheme picker should be removed on the image block. All blocks in collage should be affected by the card colour scheme in the global settings.

This is done in #1090

Not sure if this happened here, but on the collage product and collection block Add image padding and its helper text is missing.

I think this is also as expected in #1090 , is that right @ludoboludo

[ludoboludo]

Not sure if this happened here, but on the collage product and collection block Add image padding and its helper text is missing.

I think this is also as expected in #1090 , is that right @ludoboludo

I believe image padding isn't part of the product and collection card anymore and was removed during Kai's revamp of it. Now both of them won't crop their image so the setting wouldn't be useful. The padding on those cards is dealt with through the global settings for cards.
It's mentioned in the PR description here: #1014

[tyleralsbury]

@KaichenWang @ludoboludo Rebase is complete.

[ludoboludo]

Looking good. 👍

I still think we should add it to the video section though 🤔 The section can be full width or not. So it would make sense to see it as an option. Otherwise it just looks like we missed it.

cc: @Oliviammarcello

[ludoboludo]

Though maybe if we decide to add it to the video section we can do it as a follow up as we will need to request translation and that might delay when the PR will be merged.

[tyleralsbury]

Though maybe if we decide to add it to the video section we can do it as a follow up as we will need to request translation and that might delay when the PR will be merged.

Nah, I've added a new key for translations that are shared throughout the theme - I didn't adjust the keys for every instance of the colour schemes, but I've got stuff like "label": "t:sections.all.colors.accent_2.label".

[tyleralsbury]

@ludoboludo @Oliviammarcello I added it to video. Was ezpz.

[ludoboludo]

🎉