Streamline Checkout with Shopify Plus Liquid

Custom Breadcrumbs in Checkout of a Shopify Plus Store

Hey Scott Austin here, and in this article, I'll be showing you a modified breadcrumb for the checkout experience that is only available for Shopify Plus stores. This breadcrumb includes numbered dots that represent different steps in the checkout process.

How it Works:

- This process only works for Shopify Plus stores because you need to be able to edit your checkout liquid file, which is only possible if you're a Shopify Plus store.

- The full code to make this work will be provided, and it can be found in the blog article that will be linked in the description below.

- To make the breadcrumbs work, you'll need to add a new snippet to your checkout liquid file and comment out the default breadcrumb element.

- The breadcrumb element is replaced with a render for the checkout breadcrumbs snippet that is added in the new snippet.

- The code snippet provided determines which step in the checkout process you're on and displays clickable dots that indicate the progress made.

- The class names of the dots determine the color coding that occurs and we've included assign for different color codes for easier reuse.

This modified breadcrumb for the checkout experience is an excellent tool for Shopify Plus stores to keep track of where they are in the checkout process. By following the steps outlined in this article, you'll be able to implement this breadcrumb on your website with ease. Thanks for watching!

A Brand New Type Of Shopify Apps: Checkout Extensions

Hey everyone, Young here from codingwithyan.com! Have you checked out extensions, a brand new way of adding features or customizations to the checkout of Shopify Plus stores? It's also a very interesting opportunity if you ever wanted to build your own Shopify app because it's basically an entirely new category and pretty untapped. So today, we'll go over why and when to consider checkout extensions in the first place, what they are exactly, and how we can get started today.

- Extensions are a new way of adding features or customizations to the checkout of Shopify Plus stores

- It's a great opportunity to build your own Shopify app

Why and when to consider checkout extensions:

- Checkout is where the magic happens

- Customizations on Shopify stores are limited unless you're on Shopify Plus

- The checkout on almost every Shopify store looks the same

- It's in the company's best interest to keep the conversion rate as high as possible

- Checkout extensions are a way to make unique customizations to the checkout and increase revenue

What are checkout extensions:

- Custom or public apps that can be sold and distributed on the Shopify app store

- Pre-built UI components such as text blocks, choice lists, and check boxes

- More robust than previous checkout customizations

- Extension points allow for easy placement of new elements in the checkout

- Merchants can move or replace checkout extensions using a new checkout customizer

How to get started:

- Have Git, a Shopify partner account, a development store, and Node.js installed

- Use the new Shopify CLI version 3.0 to instantiate a new app project

- Use ngrok to surf the app locally while still under development

- Checkout extensions are a great opportunity to create unique customizations to the checkout of Shopify Plus stores

- They are still in the early stages, so now is the best time to get in and start building your own app idea

- Keep an eye on the roadmap for when app submissions will be accepted or when checkout extensions will be available on the first set of Shopify Plus stores.

Extending Checkout with Shopify Apps | Shopify Unite 2021

- John Arthorne, engineering manager at Shopify, introduces checkout extensions and their new capabilities.

- Explains that he will be discussing why they are building checkout extensions and how they work.

Problems with Checkout Liquid:

- Merchants have limited ability to customize checkout experience.

- Liquid templates are a powerful tool but come with significant problems and risks.

- Tight coupling to the implementation of checkout leads to problems when evolving checkout.

- Workflow for developing and integrating changes is painful for merchants.

- Third-party JavaScript running on checkout page creates security risks.

Checkout Extension System:

- Checkout extension system focuses on the client side for faster and better buyer experience.

- Three central concepts: extensions, UI components, and branding API.

- Extensions allow app developers to contribute functionality to a particular part of the checkout page.

- UI components provide a way to add rich visual elements to checkout.

- Branding API allows merchants to customize the appearance of the checkout page along with all of its extensions.

- Hosted by Shopify at runtime for scalability and resiliency.

Extension Points:

- Available in various places in the checkout flow for app developers to plug in functionality.

- Three different types of extension points: augment, replace, and add entirely new elements to the checkout flow.

- Carefully defined extension points make it easier for merchants to combine multiple extensions.

APIs for Checkout Customizations:

- APIs available to extensions are flexible and enable a wide variety of checkout customizations workflows.

- Line items API allows access to line items in the current checkout as well as update them or add new ones.

- Customer information can be accessed and both read and modify shipping and billing addresses.

- Custom meta fields can be accessed on the product variant or shop.

- Information about the buyer journey can be accessed to intercept and block progress between pages.

