Online store

Integrating Cardigan with your online store lets customers check the balance of their gift cards, buy new cards from a gift card product page, and - on plans without access to checkout extensions - redeem their cards from the cart.

Cardigan ships three drag-and-drop blocks that you add from the Shopify theme customiser, with no code changes required.

Requirements

You'll also need a profile set as your default before the blocks will return results.

Adding a block

From your Shopify admin, go to Online Store > Themes, then Customise on the theme you want to edit.

Navigate to the page or section you want the block to appear on, click Add block, and select the Cardigan block you need from the Apps category. Position it where you'd like it to appear, adjust its settings in the sidebar, and save.

Each block page in this section covers where that particular block is typically placed and which settings it exposes.

Theme presets and styling

Every block includes a Theme preset setting.

A preset applies a set of CSS classes that match the markup conventions of a particular theme, so the block picks up your theme's existing styling for fields, labels and buttons rather than looking like it was bolted on. Some presets also load a small stylesheet to fill in the gaps.

Select the preset matching your theme if one is available. If your theme isn't listed, start with Default - it targets the class names used by Shopify's reference themes and gives a reasonable result in most cases.

Choosing Custom instead reveals text fields for each CSS class the block applies, letting you point them at whatever classes your theme uses. This gives you complete control over the block's appearance without writing any CSS of your own.

PIN fields adapt automatically

The balance checker and cart redemption blocks render their PIN field based on your store's PIN behaviour setting - required, optional, or not used at all - so there's nothing to configure per block.

See Cards and PINs for how to set this.

Translating block content

The blocks use Shopify's standard theme translation system for their customer-facing text, including field labels and status messages.

You can edit this content from Online Store > Themes > ... > Edit default theme content, and provide translations for each language your store supports.

Building a custom integration

If you want complete control over how gift card functionality appears and behaves - or you're running a headless storefront - you can build directly against Cardigan's client library instead of using the blocks.

See Cardigan.js and Headless storefronts.