Docs/Merchants/Design & Customization
Custom block
Last updated
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: HTML for the content and styling, plus JavaScript if it needs to do something. If you'd rather not write it yourself, ask Shopify Sidekick to write it for you (see Shopify Sidekick), or 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.
Your JavaScript runs on the storefront page itself, as part of the block, so it can work with the rest of the page. It also runs in the preview, so you can try it out 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 on your home page with the Toki app block Custom Block already added in a new section.
- Drag the section to where you want it, or add the Custom Block app block on another page instead.
- 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.
- Shopify Sidekick — ask Sidekick to write or change the block for you.