How to modify Unsubscribe Page In Shopify?

How to Customize Your Shopify Unsubscribe Page: A Workaround Guide

Introduction

Handling unsubscriptions with care can make a lasting impression on your customers. Customizing your Shopify unsubscribe page allows you to leave them with a positive sentiment towards your brand, even as they opt out of your email list. This guide will show you how to achieve this using a workaround involving Liquid code.

Step-by-Step Instructions

Step 1: Access Your Shopify Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Click on Actions > Edit code for the theme you’re using.

Step 2: Locate the Necessary File

You will typically need to edit your theme’s theme.liquid file or another relevant template file where the unsubscribe functionality is rendered.

Step 3: Add the Custom Code

Insert the following code into the appropriate file:

{% if request.path == '/account/unsubscribe' %}
  {% capture new_content %}
    <style>
      .shopify-email-marketing-confirmation__container {
          padding-top: 4rem;
          text-align: center;
          padding-bottom: 4rem;
          visibility: visible!important;
      }
      main#MainContent {
          background: #000;
          color: #fff;
      }
    </style>
    <img height="100" src="https://www.masonsofyorkshire.com/cdn/shop/files/logo-white_x90_366bbf78-b54a-4b4c-9348-9befc609d44b_x100.png?v=1613725793" alt="Rain Designs Boutique Logo">
    <p>Sorry to see ya go!</p>   
  <p>You won’t receive any more marketing updates from us. You can subscribe again at any time.</p>
  {% endcapture %}
  <style>
    main#MainContent {
        background: #000;
        color: #fff;
    }
    .shopify-email-marketing-confirmation__container{
      visibility: hidden;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('.shopify-email-marketing-confirmation__container').innerHTML = `{{ new_content }}`;
    });
  </script>
{% endif %}

Step 4: Save and Preview

After adding the code, save your changes and preview the unsubscribe page to ensure everything appears as intended. The page should now display a custom message with your desired styling.

Explanation of the Workaround

• Conditional Statement: The code checks if the current path is /account/unsubscribe.
• Capture Block: A capture block stores the new content that will replace the default message.
• Styling: Custom CSS is included to style the unsubscribe page with a black background and white text.
• JavaScript: The script ensures that the custom content replaces the existing message once the page is fully loaded.

Conclusion

Customizing your Shopify unsubscribe page can transform a negative interaction into a positive one, reflecting well on your brand. Despite Shopify’s default limitations, this workaround allows you to implement a personalized and professional unsubscribe experience.

For more tips on optimizing your Shopify store and enhancing customer experiences, be sure to check out our other blog posts!

Call to Action

If you found this guide helpful, please share it with your network! Have any questions or need further assistance? Leave a comment below or contact our support team. Happy customizing!