How to Build Custom Theme Blocks with AI in Shopify

One of the coolest features in Shopify Editions Summer 2025 just dropped. Shopify’s new AI-powered theme block generator lets you describe what you want in plain English, and artificial intelligence builds it for you automatically. Want a testimonial section? Product showcase? Custom banner? Just tell Shopify Magic what you need, and it creates the code instantly.

Step-by-Step Guide to Creating Your First AI Block

Ready to build your first custom block? Here’s the exact process, broken down into simple steps.

Step 1: Access Your Theme Editor

1. From your Shopify admin, go to Online Store > Themes
2. Find your current theme and click “Customize”
3. You’ll see your store’s homepage in the editor

Step 2: Choose Where to Add Your Block

1. Click on the section where you want to add your new block
2. Not all sections accept custom blocks – look for sections that show an “Add block” button
3. If you don’t see “Add block,” try a different section or scroll to find sections that support blocks

Step 3: Generate Your Block

1. Click “Add block”
2. Look for and click “Generate” (this is the AI option)
3. Enter your detailed prompt describing the block you want
4. Click “Generate” and wait for Shopify Magic to create your block

Step 4: Preview and Test

1. The generated block appears immediately in your preview
2. Check how it looks on desktop by default
3. Use the mobile preview button to see how it appears on phones
4. If the block has customization settings, test them to make sure they work

Step 5: Keep or Iterate

1. If you’re happy with the result, click “Keep”
2. If it’s close but not perfect, click back and try a more detailed prompt
3. You can generate multiple versions until you get exactly what you want

What Happens Behind the Scenes (And Why It Matters)

When you generate a block, Shopify Magic creates a new file in your theme’s code called a “liquid file.” This file contains all the code needed to display your block: HTML for structure, CSS for styling, and JavaScript for any interactive features.

The generated file is completely self-contained, so it won’t interfere with theme updates. When your theme developer releases new versions, you can update safely without losing your custom blocks.

If you ever want to make advanced changes, the code is accessible in your theme editor under the “blocks” folder. However, only edit code if you’re comfortable with HTML and CSS – otherwise, you might break something.

Here’s why custom blocks matter for your business

Most Shopify themes come with standard blocks that work fine, but they’re generic. Your competitors using the same theme will have identical layouts. Custom blocks let you create unique sections that reflect your brand and convert better because they’re designed specifically for your products and customers.

Custom blocks also give you flexibility to test different layouts and messaging without waiting for a developer. Want to try a new testimonial format? Create it, test it, and see if it improves conversions.

Who Can Use Shopify’s AI Block Generator

Before diving in, let’s make sure this feature is available for your store. Shopify has specific requirements for accessing their AI block generator.

Pricing Plan Requirements: Your store needs to be on one of these plans:

• Free trial
• Basic ($29/month)
• Growth ($79/month)
• Advanced ($299/month)
• Plus ($2,000+/month)

Important note: If you’re on the Starter plan ($5/month), this feature isn’t available because Starter uses the limited Spotlight theme.

Other Requirements:

• Your account language must be set to English
• Your theme must support custom blocks (most modern themes do)
• You can only add blocks to sections that accept them

Don’t worry if you’re not sure about theme compatibility – when you try to add a block, Shopify will only show the option in compatible sections.

How to Write Effective Prompts That Get Great Results

The quality of your AI-generated block depends entirely on how well you describe what you want. Think of it like giving directions to a talented designer – the more specific you are, the better the result.

The Five-Word Minimum Rule: Your prompt needs at least five words, but longer, more detailed prompts work much better. Instead of “add images and text,” try “Create a block with an image on the left, and a heading, paragraph text, and a ‘Shop Now’ button on the right. Stack on mobile.”

Include These Four Elements in Every Prompt:

1. Content Elements List exactly what content you need: headings, paragraphs, images, buttons, forms, icons, videos, etc.

2. Layout Description Explain how elements should be arranged: side-by-side, centered, grid format, alternating rows, full-width, etc.

3. Customization Settings If you want to easily edit certain elements later (like changing images or button text), mention this: “Include settings to change the image, heading text, and button link.”

4. Mobile Behavior Specify how the block should look on phones: “Stack vertically on mobile” or “Keep side-by-side on mobile.”

Example Prompts That Work:

• “A testimonial block with a customer photo, quote text, customer name, and a 5-star rating display”
• “Side-by-side feature block: left side has an icon and heading, right side has descriptive text”
• “Full-width banner with a background image, centered large heading text, smaller subheading text below it, and a call-to-action button”