Install modules on your storefront

Once you've designed a module, the last step is putting it on your store. Each module has an install method: most go into your Shopify theme as an app block with a Design ID, a few are pasted into your site as a snippet, and the checkout and POS components are added in Shopify's own editors. The editor shows the right instructions for the module you're working on, and this article lists which method each module uses.

Find the install instructions

1. Open Design.
2. Click Edit on the module.
3. In the top bar, click How to show it on the website?.

A panel titled Displaying the module on your website opens. It holds the instructions for this module, its Design ID, and a Copy button next to the ID. Click Copy and Toki confirms with Copied.

The button appears once the variant is saved. If you're working on a new variant, save or publish it first (see Design editor).

Each variant has its own Design ID. Use the ID of the variant you want customers to see, and publish that variant.

Regular Shopify themes: app block and Design ID

Most modules go into your theme as a Toki app block. The block has a Design ID field, and the ID tells the block which of your designs to show.

1. In the panel, click Copy next to the Design ID.
2. Click Install block to Shopify store. The Shopify theme editor opens in a new tab. Add block in the editor's top bar does the same thing.
3. In the theme editor, add the Toki app block for this module and place it where you want it on the page.
4. Paste the Design ID into the block's Design ID field.
5. Click Save in the theme editor.

You can also open the theme editor yourself: in your Shopify admin, go to Online Store → Themes → Customize.

For the Wallet, the panel has a Popup tab and an Expanded tab, each with its own Install block to Shopify store button. Pick the tab for the way you want the wallet to appear before you click it. In the theme editor, the Popup wallet is the Toki Wallet app embed, listed under App embeds (the same one you turned on in Installing Toki); paste the Design ID into its Design ID field. The Expanded wallet is the Expanded Wallet app block, which you place on a page like any other block.

The Home page also shows App blocks in use and App embed cards, handy for a quick check of what's on your theme.

Headless or non-Shopify sites: HTML snippet

If your store runs headless, or isn't on Shopify, you place modules with a snippet instead of a theme block. The panel shows the snippet below the Design ID.

1. Click Copy snippet. For the Wallet, pick Popup or Expanded first.
2. Paste the snippet into your site's HTML where you want the module to appear.

Two modules use a snippet on every store, including regular Shopify themes: Newsletter Sign Up Embed and Wishlist Block.

If your store isn't on Shopify, the snippet is your install path. Want a hand with a headless setup? Chat with us and we'll set it up with you.

Checkout and POS components

Shopify's checkout and point of sale have their own editors, so these modules are added there.

• Checkout UI Spending Component and Checkout UI Paid Membership Opt Out Component are installed in the Shopify checkout editor. In your Shopify admin, open Settings, then Checkout, click Customize, and add the Toki block to your checkout.
• POS: Redemption is installed in the Shopify POS app.

Apple Pass Download Page

Publish the design and Toki applies it to your Apple Wallet pass download links automatically. There's no theme block to add, no Design ID to paste, and no snippet to copy.

Which method each module uses

Modules are listed in the order they appear on the Design Settings page.

Related

• Design modules — what each module in the table is for.
• Custom block — installing the Custom module works the same way.
• Design editor — variants, drafts, and publishing.
• Installing Toki — turning on the Toki app embed in your theme.
• Wallet passes — the passes the Apple Pass Download Page belongs to.