-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add mega menu #1316
Add mega menu #1316
Conversation
…u liquid as snippet. Add mega menu css
…fy/dawn into add-mega-menu
</ul> | ||
</nav> | ||
{%- if section.settings.menu_type_desktop == 'dropdown' -%} | ||
<nav class="header__inline-menu"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Best to view diff with Hide whitespace
enabled
To confirmContent - before requesting translations, I'd like to ensure copy is finalized and whether additional info copy should be added for merchants cc: @katycobb |
To confirmDesign - a large logo combined with middle left logo position can cause a larger gap between the menu toggle and its contents. Is this a concern or an edge case that can be resolved by selecting a different logo position? |
To confirmDesign - Are there any particular tweaks to ensure cohesion with dropdown and pop-up global settings? For example, should the top corner-radius be hardcoded to zero? etc. |
The "desktop menu type" approach might be too limiting. I suggest keeping all the menus as "dropdowns" that can have a megamenu block added to them by menu item name. This will allow for people to mix-n-match menu types (dropdowns with megamenus and some single menus) and leave the possibility of coding a featured media block to a specific megamenu in the future. |
@bacounts I like the idea of providing more flexibility. Could you elaborate a bit more on how that would look like in the theme editor to help me visualize your approach a bit better? Thanks |
@KaichenWang - Off the top of my head... Editor Panel > "Header" section settings• REVISE the "Desktop menu type" dropdown to show options resembling:
• ADD app blocks to the "Header" section (when either the "Mega menu or Both" menu type option is enabled).
Some simple block examples could be:
Example: If our flexbox grid is 4 columns max, and you have one menu list (first column), you could have 3 or more Featured Media blocks after it to fill up the rest of the menu. This method could allow a user to have a mega menu of all featured media/blocks (when no sub-menu lists are present). Let me know if this is making sense? Happy to elaborate more. |
Please look into Baymard's recommendation on menu best practices when working with the mega menus, just some of the research: Don’t Have Shallow Parent Categories: However, at surprisingly many of the tested sites – and at 14% of e-commerce sites – the grouping of the drop-down categories were only text labels, not actual clickable parent categories. This conflicted with the expectations of the majority of the test subjects who anticipated the headers would be clickable. |
@bacounts Thanks for the clarification. Providing merchants with additional flexibility in their menu layout and content is something we definitely want to add. However, the goal of this PR is to enable a relatively simple way for merchants to add mega menus to their storefronts; without requiring them to manage multiple blocks and menus in the header settings. I do foresee a need for blocks to allow merchants to add featured images, products, etc. to their menus, but this would be in a future follow up. Will be keeping your feedback in mind for those potential future iterations. |
@bacounts noted! |
@gregjotau Thanks for the insight. Is this an excerpt from https://baymard.com/blog/ecommerce-navigation-best-practice? Great information provided there; thanks for sharing! For the mega menu in this PR, the sub-category titles are indeed links (not shallow). |
Yes, it is an excerpt from Baymard. Really recommend Shopify buy the premium subscription (not affiliated) and go through relevant guidelines and their research :) Looking forward to the merge 🚀 |
@KaichenWang — A final note: It could be worth looking into an "open" on mouseover function for the mega menu AND perhaps all menus on the navigation. This function could be added as a secondary toggled in the editor. I do not have exact stats around this, but most clients I have worked with prefer the menus opening on mouseover vs. click. I am sure there is also an Accessibility solution for both manners. I am looking forward to this merge. |
Have a hover delay of 300–500 MS if implementing that - tip from Baymard. |
Thank you for sharing your thoughts and feedback, we really appreciate it! @gregjotau @bacounts @KaichenWang already provided a great response regarding our upcoming improvement plans on mega menu, but to provide more context: Our priority at the moment is to give our merchants a second menu navigation option additional to the dropdown option. We chose the “click to open” interaction over “hover” because hover hasn’t passed the accessibility standards. We encourage you to open a new issue to share your thoughts further. |
@KaichenWang thanks for noticing this use case! I think it can be resolved by selecting a different logo position. |
Thanks @KaichenWang! I connected with D, we'd like to add help text below this field to let merchants know what to expect on mobile, since this is a desktop specific setting: Let me know if that makes sense/if you need any more info. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Like @bacounts mentioned, there is a border to the left of the drawers on mobile. Not for the first levels but second and third which is coming from the declaration in .js .menu-drawer__submenu
. Not sure if it was intended but doesn't seem to be introduced in this PR.
.mega-menu__link--active:hover { | ||
text-decoration-thickness: 0.2rem; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here as well, we apply a similar rule on:
list-menu__item--active:hover {
text-decoration-thickness: 0.2rem;
}
Which maybe could be a common styling 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree this could benefit from some refactoring. The styles for menu links (dropdown + mega menu styles) are split between:
.header__menu-item
.header__menu-item:hover
.header__menu-item span
.header__menu-item:hover span
.list-menu__item
.list-menu__item--active
.list-menu__item--active:hover
.mega-menu__link
.mega-menu__link:hover
.mega-menu__link--active
.mega-menu__link--active:hover
.link
I'd like to consolidate this, but would prefer to do this in a follow-up PR at this point, because we'd have to make some changes in the markup of both menu styles and would have to re-test all use cases to ensure there are no regressions.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💯 that makes more sense as a refactor follow-up/later.
I think we need to reconsider this and validate with support advisor please 🙏 How can merchants create different hierarchy type where they don't have a link for a given header if we don't allow for "no link" menu item to create a structure? Buyers would observe this as a mistake from merchants store; the cursor change, I try to click the link but nothing happens. Forcing merchants to put a link on all menu items is really strange. It's been a common request in the past, see example: https://community.shopify.com/c/shopify-design/drop-down-menu-without-link/m-p/320134/highlight/true#M83542 Perhaps an improvement to make at the platform level, I'll investigate further references. |
Thanks for your feedback @melissaperreault – much appreciated! I didn't know the "# hack" for headers with no link. @KaichenWang Apologies for editing and posting my comment multiple times, it took me some time fully understand what was being requested. |
Thanks for everyone's feedback regarding the use of 1 - Obfuscation of the root cause of the issue - the Shopify admin should support navigation nodes with blank URLs. Continuing to handle this on the theme side, especially on Dawn, which should be a reference theme, could be interpreted as: we'd rather resort to hacks than implement the proper solution. 2 - Preserving 1-to-1 relationship between the data entered and what is displayed on the storefront is important. If |
My 2 cents - this is the biggest reason not to do the |
@KaichenWang brings up a great point here. We should pick this up next week as well. |
Yeah, I am totally aligned that this should be solved at the platform level! 💯 But in the meantime, there is no risk to support the hack as there is nothing else you would expect when entering
|
…HTML component. This is to ensure this snippet of JS does not run if not needed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for updating Kai. I noticed a few things we will need to fix now that header-menu
is being introduced. Let me know if you have any questions about what I commented.
assets/component-mega-menu.css
Outdated
@@ -8,7 +8,7 @@ | |||
border-radius: 0; | |||
border-right: 0; | |||
left: 0; | |||
max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 20rem) - 4rem); | |||
max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position-desktop, 20rem) - 4rem); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I apologize I didn't see this earlier.
Currently, the --viewport-height
is only assigned if the menu drawer is opened. So this will never be assigned a value on desktop if the customer doesn't resize their browser to mobile (and back to desktop).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if it's a big deal anyway as we're using 100vh
as a default if --viewport-height
doesn't exist 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to just rely on 100vh
(which was the fallback/default) - 919a219
assets/details-disclosure.js
Outdated
const header = document.querySelector('header'); | ||
if (header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(header.getBoundingClientRect().bottom)}px`); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am noticing an issue with the on-scroll for closing.
There are also a few places we probably want to take a look at that are applying styles for details-disclosure
(base.css) or referencing details-disclosure
in a script (cart notification + StickyHeader).
I think the issue with scrolling is being caused because StickyHeader is looking for details-disclosure
. We could update both menus to use header-menu
and that should solve that issue, alternatively, could query for both details-disclosure
and header-menu
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The second issue I noticed is:
This is calculated on page load (Sticky on and off). This means that if someone scrolls down, and then re-loads the page, it will reload the page in the same position, and the header's position will be a negative value (e.g., --header-bottom-position-desktop:-2782px;
). Since the max height is `100vh - --header-bottom-position-desktop), this will result in a value greater than the available space.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are also a few places we probably want to take a look at that are applying styles for details-disclosure (base.css) or referencing details-disclosure in a script (cart notification + StickyHeader).
I think the issue with scrolling is being caused because StickyHeader is looking for details-disclosure. We could update both menus to use header-menu and that should solve that issue, alternatively, could query for both details-disclosure and header-menu.
Updated 6efe289
This is calculated on page load (Sticky on and off). This means that if someone scrolls down, and then re-loads the page, it will reload the page in the same position, and the header's position will be a negative value (e.g., --header-bottom-position-desktop:-2782px;). Since the max height is `100vh - --header-bottom-position-desktop), this will result in a value greater than the available space.
Addressed this issue by setting --header-bottom-position-desktop
inside onToggle()
instead of in the constructor
. The value may still need to be updated based on the state of the sticky header, but I haven't found a viable solution for that yet. For now, this should still work in preventing parts of the menu from being unreachable. 2ac6381
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems to work well for me this approach 👌
…nt for header-menu which extends details-disclosure
…is toggled, instead of in constructor. This ensures the header is visible when the value is calculated
Congratulations on the work done with the mega menu, I see that it has been added to the main branch but when I activate it in shopify the mega-menu block and the dropdown do not appear, am I doing something wrong or isn't merge yet? thanks in advance |
I don’t see it merged yet into main. What did happen is that ‘add-mega-menu-content’ was merged into ‘add-mega-menu’ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's working well 👍 Just have a question about the details-disclosure class now
@@ -66,7 +66,7 @@ class CartNotification extends HTMLElement { | |||
handleBodyClick(evt) { | |||
const target = evt.target; | |||
if (target !== this.notification && !target.closest('cart-notification')) { | |||
const disclosure = target.closest('details-disclosure'); | |||
const disclosure = target.closest('details-disclosure, header-menu'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
now that you've changed details-disclosure
to header-menu
I don't think you need to include it in here. Since from what I'm seeing this custom element isn't used anywhere now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same could be said for the css - if it's not used anymore.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct, but if you remove these references, and details-disclosure
were to be used directly in the future, you'd have unexpected behaviour. Removing these references would need to come with a warning: never use details-disclosure
directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah it just feels a little odd to have some code for something that isn't used 🤔
Maybe we could have an issue to remind ourselves to check/refactor in the future based on its use cases ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah i agree, maybe there's a better way to target details-disclosure
and all elements that extend it at once.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me Kai 👍🏻
* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>
Will aria-expanded be preserved or listed as an option for child and grandchild linklist items? Stores with linklists with many child options and subsequent grandchild options will end up with incredibly large menus otherwise |
For the Alternatively, using the Hope this answers your question. |
* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>
* Add "Maximum Products to Show" setting to Product Recommendations section (Shopify#1429) * Add missing gradient support (Shopify#1304) * Add missing gradients to cards * Enforce solid bg on quantity input * Add gradient to cart notification * Add to nav, img banner, facets, slideshow, etc * Add to media modal * Add to submenu * Remove search popup gradient * Fix mobile facets scrolling/background * Adjust mobile nav gradients * Cleanup * fix border radius on combination inputs * Fix password page email signup input (Shopify#1421) * Setup theme-check GitHub annotations (Shopify#1422) * test something real quick (Shopify#1467) * Cleanup product media grid spacing (Shopify#1444) * Cleanup product media grid * Adjust grid selectors * Hopefully fix arrow alignment * Fix non-stacked item widths * Update color list order and simplify section string (Shopify#1413) * update color list order * change announcement bar string * fix label * update collapsible content * update email signup banner * update footer * update header * update image banner * update image with text * update password header and footer * update email signup * update rich text and slideshow * update missing translations * Update 20 translation files * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add mega menu (Shopify#1316) * Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> * Update translations: merchant (Shopify#1474) * Update 1 translation file (Shopify#1475) * Center align payment terms form text when there is no image (Shopify#1473) * Add grid settings to collections list (Shopify#1469) * Feat. collection updates (Shopify#1295) * Update 20 translation files (Shopify#1487) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Theme check manual fixes (Shopify#1379) * Clean up behaviour when there are only L2 links mega menu (Shopify#1492) * Center mega menu (Shopify#1482) * Update 1 translation file (Shopify#1499) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Video alt text info content update (Shopify#935) * Video alt text info content update * Update locales/en.default.schema.json * Update locales/en.default.schema.json * Update 4 translation files * Update 3 translation files * Update 9 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Adjust color contrast for Vendor on the cart page (Shopify#1462) * Add support for boolean filters (Shopify#1456) * Fixed condensed mega menu (Shopify#1504) * Fixed condensed mega menu * Fixed bug where product page thumbnail slider arrows were appearing when they shouldnt (Shopify#1510) * Fixed multicolumn gap spacing on mobile (Shopify#1505) * Fixed multicolumn gap spacing on mobile * Fixed max price display on filter drawer (Shopify#1512) * Theme check TemplateLength (Shopify#1511) * Add PR checkbox for theme documentation (Shopify#1516) * Add PR checkbox for theme documentation * Update .github/PULL_REQUEST_TEMPLATE.md * Update 1 translation file (Shopify#1517) * Update 1 translation file (Shopify#1528) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1533) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1536) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add (Shopify#1388) * Featured Collection : Fix max width setting (Shopify#1538) * Fix product rating help doc links (Shopify#1532) * fix links for product rating * Update 20 translation files * update os2 links and remove /en * update other URL to remove the language path * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Prevent empty heading in contact form (Shopify#1515) * Only render contact heading if not empty * Add fallback form heading * Move title string * Update 21 translation files * Update 3 translation files * Update 6 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Move slideshow control buttons when set to autorotate (Shopify#1523) * Update 1 translation file (Shopify#1554) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Hide inactive mobile menu items from screen readers (Shopify#1493) * Hide mobile menu ancestors from screen readers * Account for close button * Cleanup on drawer close * Account for mobile facets drawer * Vertical filter (Shopify#1443) * Remove transforms from image with text content (Shopify#1560) * Fix shop link on giftcard page (Shopify#1557) Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> * Using font size and spacing for mega menu hierarchy (Shopify#1520) * Using font size and spacing for mega menu hierarchy Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update translations: buyer (Shopify#1581) * Update 1 translation file * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add: Fix button overflow on mobile carousel (Shopify#1567) * Update spacing (Shopify#1588) * Vertical filter UX follow ups (Shopify#1568) * Vertical filter follow ups * Fix button alignment * Fix search sort * Fix sort * Fix wrapping * Fix overflow * Fix empty space * Fix button no js * Fix button style * Fix filter column * Apply secondary style * Apply button * Fix search * Fix no-js layout for drawer and product count position (Shopify#1572) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Update margin formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Update padding formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Add hidden inputs to preserve search queries (Shopify#1585) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Add hidden inputs to preserve search queries Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Version bump v5.0.0 (Shopify#1624) * Remove unused setting (Shopify#1617) * Update 5 translation files (Shopify#1626) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1634) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove recaptcha visibility hidden on contact form (Shopify#1637) * Fix Product strucure-data markup for Brand property (Shopify#1600) * Fix empty collection links (Shopify#1639) * Fix first image lazy load on main product section (Shopify#1286) * Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * replace the hex code by currentColor (Shopify#1591) * Cart drawer (Shopify#1544) * Fix button spinner in Safari (Shopify#1646) * Rich text improvements (Shopify#1635) * [Header] add setting to tweak top and bottom padding (Shopify#1654) * Add header padding setting * Update minimum to 5 * Changed defaults * Update header with option 2 * Remove unnecessary code * Update translations: buyer (Shopify#1659) * Update translations: merchant (Shopify#1681) * Remove gradient when slide container is set to be hidden on desktop (Shopify#1643) * Revert flex grow on collage card__content (Shopify#1662) * Update minimum header padding to zero (Shopify#1688) * Fix a typo in main-product.liquid (Shopify#1647) * 1-click Quick Add for products with 1 non-default variant (Shopify#1610) * Add 1-click quick-add support for products with exactly 1 non-default variant * Revert "Add 1-click quick-add support for products with exactly 1 non-default variant" This reverts commit 41648ca. * Add 1-click quick-add support for products with exactly 1 non-default variant * Switch to Variants Size * Update spacing below product media (Shopify#1689) * Update spacing below product media * Update visible * Remove extra spacing * Update desktop layout * Revert button type and button 1 ids (Shopify#1705) * Update Banner image and logo Image to use `image_tag` (Shopify#1701) * Fix product media slider peek (Shopify#1696) * Account for gap spacing in product slider width * Prevent slider arrows with single media * Remove alt text to improve screen reader experience (Shopify#1679) * Update Subtotal header for a11y (Shopify#1680) * Remove extra whitespace on Quick Add modals (Shopify#1706) * Always centered * Non centered * Revert height * Set height to initial height * Revert fixed height * Remove extra * Update 1 translation file (Shopify#1715) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Collapsible content] Add vertical padding to blocks (Shopify#1655) * Fix padding. top and bottom now gets 1.5rem * Set padding-top to 0 * Fix syntax error caused by missing calc in product CSS (Shopify#1703) * Update 1 translation file (Shopify#1739) * Cart drawer section fix (Shopify#1742) * Update translations: merchant (Shopify#1757) * Version bump v6.0.0 (Shopify#1769) * Version bump Update theme version to v6.0.0 * Update release-notes.md * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Fix box shadow being cut off on sliders (Shopify#1772) * Update contact-form.liquid (Shopify#1716) * Update main-cart-items.liquid (Shopify#1717) * Update main-collection-banner.liquid (Shopify#1718) * Remove menu title requirement (Shopify#1763) * Menu heading Remove requirement for menu heading in footer to display * Update footer.liquid * Remove helper text * Remove translations * Update footer * Update footer * Update footer * Update footer * Revert changes * Fixes * Update * Update to footer * Badge padding update (Shopify#1785) * Add video button aria label (Shopify#1728) * Change aria for active pagination nav control (Shopify#1727) * Update 1 translation file (Shopify#1809) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Warn users that link opens in a new window (Shopify#1735) * Add unique ids to card-product.liquid headings and product state badges (Shopify#1731) * Badge product card position copy update (Shopify#1795) * Badge product card position copy update * Update 7 translation files * Update 3 translation files * Update 6 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Distinct View All IDs for screen readers (Shopify#1733) * Fix Quick Add when cart type is set to Page (remove data-cart-type) (Shopify#1817) * Replaced a missing </div> tag in main-search.liquid (Shopify#1804) * version bump to 6.0.2 (Shopify#1819) * Add help text to the Variant Pills settings area (Shopify#1782) * Add help text to the Variant Pills settings section. * Update copy as per reviews. * Update 5 translation files * Update 4 translation files * Update 8 translation files * Update 2 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update translations: buyer (Shopify#1828) * Update 1 translation file * Update locales/th.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Update translations: merchant (Shopify#1818) * Update 1 translation file * Update 1 translation file * Update 1 translation file * Update locales/th.schema.json * Update 1 translation file * Update th.schema.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove duplicate .hidden class in base.css (Shopify#1811) * Setting border-top to 0.1rem to match with header navigation (Shopify#1802) updating component-facets.css to match div line width from the header * Add period to Cart global setting info text (Shopify#1751) * add period to info text * Update 1 translation file * Update 9 translation files * Update 9 translation files * Update 1 translation file Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add focus ring/border in Windows High Contrast mode (Shopify#1729) * Update 1 translation file (Shopify#1836) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Announcment alignment (Shopify#1770) * Announcement and translation * Alignment for announcement bar * Translations * Update alignment and order of options. * Update locales/th.schema.json Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * Uniform padding with link * Make colour go full width * Full width hover and justify text * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove justify * Remove justify Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add pagination to main collection list (Shopify#1745) * Jsonify customer sections (Shopify#1640) * Update translations: merchant (Shopify#1843) * Update 20 translation files * Update 1 translation file * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1849) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md * Remove CLA from probot and use new GitHub action (Shopify#1859) * Update 1 translation file (Shopify#1862) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add `reopened` activity type (Shopify#1874) * add vendor to popup notification when vendor checkbox is checked (Shopify#1870) * Add proper product title to data-shopify-title (Shopify#1858) * Update 1 translation file (Shopify#1872) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use param_name instead of label to construct an id for filter values (Shopify#839) * Fix linting issues in feature-product and main-product sections (Shopify#1873) * fix linting issues in feature-product and main-product sections * use button--secondary when dynamic checkout or subscriptions enabled (Shopify#1875) * [Card Settings] Break card global settings into Blog, Collection and Product Cards (Shopify#1774) * [Header] New logo position (Shopify#1864) * update predictive search container width (Shopify#1878) * update predictive search container width on small screens * Update 20 translation files (Shopify#1891) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix filter bug to allow filters to be removed (Shopify#1890) * [Product layout] Add desktop media position (Shopify#1720) * Update 2 translation files (Shopify#1896) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Switch blog header img to eager instead of lazy load (Shopify#1894) * Update 1 translation file (Shopify#1899) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix(sections/header): remove duplicated classnames (Shopify#1853) * change done in pickup availability (Shopify#1831) * Fix spaces in menu IDs by replacing titles with handles (Shopify#1846) * Increase left and top edge for zoom-icon element (Shopify#1902) * Increase left and top edge for zoom-icon element * Minor changes that I forgot undo * Delete unnecessary whitespace * Change left and top edges to 1.2rem * fix: drawer - typing in quantity and pressing enter empties cart (Shopify#1881) * hide quick add button when javascript is disabled (Shopify#1904) * hide quick add button when javascript disabled * Update PULL_REQUEST_TEMPLATE.md (Shopify#1892) * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md Adding hidden markdown * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: MM <martina.marien@shopify.com> * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Apply suggestions from code review * Update .github/PULL_REQUEST_TEMPLATE.md * Edit based on feedback Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update Lighthouse CI (Shopify#1898) * Update card style default for collage (Shopify#1922) * Update 1 translation file (Shopify#1924) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md to include visual change reference (Shopify#1923) * Update PULL_REQUEST_TEMPLATE.md * Change bold to heading markup * Fix slider padding and whitespace issue on Safari (Shopify#1669) * Update 1 translation file (Shopify#1928) * Add a max width to iframes within the product info container (Shopify#1929) * Fix popup cart notification overlap in the latest Safari version (Shopify#1912) * Fix video controls on the feat product section (Shopify#1940) * Update 1 translation file (Shopify#1948) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1949) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1951) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Product page] Add 2 column layout for desktop and mobile (Shopify#1766) * Android menu drawer account fix (Shopify#1945) * Fix android menu drawer not showing account * remove unnecessary code * Update 8 translation files (Shopify#1956) * Use image tag (Shopify#1906) * image_tag in collage * image_tag in multicolumn * image_tag in slideshow * image_tag in image_with_text * image_tag in collapsible-content * image_tag in video * Apply suggestions from code review Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * PR review: Clean up whitespace on capture def Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> * Complementary products (Shopify#1938) * Update translations: buyer (Shopify#1963) * Update 29 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix shadow being cut on featured collection slider, featured blog slider and collection list slider (Shopify#1961) * Fix shadow being cut on feat collection slider * Missing commit * Remove file * Rename * Add class * Remove Product Subtitle block from Featured Product section (Shopify#1964) * Remove Text Block for Product Subtitle on Dawn's pre-configured Product Page and Featured Collection sections * Remove caption from block order * Revert change for json templates * [Complementary product] Keep text alignment to the left for horizontal cards (Shopify#1965) * Keep text alignment to the left for horizontal cards * prevent image padding from global product cards settings to apply * Update version and release notes (Shopify#1966) * fix margin-top on middle center header option (Shopify#1970) * Update 1 translation file (Shopify#1967) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix slider controls showing in certain scenarios on mobile (Shopify#1973) * fix closing element (Shopify#1981) * Variant media modal fix (Shopify#1985) * Fix duplicate class attr issue * Prevent use of lazy_load variable in complementary block * Ensure complementary block loads card css (Shopify#1991) * [Complementary block] update url from the info text to the latest (Shopify#1974) * update url from the info text to the latest * fix parentheses * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add version bump and release notes (Shopify#1997) * Enable language/country selector by default (Shopify#1988) * Fetch the header (LCP) image at high priority (Shopify#1918) * [Product page] "Icon with text" block (Shopify#1933) Add a new Icon-With-Text block to Product Page * Add shopify attributes to description block on product page (Shopify#2005) * Add variant picker sold out UI [temporary solution] (Shopify#1407) * Move product media gallery and modal into snippets [Refactor] (Shopify#1934) * Move product media gallery and modal into snippets * Gallery snippet api adjustments * Fixes for featured product flexibility * Exclude media_size from gallery api * Update 1 translation file (Shopify#2023) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove setting for variant styling (Shopify#2025) * Remove setting for variant styling * wrong edit fix * Update 30 translation files (Shopify#2026) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Minor improvements to product media liquid [Refactor] (Shopify#2022) * Refactor ratio usage in product thumbnail * Fix zoom icon placement and featured product issues * Minor updates * Prevent ui changes from variant selection queues (Shopify#2030) * Prevent hidden Variant Picker block from breaking Quick Add (Shopify#2049) * Fix 'Cannot read properties of null' error in SliderComponent (Shopify#2053) * remove redundant role from SVGs (Shopify#2037) * remove redundant role from SVGs * hide icons from screen readers * Fix z-index issue for mega menu in Safari (Shopify#2034) * Fix z-index issue for mega menu in Safari * add comment with context * small edits * change approach * [PDP] Add SKU block (Shopify#1987) Add SKU block to PDP * Adjust mobile media selectors for new product-thumbnail markup (Shopify#2050) * Add zoom flexibility (Shopify#1983) add 'lightbox', 'hover', and 'none' zoom settings to images * Prevent media background on deferred-media container (Shopify#2068) * Add Inventory status block (Shopify#1979) * [Product page & feat. product] Fix unavailable variant issue (Shopify#2031) * Reset to default * Reset files * Reset changes Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Charles-Philippe Clermont <cp.clermont@shopify.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Talia Harrison-Marcassa <taliahm@users.noreply.github.com> Co-authored-by: Caroline <mllegeorgesand@gmail.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Maximilian Bredow <30573532+bredowmax@users.noreply.github.com> Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Antonio J <antonio.jhun62@gmail.com> Co-authored-by: Baldur Helgason <baldur.helgason@gmail.com> Co-authored-by: Alexander <alex@inso.codes> Co-authored-by: Lee Siong Chan <leesiongchan@users.noreply.github.com> Co-authored-by: Peretz Cohen <pizzaz93@users.noreply.github.com> Co-authored-by: boltgolt <boltgolt@gmail.com> Co-authored-by: Alistair Lane <alistair.lane@shopify.com> Co-authored-by: Oliviammarcello <60230008+Oliviammarcello@users.noreply.github.com> Co-authored-by: James <james@thoughtandmortar.com> Co-authored-by: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Co-authored-by: Gage <ItsGageHolland@gmail.com> Co-authored-by: Daniel Nieuwenhuizen <danielvan@gmail.com> Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: Yevhenii Huselietov <d46k16@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@shopify.com> Co-authored-by: Sia <siakaramalegos@gmail.com> Co-authored-by: Kasper Andersson <KasperAndersson@users.noreply.github.com> Co-authored-by: Muhammad Abdullah <76752572+dexter845@users.noreply.github.com> Co-authored-by: Nathan Dawson <n_dawson@me.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Robert <treboryx@gmail.com> Co-authored-by: Tyler Rowsell <tyler.rowsell@shopify.com> Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> Co-authored-by: Lucas Kim <s.lucas.kim@gmail.com> Co-authored-by: Sia <sia.karamalegos@shopify.com> Co-authored-by: CFX <cfxd@users.noreply.github.com>
* Add "Maximum Products to Show" setting to Product Recommendations section (Shopify#1429) * Add missing gradient support (Shopify#1304) * Add missing gradients to cards * Enforce solid bg on quantity input * Add gradient to cart notification * Add to nav, img banner, facets, slideshow, etc * Add to media modal * Add to submenu * Remove search popup gradient * Fix mobile facets scrolling/background * Adjust mobile nav gradients * Cleanup * fix border radius on combination inputs * Fix password page email signup input (Shopify#1421) * Setup theme-check GitHub annotations (Shopify#1422) * test something real quick (Shopify#1467) * Cleanup product media grid spacing (Shopify#1444) * Cleanup product media grid * Adjust grid selectors * Hopefully fix arrow alignment * Fix non-stacked item widths * Update color list order and simplify section string (Shopify#1413) * update color list order * change announcement bar string * fix label * update collapsible content * update email signup banner * update footer * update header * update image banner * update image with text * update password header and footer * update email signup * update rich text and slideshow * update missing translations * Update 20 translation files * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add mega menu (Shopify#1316) * Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> * Update translations: merchant (Shopify#1474) * Update 1 translation file (Shopify#1475) * Center align payment terms form text when there is no image (Shopify#1473) * Add grid settings to collections list (Shopify#1469) * Feat. collection updates (Shopify#1295) * Update 20 translation files (Shopify#1487) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Theme check manual fixes (Shopify#1379) * Clean up behaviour when there are only L2 links mega menu (Shopify#1492) * Center mega menu (Shopify#1482) * Update 1 translation file (Shopify#1499) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Video alt text info content update (Shopify#935) * Video alt text info content update * Update locales/en.default.schema.json * Update locales/en.default.schema.json * Update 4 translation files * Update 3 translation files * Update 9 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Adjust color contrast for Vendor on the cart page (Shopify#1462) * Add support for boolean filters (Shopify#1456) * Fixed condensed mega menu (Shopify#1504) * Fixed condensed mega menu * Fixed bug where product page thumbnail slider arrows were appearing when they shouldnt (Shopify#1510) * Fixed multicolumn gap spacing on mobile (Shopify#1505) * Fixed multicolumn gap spacing on mobile * Fixed max price display on filter drawer (Shopify#1512) * Theme check TemplateLength (Shopify#1511) * Add PR checkbox for theme documentation (Shopify#1516) * Add PR checkbox for theme documentation * Update .github/PULL_REQUEST_TEMPLATE.md * Update 1 translation file (Shopify#1517) * Update 1 translation file (Shopify#1528) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1533) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1536) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add (Shopify#1388) * Featured Collection : Fix max width setting (Shopify#1538) * Fix product rating help doc links (Shopify#1532) * fix links for product rating * Update 20 translation files * update os2 links and remove /en * update other URL to remove the language path * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Prevent empty heading in contact form (Shopify#1515) * Only render contact heading if not empty * Add fallback form heading * Move title string * Update 21 translation files * Update 3 translation files * Update 6 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Move slideshow control buttons when set to autorotate (Shopify#1523) * Update 1 translation file (Shopify#1554) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Hide inactive mobile menu items from screen readers (Shopify#1493) * Hide mobile menu ancestors from screen readers * Account for close button * Cleanup on drawer close * Account for mobile facets drawer * Vertical filter (Shopify#1443) * Remove transforms from image with text content (Shopify#1560) * Fix shop link on giftcard page (Shopify#1557) Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> * Using font size and spacing for mega menu hierarchy (Shopify#1520) * Using font size and spacing for mega menu hierarchy Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update translations: buyer (Shopify#1581) * Update 1 translation file * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add: Fix button overflow on mobile carousel (Shopify#1567) * Update spacing (Shopify#1588) * Vertical filter UX follow ups (Shopify#1568) * Vertical filter follow ups * Fix button alignment * Fix search sort * Fix sort * Fix wrapping * Fix overflow * Fix empty space * Fix button no js * Fix button style * Fix filter column * Apply secondary style * Apply button * Fix search * Fix no-js layout for drawer and product count position (Shopify#1572) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Update margin formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Update padding formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Add hidden inputs to preserve search queries (Shopify#1585) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Add hidden inputs to preserve search queries Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Version bump v5.0.0 (Shopify#1624) * Remove unused setting (Shopify#1617) * Update 5 translation files (Shopify#1626) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1634) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove recaptcha visibility hidden on contact form (Shopify#1637) * Fix Product strucure-data markup for Brand property (Shopify#1600) * Fix empty collection links (Shopify#1639) * Fix first image lazy load on main product section (Shopify#1286) * Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * replace the hex code by currentColor (Shopify#1591) * Cart drawer (Shopify#1544) * Fix button spinner in Safari (Shopify#1646) * Rich text improvements (Shopify#1635) * [Header] add setting to tweak top and bottom padding (Shopify#1654) * Add header padding setting * Update minimum to 5 * Changed defaults * Update header with option 2 * Remove unnecessary code * Update translations: buyer (Shopify#1659) * Update translations: merchant (Shopify#1681) * Remove gradient when slide container is set to be hidden on desktop (Shopify#1643) * Revert flex grow on collage card__content (Shopify#1662) * Update minimum header padding to zero (Shopify#1688) * Fix a typo in main-product.liquid (Shopify#1647) * 1-click Quick Add for products with 1 non-default variant (Shopify#1610) * Add 1-click quick-add support for products with exactly 1 non-default variant * Revert "Add 1-click quick-add support for products with exactly 1 non-default variant" This reverts commit 41648ca. * Add 1-click quick-add support for products with exactly 1 non-default variant * Switch to Variants Size * Update spacing below product media (Shopify#1689) * Update spacing below product media * Update visible * Remove extra spacing * Update desktop layout * Revert button type and button 1 ids (Shopify#1705) * Update Banner image and logo Image to use `image_tag` (Shopify#1701) * Fix product media slider peek (Shopify#1696) * Account for gap spacing in product slider width * Prevent slider arrows with single media * Remove alt text to improve screen reader experience (Shopify#1679) * Update Subtotal header for a11y (Shopify#1680) * Remove extra whitespace on Quick Add modals (Shopify#1706) * Always centered * Non centered * Revert height * Set height to initial height * Revert fixed height * Remove extra * Update 1 translation file (Shopify#1715) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Collapsible content] Add vertical padding to blocks (Shopify#1655) * Fix padding. top and bottom now gets 1.5rem * Set padding-top to 0 * Fix syntax error caused by missing calc in product CSS (Shopify#1703) * Update 1 translation file (Shopify#1739) * Cart drawer section fix (Shopify#1742) * Update translations: merchant (Shopify#1757) * Version bump v6.0.0 (Shopify#1769) * Version bump Update theme version to v6.0.0 * Update release-notes.md * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Fix box shadow being cut off on sliders (Shopify#1772) * Update contact-form.liquid (Shopify#1716) * Update main-cart-items.liquid (Shopify#1717) * Update main-collection-banner.liquid (Shopify#1718) * Remove menu title requirement (Shopify#1763) * Menu heading Remove requirement for menu heading in footer to display * Update footer.liquid * Remove helper text * Remove translations * Update footer * Update footer * Update footer * Update footer * Revert changes * Fixes * Update * Update to footer * Badge padding update (Shopify#1785) * Add video button aria label (Shopify#1728) * Change aria for active pagination nav control (Shopify#1727) * Update 1 translation file (Shopify#1809) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Warn users that link opens in a new window (Shopify#1735) * Add unique ids to card-product.liquid headings and product state badges (Shopify#1731) * Badge product card position copy update (Shopify#1795) * Badge product card position copy update * Update 7 translation files * Update 3 translation files * Update 6 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Distinct View All IDs for screen readers (Shopify#1733) * Fix Quick Add when cart type is set to Page (remove data-cart-type) (Shopify#1817) * Replaced a missing </div> tag in main-search.liquid (Shopify#1804) * version bump to 6.0.2 (Shopify#1819) * Add help text to the Variant Pills settings area (Shopify#1782) * Add help text to the Variant Pills settings section. * Update copy as per reviews. * Update 5 translation files * Update 4 translation files * Update 8 translation files * Update 2 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update translations: buyer (Shopify#1828) * Update 1 translation file * Update locales/th.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Update translations: merchant (Shopify#1818) * Update 1 translation file * Update 1 translation file * Update 1 translation file * Update locales/th.schema.json * Update 1 translation file * Update th.schema.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove duplicate .hidden class in base.css (Shopify#1811) * Setting border-top to 0.1rem to match with header navigation (Shopify#1802) updating component-facets.css to match div line width from the header * Add period to Cart global setting info text (Shopify#1751) * add period to info text * Update 1 translation file * Update 9 translation files * Update 9 translation files * Update 1 translation file Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add focus ring/border in Windows High Contrast mode (Shopify#1729) * Update 1 translation file (Shopify#1836) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Announcment alignment (Shopify#1770) * Announcement and translation * Alignment for announcement bar * Translations * Update alignment and order of options. * Update locales/th.schema.json Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * Uniform padding with link * Make colour go full width * Full width hover and justify text * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove justify * Remove justify Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add pagination to main collection list (Shopify#1745) * Jsonify customer sections (Shopify#1640) * Update translations: merchant (Shopify#1843) * Update 20 translation files * Update 1 translation file * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1849) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md * Remove CLA from probot and use new GitHub action (Shopify#1859) * Update 1 translation file (Shopify#1862) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add `reopened` activity type (Shopify#1874) * add vendor to popup notification when vendor checkbox is checked (Shopify#1870) * Add proper product title to data-shopify-title (Shopify#1858) * Update 1 translation file (Shopify#1872) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use param_name instead of label to construct an id for filter values (Shopify#839) * Fix linting issues in feature-product and main-product sections (Shopify#1873) * fix linting issues in feature-product and main-product sections * use button--secondary when dynamic checkout or subscriptions enabled (Shopify#1875) * [Card Settings] Break card global settings into Blog, Collection and Product Cards (Shopify#1774) * [Header] New logo position (Shopify#1864) * update predictive search container width (Shopify#1878) * update predictive search container width on small screens * Update 20 translation files (Shopify#1891) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix filter bug to allow filters to be removed (Shopify#1890) * [Product layout] Add desktop media position (Shopify#1720) * Update 2 translation files (Shopify#1896) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Switch blog header img to eager instead of lazy load (Shopify#1894) * Update 1 translation file (Shopify#1899) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix(sections/header): remove duplicated classnames (Shopify#1853) * change done in pickup availability (Shopify#1831) * Fix spaces in menu IDs by replacing titles with handles (Shopify#1846) * Increase left and top edge for zoom-icon element (Shopify#1902) * Increase left and top edge for zoom-icon element * Minor changes that I forgot undo * Delete unnecessary whitespace * Change left and top edges to 1.2rem * fix: drawer - typing in quantity and pressing enter empties cart (Shopify#1881) * hide quick add button when javascript is disabled (Shopify#1904) * hide quick add button when javascript disabled * Update PULL_REQUEST_TEMPLATE.md (Shopify#1892) * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md Adding hidden markdown * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: MM <martina.marien@shopify.com> * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Apply suggestions from code review * Update .github/PULL_REQUEST_TEMPLATE.md * Edit based on feedback Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update Lighthouse CI (Shopify#1898) * Update card style default for collage (Shopify#1922) * Update 1 translation file (Shopify#1924) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md to include visual change reference (Shopify#1923) * Update PULL_REQUEST_TEMPLATE.md * Change bold to heading markup * Fix slider padding and whitespace issue on Safari (Shopify#1669) * Update 1 translation file (Shopify#1928) * Add a max width to iframes within the product info container (Shopify#1929) * Fix popup cart notification overlap in the latest Safari version (Shopify#1912) * Fix video controls on the feat product section (Shopify#1940) * Update 1 translation file (Shopify#1948) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1949) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1951) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Product page] Add 2 column layout for desktop and mobile (Shopify#1766) * Android menu drawer account fix (Shopify#1945) * Fix android menu drawer not showing account * remove unnecessary code * Update 8 translation files (Shopify#1956) * Use image tag (Shopify#1906) * image_tag in collage * image_tag in multicolumn * image_tag in slideshow * image_tag in image_with_text * image_tag in collapsible-content * image_tag in video * Apply suggestions from code review Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * PR review: Clean up whitespace on capture def Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> * Complementary products (Shopify#1938) * Update translations: buyer (Shopify#1963) * Update 29 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix shadow being cut on featured collection slider, featured blog slider and collection list slider (Shopify#1961) * Fix shadow being cut on feat collection slider * Missing commit * Remove file * Rename * Add class * Remove Product Subtitle block from Featured Product section (Shopify#1964) * Remove Text Block for Product Subtitle on Dawn's pre-configured Product Page and Featured Collection sections * Remove caption from block order * Revert change for json templates * [Complementary product] Keep text alignment to the left for horizontal cards (Shopify#1965) * Keep text alignment to the left for horizontal cards * prevent image padding from global product cards settings to apply * Update version and release notes (Shopify#1966) * fix margin-top on middle center header option (Shopify#1970) * Update 1 translation file (Shopify#1967) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix slider controls showing in certain scenarios on mobile (Shopify#1973) * fix closing element (Shopify#1981) * Variant media modal fix (Shopify#1985) * Fix duplicate class attr issue * Prevent use of lazy_load variable in complementary block * Ensure complementary block loads card css (Shopify#1991) * [Complementary block] update url from the info text to the latest (Shopify#1974) * update url from the info text to the latest * fix parentheses * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add version bump and release notes (Shopify#1997) * Enable language/country selector by default (Shopify#1988) * Fetch the header (LCP) image at high priority (Shopify#1918) * [Product page] "Icon with text" block (Shopify#1933) Add a new Icon-With-Text block to Product Page * Add shopify attributes to description block on product page (Shopify#2005) * Add variant picker sold out UI [temporary solution] (Shopify#1407) * Move product media gallery and modal into snippets [Refactor] (Shopify#1934) * Move product media gallery and modal into snippets * Gallery snippet api adjustments * Fixes for featured product flexibility * Exclude media_size from gallery api * Update 1 translation file (Shopify#2023) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove setting for variant styling (Shopify#2025) * Remove setting for variant styling * wrong edit fix * Update 30 translation files (Shopify#2026) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Minor improvements to product media liquid [Refactor] (Shopify#2022) * Refactor ratio usage in product thumbnail * Fix zoom icon placement and featured product issues * Minor updates * Prevent ui changes from variant selection queues (Shopify#2030) * Prevent hidden Variant Picker block from breaking Quick Add (Shopify#2049) * Fix 'Cannot read properties of null' error in SliderComponent (Shopify#2053) * remove redundant role from SVGs (Shopify#2037) * remove redundant role from SVGs * hide icons from screen readers * Fix z-index issue for mega menu in Safari (Shopify#2034) * Fix z-index issue for mega menu in Safari * add comment with context * small edits * change approach * [PDP] Add SKU block (Shopify#1987) Add SKU block to PDP * Adjust mobile media selectors for new product-thumbnail markup (Shopify#2050) * Add zoom flexibility (Shopify#1983) add 'lightbox', 'hover', and 'none' zoom settings to images * Prevent media background on deferred-media container (Shopify#2068) * Add Inventory status block (Shopify#1979) * [Product page & feat. product] Fix unavailable variant issue (Shopify#2031) Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Charles-Philippe Clermont <cp.clermont@shopify.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Talia Harrison-Marcassa <taliahm@users.noreply.github.com> Co-authored-by: Caroline <mllegeorgesand@gmail.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Maximilian Bredow <30573532+bredowmax@users.noreply.github.com> Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Antonio J <antonio.jhun62@gmail.com> Co-authored-by: Baldur Helgason <baldur.helgason@gmail.com> Co-authored-by: Alexander <alex@inso.codes> Co-authored-by: Lee Siong Chan <leesiongchan@users.noreply.github.com> Co-authored-by: Peretz Cohen <pizzaz93@users.noreply.github.com> Co-authored-by: boltgolt <boltgolt@gmail.com> Co-authored-by: Alistair Lane <alistair.lane@shopify.com> Co-authored-by: Oliviammarcello <60230008+Oliviammarcello@users.noreply.github.com> Co-authored-by: James <james@thoughtandmortar.com> Co-authored-by: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Co-authored-by: Gage <ItsGageHolland@gmail.com> Co-authored-by: Daniel Nieuwenhuizen <danielvan@gmail.com> Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: Yevhenii Huselietov <d46k16@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@shopify.com> Co-authored-by: Sia <siakaramalegos@gmail.com> Co-authored-by: Kasper Andersson <KasperAndersson@users.noreply.github.com> Co-authored-by: Muhammad Abdullah <76752572+dexter845@users.noreply.github.com> Co-authored-by: Nathan Dawson <n_dawson@me.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Robert <treboryx@gmail.com> Co-authored-by: Tyler Rowsell <tyler.rowsell@shopify.com> Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> Co-authored-by: Lucas Kim <s.lucas.kim@gmail.com> Co-authored-by: Sia <sia.karamalegos@shopify.com> Co-authored-by: CFX <cfxd@users.noreply.github.com>
* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>
Why are these changes introduced?
Part of #947
What approach did you take?
Add Liquid markup for mega menu
Style links
Currently in a snippet so it can be worked on in isolation, but can be moved intoheader.liquid
Add header section setting for enabling mega menu
en
localeAdd styles for mega menu
component-mega-menu.css
component-mega-menu.css
is loaded only if mega menu is enabledOther considerations
main
Testing steps/scenarios
Screenshot
Mega menu enabled
Screenshot
Screenshot
Screenshot
Demo links
Checklist