Add Logout Button In Shopify Order Page

After completing the purchase on the Shopify store Users sees the Order Status page. On this page, there is only one action button provided which is "Continue Shopping". From the user's perspective, it should also have the option for Logout from the store after the order has been placed. But, Shopify users don't have this option available. The Order Status page looks like the below image by default:

In Shopify, we can add additional custom content on the Order Status page by adding them in an "Additional scripts" section of Checkout settings in Shopify Admin. The below steps will show how we can add it.

First of all, access the Shopify Admin of the store for which you want to add the Logout Button on the Order Status page. We can see all the settings by clicking the "Settings" link from the left sidebar.

On clicking the Settings link, it will present all the available settings in Shopify. Now click on the "Checkout" link and then scroll down to the section for "Additional scripts" where you will find a Textarea for the Order status page field. This is the place where we can define our additional custom content to display on the Order Status page.

Now, you can simply add the below line of code in this field and press save.

<!-- ============ Logout button on order status page START ========== -->
<a href="{{ shop.url }}/account/logout" class="btn" style="margin-top:1em">Logout</a>
<!-- ============ Logout button on order status page END ========== -->

With the above changes, if you see any of the Order Status pages then you will find that the Logout button is displayed as shown below:

With the above simple code change, we got the Logout button. But the position of the Logout button is just below the User Name on top of the page which is not good for UX. It would be better if we have it near the Continue Shopping button.

So, In order to do that copy the below code and replace it with the previous code, we have added in the "Additional scripts" section of Checkout settings. Save the changes and check in the front end Order Status page again.

<!-- ============ Logout button on order status page START ========== -->
<script>
window.addEventListener('load', function() {    
  var customLogoutLink    = document.createElement('a');    
  customLogoutLink.text   = 'Logout';    
  customLogoutLink.href   = "{{ shop.url }}/account/logout";    
  customLogoutLink.classList.add("step__footer__continue-btn");    
  customLogoutLink.classList.add("btn");    
  customLogoutLink.setAttribute("style", "margin-right: 10px;");     
  var continueShoppingBtn = document.getElementsByClassName('step__footer')[0];    
  continueShoppingBtn.insertBefore(customLogoutLink, continueShoppingBtn.firstChild);
});
</script>
<!-- ============ Logout button on order status page END ========== -->

After adding the above code, It will look like as below image:

We have our Logout button displayed in the proper place. I hope this small post will help you to add the Logout button on your store's Order Status page.

Note: The above changes are tested on default themes. It will work on most of the other common themes but In case they don't work in some paid / custom themes you just have to make a few changes according to your theme code and it will work. If you face any difficulty then feel free to write an email: info[at]php-dev-zone.com