Shopify has introduced a new checkout extension, with a mandatory migration deadline for phase 1 on 13th August 2024 to upgrade your Information, Shipping, and Payment pages, and a phase 2 deadline on the 28th August 2025 to upgrade the "Thank You" and "Order Status" pages.

The upgrading of the Information, Shipping, and Payment pages does not affect your app in any way. 

The upgrading of the "Thank You" and "Order Status" pages affects your app if you have a Post-Purchase modal Campaign. The moment you upgrade, that campaign with the Post-Purchase modal stops working. To solve this we have introduced a new campaign type called Thank you / Order Status Page. 

Why did we introduce a new campaign type called Thank you / Order Status Page? 

The Post Purchase Modal is not supported in the new checkout extension. This is due to Shopify’s decision to eliminate Script Tags, which are necessary for the Post Purchase Modal campaign type. The shift away from Script Tags aligns with Shopify's goal to create a cleaner, more secure, and standardized checkout environment. 

What should you do if you have a campaign with a Post-Purchase Modal and you have upgraded your "Thank You" and "Order Status" pages?

You have 2 options: 

1) Convert your Post-Purchase Modal campaign to a Thank you / Order Status page type

Pick this option if you wish to continue using your current Post-Purchase Modal campaign as a Thank you / Order Status page campaign.

Steps:

1. Enter your app and go to the Campaigns Page
2. You should see a banner that states the Post-Purchase Modal campaign no longer works. You should see two buttons: "Convert Campaigns" or "Start from Scratch". Click "Convert Campaigns".
3. After a few minutes, all the Post-Purchase Modal campaigns should be converted to a Thank You / Order Status page, showing the same name but with the type of campaign showing "Thank You / Order Status page" instead of "Post-Purchase Modal".
4. Click edit campaign (the pencil icon) and head to the "Appearance" tab to ensure the campaign is how you would like it to look. Currently, the appearance of this campaign type has a lot of limitations that come from Shopify and are out of our control. See a few of the limitations at the bottom of this article. 
5. Lastly, head to "Installation Instructions" (the last tab on the top menu).
6. Follow the instructions on the Installation Instructions page to set up the campaign placement. This is a vital step as otherwise, your campaign will not be showing anywhere! 

2) Create a campaign from Scratch

Pick this option if you don't mind starting from scratch. Go to the How to Set up a Thank you / Order Status Page Campaign article.  

Limitations of the Thank you / Order Status Page campaign type:

1. Limited HTML Customization:

   • Shopify’s new checkout extension restricts HTML customization. Therefore, as developers, we are only allowed to use components provided by Shopify. This greatly limits the design and layout options available to you compared to other campaign types available.

2. No Access to JavaScript Variables/Objects:

   • We cannot access JavaScript objects like document or window. This limitation prevents us from implementing features like auto-copying links to the clipboard or opening links in new tabs/windows for Social Media sharing.

3. No Third-Party Script Injection:

   • Shopify does not allow the injection of third-party scripts within the new checkout extension. As a result, features like reCAPTCHA cannot be supported at this time.

Why is Shopify moving towards Checkout Extension? 

Code Management in Themes:
Previously, many apps required adding custom code to a store’s theme to enable certain features. This could be done manually by the merchant or through an API. However, this approach led to several problems:

• Garbage Code: When an app was uninstalled, the custom code often remained in the theme unless manually removed by the merchant. This leftover code created "garbage" within the theme, which could potentially cause issues or slow down the site.
• UI Disruption: Injected code sometimes interfered with the store's existing UI, leading to visual inconsistencies. For example, if a store’s primary colour was red, the injected code might change it to blue, or alter the size of buttons, causing a mismatch in the overall design.

See more info from Shopify here.

If you need help setting up, please contact us through the 24/7 Support chat within the app.