[Header] Move 'Logo' to Global Theme settings

[LucasLacerdaUX]

PR Summary:

Important: We moved “Logo” and “Logo width” settings from the header and password header sections to the global theme settings under the heading “Logo”. This update may cause a visual change to your logo.

Why are these changes introduced?

Moves logo to so it can be configured in a single place and used in multiple parts of the theme.
Fix #2090

Visual impact on existing themes

The header and password-header sections will no longer have different logo pickers. A single logo is now used across both section, with the same width setting. This may require merchants to make some adjustments to either their logo image or to the settings in these sections.

Testing steps/scenarios

• Add a logo under Global Theme Settings
• Update the maximum logo width on Global Theme Settings
• Check if the changes are reflected on the Header section on the homepage
• Check if the changes are reflected on the Header section on the password page

Demo links

• Store
• 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
• [ x Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[danielvan]

I have a few questions here around how this behaves. Will this new 'Global logo' impact only the password page header logo and the homepage header logo? In what other places, sections and blocks is this logo displayed and for those, would the merchant ever want two colors? (e.g. the logo in color, and the logo in reverse colors)

[LucasLacerdaUX]

@danielvan It should only impact the header and password-header for now. Eventually, we may expand this setting to work on the gift-card template - which currently does not support the use of logos.

A downside of this decision, like you mentioned, is that the image now must have enough contrast with the color schemes being applied to both these sections. Our current use of logos is restricted to nearly identical contexts (headers) so we felt confident that this would not result in many issues for merchants.

For existing merchants, we will include a note in the release notes that they should review the password-header & header sections before publishing the updated theme, as only the main header logo will be carried forward. Let me know if you want to know additional context or want to 🍐 on this.

[melissaperreault]

Hey! In the case that the logo lives in theme settings there is a new situation to prevent confusion for.

• Let's discuss how we can improve the experience for when merchants are editing their Checkout. We might need some helper text to inform the logo is only displaying on their header and password page but not Checkout. We can have a situation where merchants wonder where is their logo since the setting lives in the side panel now among the Checkout preview as you navigate to that step. Video reference

[LucasLacerdaUX]

@melissaperreault That's a really good point. We originally considered whether or not it should also apply to this page, but Checkout settings are not part of the theme so they cannot be combined. The idea is to keep all checkout settings separate.

I see value in including a help text to say where it's displayed so the merchant doesn't have to search for it, considering there's a "width" setting you might not know where it's applied to (cc @allylane).

As for the confusion in having duplicates: checkout settings also contain separate Accent & Button colors, Typography, etc, and we don't include a helper text on those theme settings to say they won't be reflected in checkout. Should we consider it for all these settings in this case, or do you think the Logo is more likely to cause confusion?

Checkout Settings:

[nicklepine]

@LucasLacerdaUX Looks good!

• Can you also move favicon under logo? - If you prefer doing this in its own PR, that's OK too.

• The help text under Header section should be linking to Logo category in Theme Settings. Connect with @mattietea on this - he's introduced this ability with this PR

[melissaperreault]

Should we consider it for all these settings in this case, or do you think the Logo is more likely to cause confusion?

It would be ideal in general that if we could present the Checkout settings panel in view/in context of what you can edit so you don't have a big learning curve that the logo, typography and colors of Checkout is made in a separate category in the panel. Might not be worth solving or adding extra content for now and monitor if merchants are more confused. It's true that it is already the case with colors and that we would need to look at this from a more global robust angle.

[nicklepine]

Other small comments:

• Could we label the logo picker "Logo" and not "Logo Image"? (Feedback from SLT)
• Could we label the category "Logo" and not "Logo and Favicon"
  **
  
  **

[sofiamatulis]

Looks great 🎉 Added a few comments

[eugenekasimov]

Hey Lucas, all look good and work as expected. I left a minor comment and a couple of questions.

[allylane]

Some settings get cut off when you have a portrait image uploaded.

[translation-platform]

We have received a translation request but there is a question blocking translation work. Your help is needed.

Please answer the following questions.

Warning
Replies in GitHub are not visible to translators. Use the provided "Answer here" links. 🙅‍♀️

• Hi team, would you kindly confirm if this is an error in the source and "theme settings" should be left untranlsated? Thanks in advance. Answer here.
  

  dawn/locales/en.default.schema.json

  Line 973 in 62c55fa

  "content": "Edit your logo in [theme settings](/editor?context=theme&category=logo)."

---

Note
Not your issue? Forward it to someone with more context; please don't leave it pending. 🙏
Questions? Hop in the #help-i18n-and-translation Slack channel.

[LucasLacerdaUX]

@sofiamatulis @eugenekasimov I requested a new review now that translations have been pushed.

All the comments have been addressed :D

[sofiamatulis]

Looks great 🎉 Works as expected

Added one question

[sofiamatulis]

Looks great 🎉