[Announcement bar] Add social icons #2497

eugenekasimov · 2023-04-05T23:37:14Z

PR Summary:

This PR:

adds a new setting Show social media icons to the announcement bar.
For desktop if there is only the announcements then it takes 60% of the full width of the current layout. For tablet/mobile it takes 100% of the available space.
For desktop if there are the social icons and announcements then the social icons take 30% of the full width of the current layout aligned on the left side and the announcements take 40% in the center. For tablet/mobile the announcements take 100% of the width and the social-icons are displayed in the drawer.
The size of the social icons in the utility bar was slightly reduced, but the button size stays the same.
If the announcement bar has social icons and only one announcement and it's a link then the link area is limited by a text size.

Why are these changes introduced?

Fixes #399.

What approach did you take?

I reused existing code for social list to add it to the utility bar.
Added a grid system for layout to align the social icons and announcements.

Other considerations

We have social-icons snippet but it has a css class related to the footer. I think as a follow up later we should adjust and make the snippet more universal to use it in the drawer and the utility-bar.

Visual impact on existing themes

Social-icons + announcements.

Announcements only.

Social-icons only.

Testing steps/scenarios

Add a few announcements to the utility bar. Test the width of the slider.
In the settings of the announcement bar, set Show social media icons. Make sure that the width of the slider changes from 60% to 40%.
Change the screen size to tablet and make sure the social-icons are not displayed in the utility bar and the slider occupies all available space.

Demo links

Editor

Checklist

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

bakura10 · 2023-04-06T11:00:14Z

I am against renaming this section to utility bar. The naming announcement-bar is used consistently in Shopify ecosystem. Renaming Dawn section to utility bar now would create a big inconsistency with our themes that have been using announcement bar for ages. Renaming this would also break most of existing resources, tutorials and documentation.

Add basic logic for social-icons in the utility-bar.

Remove social icons snippet

Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar.

YoannJailin · 2023-04-12T16:56:02Z

@eugenekasimov to summarize the changes :

- Behavior in the page depending on the checked options have been updated in figma.
- Would that be possible to reduce the social icons size like in the mockup sent above? It's okay if we keep the current buttons size.
- Current mockups shows the pause button with vertical separators around the chevrons, please don't add thoses because we might just not go forward with this.

For the announcement slider :

- Setting the minimum speed to 5s
- Defaulting to "off"
- Stop animation on hover
- Stop animation on mobile menu
- Stop auto-rotation if user has interacted with a chevron
- We should disable the auto-transition entirely when the visitor has prefers-reduced-motion active.

What is left for us to decide :

How to handle secondary navigation
Do we keep the pause button
Final settings order and naming to be communicated after previous points are solved

Reduce social icons sizes for in the utility bar. Change grid system.

YoannJailin · 2023-04-24T18:57:57Z

@eugenekasimov an update about the utility bar. We decided to descope the secondary navigation (at any level of the header group). So we don't see much value into doing the 2 rows layout on minimum desktop anymore.

Do you think we can remove that behavior easily? I also updated the figma file.

1/ If there is no announcements but we have social media icons, we can have all the icons on the row.
2/ If there is social icons + announcement, announcement would take 40% of the grid. Icons can distribute on different rows.

eugenekasimov · 2023-04-26T17:42:10Z

@YoannJailin thanks for update 👌.

…der 1120px. Remove JS logic.

assets/base.css

sections/announcement-bar.liquid

assets/base.css

sections/announcement-bar.liquid

assets/base.css

Refactor of liquid logic. Use social-icons as a snippet.

ludoboludo

A few nitpicks but it's looking good 👍

ludoboludo · 2023-05-31T14:43:42Z

sections/announcement-bar.liquid

+    {%- endif -%}
+    {%- if section.blocks.size == 1 -%}
+      <div
+        class="announcement-bar{% if section.settings.show_social %} utility-bar__item--announcement{% endif %}"


I find the class name utility-bar__item--announcement not quite right. It's a modifier and would need to be applied along with a utility-bar__item class to follow BEM convention.

I notice it's already the case on other elements (eg: utility-bar--grid) which could be addressed too.

I find the class name utility-bar__item--announcement not quite right. It's a modifier and would need to be applied along with a utility-bar__item class to follow BEM convention.

Oh, I guess your point is that there is no element with class .utility-bar__item so it's not right to use .utility-bar__item--announcement on its own. Is it right?

