Design editor

Every Toki module on your storefront is edited in the same place: the design editor. Your settings sit on one side, a live preview of the module on the other. Change a color or a label and you see the result right away, before any customer does.

Open a module in the editor

Open Design.
The Design Settings page lists your modules under Published and Unpublished. Use Search modules to find one quickly.
Click Edit on the module. The editor opens full screen.

The editor opens the module's published variant. If nothing is published yet, it opens your first saved variant, or a new one if you have none.

To place the module on your storefront, click Add block in the top bar, or click How to show it on the website? for placement instructions.

Around the editor

Area	What's there
Top bar	A Published or Draft badge, the variant menu, the preview language menu, the < and > buttons, How to show it on the website?, Delete, and Publish or Move to draft.
Settings panel	The Variant name field, the User field for previewing as a member, and the module's settings grouped in sections. Click a section heading to open or close it.
Preview	The module as your customers will see it. It updates as you change settings. A small tab in its top-right corner opens the preview tools.

Checkout Free Gifts appears in Shopify's checkout, so its preview area holds a note instead: how to add the Free gifts block in Shopify's checkout editor, and how to preview it there. Click How to show it on the website? to find its Design ID and a Copy button.

On a narrow screen the panels stack. Use Show preview and Show settings to switch between them.

Kinds of settings

Each module has its own settings, but they all use the same kinds of fields.

Kind of field	What you do
Text	Type a label, heading, or message. Some text fields hold a separate version for each language (see below).
Colors	Pick a color with the color picker.
Numbers and sizes	Type a number. The unit, for example px, is shown next to the field.
Switches	Turn a part of the module on or off.
Menus and tabs	Pick one option, or several where the field allows it.
Images	Click Upload a file or drag an image onto the field. The field shows the recommended size when there is one.
Lists	Click Add new item to add an entry, drag entries to reorder them, and open an entry to edit it or Delete it.
Custom code	Advanced styling for your module, such as Custom CSS (see "Fonts and custom CSS" below). Chat with us and we'll set it up with you.

Preview and edit in another language

The language menu in the top bar does two things at once:

The preview switches to that language.
Text fields that hold a version per language show and edit the text for that language.

Those text fields also have their own small language menu, and a list button that opens every language at once so you can fill them in one go.

The editor starts in your storefront language. For that setting and the full list of languages, see Storefront language.

Preview as a member

The preview signs in as a test member so you can see the module with points and rewards in place. To see the module exactly as one of your members sees it, type their email in the User field and pick them. Clear the field to preview the module the way a visitor who isn't signed in sees it.

Preview tools

Click the small tab in the top-right corner of the preview to open the tools:

Tool	What it does
Background	Changes the color behind the module in the preview, so you can match your store's background.
Desktop	Shows the module at desktop width.
Mobile	Shows the module at phone width.
Fullscreen	Lets the module fill the preview panel.
Expand / Collapse	Grows the preview to your whole window and back.

When your store has more than one active Shopify market, a Preview market menu also appears in the top-right corner of the preview, above the tools tab. Pick a market to see the module the way customers in that market see it, for example with only the redemption options you offer there (see Redemption options). The preview starts on the first market in alphabetical order.

When you edit the Reviews Carousel, a Use demo reviews checkbox appears in the top-right corner of the preview, above the tools tab. Check it to fill the preview with sample reviews instead of your store's own. It only changes the preview. On your storefront, the carousel shows your store's reviews.

When you edit the Wallet, a Show empty states switch also appears in the top bar. Turned on, the preview marks parts of the wallet that are not shown and tells you why. Only you see these notes; your customers never do.

Customize the Wallet

The Wallet has more settings than any other module. At the top of its settings, Popup and Expanded switch the editor between the two ways the wallet can appear on your store (see Install modules on your storefront). The tabs and the blocks on each screen are kept separately for each, so check both if you use both.

To change	Section	What to set
Where the launcher appears	Style	Display location (Mobile only, Desktop only, or Both), Module Position, and Vertical Offset and Horizontal Offset to fine-tune it. Turn on Use different position for mobile to place it differently on phones.
Which pages show the launcher	Style	Pages to include and Pages to exclude. Enter page addresses, separated by a space or a new line. A page counts when its address contains one of your entries. With Pages to include empty, the launcher shows on every page you haven't excluded.
The launcher icon	Style	Its size, border, background color, and Brand Image. Turn on Wallet with close button to let customers hide the launcher for the rest of their visit.
Whether the launcher sits in front of your header	Style	Z-Index, 100 by default. Raise it to bring the launcher in front of overlapping parts of your theme, such as a sticky header, or lower it to put the launcher behind them. Check the result on your storefront. With Popup Type set to Sidebar, the same number decides whether those parts dim with the rest of the page while the wallet is open.
The sign-in screen	Auth Screen	Up to five Slider Items, each an image or a video with a short text, plus the slide font color and size, the background color, and a Featured Activity to promote before customers sign in.
The tabs	Tabs	Order of tabs. Each tab has a Label and a Page: Home, Reward Overview, Transactions, Spend Credits, Profile, or Custom url to link to any web address. Default Tab is the tab the wallet opens on.
What a screen shows	The screen's own section, such as Home Screen	The screen's blocks (see below).

