Docs/Merchants/Design & Customization
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. |
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. 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 without a signed-in member.
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 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.
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.
- Give it a name in the Variant name field.
- Change the settings, then click Save to keep it as a draft, or Publish to make it live.
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.
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.
Related
- 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.