Add Follow on Shop #2211

schaab · 2023-01-11T22:11:54Z

PR Summary:

Add the Follow on Shop setting. Having this enabled creates a way for a merchants customers to follow their store in the Shop App. This allows the customer to get personalized product recommendations and notifications about the store.

Figma

Visual impact on existing themes

Testing steps/scenarios

The goal of testing is to ensure that the components show up in the proper position based on who their sibling components are. Then that it responds well to resizing of the browser window.

Make sure the Follow on Shop Button is enabled in the editor if it is not showing up in the store preview

See Figma for what alignment should look like

Browser

View theme in full width
Adjust the browser width for multiple sizes and ensure it positions correctly.

Mobile View Editor

In general content should stack and be centered.

Enable newsletter, follow on shop, social icons
Enable newsletter, social icons
Enable newsletter, follow on shop
Enable follow on shop, social icons
Enable newsletter
Enable follow on shop
Enable social icons

Desktop View

Enable newsletter, follow on shop, social icons
Enable newsletter, social icons
Enable newsletter, follow on shop
Enable follow on shop, social icons
Enable newsletter
Enable follow on shop
Enable social icons

Demo links

Store
Editor

Checklist

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

metamoni · 2023-01-13T12:02:03Z

Running shopify theme check should help with the failing CI checks 🙂

LucasLacerdaUX

Looks good to me! :D

schaab · 2023-01-13T16:23:30Z

Running shopify theme check should help with the failing CI checks 🙂

I did run it and the "error" is related to a new liquid filter that we created. I documented it in this https://github.com/Shopify/storefront-renderer/pull/16606. As I understood it, this documentation fed the theme-check, however, what is opaque to me, is how long it takes to propagate there.

Add setting to allow merchants to turn on the Follow on Shop button. This will allow customers to follow the store in the Shop app.

eugenekasimov

For some reason FOLLOW ON SHOP is not displayed without SOCIAL MEDIA ICONS or EMAIL SIGNUP. Am I missing something?

Video.

LucasLacerdaUX · 2023-01-13T20:00:15Z

Good catch, @eugenekasimov. I think we need to updte line 40 of footer.liquid:

  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}

should probably become:

  {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social or section.settings.enable_follow_on_shop -%}

sections/footer.liquid

ludoboludo

Im not sure if we would re work the focus outline on the button since it's not pulling the styles from the theme. But it looks like that on mobile:

Screenshot

Screenshot 2 with different outline color and spacing

assets/section-footer.css

ludoboludo · 2023-01-13T20:08:34Z

assets/section-footer.css

  align-items: flex-end;
  margin-top: 3rem;
+  gap: 1rem;


Here I'm wondering if we should use the variables we already have instead of a hard coded value. The blocks coming up in the footer are using column-gap: var(--grid-desktop-horizontal-spacing); and column-gap: var(--grid-mobile-horizontal-spacing);.

Not a blocker, just a thought so everything is using a similar spacing.

I looked at this and it seems to break something.

Oh maybe it's due to the flex-direction on mobile ? Since it's column 🤔
So it would need to be row-gap on mobile or use flex-wrap instead of flex-direction.

@ludoboludo Good idea. I'll include this fix on my follow-up PR for footer.

If you're okay with everything else, let's ship this to main so we can include it as part of our next round of tests and address any minor styling issues as follow ups.

assets/section-footer.css

sections/footer.liquid

Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>

schaab · 2023-01-13T20:47:45Z

Im not sure if we would re work the focus outline on the button since it's not pulling the styles from the theme. But it looks like that on mobile:

Screenshot
Screenshot 2 with different outline color and spacing

We have a PR open to try and solve this one https://github.com/Shopify/shop-js/pull/752.

Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>

LucasLacerdaUX

LGTM. Thanks for making the changes 🐕 👍

eugenekasimov

Looks good.

One minor thing I noticed, it's not really related to this PR, but if none of the Social Media Icons is assigned, it looks a bit weird and we can see shifting in layout effecting Follow on shop position. But as I said, maybe it's worth a separate PR.

schaab force-pushed the feat/follow-on-shop branch from 0ea44be to c44d785 Compare January 11, 2023 22:33

schaab self-assigned this Jan 11, 2023

schaab changed the title ~~Feat/follow on shop~~ Add Follow on Shop Jan 11, 2023

translation-platform bot force-pushed the feat/follow-on-shop branch from e6b8419 to 37a47d8 Compare January 12, 2023 17:17

