Update Follow on Shop Option Text

[schaab]

PR Summary:

Feedback was given to update the text of the Follow on Shop feature to include some more upfront information about requirements for it be displayed.

Why are these changes introduced?

Display follow button for your storefront on the Shop app. Learn more

👆is currently displayed. When the merchant toggles the checkbox the button may or may not show up depending of the configuration of their store. It isn't clear that there are prerequisites that need to be met before the button will show up.

What approach did you take?

Update the text to:

To allow shoppers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. Learn more

This alludes to the prerequisite being present.

Visual impact on existing themes

The text in the theme editor will be updated 👇

Testing steps/scenarios

• Navigate to theme editor and the footer section. Verify text matches screenshot above.

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)
• Linted with Theme Check

[ludoboludo]

One thing I noticed about follow on shop is that it's getting a z-index: 1; on .follow-icon-wrapper and it's messing with the locale selectors on mobile:

Screenshot

Is that something that is needed for the button in the way it's built? I see removing it removes the background color.

I think we could apply some z-index to "fight it back" but wanted to check if there was a work around in the way the button is built that could prevent us from doing so 🤔

[ludoboludo]

@schaab
Since the z-index seem to be used specifically for the button itself and its styling, I think it would be great to apply this CSS on it so it create a new stacking context specific to the button: isolation: isolate; and will prevent the button from showing on top of other elements.
That could probably be applied to parent element, maybe <shop-follow-button ?

Let me know if that would be doable on your end and if yes, what would be the timeframe ? Since it's causing an issue on our themes we would want it fixed soon/by the next release which is beginning of May.

[schaab]

Ooof, that is no good. I have created an issue https://github.com/Shopify/shop-js/issues/945 for this.

For context I am working on getting some other work out this week and likely I can pick it up starting next week.