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. A block whose Design ID points to a draft shows your published variant of that module instead. In the theme editor's preview you can already see the draft; your customers see it once you publish it.

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 on your current theme, with the Toki block for this module already added in a new section. For Wishlist Button, Paid Membership Buttons, Spending Global, Redemption, and Reviews it opens your product page; for the other modules it opens your home page. Add block in the editor's top bar does the same thing.
3. Move the block to where you want it on the page. To show it on another page, add the block there the way you add any app block. The table at the end of this article names the block for each module.
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, open Online Store, then Themes, and click 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:

• Popup shows a floating launcher on every page. Customers click it to open the wallet as a pop-up or a side panel. In the theme editor, this is the Toki Wallet app embed, listed under App embeds (the same one you turned on in Installing Toki). The install button opens the theme editor with the embed turned on; paste the Design ID into its Design ID field.
• Expanded shows the wallet open on the page, inside the block, with no launcher. In the theme editor, this is the Expanded Wallet block. The install button opens the theme editor with the block added to your home page; move it where you want it and paste the Design ID.

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

Build a rewards page or an account page

You build a rewards page from blocks, so it fits the rest of your store. In the theme editor, add a Toki block for each module you want, in any order, alongside your theme's own sections.

For example, a rewards page can open with Intro Header, explain your program with How it works, compare memberships with Memberships Module, list ways to earn with Activities, invite friends with Refer A Friend, and close with FAQ. Intro Header, How it works, and FAQ are all Landing Page Sections blocks, each with its own Type (see the table at the end of this article).

A customer account page in your theme works the same way. Your Status shows customers their balance and their progress toward the next membership, and Customer Account lists the quizzes, polls, and surveys they can answer. If your store uses Shopify's newer customer accounts, those pages are customized in Shopify's own editor, where Toki has customer account blocks of its own, such as Your Status.

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. Copy the snippet shown in the panel. For the Wallet, the Popup and Expanded tabs each show their own snippet.
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.

The Wishlist Button block covers your product page. To show the button on product cards as well, for example in collection grids, it goes into your theme's product card code. Chat with us and we'll set it up with you.

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. Shopify's guide to apps in checkout shows the checkout editor step by step.

• Checkout UI Spending Component is installed in the Shopify checkout editor. In your Shopify admin, open Settings, then Checkout, click Customize, and add the Spending checkout module 2.0 block to your checkout, then click Save. The block has a Design ID field: paste the ID of the variant you want, or leave it empty and Toki uses your published variant.
• Checkout Free Gifts is installed the same way, as the Free gifts block. It also has an optional Design ID field: paste the ID of a published variant, or leave it empty and Toki uses your published variant.
• Checkout UI Paid Membership Opt Out Component is installed the same way, as the Toki: Paid Membership Upsell block. The membership it offers and its texts are set in the block's own fields in the checkout editor. There's no Design ID to paste: Toki uses your published variant, which decides the segments that don't see the block. Customers tick a checkbox in the block to add the membership to their order. It starts unticked, unless the membership is already in their cart. Customers who already hold an active paid membership don't see the block either.
• POS: Redemption is the Toki: Redemption tile in Shopify POS. Add the tile to your POS home screen. There's no Design ID to paste: Toki uses your published variant.

Where there's no Design ID to paste, keep one published variant of the module so there's no doubt which one Toki uses.

Auto apply tier codes

Auto apply tier codes is a checkout block with no design to set up in Toki. Add it in your Shopify checkout editor the same way. When a customer who's signed in to their account reaches checkout, the block applies the discount and free shipping perks of their memberships as codes: at most one fixed-amount discount, one percentage discount, and one free shipping code. When two of their memberships have the same kind of perk, the one that comes last in the order you set with Reorder on the Memberships page is used. Perks that Automatic perks on the Loyalty page already applies in the cart are skipped.

Once it has applied codes, the block shows "We’ve automatically applied discount codes from your tier". Change the message in Applied perks text, or turn on Always hide to apply the codes without a message.

Order confirmation page

Toki also has blocks for Shopify's Thank you page, the page customers see right after they place an order. In the same checkout editor, add them to the Thank you page. They work for guest checkouts too: Toki uses the email address on the order.

• Referral shows the customer's referral link, or a field to invite friends by email. Email invites from this block go out through Klaviyo, so if you use the email field, connect Klaviyo and set your referral reward's Send invite via to Klaviyo. See Referral rewards.
• Wallet Pass lets customers add their loyalty pass to Apple Wallet or Google Wallet, with a QR code to scan from another device. See Wallet passes.
• Checkout UI - Form shows one of your quiz, poll, or survey rewards, so customers can answer it right after they order. Answering completes the reward for them. Enter the reward's ID in the block's Activity ID field. Review and survey apps shows how to copy a reward's ID.

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. Keep one published variant of it so there's no doubt which one your customers see.

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.