How do you feel if I change this .utility-bar__item--announcement to .announcement-bar--one-announcement because basically I need to apply this class when the quantity of announcements = 1.

assets/base.css

sections/announcement-bar.liquid

snippets/social-icons.liquid

Change the naming in css accordingly BEM.

ludoboludo

I think it's look good 🤔 👍

sofiamatulis

Looks great! Added a few small questions 👀

sofiamatulis · 2023-06-02T20:28:53Z

assets/base.css

@@ -99,7 +99,7 @@ html.no-js .no-js-hidden {
  padding: 0 1.5rem;
 }


Shouldnt it hide on mobile if the setting is off? 👀 https://screenshot.click/02-27-h1a02-slcfh.mp4

It's the same behaviour we have with the footer section, no matter if you show social icons there or not, we always display them in the drawer.
I feel it may make sense to work on this in the feature, but it should not be a blocker for this PR. I don't remember the context, but it's hard to decide what logic to follow when you have social-icons in three places: the announcement bar, footer and drawer. And for example, if you want to show them in the footer but not in the announcement-bar, then should we show them in the drawer? On top of that, since social-icons live in three different sections we cannot make social-icons in the header to be dependent on settings in the announcement bar or footer.

sofiamatulis · 2023-06-02T20:34:39Z

assets/base.css

