qikify DAF7VLRC4k0 Complete Checkout Liquid Deprecation User Guide

June 17, 2024
qikify

**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*
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

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
Before

After
After

  1. Reorder payment options by placing ‘Swish’ before ‘Upp till 36 managers del becalming.’
  2. 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.extension components

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.
Case studies

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
Case studies

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
Case studies

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.
checkout page

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.
Shopify Admin.

Step 2 : Review if there are any installed apps that customize your Thank you and Order status page.
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

  1. Install Checkout app from Shopify App Store
  2. Set up extensions and configure app in checkout editor.

Quite simple

  1. Hire a Shopify Partner Agency
  2. Send your requirements
  3. Agency will consult a suitable transitioning method for your store
  4. Agency migrate to new checkout and configure app in checkout editor

Complex

  1. Contact Shopify support for private request
  2. Develop custom app: Build – Test – Fix – Deploy (Learn more)
  3. Create a draft checkout in the checkout editor or setting up a development store
  4. Official publish new checkout page
  5. 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)

Loading......

Download This Manual (PDF format)

Download this manual  >>

Related Manuals