www.shopify.com Open in urlscan Pro
185.146.173.20 Public Scan

Back to summary

Submitted URL:
https://shopify.pxf.io/daYLYy
Effective URL:
https://www.shopify.com/partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&irgwc=1&p...
Submission: On July 10 via manual (July 10th 2024, 2:14:06 am UTC) from JP — Scanned from JP

Form analysis
4 forms found in the DOM

GET /partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&irgwc=1&partner=4542080&affpt=excluded&utm_channel=affiliates&utm_source=4542080-impact&utm_medium=cpa

<form method="get" action="/partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&amp;irgwc=1&amp;partner=4542080&amp;affpt=excluded&amp;utm_channel=affiliates&amp;utm_source=4542080-impact&amp;utm_medium=cpa"
  class="flex lg:block w-full -mt-4 lg:mt-0" novalidate="" data-component-extra-search-value="" __bizdiag="-1654561560" __biza="W___"><input
    class="outline-0 text-base relative z-20 bg-transparent w-full lg:placeholder:text-transparent placeholder-shade-50 py-2" type="text" name="header-search" autocomplete="off" placeholder="Search" value=""><button class="lg:hidden p-6 -mr-6"
    aria-label="Search icon"><svg viewBox="0 0 20 20" class="w-4 h-4 ml-2">
      <path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path>
    </svg></button></form>

GET /partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&irgwc=1&partner=4542080&affpt=excluded&utm_channel=affiliates&utm_source=4542080-impact&utm_medium=cpa

<form method="get" action="/partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&amp;irgwc=1&amp;partner=4542080&amp;affpt=excluded&amp;utm_channel=affiliates&amp;utm_source=4542080-impact&amp;utm_medium=cpa"
  class="flex lg:block w-full -mt-4 lg:mt-0" novalidate="" data-component-extra-search-value="" __bizdiag="-1654561560" __biza="W___"><input
    class="outline-0 text-base relative z-20 bg-transparent w-full lg:placeholder:text-transparent placeholder-shade-50 py-2" type="text" name="header-search" autocomplete="off" placeholder="Search" value=""><button class="lg:hidden p-6 -mr-6"
    aria-label="Search icon"><svg viewBox="0 0 20 20" class="w-4 h-4 ml-2">
      <path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path>
    </svg></button></form>

POST /blog/api/subscribe

<form method="post" action="/blog/api/subscribe" __bizdiag="-436810802" __biza="W___">
  <div id=":R36r95n5:" data-component-name="waitlist-form-input-wrapper"
    class="[&amp;_input]:rounded-full [&amp;_input]:border-shade-3 [&amp;_input]:mb-1 [&amp;_input]:pl-4 [&amp;_input]:border-solid [&amp;_input]:border [&amp;_input]:border-shade-30 [&amp;_input]:text-xs tablet-xl:[&amp;_input]:text-base [&amp;_div]:text-xs tablet-xl:[&amp;_div]:text-base [&amp;_button]:bg-black [&amp;_button]:text-white [&amp;_button]:h-14 [&amp;_button]:text-lg [&amp;_button]:text-lg [&amp;_button]:hover:bg-[#3f3f46]  [&amp;_button]:active:bg-[#71717a]">
    <label for="email-input-:R36r95n5H1:" class="sr-only">Enter email</label><input id="email-input-:R36r95n5H1:" class="text-shade-70 h-14 w-full bg-transparent outline-none placeholder:text-black placeholder:font-normal" type="email"
      spellcheck="false" autocomplete="email" name="email" placeholder="Enter email"><input type="hidden" name="subscriptionId" value="DE84EF61-2A02-4778-8807-F01B108DE974"><input type="hidden" name="signup_page"
      value="/partners/blog/checkout-extensibility"><input type="hidden" name="locale" value="en-US"><input type="hidden" name="blogHandle" value="partners">
    <div class="hidden sm:block"><button type="submit"
        class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none"
        data-component-name="join-waitlist-form-button">Get updates</button></div>
  </div>
  <div class="block w-full sm:hidden"><button type="submit"
      class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none"
      data-component-name="join-waitlist-form-button">Get updates</button></div><input class="sr-only" id=":R1pb6r95n5:" name="address" aria-label="address">
</form>

POST /blog/api/subscribe

