How to use AI theme blocks.
The AI Blocks section in the Booster Theme lets you generate theme blocks using Shopify Magic. You can describe the block you want—like a banner, grid, or testimonial—and AI will build the Liquid, HTML, and settings for you, right inside the theme editor.
In this article:
Let's get started!
What is the AI Blocks section
The AI Blocks section is available in your theme customizer. Inside this section, you can add an AI Block, click Generate, and enter a prompt describing the layout or content you want. AI will instantly create a block based on your input.
This tool is useful if you want to build custom blocks without manually coding them. You can preview the generated block before adding it to your theme.
How to generate an AI Block
To create a new block using AI:
-
Go to Online Store > Themes > Customize
-
Navigate to the AI Blocks section
-
Click Add block > Generate
-
Type your prompt (example: “Two-column layout with image on left, heading and text on right, and a button below”)
-
Wait for the preview to load
-
If you're satisfied, click Keep to save the block
The block will be added to the section and saved as part of your theme.
Tips for writing effective prompts
When writing your prompt, be clear and specific. Include how you want the layout structured, what elements should be inside, and any design preferences. For example, instead of saying “banner,” say “a full-width banner with background image, bold heading, subheading, and a button in the center.”
If you want responsive behavior, mention how it should look on desktop vs. mobile. You can also include styling preferences like background colors, alignment, or padding.
The more specific your prompt, the more accurate the result will be.
Editing and managing generated blocks
Once a block is generated and saved, it becomes part of your theme files. You can view or edit it by going to Edit Code and opening the /blocks folder. Each AI-generated block is saved as a .liquid file, just like manually created blocks.
You can edit the content, layout, or styling as needed. If you want to remove the block, just delete the file. If you want to make changes, you can either regenerate using a new prompt or adjust the code directly.
Developer notes
AI Blocks are built using Shopify’s theme block architecture. They are compatible with sections that support @theme blocks and follow the standard schema format. This makes them reusable and easy to customize.
If you're working on a custom section, make sure it supports blocks in its schema. You can also override the generated block layout or settings through Liquid and CSS. For more technical guidance, refer to the Shopify documentation linked below.
References
- End of article -