Introduction

Checkout integration

Integrating Cardigan with your Shopify checkout allows customers to redeem their gift cards during the purchase flow.

Cardigan supports both the legacy Shopify checkout (through checkout.liquid customisation) and the new Shopify checkout (also known as "Checkout One"), which will be mandatory for all merchants by August 2024.

Shopify Plus only

Checkout integration is available only to Shopify Plus merchants.

For non-Plus merchants, an alternative flow allowing customers to redeem external gift cards from the Shopify theme cart page is available - contact us to learn more.


New checkout integration

Cardigan exposes gift card functionality in the new checkout via one of two checkout extensions. Both extensions provide an expandable form for a customer to enter their card number (and PIN if required) before attempting to apply it to their checkout.

You can learn more about checkout extensions and how to add them to your checkout from the Shopify documentation.

Inline checkout extension

The inline checkout extension can be placed in any section of any step of the checkout body.

Typically, it is placed above or below the payment methods section of the final payment step.

Screenshot of the Cardigan inline checkout extension in the Shopify checkout editor.

Summary checkout extension

The summary checkout extension renders in the sidebar of the checkout, underneath the standard Shopify discount code input.

Screenshot of the Cardigan summary checkout extension in the Shopify checkout editor.

Updating discount code input language

Unlike the legacy checkout integration, the new checkout integration doesn't allow for hooking Cardigan's functionality directly into the standard Shopify discount code / gift card input.

As a result, we recommend updating your Shopify theme's language content to remove any reference to "gift cards" in that input component to avoid confusing your customers about where they should apply their gift card.

Screenshot of the Shopify theme language content editor showing discount code input settings.

Legacy checkout integration

For merchants with checkout.liquid customisations enabled, Cardigan offers a simple snippet that can be included in your checkout layout template in two easy steps.

1. Add the Cardigan checkout snippet

Copy the latest version of the Cardigan checkout snippet from here into snippets/checkout-cardigan.liquid in your Shopify theme.

2. Render the snippet from your checkout layout

Render the snippet in the <head> of your checkout.liquid file using {% render 'checkout-cardigan' %}, something like this:

    ...
    <title>{{ page_title }}</title>

    {{ content_for_header }}
    {{ checkout_stylesheets }}
    {{ checkout_scripts }}

    {​% render 'checkout-cardigan' %​}
  </head>
  ...

Upgrading from legacy checkout to new checkout

Moving from checkout.liquid to the new checkout is straightforward.

Simply follow Shopify's instructions for upgrading your checkout, then add one of the two available checkout extensions to your new customisable checkout as described above.

Previous
Theme integration