Import Blocks
What Is It?
Import Blocks lets you add pre-built conversion blocks into the cart drawer without writing any code. You browse a library of ready-made blocks, preview each one, and import the ones you want. Imported blocks become editable HTML blocks you can adjust later. You can also describe a block in plain words and let AI generate a new one or edit an existing one, matched to your brand.
When to Use It
- You want to add a conversion element quickly without building it from scratch
- You want a starting point you can then customize as an HTML block
- You want to see a live preview of a block before adding it to your drawer
- You want AI to build or tweak a block from a plain-language description
Available Blocks
Custom HTML
A blank editable block. Use it to paste in your own HTML snippet or build a custom element from scratch.
Social Proof — Views Counter
Displays a message showing how many people viewed the product in the last 24 hours (for example, 142 people viewed this in the last 24 hours).
Live Purchase Ticker
Shows a live-style notification of a recent purchase (for example, Sarah from New York just purchased — 3 min ago).
Trust Badge — Trustpilot
Displays your Trustpilot rating as a star badge (for example, 4.8 on Trustpilot).
Urgency — Low Stock Alert
Shows a low stock warning to create urgency (for example, Only 3 left in stock).
Social Proof — Bestseller
Highlights the number of units sold (for example, 2,400+ sold — Bestseller).
Trust — 30-Day Money-Back
Displays a money-back guarantee badge (for example, 30-Day Money-Back Guarantee).
Info Bar — Shipping + Returns
Shows a compact info bar with key policies (for example, Free Shipping · Guarantee · Easy Returns).
Checklist — Benefits
Displays a checklist of store benefits (for example, Free shipping on orders $50+, 30-day money-back guarantee, Secure checkout with SSL).
Trust Badge — Guarantee Pill
Shows a pill-style guarantee badge (for example, 100% Satisfaction Guaranteed).
Trust — Cart Security Seals
Displays security trust seals inline (for example, SSL Secure · Protected · Verified).
Social Proof — Happy Customers
Shows your total happy customer count with stars (for example, 4,892 happy customers).
How to Import a Block
Step 1: Open the Import Blocks Modal
From the Cart Editor, expand a section in the left panel, then click Import Blocks. A modal opens with a Search blocks... field and the full block library.
Step 2: Find a Block
Use the Search blocks... field to filter by name, or scroll through the grid to browse all available blocks.
Step 3: Import
Click Import on a block card to add it to the section. The counter at the top updates (for example, 1 imported).
Step 4: Edit the Imported Block
After importing, the block opens in the HTML editor. Adjust the HTML Content, check the Preview, and use the enable toggle to show or hide it.
- Click Reset to default to restore the original imported HTML.
- Click Remove block to delete the block from the section.
Generate and Edit Blocks with AI
Instead of picking from the library, you can describe a block in plain words and let AI build it for you, matched to your cart's colors and fonts. There are two modes: Generate a brand-new block from a prompt, and Edit an existing block by describing a change. It works on all plans, and no coding is needed.
Generate a block
- In the Import Blocks area, open Generate with AI and click Try it.
- Under Add this block to, choose where it goes: Header, Body, or Footer.
- Describe the block you want, then send it. For example, A free shipping bar that fills as the cart grows or Show a 5-star review badge with Trustpilot. You can also pick one of the Try one of these suggestions.
- AI drafts the block in your brand style and shows a Preview. If it is Not quite right?, send another prompt to refine it.
- Click Import block to add it to the section.
Edit a block with AI
- Click an imported block to open it.
- In the Edit with AI card, describe the change and send it. For example, change the background to yellow or add a checkmark icon.
- AI updates the block and refreshes the preview. Use Restore to before AI to undo the AI change.
How AI keeps blocks safe and on-brand
- Matched to your theme: AI reuses your cart's colors, fonts, and rounded corners, keeps the layout flat, and makes sure text stays readable, so the block looks native.
- Safety-filtered: the generated HTML is cleaned automatically. Scripts, event handlers, iframes, forms, and images from external sites are removed, so a block cannot break your storefront.
- Rate the result: after you generate or edit, give a thumbs up or thumbs down (with an optional reason) to help improve the AI.
AI badges
In the left panel, AI blocks are labeled so you can spot them:
- AI: the block was generated by AI.
- Edited by AI: a library block that you changed with AI.
Existing blocks and your theme are not affected, and on the storefront an AI block renders exactly like any other HTML block, so shoppers see no difference.
Troubleshooting
Q1: A block's button shows "Imported" and I cannot click it
That block is already in this section. To use it again, remove the existing one first.
Q2: My search shows no results
The library filters by block name. Clear the search field to browse the full list.
Q3: I imported a block but it does not appear in the drawer
Open the block in the editor and confirm the enable toggle is on, then click Save.
Q4: I want to undo changes to an imported block
Click Reset to default in the block editor to restore the original HTML. For a change you made with AI, click Restore to before AI instead.
Q5: AI says my prompt is unclear
Give a concrete description of the block you want, for example a free shipping progress bar or a trust badge with checkmarks. A vague prompt shows a short note instead of a block, and it does not count as an error. Rephrase and try again.
Q6: What do the "AI" and "Edited by AI" badges mean?
AI marks a block that AI generated for you. Edited by AI marks a library block that you changed with AI. They help you tell AI blocks apart in the section list.