<form method="post" action="/blog/api/subscribe" class="flex w-full flex-col justify-center sm:w-[406px] [&amp;_button]:bg-[#7BE986] items-start text-white" __bizdiag="-436810802" __biza="W___">
  <div id=":Ruh5n5:" data-component-name="waitlist-form-input-wrapper" class="box-border flex h-14 w-full justify-between rounded-full border border-shades-60 border-[#52525B] pl-6 pr-1 items-start text-white bg-white"><label
      for="email-input-:Ruh5n5H1:" class="sr-only">Email here</label><input id="email-input-:Ruh5n5H1:" class="text-shade-70 h-14 w-full bg-transparent outline-none placeholder:text-black placeholder:font-normal" type="email" spellcheck="false"
      autocomplete="email" name="email" placeholder="Email here"><input type="hidden" name="subscriptionId" value="DE84EF61-2A02-4778-8807-F01B108DE974"><input type="hidden" name="signup_page" value="/partners/blog/checkout-extensibility"><input
      type="hidden" name="locale" value="en-US"><input type="hidden" name="blogHandle" value="partners">
    <div class="hidden sm:block"><button type="submit"
        class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none"
        data-component-name="join-waitlist-form-button">Get updates</button></div>
  </div>
  <div class="block w-full sm:hidden"><button type="submit"
      class="inline-block self-center overflow-hidden max-w-full px-button-px ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline disabled:hover-ring-0 md:py-button-lg-py border-2 text-button-light-secondary-text bg-button-light-secondary-bg border-button-light-secondary-border ring-button-light-secondary-border hover:text-button-light-secondary-text-hover hover:ring-button-light-secondary-border-hover focus:text-button-light-secondary-text-focus focus:border-button-light-secondary-border-focus focus:ring-button-light-secondary-border-focus active:text-button-light-secondary-text-active active:border-button-light-secondary-border-active active:ring-button-light-secondary-border-active disabled:text-button-light-secondary-text-disabled disabled:bg-button-light-secondary-bg-disabled disabled:border-button-light-secondary-border-disabled disabled:ring-button-light-secondary-border-disabled w-full mt-2 sm:mt-0 md:text-base py-4 sm:py-3 md:px-7 disabled:!bg-[#e5e7eb] whitespace-nowrap hover:border-white hover:ring-0 hover:bg-[#62ba6b] focus:bg-[#00740B] active:bg-[#00740B] border-none"
      data-component-name="join-waitlist-form-button">Get updates</button></div><input class="sr-only" id=":Reauh5n5:" name="address" aria-label="address">
</form>

Text Content

Skip to Content
 * Docs
 * Community
 * Shopify Academy


 * shopify.com
 * Log in
 * Join Now

 * Join Now
 * 

Shopify
BlogMenu
Search
Type something you're looking for

 * Overview
 * Shopify News
 * Web design tools
 * Latest
 * More
   * Front End Development
   * Shopify Theme Development
   * Inspiration & Creativity
   * Finding New Clients
   * App development
   * See All topics

 * Blog
 * Shopify News
 * Web design tools
 * Latest
 * More
    * Front End Development
    * Shopify Theme Development
    * Inspiration & Creativity
    * Finding New Clients
    * App development
    * See All topics

Search
Type something you're looking for

Log in
Join Now
 * Join Now
 * 

 * Docs
 * Community
 * Shopify Academy

 * Log in
 * Join Now

Become a shopify partner.

Unlock revenue opportunities.

Join now
blog|Shopify News


CHECKOUT EXTENSIBILITY OPENS NEW WAYS TO CUSTOMIZE CHECKOUTS ON SHOPIFY

Secure, fast, and upgrade-safe, Checkout Extensibility provides everything
developers and merchants need to optimize the checkout experience for buyers.
Not only that, but Partners can now deploy their customizations through a custom
app or public app on the Shopify App Store. Read more about how it works.

by Ainsley Wilson
Jun 22, 2022


Earn more revenue as a Shopify Partner

Grow your Shopify expertise and unlock new ways to earn revenue for your own
business with the Shopify Partner Program.

Become a Partner

For years, Shopify has helped merchants of all sizes deliver the most reliable,
highest-converting checkout on the planet. Fast, intuitive, and simple, Shopify
Checkout has set the standard for what a checkout should be, while Shop Pay, our
accelerated checkout, delivers a buying experience that's four times faster—and
a conversion rate that's 11% higher—than the competition. 

The only problem? Customizing Shopify Checkout was a slow and painful process,
making it difficult for brands and Shopify Partners to adapt Shopify Checkout to
meet unique business needs—until now.




THE OLD WAY TO CUSTOMIZE SHOPIFY CHECKOUT

Optimized for over 16 years, Shopify Checkout is built for speed and conversion
right out of the box. It also includes built-in features for adding express
checkouts, local payment methods, tipping options, and more. But as brands grow,
they may want to make more advanced customizations to their checkout—whether
they're trying to increase average order value or comply with local business
regulations.

