n the fast-paced world of e-commerce, ensuring a seamless checkout experience is paramount. Conditional delivery instructions allow customers to provide specific information related to their orders, such as special delivery requests, gift notes, or additional instructions. This article delves into how to effectively implement this feature using Shopify's powerful tools.

Use Case

When selling products or services, there are often scenarios where customers need to input special instructions. These might include:

• Delivery instructions for complex addresses

• Gift notes for special occasions

• Additional order details that enhance the fulfillment process

The Challenge

While providing a delivery instructions form at every checkout can enhance customer satisfaction, it may also lead to confusion and potentially impact conversion rates negatively. Therefore, it is essential to implement this feature strategically to avoid overwhelming customers.

Proposed Solution: Leveraging Shopify’s Checkout UI Extensions

Shopify’s Checkout UI Extensions offers pre-built components, including text entry fields that can be customized based on specific cart conditions. This feature allows for a more tailored checkout experience by:

• Only showing the delivery instructions input when relevant conditions are met.

• Storing the additional information directly on the order for efficient fulfillment in third-party systems.

Implementation Insights

In my personal development site, I initially implemented Shopify’s standard delivery date picker. However, to enrich the customer experience, I expanded this idea to allow users to provide more context after selecting a delivery date. Here’s how I approached this:

Conditional Display Logic

To enhance functionality, I established the following rules:

1. The 'Date Picker' is only displayed if a product includes a specific show_date_picker metafield.

2. Extra delivery instructions appear only when two conditions are true: the presence of an address2 field and a selected delivery date.

Finalizing the Solution

To make this extension fully functional, it is crucial to write the delivery instructions back to a metafield associated with the order. This step ensures the information is utilized in the fulfillment process, enhancing its practical application.

User Experience Considerations

In designing the checkout experience, I prioritized minimizing clutter and confusion:

• The 'Delivery Instructions' module contains less than 100 lines of code, making it efficient and easy to manage.

• To enhance user experience, if customers provide delivery instructions but later decide against them, unchecking the box will delete the metafield, keeping the order clean.

• The text field for instructions is multi-line by default, allowing for detailed input, but can be adjusted to single-line as needed.

• Utilizing icons and spacing elements from the Shopify Component Library enhances visual appeal.

Example Code

Below is an example of the checkout.jsx file used for this extension:

import React, { useState } from "react";
import {
  reactExtension,
  TextField,
  BlockStack,
  useApplyMetafieldsChange,
  useMetafield,
  Checkbox,
  Text,
  Banner,
  BlockSpacer,
  InlineLayout,
  Icon,
  View,
  useShippingAddress,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => {
  return ;
});
function App() {
  const [checked, setChecked] = useState(false);
  const metafieldNamespace = "custom";
  const metafieldKey = "delivery_instructions";
  const deliveryInstructions = useMetafield({ namespace: metafieldNamespace, key: metafieldKey });
  const applyMetafieldsChange = useApplyMetafieldsChange();
  const shippingAddress = useShippingAddress();
  const hasAddress2 = shippingAddress && shippingAddress.address2;
  const handleCheckboxChange = (isChecked) => {
    setChecked(isChecked);
    if (!isChecked) {
      updateMetafield({ type: "removeMetafield", namespace: METAFIELD_NAMESPACE, key: METAFIELD_KEY });
    }
  };
  return ( {hasAddress2 && ( Add Delivery Instructions? Yes, please see details: {checked && ( <> { applyMetafieldsChange({ type: "updateMetafield", namespace: metafieldNamespace, key: metafieldKey, valueType: "string", value }); } value={deliveryInstructions?.value}

import React, { useState } from "react";
import {
  reactExtension,
  TextField,
  BlockStack,
  useApplyMetafieldsChange,
  useMetafield,
  Checkbox,
  Text,
  Banner,
  BlockSpacer,
  InlineLayout,
  Icon,
  View,
  useShippingAddress,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => {
  return ;
});
function App() {
  const [checked, setChecked] = useState(false);
  const metafieldNamespace = "custom";
  const metafieldKey = "delivery_instructions";
  const deliveryInstructions = useMetafield({ namespace: metafieldNamespace, key: metafieldKey });
  const applyMetafieldsChange = useApplyMetafieldsChange();
  const shippingAddress = useShippingAddress();
  const hasAddress2 = shippingAddress && shippingAddress.address2;
  const handleCheckboxChange = (isChecked) => {
    setChecked(isChecked);
    if (!isChecked) {
      updateMetafield({ type: "removeMetafield", namespace: METAFIELD_NAMESPACE, key: METAFIELD_KEY });
    }
  };
  return ( {hasAddress2 && ( Add Delivery Instructions? Yes, please see details: {checked && ( <> { applyMetafieldsChange({ type: "updateMetafield", namespace: metafieldNamespace, key: metafieldKey, valueType: "string", value }); } value={deliveryInstructions?.value}

Additional Use Cases

There are several other applications for this conditional logic in checkout:

• Allergy Substitutions: Allow customers to specify allergens in their profiles and store this information in metafields. The extension can then check for matching allergens with product ingredients and prompt customers to provide substitutions before checkout.

• Ingredient Details: Store ingredient information in metafields and allow customers to review this before completing their purchase.

Conclusion

Conditional delivery instructions can significantly enhance the checkout experience by tailoring the process to the customer's needs. By leveraging Shopify's Checkout UI Extensions, merchants can ensure that only relevant UI elements are presented, thereby maximizing conversion rates and minimizing customer friction.

This article was written by Christian Mackie, Integrated System Sales Lead at Shopify. For more insights, you can explore his full body of work here.

Go further

• Adding a Product in the Shopify Admin

• Adding Web Pixels for Enhanced Customer Insights

• Building a Store Finder for Your Shopify Store

• Building Customer Loyalty Programs: A Comprehensive Guide

• Building Your SEO Strategy: A Comprehensive Guide

• Building Your SEO Strategy: Tailoring for Success

• Comprehensive Guide to Auditing Your SEO Performance

• Comprehensive Guide to Gift Cards in the Shopify Admin

• Comprehensive Overview of the Shopify Partner Program

• Creating a Draft Order in the Shopify Admin

• Effective Strategies to Accelerate the Sales Cycle as a Shopify Partner

• Harnessing AI for an Effective SEO Strategy

• Managing Inventory in the Shopify Admin: A Comprehensive Guide

• Managing Your Shopify Pipeline as a Partner

• Mastering Variants and Collections in Shopify Admin

• Navigating the Shopify Partner Ecosystem: A Comprehensive Guide

• Publishing to the Shopify App Store: A Comprehensive Guide

• Service Partner Tier Requirements: A Comprehensive Guide

• Setting up Role-Based Access Controls in the Shopify Admin

• Setting up Sales Channels for Social Media in the Shopify Admin

• Shopify Analytics: From Data to Decisions

• Shopify Collective: Getting Started as a Supplier

• Shopify Integrations Explained: Tools and Tactics for a Smarter Store

• Unlocking Growth: The Comprehensive Benefits of the Shopify Partner Program

• Using AI in Your SEO Strategy: 5 Key Insights

• Using Strategic Promotions to Drive Sales and Customer Retention

• What is Shopify Collective?

• Why Automation Is Essential for Ecommerce

• Product recommendation for more sales based on purchase history