Wallet blocks

Each screen is a list of blocks. In the screen's section, click Add new item to add a block, then choose what it shows in Block Type. Drag blocks to reorder them, or click the trash icon to remove one. Click a block to open its settings, such as its title, texts, and images. Every block also has Visible For and Hidden For, to show or hide it for the segments you pick.

You can also edit blocks right in the preview. Point at a block to outline it in green. Then click To settings to open its settings, click + above or below it and pick a block in Select block to add one there, or click the trash icon to remove it.

A few blocks worth knowing:

Card Block is the member card. Customers see the Membership Card image of their membership (see Membership tiers). Customers without one see the Membership Card Block Default Image, or the Membership Card Block Default Background Color if you haven't added a default image. Turn on Always use default card to show the default to everyone. The logo on the card is the Brand Logo in Style; size it with Membership Card Brand Logo Width and Membership Card Brand Logo Height, up to 100 px each, and round its corners with Membership Card Brand Logo Border Radius. Store Credits sets which balances the card shows. Leave it empty to show the default store credit.
Featured Activity Block puts one activity front and center: pick it in Featured Activity and give it a Block Title. Once a customer completes it, the block shows your Submitted Message. Below it comes your Completed Message when the reward is given automatically, or "This activity is manually approved so it might take up to 24 hours for the credits to hit your wallet" when you approve completions yourself.
Activities List Block shows each activity with the image you set on the activity itself (see Create and manage rewards). Item Default Image fills in for activities that have none.

Fonts and custom CSS

Use your theme's fonts

Most modules that sit on your store's pages start their settings with an Adopt Shopify Theme Fonts section. Its Use Shopify Theme Fonts switch is off by default, and the module keeps its own font. Turn it on, and modules such as Get Started, FAQ, Activities, or Your Status take on your theme's fonts instead. The preview runs outside your theme, so check the result on your storefront.

The Wallet keeps its own font. To change the font of its buttons, type the name of a font your store already uses in Button Font Family, in Style.

Add custom CSS

To style a module beyond its settings, for example with a different font or rounded corners, add CSS in its Custom CSS field. You'll find the field in the Customize section, or in Settings for Challenges, Customer Account, Form Module, and Memberships Module. Every module outside the Checkout Page group has one, apart from Custom, which is written in code from the start (see Custom block).

Your CSS shows in the preview as you type, and on your storefront like any other setting. If you'd like a custom design, chat with us and we'll set it up with you.

Undo and redo

Use the < and > buttons in the top bar to step back and forward through your changes. The history starts fresh when you save or switch variants.

Save, publish, and drafts

A variant is either Published or Draft. A published variant is live on your storefront. A draft is saved for later and hidden from customers.

As soon as you change something, a bar appears at the top of the page.

Click Save to save your changes and keep the variant's current status. You can also press Ctrl+S (Windows) or Cmd+S (Mac). Toki confirms with the message Saved.
Click Discard to go back to the last saved state.
Click Publish to save and make the variant live.
Click Move to draft on a published variant to save it and take it off your storefront.

If you switch variants with unsaved changes, Shopify asks you to save or discard them first.

Work with variants

Variants let you keep more than one version of a module, for example the live version plus a redesign you're still working on.

Create a variant

In the variant menu, choose New variant. The editor loads the module's default settings.
Change the settings, then click Save to keep it as a draft, or Publish to make it live.

The variant menu lists variants in the order you created them: Variant 1, Variant 2, and so on.

Switch variants

Pick a variant from the menu. Drafts are marked - Draft. The editor loads the variant's settings and the badge shows its status.

More than one variant can be published at the same time. On your storefront, each block shows the variant whose Design ID it holds, so different pages can use different variants. A block with no Design ID shows one of the module's published variants. For modules that take no Design ID at all, keep a single published variant so there's no doubt which one customers see. See Install modules on your storefront.

Delete a variant

Open the variant and click Delete in the top bar.
In the Delete variant dialog, click Delete to confirm, or Cancel to keep it.

Toki confirms with the message Variant deleted and opens a new, unsaved variant.

When someone else edits the same module

The editor checks every few seconds whether a teammate has saved the module you're working on. If they have, a notice appears: Another user has updated your module! It includes an open link to view the latest version in a new tab, so you can compare before you decide.

If you save anyway, Toki asks whether you want to write over their changes. Confirm to save your version, or cancel to keep theirs.

Modules and your plan

Modules included in your plan save and publish normally. If you open a module that isn't part of your current plan, you can still look through its settings and preview. When you save or publish, Toki shows an Upgrade Required dialog. Click Upgrade Now to open Billing and choose a plan, or Close to keep browsing.

Design modules — the catalog of modules you open in the editor.
Install modules on your storefront — put a published design on your store.
Custom block — the module for content you build yourself.
Storefront language — choose which language your customers see, and the list of supported languages.
Customize translations — change the ready-made wording Toki shows in your modules.