In the past, Shopify Plus brands could make advanced customizations to the look
and functionality of their checkout by requesting access to their
checkout.liquid theme file and directly editing the code. This required working
with a developer to build bespoke customizations, or a cumbersome process for
installing partner customizations. Checkout.liquid didn't provide direct APIs
for making changes to Shopify Checkout, often resulting in sub-par buyer
experiences and poor performance. Developers also needed to perform periodic
upgrades to customized checkouts in order to access new features without
breaking any customizations.

This method of customizing Shopify Checkout was both time-consuming and
expensive—so our team invested in a faster, upgrade-safe way for brands to
customize their checkout.


THE NEW WAY TO CUSTOMIZE SHOPIFY CHECKOUT

We wanted to make it faster and easier for Shopify Plus brands to customize
their checkout—while offering even more opportunity for developers to build
creative solutions for Shopify Checkout. So we built a way for brands to
customize their checkout using powerful apps and branding tools instead of
editing code.

Checkout extensibility makes it easier for Shopify Plus merchants to customize
their checkout in a way that’s app-based, upgrade-safe, higher-converting, and
integrated with Shop Pay. It includes a suite of powerful platform features that
give brands the ability to make code-free customizations to their checkout using
apps. And it also gives them the flexibility to build the exact experience they
want by developing custom apps for bespoke customizations using a collection of
components and APIs.

This is where developers come in. For the first time, Shopify is unlocking the
ability for developers to deploy checkout customizations through a custom app or
public app on the Shopify App Store.

With checkout UI extensions, you can add elements to Shopify Checkout like
product offers, custom fields, custom content, loyalty programs, and more. These
extensions show up in guest checkout and Shop Pay, creating a unified experience
for buyers wherever they choose to check out. Moreover, you don’t have to worry
about duplicating branding settings in your app because extensions automatically
inherit the branded appearance of the store’s checkout.

> Checkout UI extensions automatically adapt to the various checkout flows,
> creating a unified experience for buyers wherever they choose to check out.

Checkout UI extensions are adaptable to various flows, creating a unified
experience for buyers wherever they choose to checkout.

Shopify Functions give you the flexibility to extend or replace native Shopify
server-side business logic so you can customize the discounts applied to orders,
products, or shipping. For example, you could build a Function that provides
tiered discount options, such as spend $100 get $20 off. And soon, you'll be
able to build Shopify Functions that include cart validations.

You can also build apps for Shopify Checkout that track customer events using
the web pixel app extension and apps that add a post-purchase page to checkout
using post-purchase extensions.

And finally, brands can make advanced customizations to the appearance of their
checkout using the Branding API. While they can use the checkout editor to make
basic customizations, like customizing the colors and fonts in their checkout,
the branding API opens the door to a world of possibilities. For example, brands
can add their favicon or completely customize the corner radius on any buttons
in their checkout.

UI extensions automatically inherit a merchant’s brand settings.

Checkout extensibility is built on the latest platform technology, allowing for
a faster checkout experience that results in up to 1% higher conversion on
average. And the UI components and APIs that power checkout extensibility run in
a sandboxed environment, giving brands additional security—unlike the old way of
customizing Shopify Checkout.


OUT WITH THE OLD, IN WITH THE NEW

Today, checkout extensibility is available for in-checkout pages, which include
the Information, Shipping, and Payment pages of checkout. It empowers merchants
and developers to build creative, upgrade-safe customizations for Shopify
Checkout, replacing the need for checkout.liquid.

As a result, checkout.liquid is deprecated and will no longer work for
in-checkout pages on August 13, 2024. Any brands that customize their
in-checkout pages with checkout.liquid will need to upgrade to checkout
extensibility.

This opens an exciting opportunity for developers to help brands by building
apps that extend Shopify Checkout or upgrading brands to checkout extensibility.

Brands can continue customizing their post-checkout pages, which includes their
Thank You Page and Order Status Page, with checkout.liquid for now. However,
they’ll soon be able to customize these pages using checkout extensibility. This
functionality is currently in developer preview.

Have any feedback on checkout extensibility? Share it on Github.


READ MORE

 * How to Build a Shopify App: The Complete Guide
 * Building the World’s Best Commerce Apps with Built for Shopify
 * Updated] API Deprecations and Versions at Shopify: What You Need to Know
 * 9 Best CRM Software For Designers in 2022
 * Client Collaboration: 8 Tips to Deliver Successful Projects
 * 15 Chrome Extensions That Will Make You a More Productive Web Designer
 * Introducing Online Store 2.0: What it Means For Developers
 * Everything You Need to Know About Development Stores
 * Inside the Shopify Partner Studio (And How You Can Apply for Round 2)
 * Selling Shopify: How to Educate Your Clients About Shopify

by Ainsley Wilson
Last updated Jun 22, 2022
Share article
 * Facebook
 * Twitter
 * LinkedIn

by Ainsley Wilson
Jun 22, 2022

