Add a Color Scheme setting for Menus-Header #2622

lougoncharenko · 2023-05-10T17:25:30Z

PR Summary:

Added the ability to use a different color scheme for header and menu.

Why are these changes introduced?

Added a second color scheme for navigation, so that the header and navigation can use different color schemes.
Fixes #2565

What approach did you take?

Kept original color_scheme setting for header with updated label.
And added new setting menu_color_scheme
Added "color" header to header section schema instead of global translation

Visual impact on existing themes

Not applicable.

Testing steps/scenarios

Changed color scheme for menu to another scheme
Ensured that the drop down can render in a different scheme than the first of the header
Test all menu types (dropdown, drawer, etc)
Test the color change with the social links
Test with gradient
Test with sticky header on/off
Verify the search drawer inherits the header scheme
verify cart notification inherits the header scheme

Demo links

Editor

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

eugenekasimov

Hey Louisa, everything looks good to me 👍, just left minor suggestions. It looks like you accidentally added whitespace.

snippets/header-drawer.liquid

snippets/header-dropdown-menu.liquid

kmeleta

Found one hiccup with the gradient stuff but I think it's a quick fix. Otherwise just a question for @YoannJailin before we request translations.

kmeleta · 2023-05-11T14:04:31Z

locales/en.default.schema.json

+          "content": "Color"
+        },
+        "header_color_scheme": {
+          "label": "Header color scheme"


@YoannJailin I don't feel strongly at all, but just wondering if we don't want to keep the original "Color scheme" label for the header's color scheme setting. I could certainly see this adding some clarity for users, but the setting is within the "Header" section as it is, so I somewhat feel like we don't need the additional qualifier.

We only have a couple other instances of multiple color schemes in one section to pull precedent from but they just use "Color scheme" to represent the section's color scheme.

Yes i agree we can replace "Header color scheme" by "Color scheme". I would keep the second one named "Menu color scheme". @lougoncharenko @kmeleta

I went ahead and changed it to display "Color Scheme" for the first one and left "Menu color scheme" for the second one

This works, but I'd say we could probably clean things up a bit by removing the header_color_scheme translation entry that we added altogether, and pointing our setting label back to the global string for "Color scheme" "label": "t:sections.all.colors.label", like it was before. That we're we're not duplicating anything and there will be one less new string to translate. Let me know if that doesn't make sense.

Changed it back to the original translation and removed the header_color_scheme translation

snippets/header-dropdown-menu.liquid

sections/header.liquid

… global string for color scheme

kmeleta

Looks good! Let's request translations.

eugenekasimov

Looks good to me. I'll approve once translations are done 👍

* seperated color scheme for header and menu * made changes to remove white space as suggested from eugene * made some changes requested by ken * changed Header color scheme to Color scheme per yoann request * removed header_color_scheme translation and set the label back to the global string for color scheme * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* shopify/main: (59 commits) [Announcement bar] Add social icons (Shopify#2497) Update theme version to match the pubic release (Shopify#2698) Add release/v10.0.0 branch fixes to main (Shopify#2693) fix default UI for dropdown and mega menu (Shopify#2644) Fix link formatting in Related Products heading (Shopify#2680) Update 2 translation files (Shopify#2637) Enable gift card recipient form by default on featured product section (Shopify#2666) Gift cards/enable recipient form by default (Shopify#2618) Add a Color Scheme setting for Menus-Header (Shopify#2622) Made mobile drawer full width by default-header (Shopify#2625) Allow multiple announcement bars in Header group (Shopify#2619) [Feat Product] Add rating styling sheet (Shopify#2620) Fix password page variables (Shopify#2607) Fix transform applied when it should not for sliders (Shopify#2606) Modify info string for gift card recipient checkbox (Shopify#2588) [3D lift animation] Raise hovered card above adjacent cards (Shopify#2589) Remove fallback color scheme info text (Shopify#2602) Fix CSS specifity issue to cancel animation for theme editor events (Shopify#2605) Remove settings daya for icon color (Shopify#2601) Follow ups for accessibility of announcements slider (Shopify#2580) ...

* seperated color scheme for header and menu * made changes to remove white space as suggested from eugene * made some changes requested by ken * changed Header color scheme to Color scheme per yoann request * removed header_color_scheme translation and set the label back to the global string for color scheme * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

seperated color scheme for header and menu

f722833

lougoncharenko requested a review from kmeleta May 10, 2023 17:25

lougoncharenko self-assigned this May 10, 2023

lougoncharenko linked an issue May 10, 2023 that may be closed by this pull request

[Header] Add a Color Scheme setting for Menus #2565

Closed

lougoncharenko requested a review from YoannJailin May 10, 2023 17:38

eugenekasimov self-requested a review May 10, 2023 18:15

eugenekasimov reviewed May 11, 2023

View reviewed changes

snippets/header-drawer.liquid Outdated Show resolved Hide resolved

snippets/header-drawer.liquid Outdated Show resolved Hide resolved

snippets/header-dropdown-menu.liquid Outdated Show resolved Hide resolved

made changes to remove white space as suggested from eugene

66b6010

kmeleta reviewed May 11, 2023

View reviewed changes

lougoncharenko added 2 commits May 11, 2023 11:21

made some changes requested by ken

2f13847

changed Header color scheme to Color scheme per yoann request

d058da9

YoannJailin approved these changes May 15, 2023

View reviewed changes

removed header_color_scheme translation and set the label back to the…

0768647

… global string for color scheme

kmeleta approved these changes May 15, 2023

View reviewed changes

eugenekasimov reviewed May 15, 2023

View reviewed changes

translation-platform bot added 2 commits May 16, 2023 16:19

Update 15 translation files

bdeeb7d

Update 5 translation files

4789057

lougoncharenko merged commit e10b4af into main May 17, 2023

lougoncharenko deleted the louisa-header-add-a-color-scheme-setting-for-menus branch May 17, 2023 14:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a Color Scheme setting for Menus-Header #2622

Add a Color Scheme setting for Menus-Header #2622

lougoncharenko commented May 10, 2023

eugenekasimov left a comment •

edited

Loading

kmeleta left a comment

kmeleta May 11, 2023 •

edited

Loading

YoannJailin May 15, 2023

lougoncharenko May 15, 2023

kmeleta May 15, 2023

lougoncharenko May 15, 2023

kmeleta left a comment

eugenekasimov left a comment

Add a Color Scheme setting for Menus-Header #2622

Add a Color Scheme setting for Menus-Header #2622

Conversation

lougoncharenko commented May 10, 2023

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

eugenekasimov left a comment • edited Loading

Choose a reason for hiding this comment

kmeleta left a comment

Choose a reason for hiding this comment

kmeleta May 11, 2023 • edited Loading

Choose a reason for hiding this comment

YoannJailin May 15, 2023

Choose a reason for hiding this comment

lougoncharenko May 15, 2023

Choose a reason for hiding this comment

kmeleta May 15, 2023

Choose a reason for hiding this comment

lougoncharenko May 15, 2023

Choose a reason for hiding this comment

kmeleta left a comment

Choose a reason for hiding this comment

eugenekasimov left a comment

Choose a reason for hiding this comment

eugenekasimov left a comment •

edited

Loading

kmeleta May 11, 2023 •

edited

Loading