feat: Add Follow on Shop Setting

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.
Shopify · Jan 11, 2023 · c44d785 · c44d785
1 parent 43025db
commit c44d785
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 13 deletions.
diff --git a/assets/section-footer.css b/assets/section-footer.css
@@ -120,20 +120,15 @@
 
 .footer-block--newsletter {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
   align-items: flex-end;
   margin-top: 3rem;
+  gap: 1rem;
 }
 
 .footer-block--newsletter:only-child {
   margin-top: 0;
 }
 
-.footer-block--newsletter > * {
-  flex: 1 1 100%;
-}
-
 @media screen and (max-width: 749px) {
   .footer-block.footer-block--menu:only-child {
     text-align: left;
@@ -143,7 +138,7 @@
 @media screen and (min-width: 750px) {
   .footer-block--newsletter {
     flex-wrap: nowrap;
-    justify-content: space-between;
+    justify-content: center;
   }
 }
 
@@ -159,46 +154,94 @@
   }
 }
 
+.footer__follow-on-shop:empty,
 .footer__list-social:empty,
 .footer-block--newsletter:empty {
   display: none;
 }
 
+.footer__follow-on-shop {
+  display: flex;
+  text-align: center;
+}
+
 .footer__list-social.list-social:only-child {
   justify-content: center;
 }
 
 .footer-block__newsletter {
   text-align: center;
+  flex-grow: 1;
 }
 
 .newsletter-form__field-wrapper {
   max-width: 36rem;
 }
 
 @media screen and (min-width: 750px) {
+  /* Pushes other components to the right of the flexbox */
   .footer-block__newsletter:not(:only-child) {
     text-align: left;
+    margin-right: auto;
   }
 
   .footer-block__newsletter:not(:only-child) .footer__newsletter {
     justify-content: flex-start;
     margin: 0;
   }
 
-  .footer-block__newsletter:not(:only-child) .newsletter-form__message--success {
+  .footer-block__newsletter:not(:only-child)
+    .newsletter-form__message--success {
     left: auto;
   }
-}
 
-.footer-block__newsletter + .footer__list-social {
-  margin-top: 3rem;
+  .footer__follow-on-shop {
+    margin-bottom: 0.4rem;
+  }
+  /* Follow on shop is the first button but it has siblings*/
+  .footer__follow-on-shop:first-child:not(:last-child) {
+    justify-content: flex-start;
+    margin-right: auto;
+    text-align: left;
+  }
+
+  /*
+    All three components are present, email, Follow on Shop, and social icons.
+    Moves the FoS button next to the social icons so they appear grouped together
+  */
+  .footer__follow-on-shop:not(:first-child):not(:last-child) {
+    justify-content: flex-end;
+    text-align: right;
+  }
 }
 
 @media screen and (max-width: 749px) {
-  .footer__list-social.list-social {
+  /*
+    On a small screen we want all the items to be centered
+    because they will be stacked.
+   */
+  .footer-block--newsletter {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+    align-items: center;
+    gap: 3rem;
+  }
+
+  .footer__list-social.list-social,
+  .footer__follow-on-shop,
+  .footer-block__newsletter {
+    display: flex;
     justify-content: center;
   }
+
+  .footer-block__newsletter {
+    flex-direction: column;
+  }
+
+  .footer__follow-on-shop {
+    text-align: center;
+  }
 }
 
 @media screen and (min-width: 750px) {
@@ -360,7 +403,6 @@ noscript .localization-selector.link {
   animation: animateLocalization var(--duration-default) ease;
 }
 
-
 @media screen and (min-width: 750px) {
   .footer__payment {
     margin-top: 1.5rem;

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -959,6 +959,13 @@
         },
         "margin_top": {
           "label": "Top margin"
+        },
+         "header__9": {
+          "content": "Follow on Shop",
+          "info": "Display follow button for your storefront on the Shop app. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
+        },
+        "enable_follow_on_shop": {
+          "label": "Enable Follow on Shop"
         }
       }
     },

diff --git a/sections/footer.liquid b/sections/footer.liquid
@@ -146,6 +146,12 @@
           </div>
         {%- endif -%}
 
+         {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
+          <div class="footer__follow-on-shop">
+              {{ shop | login_button: action: 'follow' }}
+          </div>
+        {%- endif -%}
+
         {%- if section.settings.show_social -%}
           <ul class="footer__list-social list-unstyled list-social" role="list">
             {%- if settings.social_twitter_link != blank -%}
@@ -534,6 +540,17 @@
       "id": "newsletter_heading",
       "default": "Subscribe to our emails",
       "label": "t:sections.footer.settings.newsletter_heading.label"
+    },
+     {
+      "type": "header",
+      "content": "t:sections.footer.settings.header__9.content",
+      "info": "t:sections.footer.settings.header__9.info"
+    },
+    {
+      "type": "checkbox",
+      "id": "enable_follow_on_shop",
+      "default": false,
+      "label": "t:sections.footer.settings.enable_follow_on_shop.label"
     },
     {
       "type": "header",