Let’s grow your digital business

Get design inspiration, development tips, and practical takeaways delivered
straight to your inbox.

Enter email
Get updates
Get updates

No charge. Unsubscribe anytime.

popular posts

Web Design Tools and Resources10 Beautiful Ecommerce Website Color
SchemesShopify App DevelopmentHow to Build a Shopify App: The Complete Guide Web
Design Tools and Resources15 Funny Lorem Ipsum Generators to Shake Up Your
Design MockupsInspiration & Creativity20 Memorable Web Design Portfolio Examples
to Inspire Your Own Website

The most
intuitive,
powerful

unified

Shopify yet

Explore 150+ updates


Shopify Editions Summer ’24

popular posts

Web DesignInclusive Design: 12 Ways to Design for EveryoneLearning LiquidHow to
Manipulate Images with the img_url FilterShopify NewsIntroducing Online Store
2.0: What it Means For Developers


POPULAR POSTS

Web Design Tools and Resources
10 Beautiful Ecommerce Website Color Schemes

2019-08-20

Shopify App Development
How to Build a Shopify App: The Complete Guide

2021-02-24

Web Design Tools and Resources
15 Funny Lorem Ipsum Generators to Shake Up Your Design Mockups

2019-04-17

Inspiration & Creativity
20 Memorable Web Design Portfolio Examples to Inspire Your Own Website

2019-05-01

Web Design
Inclusive Design: 12 Ways to Design for Everyone

2018-03023

Learning Liquid
How to Manipulate Images with the img_url Filter

2018-01-04

Shopify News
Introducing Online Store 2.0: What it Means For Developers

2021-01-29


Let’s grow your digital business

Get design inspiration, development tips, and practical takeaways delivered
straight to your inbox.

Email here
Get updates
Get updates

No charge. Unsubscribe anytime.

LATEST FROM SHOPIFY

See all
Case Studies
How MAXBURST doubled their revenue in 3 years as a Shopify partner

Jul 9, 2024

Case Studies
How Lazer Technologies grew to $5 million in revenue as a Shopify partner

Jul 8, 2024

Case Studies
Riess Group increased deal sizes by 3-4x with Shopify POS

Jul 2, 2024

Celebrating innovation with the Shopify Build Awards

Jun 28, 2024

Shopify News
Improving the Online Store: New Style Settings & features for Theme Blocks — Now
In Developer Preview

Jun 24, 2024

Shopify News
Build the world’s best checkout into your app with Shopify’s Checkout Sheet
Protocol

Jun 24, 2024

Shopify News
Drive up to 2x more retargeting conversions with Shopify Audiences

Jun 24, 2024

Shopify App Development
New perks and criteria for Built for Shopify

Jun 21, 2024

See all
Grow your business with shopify partner program
Learn more
AboutCareersPress and MediaShopify PlusSitemap
Online store
Sell online
Examples
Website builder
Online retail
Ecommerce website
Domain names
Shopping cart
Ecommerce hosting
Mobile commerce
Online store builder
Dropshipping Business
Store themes
Point of sale
Point of sale
Features
Hardware
Support
24/7 support
Shopify Help Center
Shopify Community
API documentation
Free tools
Free stock photos
Logo Maker
Business name generator
Research
Legal
Shopify
Contact
Partner program
Affiliate program
App developers
Investors
Blog topics
Community Events
Fulfillment
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Terms of ServicePrivacy Policy
USA
 * USA
 * Australia
 * Canada (English)
 * Hong Kong SAR
 * India
 * Indonesia
 * Ireland
 * Malaysia
 * New Zealand
 * Nigeria
 * Philippines
 * Singapore
 * South Africa
 * United Kingdom


USA


COUNTRY/REGION

 * USA
 * Australia
 * Canada (English)
 * Hong Kong SAR
 * India
 * Indonesia
 * Ireland
 * Malaysia
 * New Zealand
 * Nigeria
 * Philippines
 * Singapore
 * South Africa
 * United Kingdom

www.shopify.com Open in urlscan Pro 185.146.173.20 Public Scan

Form analysis 4 forms found in the DOM

GET /partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&irgwc=1&partner=4542080&affpt=excluded&utm_channel=affiliates&utm_source=4542080-impact&utm_medium=cpa

GET /partners/blog/checkout-extensibility?irclickid=06tzx1z5uxyKWKqWFFwlxQmlUkCxS73kCQehWA0&irgwc=1&partner=4542080&affpt=excluded&utm_channel=affiliates&utm_source=4542080-impact&utm_medium=cpa

POST /blog/api/subscribe

POST /blog/api/subscribe

Text Content

www.shopify.com Open in urlscan Pro
185.146.173.20 Public Scan

Form analysis
4 forms found in the DOM