qikify DAF7VLRC4k0 Complete Checkout Liquid Deprecation User Guide
- June 17, 2024
- qikify
Table of Contents
**qikify DAF7VLRC4k0 Complete Checkout Liquid Deprecation User Guide
**
INTRODUCTION
Welcome to Complete guide to upgrading Shopify Checkout Extensibility by Qikify! This comprehensive guide is your key to a smooth transition from checkout. liquid to checkout extensibility. Let’s explore clear upgrade steps, powerful check features, and gain inspiration from leading brands showcasing its potential to unlock remarkable results.
Checkout. liquid file is being deprecated
Checkout. liquid is deprecated and replaced by Checkout Extensibility, follows by this timeline:
Information, Shipping, and Payment steps
Thank you & Order status pages*
- including apps using script tags and additional scripts
Why checkout.liquid is being deprecated?
- Not Upgrade-Safe : Checkout. liquid is code-based → Modifications directly within theme files can lead to incompatibility issues during Shopify checkout system updates, which can disrupt the checkout process and lead to undetected lost sales.
- Limitations of customiz i ng: Customizing checkout. liquid was limited to direct code editing or relying on third-party.
- Not integrating with Shop Pay: By restricting the level of customization for Shop Pay checkout → mismatch in experience that negatively impacts checkout performance.
- Unable to enable One-page Checkout: Only added to Checkout Extensibility.
What is Checkout Extensibility?
Checkout Extensibility seamlessly customizes checkout using app-based solutions, code-free customizations, upgrade-safe, higher-converting, and integrated with Shop Pay. Checkout Extensibility offers:
- Drag-and-drop Checkout editor: An intuitive editor that allows merchants to customize the look of their checkout by customizing colors, fonts, and logos, and adding new functionality by installing apps.
- Shopify pixels manager: A new section letting merchants securely add, manage, and track conversion events without touching code.
- Checkout app from the Shopify App Store: An application that merchants can install
Who can use Shopify Checkout Extensibility
Checkout Extensibility is available for all Shopify merchants. All merchants can access standard checkout settings, however, if you want to customize checkout experiences with Checkout UI Extensions requires a Shopify Plus plan. Let’s explore the features of Checkout Extensibility available on your current Shopify plan:
FEATURES | SHOPIFY PLUS | OTHER SHOPIFY PLANS |
---|
Checkout UI extensions (Offering features like additional fields, upsells,
custom banners, business rule compliance, loyalty programs, etc)| |
Checkout Branding (Customizing logo, buttons, colors, background, and more)| |
Checkout validation| |
Customize payment methods| |
Customize delivery methods| |
Shopify function| |
Shopify pixels manager| |
FEATURES INCLUDED WITH CHECKOUT EXTENSIBILITY
Checkout branding
With checkout extensibility, you can customize the look of your checkout in the branding section of the checkout editor. There are customizations you can make your checkout shine with Checkout branding
-
Logo image
Logo width -
Logo alignment
-
Checkout background color
-
Accent colors
-
Foreground colors
-
Checkout fonts
-
One-page checkout
-
Form field backout
For advanced checkout branding customizations, you can use apps using branding API.
Customize payment and delivery options
Checkout UI Extensions gives you the perfect ways to customize or add to the payment and delivery methods with extension points and functions. With the new Shopify Checkout, you can use the checkout function and set up conditions to hide, rename, or reorder available options, whether they are payment options or shipping options.
Examples
- (Payment) Hide COD for High-Value Orders If you want to hide the COD (cash on delivery) shipping method for orders exceeding $1,000 to ensure customer commitment and payment, you can use the checkout function.
- (Delivery) Only show free express delivery for VIP customers If your customer has the VIP tag then only show the express delivery and hide all other delivery options.
(Check the demonstration images in the next page for more information)
Before
After
- Reorder payment options by placing ‘Swish’ before ‘Upp till 36 managers del becalming.’
- Use “Text field” UI checkout extension to collect Personal ID – Show trust badge to build trust for payment options.
Checkout elements (Checkout UI extensions
Where can you add the checkout elements?
With Shopify Checkout Extensibility, merchants can use Shopify UI extensions to add additional elements to target extension points in the checkout editor.
These target extension points determine where your checkout elements will appear. However, Shopify does limit where additional elements can be added.
On the checkout page, you can drag and drop checkout elements to:
Static extension points
Static extension points are tied to core checkout features such as contact information, shipping methods, and order summary line items. These are rendered immediately before or after most core checkout features.
Dynamic extension points
Dynamic extension points aren’t tied to core checkout features. These are always rendered between specific core checkout features, regardless of their position on the page.
Adding elements outside of the target extension points is not possible.
What elements you can add to the checkout page?
Checkout UI extensions let app developers build custom functionality that merchants can insert to defined points in the checkout editor. Shopify limits the types and interface of checkout elements that can be added to the checkout.
Developers and merchants cannot build completely custom elements yet, and you have to use pre-design ones to ensure compatibility and consistency with Shopify’s overall checkout branding. This means that when you customize the checkout branding will update the entire checkout UI, including any third- party extensions.
These elements can show up depending on different behaviors or segments, like what your customers are buying, how they’re getting it shipped, how they’re paying, and other details.
Comparison: Checkout.liquid vs Checkout Extensibility
ADVANTAGES | CHECKOUT.LIQUID | CHECKOUT EXTENSIBILITY |
---|
Checkout. liquid is code based → Offers fine-grained control to craft unique
checkout experiences.| No coding skills or technical knowledge required.
Compatible with Shopify Scripts API| Integrates with Shop Pay.
To enable or disable access to checkout.liquid, Shopify Plus merchants must
contact support| Supports one-page checkout
LIMITATIONS| Require technical knowledge and coding skills| Automatically
updates during Shopify updates.
Not automatically updated → Incompatibility issues during Shopify checkout
system updates → disrupt the checkout process and lead to undetected lost
sales.| Composable: Install or uninstall checkout elements.
Not integrate with Shop Pay| Ensure payment card and data security standard
compliance
Do not support one-page checkout| Incompatible with Shopify Scripts API*For
example: Complex discount that previously used Shopify scripts (If the code
starts with IND then it applies the discount.)
Often conflict with 3rd party apps, especially discount app| Can not build
completely custom elements due to the the limitations of Checkout UI and
target extension points
Creative extensions created by 3rd-party apps for the new Checkout
Extensibility
Based on the Extension APIs and Checkout UI extension provided by Shopify Engineering team, lots of talented developers have built and published checkout app solution on Shopify App Store to ease the process of transitioning liquid file to the new checkout extensibility.
In fact, the features of the available checkout apps are considered practical and have a positive impact on the sales of the store. The most-popular extensions of these apps are developed based on the best practices of countless Shopify Plus stores, which include:
- Upsell product offer
- Add-up custom fields
- Custom order summary with the ability to change selected item’s variants
- Add-on progressive reward bar to motivate customer to buy more
- Custom content: banner, trust badges, testimonials, image, actionable button
- Checkout validation
Case studies
At Qikify, we also one of the first developers developed a public checkout app
– Qikify Checkout Customizer – as invited by Shopify in 2022 when checkout
extensibility was released. Our app also covers all of the creative features
mentioned above and by the time this e-book is published, we have achieved
some remarkable performance results for our Shopify Plus merchants.
Challenge
- Struggle to charge accurate shipping fees
- Cannot provide smooth deliveries due to limited information about their furniture shipping.
Solutions
Add custom checkout fields to allow customers to input crucial details needed by their logistics team and couriers.
EnGold uses custom fields to collect information from their customers
FEATURES INCLUDED WITH CHECKOUT EXTENSIBILITY
Challenge
Boost sale and increase conversion rate on Black Friday
Solutions
Combining the progressive bar and product offer on the checkout page
FEATURES INCLUDED WITH CHECKOUT EXTENSIBILITY
Challenge
Struggle to optimize user experience in their checkout process.
Solutions
Add custom order summary to allow customers to change product options direct on the checkout page.
ORTC uses Custom Cart to enhance shopping journey on their website.
STEP-BY-STEP UPGRADE INSTRUCTION
Upgrade instruction
Here is the general guideline to upgrade your checkout page: Step 1: Review
your existing checkout customizations in Checkout. liquid. Access this from
your Themes section in Shopify Admin.
Step 2 : Review if there are any installed apps that customize your Thank
you and Order status page.
Step 3: Define scope of migration Make sure your scope aligns with the available functions provided by Shopify. For the customizations that currently aren’t supported, we highly recommend to consult an expert** to find an alternative option or temporary solution.
- With the experiences supporting over 100 stores transitioned liquid file to checkout extensity, our team always welcome you to contact us for free consulting regarding the transition process.
Step 4: Transition Checkout. liquid to Checkout extensibility You can
choose one of these three options to move your checkout from the liquid file
to the new checkout extensibility
Method 1: Use a public checkout app from the Shopify App Store
Method 2 : Hire a Shopify Partner to transition to Checkout Extensibility
Method 3: Build private app with with an in-house developers (Optional)
After transitioning to the new checkout, if you’re currently using checkout.
liquid to track customer events, you can set up pixels to replace the old
tracking method before publishing your new checkout.
You can create a draft checkout version in your Shopify admin settings to test out these methods before publishing it to live store. Your Checkout. liquid file will still run during the time you’re testing the new checkout in draft mode.
Transitioning methods comparison
MOST POPULAR
METHOD 1
USE SHOPIFY CHECKOUT APPS
MOST RELIABLE
METHOD 2
HIRE A SHOPIFY EXPERT FROM AGENCY
METHOD 3
BUILD APP WITH IN-HOUSE DEVELOPERS
Flexible
You can set it up yourself, in less than an hour! Otherwise, technical support is available.
A few days or more
Depends on the complexity of requirements. You will work with experts for the whole process.
One month or more
Depends on the complexity of requirements
Low
Mostly follow subscription model (monthly or yearly)
Average to High
One-time payment project Might have monthly cost if agency uses a 3rd-party app for migration.
High
Resourcing cost to maintain app monthly, including server cost, staff wages and other costs.
Simple
- Install Checkout app from Shopify App Store
- Set up extensions and configure app in checkout editor.
Quite simple
- Hire a Shopify Partner Agency
- Send your requirements
- Agency will consult a suitable transitioning method for your store
- Agency migrate to new checkout and configure app in checkout editor
Complex
- Contact Shopify support for private request
- Develop custom app: Build – Test – Fix – Deploy (Learn more)
- Create a draft checkout in the checkout editor or setting up a development store
- Official publish new checkout page
- Maintain private app
Active
Personal support from the app developers Support will last for a lifetime until you uninstall the app
Active
Active support during the project Support for the migration might last for awhile after the project (depends on the project contract)
Self-support
Based on the in-house staff In case the in-house developer who built app leaves the company, the successor might face technical difficulties maintaining app
Conclusion
While Checkout Extensibility still includes some limitations, its advantages clearly outweigh them.
- It ensures legal compliance with PCI DSS, WCAG, and GDPR;
- Promotes increased conversions through advanced checkout process;
- Allows you to customize your checkout for a uniquely branded experience;
- Enhances security with anti-skimming protection and prepares you for future regulatory changes.
Despite the upcoming Shopify Scripts API deprecation in 2025, the transition to Shopify Functions ensures continued functionality. In conclusion, Checkout Extensibility elevates your checkout performance, offering a future-proof and customizable experience.
P/s: If you haven’t started planning your transition yet, wehighly recommend you should start now, the earlier the better.
In fact, the average time to move all customizations is ranging from 5 to 7 days for basic requirements. For complex customization requirements, the transitioning time can take up to 1 month. (Calculated based on Qikify Checkout Customizer)
We can help you!
Live webinar with Shopify Experts
Learn all about the deprecation of Checkout. liquid and get profound advices from Shopify experts in enhancing your store’s checkout process to improve sales.
Get in touch
Over 1,600 Shopify Plus merchants transition from checkout. liquid to Checkout Extensibility with Qikify Checkout Customizer
Don’t let a limited checkout hold your business back!
Get started upgrade to Checkout Extensibility to boost your business
Contact us: support@qikify.zohodesk.com Schedule FREE consult to upgrade your checkout: here
References
Read User Manual Online (PDF format)
Read User Manual Online (PDF format) >>