Docs/Merchants/Design & Customization
Custom block
Most Toki modules come with a ready-made layout and settings for colors, text, and images. The Custom module is different: it's an empty block that shows whatever you or your developer put in it. Use it when you want a section on your rewards page that no other module covers, laid out exactly the way you want.
The block is written in code, the same HTML and Liquid your Shopify theme is built with. If you'd rather not write it yourself, chat with us and we'll set it up with you.
Open the Custom module
- Open Design.
- On the Design Settings page, find Custom in the Wallet + Rewards Page group, or type "Custom" in Search modules.
- Click Edit. The editor opens with the title Your Custom Block.
The two fields
The settings panel has one section, Content, with two code fields.
| Field | What goes in it |
|---|---|
| HTML / Liquid | The block itself: its content, layout, and styling. This is what your customers see. |
| JavaScript (under the Script heading) | Code that runs when the block loads, for anything interactive. Leave it empty if your block doesn't need it. |
There are no color, font, or spacing settings for this module. The block looks exactly the way the code in HTML / Liquid says it should. The preview next to the settings shows the result as you type, so you can check the block before any customer sees it.
Variants, drafts, and publishing
The Custom module works like every other module in the editor. You can save several variants, keep one as a draft while another is live, undo changes, and click Publish when the block is ready. See Design editor.
Put it on your store
Once a variant is saved, install it the same way as most modules:
- In the editor's top bar, click Add block. The Shopify theme editor opens.
- Add the Toki app block named Custom Block where you want the section to appear.
- Paste the variant's Design ID into the block's Design ID field and save the theme.
Your Design ID, plus the snippet for headless stores, is under How to show it on the website? in the top bar. The full steps are in Install modules on your storefront.
Related
- Design modules — the full catalog of modules on the Design page.
- Design editor — variants, drafts, publishing, and the preview.
- Install modules on your storefront — theme app blocks, Design IDs, and snippets for headless stores.