+
+@media screen and (max-width: 989px) {
+  .utility-bar .utility-bar__grid .list-social {
+    display: none;


If we dont show it on mobile, shouldnt we add a note to the settings? 🤔

Thanks for brining it up. In my opinion we can assume it's something intuitive, however if you feel we should raise this question, I'm okay with that.

@YoannJailin what do you think about the fact that show social-icons on the screen size up to 990px and for smaller screens we hide them because we always show icons in the drawer? Do we mention about it in the settings?

I could see how some info text could help understand that when it's mobile/tablet size it will be moved in the menu drawer.

@YoannJailin @melissaperreault could you pls step in and help us decide? I can easily add info text, I just need UX approval for this :)

@eugenekasimov i agree we should be explicit that some features only shows up on mobile. Let me take a look on that this afternoon.

@sofiamatulis we decided to change the label to Show icons on desktop. Thanks for brining up this question.

fixed here dc6dd49

sofiamatulis · 2023-06-02T20:35:36Z

assets/base.css

+@media screen and (min-width: 990px) {
+  .utility-bar__grid {
+    grid-template-columns: 3fr 4fr 3fr;
+    grid-template-areas: 'social-icons announcements language-currency';


I dont see language-currency in the announcement bar. Am I missing something? 👀

it's going to be a next feature I'll be working on for the announcement bar. But since I created grid system in this PR I decided to name it properly already now.

sofiamatulis

Looks good :) thanks for the changes 💯

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

* Add animation to the announcement bar. * Add animation for the current and next slides. * Make animation works for auto-rotating. * Ensure the slider rotates in reverse when it reaches the end/begining. * Add condition to apply delay for announcement-bar only * Refactor and update some logic. * Refactoring. * Remove unneccessary css code. * Refactor css. Change the order. * Refactor JS. * Refactor css. * Isolate all logic in slideshowComponent. * Simplify applyAnimation method. * Reuse currentPage * Apply animation on selected slides. * Adjust duration of animation and shifting. * Refactoring * Another refactoring * Remove timeout and add delay in css * Refactoring * Add no-js * Prevent snapping during animation * Fix auto-rotation positioning * Refactor applyAnimation * Refactor and remove unused elements * [Announcement bar] Add social icons (#2497) * Rename announcement-bar to utility-bar section. Add basic logic for social-icons in the utility-bar. * Remove social icons from the utility bar for tablet Remove social icons snippet * Prevent auto-rotation after users interact with arrow buttons. Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar. * Prevent auto-rotation for mobile. Reduce social icons sizes for in the utility bar. Change grid system. * Prevent showing bottom-border when the utility bar is empty. * Add layout for screens under 1200px. * Adjust a separater line for max-width: 1199px * Revert announcement-bar name. Remove additional layout for desktop under 1120px. Remove JS logic. * Minor changes. * Refactor of css classes. Refactor of liquid logic. Use social-icons as a snippet. * Refactor in social-icons snippet. Change the naming in css accordingly BEM. * Update 14 translation files * Update 6 translation files * Change label for show_social. * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use live region to announce recipient form (#2672) * Use live region to announce recipient form * Inject text instead of toogling aria-hidden * Announce form collapsed when checkbox unticked * Update 20 translation files * Update 4 translation files * Update 6 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Safari fix and addressing feadback * Correct typo * Remove unnecessary code * Prevent applying animation when you scroll * Remove console.log * Refactoring --------- 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: Fred Ma <frederic.ma@shopify.com>

* Rename announcement-bar to utility-bar section. Add basic logic for social-icons in the utility-bar. * Remove social icons from the utility bar for tablet Remove social icons snippet * Prevent auto-rotation after users interact with arrow buttons. Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar. * Prevent auto-rotation for mobile. Reduce social icons sizes for in the utility bar. Change grid system. * Prevent showing bottom-border when the utility bar is empty. * Add layout for screens under 1200px. * Adjust a separater line for max-width: 1199px * Revert announcement-bar name. Remove additional layout for desktop under 1120px. Remove JS logic. * Minor changes. * Refactor of css classes. Refactor of liquid logic. Use social-icons as a snippet. * Refactor in social-icons snippet. Change the naming in css accordingly BEM. * Update 14 translation files * Update 6 translation files * Change label for show_social. * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

* Add animation to the announcement bar. * Add animation for the current and next slides. * Make animation works for auto-rotating. * Ensure the slider rotates in reverse when it reaches the end/begining. * Add condition to apply delay for announcement-bar only * Refactor and update some logic. * Refactoring. * Remove unneccessary css code. * Refactor css. Change the order. * Refactor JS. * Refactor css. * Isolate all logic in slideshowComponent. * Simplify applyAnimation method. * Reuse currentPage * Apply animation on selected slides. * Adjust duration of animation and shifting. * Refactoring * Another refactoring * Remove timeout and add delay in css * Refactoring * Add no-js * Prevent snapping during animation * Fix auto-rotation positioning * Refactor applyAnimation * Refactor and remove unused elements * [Announcement bar] Add social icons (Shopify#2497) * Rename announcement-bar to utility-bar section. Add basic logic for social-icons in the utility-bar. * Remove social icons from the utility bar for tablet Remove social icons snippet * Prevent auto-rotation after users interact with arrow buttons. Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar. * Prevent auto-rotation for mobile. Reduce social icons sizes for in the utility bar. Change grid system. * Prevent showing bottom-border when the utility bar is empty. * Add layout for screens under 1200px. * Adjust a separater line for max-width: 1199px * Revert announcement-bar name. Remove additional layout for desktop under 1120px. Remove JS logic. * Minor changes. * Refactor of css classes. Refactor of liquid logic. Use social-icons as a snippet. * Refactor in social-icons snippet. Change the naming in css accordingly BEM. * Update 14 translation files * Update 6 translation files * Change label for show_social. * Update 15 translation files * Update 5 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use live region to announce recipient form (Shopify#2672) * Use live region to announce recipient form * Inject text instead of toogling aria-hidden * Announce form collapsed when checkbox unticked * Update 20 translation files * Update 4 translation files * Update 6 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Safari fix and addressing feadback * Correct typo * Remove unnecessary code * Prevent applying animation when you scroll * Remove console.log * Refactoring --------- 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: Fred Ma <frederic.ma@shopify.com>

eugenekasimov requested a review from YoannJailin April 6, 2023 00:01

Rename announcement-bar to utility-bar section.

bdcf2c6

Add basic logic for social-icons in the utility-bar.

eugenekasimov force-pushed the add-social-icons-utility-bar branch from 530fc50 to bdcf2c6 Compare April 6, 2023 16:15

eugenekasimov added 2 commits April 10, 2023 09:39

Remove social icons from the utility bar for tablet

0fe095c

Remove social icons snippet

Prevent auto-rotation after users interact with arrow buttons.

249f8e4

Change the slider width for screens wider than 1200px. Rename back a file name from utility-bar to announcement-bar.

eugenekasimov added 2 commits April 12, 2023 13:23

Prevent auto-rotation for mobile.

394dd80

Reduce social icons sizes for in the utility bar. Change grid system.

Prevent showing bottom-border when the utility bar is empty.

f7bd9d8

eugenekasimov changed the title ~~[Utility bar] Add social icons~~ [Utility bar] Add social icons and follow ups for announcements slider Apr 13, 2023

eugenekasimov and others added 3 commits April 13, 2023 11:44

Add layout for screens under 1200px.

ac86fd9

Adjust a separater line for max-width: 1199px

1d88b61

Merge branch 'main' into add-social-icons-utility-bar

7c183b7

Revert announcement-bar name. Remove additional layout for desktop un…

e224d31

…der 1120px. Remove JS logic.

eugenekasimov force-pushed the add-social-icons-utility-bar branch from 407dd03 to e224d31 Compare April 27, 2023 18:50

eugenekasimov changed the title ~~[Utility bar] Add social icons and follow ups for announcements slider~~ [Announcement bar] Add social icons Apr 27, 2023

YoannJailin approved these changes Apr 27, 2023

View reviewed changes

eugenekasimov mentioned this pull request Apr 28, 2023

[Announcement bar] Change the slider width to 60% #2593

Merged

10 tasks

eugenekasimov and others added 3 commits May 15, 2023 13:58

Merge branch 'main' into add-social-icons-utility-bar

5e46d40

Minor changes.

7615f48

Merge branch 'main' into add-social-icons-utility-bar

cec525c

ludoboludo reviewed May 29, 2023

View reviewed changes

Refactor of css classes.

6fd4978

Refactor of liquid logic. Use social-icons as a snippet.

ludoboludo reviewed May 31, 2023

View reviewed changes

Refactor in social-icons snippet.

15a9649

Change the naming in css accordingly BEM.

ludoboludo approved these changes Jun 1, 2023

View reviewed changes

Update 14 translation files

faaad42

sofiamatulis reviewed Jun 2, 2023

View reviewed changes

translation-platform bot and others added 2 commits June 5, 2023 13:14

Update 6 translation files

6dbe506

Change label for show_social.

dc6dd49

eugenekasimov requested a review from sofiamatulis June 6, 2023 20:37

sofiamatulis approved these changes Jun 7, 2023

View reviewed changes

sofiamatulis self-assigned this Jun 7, 2023

eugenekasimov and others added 3 commits June 7, 2023 08:55

Fix conflicts.

487b2c0

Update 15 translation files

537d100

Update 5 translation files

da511e1

eugenekasimov merged commit 6a53a04 into main Jun 9, 2023

eugenekasimov deleted the add-social-icons-utility-bar branch June 9, 2023 17:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Announcement bar] Add social icons #2497

[Announcement bar] Add social icons #2497

eugenekasimov commented Apr 5, 2023 •

edited

Loading

bakura10 commented Apr 6, 2023 •

edited

Loading

YoannJailin commented Apr 12, 2023 •

edited by eugenekasimov

Loading

YoannJailin commented Apr 24, 2023

eugenekasimov commented Apr 26, 2023

ludoboludo left a comment

ludoboludo May 31, 2023

eugenekasimov May 31, 2023

ludoboludo left a comment

sofiamatulis left a comment

sofiamatulis Jun 2, 2023

eugenekasimov Jun 2, 2023 •

edited

Loading

sofiamatulis Jun 2, 2023

eugenekasimov Jun 2, 2023

ludoboludo Jun 5, 2023

eugenekasimov Jun 5, 2023

YoannJailin Jun 6, 2023

eugenekasimov Jun 6, 2023

sofiamatulis Jun 2, 2023

eugenekasimov Jun 2, 2023

sofiamatulis left a comment

		@@ -99,7 +99,7 @@ html.no-js .no-js-hidden {
		padding: 0 1.5rem;
		}

[Announcement bar] Add social icons #2497

[Announcement bar] Add social icons #2497

Conversation

eugenekasimov commented Apr 5, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Other considerations

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

bakura10 commented Apr 6, 2023 • edited Loading

YoannJailin commented Apr 12, 2023 • edited by eugenekasimov Loading

YoannJailin commented Apr 24, 2023

eugenekasimov commented Apr 26, 2023

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eugenekasimov Jun 2, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sofiamatulis left a comment

Choose a reason for hiding this comment

eugenekasimov commented Apr 5, 2023 •

edited

Loading

bakura10 commented Apr 6, 2023 •

edited

Loading

YoannJailin commented Apr 12, 2023 •

edited by eugenekasimov

Loading

eugenekasimov Jun 2, 2023 •

edited

Loading