shopify_app 14.4.4 → 18.0.2

data/app/views/shopify_app/partials/_layout_styles.html.erb

@@ -35,7 +35,7 @@
     min-height:100%;
     margin:0;
     padding:0;
-    background-color:#f4f6f8;
+    background-color:#f6f6f7;
   }
 
   *,
@@ -61,6 +61,10 @@
     max-width:99.8rem;
   }
 
+  .Polaris-Page--InstallApp {
+    max-width: 70rem;
+  }
+
   @media (min-width: 30.625em) {
     .Polaris-Page {
       padding:0 2rem;
@@ -73,6 +77,7 @@
   }
 
   .Polaris-Page__Content {
+    width: 100%;
     margin:2rem 0;
   }
 
@@ -158,6 +163,16 @@
     justify-content:flex-end;
   }
 
+  .Polaris-Stack--distributionTrailingCustomSpacing {
+    margin-right:2rem;
+  }
+
+  @media (min-width: 30.625em) {
+    .Polaris-Stack--distributionTrailingCustomSpacing {
+      margin-right:0;
+    }
+  }
+
   .Polaris-Stack--vertical {
     -webkit-box-orient:vertical;
     -webkit-box-direction:normal;

data/app/views/shopify_app/partials/_typography_styles.html.erb

@@ -16,16 +16,16 @@
     margin:0;
   }
 
