Automatically generating theme blocks in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate a new theme block in your theme editor based on details that you provide.

Considerations for generating theme blocks

Caution

Assistance with customizing or troubleshooting the code for blocks generated by Shopify Magic isn't supported by Shopify Support and third-party theme developers. If an AI-generated block causes problems with your theme, then you might need to delete it.

You can hire a Shopify Partner if you need assistance with your AI-generated theme blocks.

Review the following considerations for generating theme blocks:

• AI-generated code may not always be perfect. It can sometimes produce errors, unexpected results, or code that doesn't fully meet accessibility or performance best practices. You're responsible for reviewing, testing, and ensuring the generated block meets your standards and functions correctly.
• Preview the block looks on both desktop and mobile views within the theme editor preview.
• If your block includes customizations settings, test them after adding the block to ensure that they work as expected.
• After you generate a theme block, the new liquid file for the block is added to the blocks folder in your theme's code.
  • Theme blocks are composed of Liquid, Shopify's templating language. Theme block files also contain HTML, CSS, JSON, and JavaScript. After you generate a theme block, the new liquid file for the block is added to the blocks folder in your theme's code.

    

  • If you want to edit a generated theme block by editing the code, then you can edit your theme code. Edit your theme code only if you know HTML and CSS, and have a basic understanding of Liquid.
  • The liquid file generated by Shopify Magic is self-contained. You can still update your theme when new versions get published to the theme store.

Eligibility requirements for generating theme blocks

Review the following requirements for generating theme blocks.

Pricing plan requirements

Your store must be on one of the following pricing plans:

• Free trial
• Basic
• Growth
• Advanced
• Plus

This feature is not available on the Starter plan, which uses the Spotlight theme and does not support adding custom theme sections or blocks.

Language requirements

Your account's preferred language must be set to English.

Theme compatibility

The theme block generation feature is available only for themes built by Shopify, such as the free themes from the Shopify Theme Store. Your theme must support sections that accept theme blocks. You can only generate blocks for sections that accept theme blocks.

Learn more about different [block sources](/manual/ online-store/themes/theme-structure/sections-and-blocks#block-sources).

Tips for writing effective prompts

The quality of the generated block often depends on the quality of your prompt. Review the following best practices for writing prompts.

Be specific and descriptive

Prompts should be a minimum of five words long. Longer prompts with more detail are likely to return more accurate results.

For example, instead of entering add images and text, enter 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.

Mention content elements

List the types of content needed for the block, such as headings, paragraphs, images, buttons, forms, and icons.

Suggest layout

Describe the arrangement of elements in the block, such as side-by-side, grid, centered, or alternating rows.

Include customization settings

If you want the block to have specific editable settings in the theme editor (like changing the image, text, or button link), then include them in your prompt.

For example, to include a setting to control animation speed in a block with a video, enter Include a setting to control animation speed.

Iterate with follow up instructions

If the first result isn't quite right, adjust your prompt with more detail or different phrasing, and then generate again.

Example Prompts

Review the following examples of prompts that follow best practices:

• 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.

Generate a theme block

After you generate a block and decide to keep it, the new block is added to the block picker. You can add the block to compatible sections that accept theme blocks.

Steps:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit and click Customize.

3. Customize your home page, or tap the Home page drop-down menu and then select the template that you want to add a section to.

4. Click the section that you want to generate a block for.

5. Click Add block.

6. Click Generate.

7. Enter a description of the block that you want to generate.

8. Click Generate. Shopify Magic will process your request and create the code.

9. Preview the generated block directly in the theme editor. If customization settings were generated, then you can customize your block.

10. If you're satisfied with the generated block, then click Keep. If not, then you can either discard the block or provide follow up instructions.

Delete a generated theme block from your theme

Caution

After you delete a file, it can't be recovered. Deleting essential files from your theme code might cause your theme to break. Ensure that you're deleting the correct file.

After you generate a theme block, the new liquid file for the block is added to the blocks folder in your theme's code. If a generated theme block is causing issues on your store, then you can delete it by deleting the liquid file from your theme code.

Steps:

1. From your Shopify admin, go to Online Store > Themes.

2. Next to the theme that you want to edit, click Customize.

3. Customize your home page, or tap the Home page drop-down menu and then select the template that you want to add a section to.

4. Click a section that contains the block that you want to delete. If you previously removed all instances of the block, then click Add block to re-add the block from the block picker.

5. In the block's settings, click > Edit code.

6. In the sidebar menu, click the blocks folder to expand it, and then find the block file you're currently viewing. The file will match the name of the block that is currently open, and ends in .liquid.

   

7. In the sidebar menu, click the icon next to the block file.

8. In the dialog, click Delete file to confirm.