- Attributes can be accessed to find in the cart that was used to start the checkout.

UI Components:

- Checkout extensions have access to a rich library of visual components.

- Components provided by apps integrate seamlessly into the buyer's checkout experience.

Checkout Branding API:

- Checkout branding API gives merchants more fine-grained control of the visual style of the page.

- Merchants can customize the appearance of the default checkout components as well as third-party extensions at the same time.

- Customizations won't get broken as the underlying checkout implementation evolves.

- Arthorne hopes this overview gave an idea of the problems they are trying to solve with checkout extensions and how they work.

- Encourages feedback from app developers and invites them to join the Discord channel for Q&A.

Install Shopify Shipping Address Validator (Shopify Plus)

Thanking the user for installing the shipping address validator app and explaining its benefits.

Key Points:

1. Address Validator helps to minimize shipping returns and errors.

2. It reduces undeliverable packages by prompting users to update their shipping address if typed incorrectly during checkout.

3. This helps to reduce expensive carrier fees and customer support time spent on dealing with mixups when shipping orders.

4. The article covers the difference between Shopify Plus merchant installation and basic Shopify merchant installation, and how to complete the installation process.

5. Address Validator works for all Shopify merchants, regardless of the subscription.

6. Shopify Plus merchants have expanded capabilities compared to basic Shopify merchants.

7. Shopify Plus merchants can validate shipping addresses during checkout before payment (pre-purchase address validation).

8. Basic Shopify plans and even Shopify Plus plans can validate shipping addresses after checkout (post-purchase address validation).

9. Inserting the Address Validator code snippet is necessary for pre-purchase address validation.

10. The code snippet is placed in the checkout liquid file under layout.

11. The app can be customized to match website colors or brand messaging.

12. The app includes features such as address prompts, email notifications, and update forms.

13. The app also provides order history.

14. Support is available through the website chat icon or app admin panel chat icon.

Address Validator is a useful app for Shopify merchants to reduce shipping returns and errors. Shopify Plus merchants have expanded capabilities, but the app works for all Shopify merchants. Inserting the Address Validator code snippet is necessary for pre-purchase address validation, and the app can be customized to match website colors or brand messaging. Support is available through the website chat icon or app admin panel chat icon.

Rebuy Academy: How to Optimize the Shopify Plus Checkout

Rebuy Academy: How to Boost Your Shopify Plus Checkout

The checkout is a crucial part of the funnel that can help boost your AOV. There are many ways to optimize your checkout, including cross-sell widgets, mystery gifts, and skip-the-line options.

Ways to Optimize Your Checkout:

1. Cross-sell widgets: These are a simple way to boost AOV with low-value items. Make sure the item you are cross-selling is easy to understand and offers a good deal.

2. Mystery gifts: These are items that you may have too much of and want to get rid of. Offer them at a low price as a variant to select.

3. Skip the line: This option can be added automatically to the cart to give the customer priority shipping.

Example of How to Create Widgets:

1. Use the online store to create your widgets.

2. Use the checkout page section to add your widgets.

3. Customize the data source for each widget to personalize the cross-sell options.

4. Use dynamic selectors to place the offers in the order summary or as a fixed look on mobile.

By optimizing your checkout, you can boost your AOV and improve conversion rates. Use cross-sell widgets, mystery gifts, and skip-the-line options to offer customers additional items they may be interested in. Personalize your offers with dynamic selectors and customize the data source for each widget to improve the user experience.

HOW TO ADD CUSTOM LIQUID TO SHOPIFY | 2022

Hey graduates, today I'm going to teach you how to add a new section to your Shopify theme that allows you to implement custom liquid code right from within the theme editor. This is a useful feature that many of our clients have been asking about, and we just discovered it was an option. We're going to show you how to do it for your theme if it's Shopify 2.0 already.

Steps to add custom liquid section:

1. Go to your dashboard and click on online store.

2. Click on the editor and then go to sections and add a new section.

3. Name the section and copy the code provided.

4. Customize the section with your own code.

5. Save the section and use it in your theme.

Benefits of using custom liquid section:

1. Allows you to write custom liquid code without modifying the theme's actual code.

2. Quick and easy to remove without tarnishing the actual theme code itself.

3. Allows you to do unique things with your theme.

Adding a custom liquid section to your Shopify theme is a powerful tool that can enhance your online store. It allows you to write custom liquid code without modifying the actual theme code and is quick and easy to remove. Follow our steps and enjoy the benefits of having a custom liquid section in your theme.