schaab requested review from LucasLacerdaUX and metamoni January 12, 2023 18:19

LucasLacerdaUX previously approved these changes Jan 13, 2023

View reviewed changes

schaab dismissed LucasLacerdaUX’s stale review via 3b4d275 January 13, 2023 17:15

schaab force-pushed the feat/follow-on-shop branch from 8a49ee9 to 3b4d275 Compare January 13, 2023 17:15

feat: Add Follow on Shop Setting

5166a8a

Add setting to allow merchants to turn on the Follow on Shop button. This will allow customers to follow the store in the Shop app.

schaab force-pushed the feat/follow-on-shop branch from 3b4d275 to 5166a8a Compare January 13, 2023 17:22

Merge branch 'main' into feat/follow-on-shop

efe68b3

LucasLacerdaUX previously approved these changes Jan 13, 2023

View reviewed changes

eugenekasimov self-requested a review January 13, 2023 19:34

eugenekasimov reviewed Jan 13, 2023

View reviewed changes

When top row of footer deleted FoS button didn't show

315ae73

schaab dismissed LucasLacerdaUX’s stale review via 315ae73 January 13, 2023 20:21

LucasLacerdaUX reviewed Jan 13, 2023

View reviewed changes

sections/footer.liquid Outdated Show resolved Hide resolved

ludoboludo reviewed Jan 13, 2023

View reviewed changes

spacing the things

1c6406c

ludoboludo mentioned this pull request Jan 13, 2023

Change the .footer-block--newsletter class name #2218

Open

LucasLacerdaUX reviewed Jan 13, 2023

View reviewed changes

sections/footer.liquid Outdated Show resolved Hide resolved

schaab and others added 2 commits January 13, 2023 12:37

Update sections/footer.liquid

9eab511

Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>

remove unused style

fca04a9

Update assets/section-footer.css

a0d2f7e

Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>

LucasLacerdaUX approved these changes Jan 13, 2023

View reviewed changes

eugenekasimov approved these changes Jan 13, 2023

View reviewed changes

LucasLacerdaUX merged commit a5f65b1 into main Jan 13, 2023

LucasLacerdaUX deleted the feat/follow-on-shop branch January 13, 2023 21:17

KaichenWang mentioned this pull request Jan 16, 2023

Update version and release notes for release candidate #2228

Merged

phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024

Add Follow on Shop (Shopify#2211)

80cf300

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Follow on Shop #2211

Add Follow on Shop #2211

schaab commented Jan 11, 2023 •

edited by LucasLacerdaUX

Loading

metamoni commented Jan 13, 2023

LucasLacerdaUX left a comment

schaab commented Jan 13, 2023 •

edited

Loading

eugenekasimov left a comment •

edited

Loading

LucasLacerdaUX commented Jan 13, 2023

ludoboludo left a comment

ludoboludo Jan 13, 2023

schaab Jan 13, 2023

ludoboludo Jan 13, 2023 •

edited

Loading

LucasLacerdaUX Jan 13, 2023

schaab commented Jan 13, 2023

LucasLacerdaUX left a comment

eugenekasimov left a comment

Add Follow on Shop #2211

Add Follow on Shop #2211

Conversation

schaab commented Jan 11, 2023 • edited by LucasLacerdaUX Loading

PR Summary:

Visual impact on existing themes

Testing steps/scenarios

Browser

Mobile View Editor

Desktop View

Demo links

Checklist

metamoni commented Jan 13, 2023

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

schaab commented Jan 13, 2023 • edited Loading

eugenekasimov left a comment • edited Loading

Choose a reason for hiding this comment

LucasLacerdaUX commented Jan 13, 2023

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo Jan 13, 2023

Choose a reason for hiding this comment

schaab Jan 13, 2023

Choose a reason for hiding this comment

ludoboludo Jan 13, 2023 • edited Loading

Choose a reason for hiding this comment

LucasLacerdaUX Jan 13, 2023

Choose a reason for hiding this comment

schaab commented Jan 13, 2023

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

eugenekasimov left a comment

Choose a reason for hiding this comment

schaab commented Jan 11, 2023 •

edited by LucasLacerdaUX

Loading

schaab commented Jan 13, 2023 •

edited

Loading

eugenekasimov left a comment •

edited

Loading

ludoboludo Jan 13, 2023 •

edited

Loading