-  .Polaris-DisplayText--sizeMedium {
-    font-size:2.1rem;
+  .Polaris-DisplayText--sizeSmall {
+    font-size:1.6rem;
     font-weight:400;
-    line-height:2.8rem;
+    line-height:2.4rem;
   }
 
   @media (min-width: 40em) {
-    .Polaris-DisplayText--sizeMedium {
-      font-size:2.6rem;
-      line-height:3.2rem;
+    .Polaris-DisplayText--sizeSmall {
+      font-size:2rem;
+      line-height:2.8rem;
     }
   }
 

data/app/views/shopify_app/sessions/enable_cookies.html.erb

@@ -52,7 +52,7 @@
                 </div>
               </div>
               <div class="Polaris-Stack__Item">
-                <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+                <div class="Polaris-Stack Polaris-Stack--distributionTrailing Polaris-Stack--distributionTrailingCustomSpacing">
                   <div class="Polaris-Stack__Item">
                     <button type="button" class="Polaris-Button Polaris-Button--primary" id="AcceptCookies">
                       <span class="Polaris-Button__Content"><span><%= I18n.t('enable_cookies_action') %></span></span>

data/app/views/shopify_app/sessions/new.html.erb

@@ -5,119 +5,47 @@
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <style>
-    * {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    body {
-      padding: 2.5em 0;
-      color: #212b37;
-      font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
-    }
-
-    .container {
-      width: 100%;
-      text-align: center;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    @media screen and (min-width: 510px) {
-      .container {
-        width: 510px;
-      }
-    }
-
-    .title {
-      font-size: 1.5em;
-      margin: 2em auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      word-break: break-all;
-    }
-
-    .subtitle {
-      font-size: 0.8em;
-      font-weight: 500;
-      color: #64737f;
-      line-height: 2em;
-    }
-
-    .error {
-      line-height: 1em;
-      padding: 0.5em;
-      color: red;
-    }
-
-    input.marketing-input {
-      width: 100%;
-      height: 52px;
-      padding: 0 15px;
-      box-shadow: 0 0 0 1px #ddd;
-      border: 0;
-      border-radius: 5px;
-      background-color: #fff;
-      font-size: 1em;
-      margin-bottom: 15px;
-    }
-
-    input.marketing-input:focus {
-      color: #000;
-      outline: 0;
-      box-shadow: 0 0 0 2px #5e6ebf;
-    }
-
-    button.marketing-button {
-      display: inline-block;
-      width: 100%;
-      padding: 1.0625em 1.875em;
-      background-color: #5e6ebf;
-      color: #fff;
-      font-weight: 700;
-      font-size: 1em;
-      text-align: center;
-      outline: none;
-      border: 0 solid transparent;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-
-    button.marketing-button:hover {
-      background: linear-gradient(to bottom, #5c6ac4, #4959bd);
-      border-color: #3f4eae;
-    }
-
-    button.marketing-button:focus {
-      box-shadow: 0 0 0.1875em 0.1875em rgba(94,110,191,0.5);
-      background-color: #223274;
-      color: #fff;
-    }
-  </style>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/card_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
+  <%= render 'shopify_app/partials/form_styles' %>
 </head>
 <body>
-
   <main class="container" role="main">
-    <% application_name = ShopifyApp.configuration.application_name %>
-    <h3 class="title">
-      <%= application_name.presence || 'Shopify App – Installation' %>
-    </h3>
-    <p class="subtitle">
-      <label for="shop">Enter your shop domain to log in or install this app.</label>
-    </p>
-
-    <%= form_tag login_path do %>
-      <% if flash[:error] %>
-        <div class="error"><%= flash[:error] %></div>
-      <% end %>
-      <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="marketing-input">
-      <button type="submit" class="marketing-button">Install</button>
-    <% end %>
+    <div class="Polaris-Page Polaris-Page--InstallApp">
+      <div class="Polaris-Page__Content">
+        <div class="Polaris-Layout">
+          <div class="Polaris-Layout__Section">
+            <div class="Polaris-Card">
+              <div class="Polaris-Card__Header">
+                <% application_name = ShopifyApp.configuration.application_name %>
+                <h1 class="Polaris-Heading">
+                  <%= application_name.presence || 'Shopify App – Installation' %>
+                </h1>
+              </div>
+              <div class="Polaris-Card__Section">
+                <%= form_tag login_path do %>
+                  <div class="Polaris-Label">
+                    <label class="Polaris-Label__Text" for="shop">Enter your shop domain to log in or install this app.</label>
+                  </div>
+                  <div class="Polaris-TextField <%= 'Polaris-TextField--InlineError' if flash[:error]%>">
+                    <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="Polaris-TextField__Input">
+                    <div class="Polaris-TextField__Backdrop"></div>
+                  </div>
+                  <% if flash[:error] %>
+                    <div class="Polaris-InlineError"><%= flash[:error] %></div>
+                  <% end %>
+                  <button type="submit" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
+                    <span class="Polaris-Button__Content"><span>Install app</span>
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
-
 </body>
 </html>

data/app/views/shopify_app/sessions/request_storage_access.html.erb

@@ -49,7 +49,7 @@
               </div>
             </div>
             <div class="Polaris-Stack__Item">
-              <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+              <div class="Polaris-Stack Polaris-Stack--distributionTrailing Polaris-Stack--distributionTrailingCustomSpacing">
                 <div class="Polaris-Stack__Item">
                   <button type="button" class="Polaris-Button Polaris-Button--primary" id="TriggerAllowCookiesPrompt">
                     <span class="Polaris-Button__Content"><span><%= I18n.t('request_storage_access_action') %></span></span>

data/app/views/shopify_app/sessions/top_level_interaction.html.erb

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <base target="_top">
   <title>Redirecting…</title>
+  <%= render 'shopify_app/partials/card_styles' %>
   <%= render 'shopify_app/partials/layout_styles' %>
   <%= render 'shopify_app/partials/typography_styles' %>
   <%= render 'shopify_app/partials/button_styles' %>
@@ -25,26 +26,30 @@
           <div class="Polaris-Layout__Section">
             <div class="Polaris-Stack Polaris-Stack--vertical">
               <div class="Polaris-Stack__Item">
-                <div class="Polaris-EmptyState">
-                  <div class="Polaris-EmptyState__Section">
-                    <div class="Polaris-EmptyState__DetailsContainer">
-                      <div class="Polaris-EmptyState__Details">
-                        <div class="Polaris-TextContainer">
-                          <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeMedium"><%= I18n.t('top_level_interaction_heading', app: ShopifyApp.configuration.application_name) %></h1>
-                          <div class="Polaris-EmptyState__Content">
-                            <p><%= I18n.t('top_level_interaction_body', app: ShopifyApp.configuration.application_name) %></p>
+                <div class="Polaris-Card">
+                  <div class="Polaris-Card__Section">
+                    <div class="Polaris-EmptyState">
+                      <div class="Polaris-EmptyState__Section">
+                        <div class="Polaris-EmptyState__DetailsContainer">
+                          <div class="Polaris-EmptyState__Details">
+                            <div class="Polaris-TextContainer">
+                              <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall"><%= I18n.t('top_level_interaction_heading', app: ShopifyApp.configuration.application_name) %></h1>
+                              <div class="Polaris-EmptyState__Content">
+                                <p><%= I18n.t('top_level_interaction_body', app: ShopifyApp.configuration.application_name) %></p>
+                              </div>
+                            </div>
+                            <div class="Polaris-EmptyState__Actions">
+                              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
+                                <div class="Polaris-Stack__Item"><button type="button" id="TopLevelInteractionButton" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"></span><span><%= I18n.t('top_level_interaction_action') %></span></span></button></div>
+                              </div>
+                            </div>
                           </div>
                         </div>
-                        <div class="Polaris-EmptyState__Actions">
-                          <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
-                            <div class="Polaris-Stack__Item"><button type="button" id="TopLevelInteractionButton" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"></span><span><%= I18n.t('top_level_interaction_action') %></span></span></button></div>
-                          </div>
+                        <div class="Polaris-EmptyState__ImageContainer">
+                          <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
                         </div>
                       </div>
                     </div>
-                    <div class="Polaris-EmptyState__ImageContainer">
-                      <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
-                    </div>
                   </div>
                 </div>
               </div>

data/app/views/shopify_app/shared/post_redirect_to_auth_shopify.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <base target="_top">
+  <title>Redirecting…</title>
+  <%= javascript_include_tag('shopify_app/post_redirect', crossorigin: 'anonymous', integrity: true) %>
+</head>
+<body>
+  <%= form_tag '/auth/shopify', id: 'redirect-form' %>
+</body>
+</html>

data/config/locales/de.yml

@@ -4,19 +4,19 @@ de:
   could_not_log_in: Shopify Store Login fehlgeschlagen
   invalid_shop_url: Ungültige Shop-Domain
   enable_cookies_heading: Cookies von %{app} aktivieren
-  enable_cookies_body: Sie müssen Cookies in diesem Browser manuell aktivieren, um
-    %{app} in Shopify verwenden zu können.
-  enable_cookies_footer: Mithilfe von Cookies kann die App Sie authentifizieren, indem
-    Ihre Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden.
-    Sie laufen nach 30 Tagen ab.
+  enable_cookies_body: Du musst Cookies in diesem Browser manuell aktivieren, um %{app}
+    in Shopify verwenden zu können.
+  enable_cookies_footer: Mithilfe von Cookies kann die App dich authentifizieren,
+    indem deine Einstellungen und personenbezogenen Daten vorübergehend gespeichert
+    werden. Sie laufen nach 30 Tagen ab.
   enable_cookies_action: Cookies aktivieren
-  top_level_interaction_heading: Ihr Browser muss %{app} authentifizieren
-  top_level_interaction_body: Ihr Browser verlangt, dass Apps wie %{app} Sie um Zugriff
-    auf Cookies bitten, bevor Shopify sie für Sie öffnen kann.
+  top_level_interaction_heading: Dein Browser muss %{app} authentifizieren
+  top_level_interaction_body: Dein Browser verlangt, dass Apps wie %{app} dich um
+    Zugriff auf Cookies bitten, bevor Shopify sie für dich öffnen kann.
   top_level_interaction_action: Weiter
   request_storage_access_heading: "%{app} braucht Zugriff auf Cookies"
-  request_storage_access_body: Damit kann die App Sie authentifizieren, indem Ihre
-    Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden. Klicken
-    Sie auf "Weiter" und erlauben Sie den Cookies, die App zu verwenden.
+  request_storage_access_body: Damit kann die App dich authentifizieren, indem deine
+    Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden. Klicke
+    auf "Weiter" und erlaube Cookies, um die App zu verwenden.
   request_storage_access_footer: Cookies laufen nach 30 Tagen ab.
   request_storage_access_action: Weiter

data/config/locales/nl.yml

@@ -1,7 +1,7 @@
 ---
 nl:
   logged_out: Je bent afgemeld
-  could_not_log_in: Kon niet aanmelden bij Shopify-winkel
+  could_not_log_in: Kon niet inloggen bij Shopify-winkel
   invalid_shop_url: Ongeldig winkeldomein
   enable_cookies_heading: Schakel cookies in van %{app}
   enable_cookies_body: Je moet cookies in deze browser handmatig inschakelen om %{app}

data/config/locales/vi.yml

@@ -0,0 +1,22 @@
+---
+vi:
+  logged_out: Đã đăng xuất thành công
+  could_not_log_in: Không thể đăng nhập vào cửa hàng trên Shopify
+  invalid_shop_url: Miền cửa hàng không hợp lệ
+  enable_cookies_heading: Bật cookie từ %{app}
+  enable_cookies_body: Bạn phải bật cookie trong trình duyệt này theo cách thủ công
+    để sử dụng %{app} trong Shopify.
+  enable_cookies_footer: Cookie cho phép ứng dụng xác thực bạn bằng cách tạm thời
+    lưu trữ tùy chọn và thông tin cá nhân của bạn. Những thông tin này sẽ hết hạn
+    sau 30 ngày.
+  enable_cookies_action: Bật cookie
+  top_level_interaction_heading: Trình duyệt của bạn cần xác thực %{app}
+  top_level_interaction_body: Trình duyệt của bạn cần các ứng dụng như %{app} để yêu
+    cầu quyền truy cập vào cookie thì Shopify mới có thể mở giúp bạn.
+  top_level_interaction_action: Tiếp tục
+  request_storage_access_heading: "%{app} cần quyền truy cập cookie"
+  request_storage_access_body: Nhờ vậy, ứng dụng có thể xác thực bạn bằng cách tạm
+    thời lưu trữ thông tin cá nhân của bạn. Nhấp vào tiếp tục và cho phép cookie sử
+    dụng ứng dụng.
+  request_storage_access_footer: Cookie sẽ hết hạn sau 30 ngày.
+  request_storage_access_action: Tiếp tục

data/config/locales/zh-CN.yml

@@ -8,7 +8,7 @@ zh-CN:
   enable_cookies_footer: Cookie 使此应用能够通过暂时存储您的偏好设置和个人信息来验证您的身份。这些信息将在 30 天后过期。
   enable_cookies_action: 启用 Cookie
   top_level_interaction_heading: 您的浏览器需要对 %{app} 进行验证
-  top_level_interaction_body: 您的浏览器要求类似 %{app} 的应用向您请求访问 Cookie，之后 Shopify 才能为您打开它。
+  top_level_interaction_body: 您的浏览器要求类似 %{app} 的应用向您申请访问 Cookie，之后 Shopify 才能为您打开它。
   top_level_interaction_action: 继续
   request_storage_access_heading: "%{app} 需要访问 Cookie"
   request_storage_access_body: 这使此应用能够通过暂时存储您的个人信息来验证您的身份。单击继续并启用 Cookie 以使用此应用。

data/docs/Quickstart.md

@@ -1,93 +1,31 @@
-Quickstart
-==========
+# Quickstart
 
-Get started building and deploying a new Shopify App to Heroku in just a few minutes.
-This guide assumes you have Ruby, Rails and PostgreSQL installed on your computer already; if you haven't done that already start with [this guide.](https://guides.rubyonrails.org/v5.0/getting_started.html#installing-rails)
+This guide assumes you have completed the steps to create a new Rails app using the Shopify App gem found in the [*Usage*](/README.md#usage) section of the project's [*README*](/README.md).
 
-1. New Rails App (with postgres)
---------------------------------
+#### Table of contents
 
-To create a new Rails app and use this generator, open your terminal and run the following commands:
+[Make your app available to the internet](#make-your-app-available-to-the-internet)
 
-```sh
-$ rails new test-app --database=postgresql
-$ cd test-app
-$ git init
-$ git add .
-$ git commit -m 'new rails app'
-```
-
-2. Create a new Heroku app
---------------------------
-
-The next step is to create a new Heroku app to host your application. If you haven't got a Heroku account yet, create a free account [here](https://www.heroku.com/). 
-
-Head to the Heroku dashboard and create a new app, or run the following commands with the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install) installed, substituting `name` for the name of your own app:
-
-CLI:
-```sh
-$ heroku create name
-```
-
-3. Create a new App in the Shopify Partner dashboard
------------------------------------------
-* Create a Shopify app in the [Partners dashboard](https://partner.shopify.com). For this tutorial, you can choose either a public or custom app, but you can [learn about App Types here.](https://help.shopify.com/en/manual/apps/app-types)
-[https://app.shopify.com/services/partners/api_clients](https://app.shopify.com/services/partners/api_clients)
-* Set the callback url to `https://<appname>.herokuapp.com/`
-* Choose an embedded app
-* Set the app's `redirect_uri` to `https://<appname>.herokuapp.com/auth/shopify/callback`
-
-4. Add ShopifyApp to Gemfile
-----------------------------
-
-Run this command to add the `shopify_app` Gem to your app:
+[Use Shopify App Bridge to embed your app in the Shopify Admin](#use-shopify-app-bridge-to-embed-your-app-in-the-shopify-admin)
 
-```sh
-$ bundle add shopify_app
-```
+## Make your app available to the internet
 
-**Note:** we recommend using the latest version of Shopify Gem. Check the [Git tags](https://github.com/Shopify/shopify_app/tags) to see the latest release version and then add it to your Gemfile e.g `gem 'shopify_app', '~> 7.0.0'`
+Your local app needs to be accessible from the public Internet in order to install it on a Shopify store, to use the [App Proxy Controller](/lib/generators/shopify_app/app_proxy_controller/templates/app_proxy_controller.rb) or receive [webhooks](/docs/shopify_app/webhooks.md).
 
-5. Run the ShopifyApp generator
--------------------------------
+Use a tunneling service like [ngrok](https://ngrok.com/), [Beeceptor](https://beeceptor.com/), [Mockbin](http://mockbin.org/), or [Hookbin](https://hookbin.com/) to make your development environment accessible to the internet.
 
-Generate the code for your app by running these commands: 
+For example with [ngrok](https://ngrok.com/), run this command to set up a tunnel proxy to Rails' default port:
 
 ```sh
-# Use the keys from your app you created in the partners area
-$ rails generate shopify_app
-$ git add .
-$ git commit -m 'generated shopify app'
+ngrok http 3000
 ```
 
-Your API key and secret are read from environment variables. Refer to the main
-README for further details on how to set this up.
-
-6. Deploy your app
----------
-
-Once you've generated your app, push it into your Heroku environment to see it up and running:
-```sh
-$ git push heroku
-$ heroku run rake db:migrate
-```
-
-7. Install the App!
--------------------
-
-Ensure you have created a [development store](https://help.shopify.com/en/api/getting-started/making-your-first-request#create-a-development-store) using the Shopify Partner Dashboard. If you don't already have one, [create one by following these instructions](https://help.shopify.com/en/api/getting-started/making-your-first-request#create-a-development-store).
-
-##### Note: The following step will cause your store to become `transfer-disabled.` Read more about store transfer and why it's important [here](https://help.shopify.com/en/api/guides/store-transfers#transfer-disabled-stores). This is an irreversible change, so be sure you don't plan to transfer this store to a merchant.
-
-Install the app onto your new development store using the Partner Dashboard. Log in to your account, visit the apps page, click the app you created earlier, and looking for the `Test your app` instructions where you can select a store to install your app on.
-
-![Installing an app on the partners dashboard dropdown](/docs/install-on-dev-shop.png)
+See the [*Embed the app in Shopify*](https://shopify.dev/tutorials/build-rails-react-app-that-uses-app-bridge-authentication#embed-the-app-in-shopify) section of [*Build a Shopify app with Rails, React, and App Bridge*](https://shopify.dev/tutorials/build-rails-react-app-that-uses-app-bridge-authentication) to learn more.
 
-### OR
+## Use Shopify App Bridge to embed your app in the Shopify Admin
 
-![Installing an app on the partners dashboard card](/docs/test-your-app.png)
+A basic example of using [*Shopify App Bridge*](https://shopify.dev/tools/app-bridge) is included in the install generator. An instance Shopify App Bridge is automatically initialized in [shopify_app.js](https://github.com/Shopify/shopify_app/blob/master/lib/generators/shopify_app/install/templates/shopify_app.js). 
 
-8. Great work! 
--------------------
+The [flash_messages.js](https://github.com/Shopify/shopify_app/blob/master/lib/generators/shopify_app/install/templates/flash_messages.js) file converts Rails [flash messages](https://api.rubyonrails.org/classes/ActionDispatch/Flash.html) to App Bridge Toast actions automatically. By default, this library is included via [unpkg in the embedded_app layout](https://github.com/Shopify/shopify_app/blob/master/lib/generators/shopify_app/install/templates/embedded_app.html.erb#L27). 
 
-You're done creating your first app on Shopify. Keep going and learn more by [diving into our full documentation](https://help.shopify.com/en/api/getting-started), or join our [community of developers.](https://community.shopify.com/c/Shopify-Apps/bd-p/shopify-apps)
+For more advanced uses it is recommended to [install App Bridge via npm or yarn](https://help.shopify.com/en/api/embedded-apps/app-bridge/getting-started#set-up-shopify-app-bridge-in-your-app).

data/docs/Releasing.md

@@ -1,18 +1,21 @@
-Releasing ShopifyApp
+# Releasing ShopifyApp
 
-1. Check the Semantic Versioning page for info on how to version the new release: http://semver.org
+1. Make the code changes in a separate PR that doesn't modify the version.
+1. After that is merged, check the Semantic Versioning page for info on how to version the new release: http://semver.org
 1. Create a pull request with the following changes:
     - Update the version of ShopifyApp in lib/shopify_app/version.rb
     - Update the version of shopify_app in package.json
+    - Run `bundle` to update `Gemfile.lock`
     - Add a CHANGELOG entry for the new release with the date
     - Change the title of the PR to something like: "Packaging for release X.Y.Z"
 1. Merge your pull request
 1. Checkout and pull from master so you have the latest version of the shopify_app
 1. Tag the HEAD with the version
-```bash
-$ git tag -f vX.Y.Z && git push --tags --force
-```
+    ```bash
+    $ git tag -f vX.Y.Z && git push --tags --force
+    ```
+1. Check that Create Release workflow successfully runs
 1. Use Shipit to build and push the gem
 
-If you see an error like 'You need to create the vX.Y.X tag first', clear GIT
+If you see an error like 'You need to create the vX.Y.X tag first', clear git
 cache in Shipit settings