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

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 doesn't support adding custom theme sections or blocks.

Theme compatibility

The theme block generation feature is available for all themes on the Shopify Theme Store. If you use a compatible third-party theme, then you must purchase the theme before you can generate theme blocks, as the free trial version doesn't support the feature.

The feature isn't available on vintage themes. Learn more about features for different theme architecture versions.

User permission requirements

The following users can generate blocks in themes:

• The store owner and organization owner.
• Users with the Administrator or Organization administrator roles.
• Users with a Store role with the Edit Code permission.

Tips for writing effective theme block prompts

The quality of the generated block often depends on the quality of your prompt. Follow these best practices:

• 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, such as the option to change 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, then adjust your prompt with more detail or different phrasing, and then generate again.

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 Edit theme.

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

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 Edit theme.

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.