How to Use Metaobjects on Product template with Image with text - simple section

Learn how to display product-specific content using metaobjects and the Image with Text section.

Overview

You can use metaobjects to create custom content blocks for specific products. When a product has an associated metaobject, the section will display that content. If no metaobject is associated, the section can be hidden automatically.

Setup Instructions

1. Create a Metaobject Definition

First, create a metaobject type for your product content:

1. Go to Settings > Custom data > Metaobjects

2. Click Add definition

3. Configure the metaobject:

   • Name: Product Content Block

   • Type: product_content

   • Add these fields:

     • Heading (Single line text)

     • Content (Multi-line text)

     • Image (Media)

     • Button Label (Single line text) - Optional

     • Button Link (Single line text) - Optional

2. Create Content Using Metaobjects

Create content blocks for your products:

1. Go to Content > Metaobjects

2. Click Add Product Content Block

3. Fill in the fields:

   • Heading: e.g., "How to Use"

   • Content: Your product information

   • Image: Upload a relevant image

   • Button Label: e.g., "Learn More"

   • Button Link: URL or handle

3. Associate with Products

Link the metaobject to specific products:

1. Go to Products

2. Edit the product

3. Scroll to Metafields

4. Click Add metafield

5. Choose your metaobject type

6. Select the content block you created

4. Set Up the Section

Add the Image with Text section to your product template:

1. Go to Online Store > Themes

2. Click Customize

3. Select a product page

4. Add "Image with text - simple" section

5. Configure other design settings as needed

6. In section settings:

   • Enable "Enable metafield detection"

How It Works

• When a customer views a product, the section checks for an associated metaobject

• If found, it displays the content from the metaobject

• If no metaobject is associated and metafield detection is enabled, the section hides

• Content updates automatically when you edit the metaobject

Example Use Cases

Product Features

Metaobject content:
- Heading: "Key Features"
- Content: Detailed product features
- Image: Feature diagram
- Button: "View Specifications"

Care Instructions

Metaobject content:
- Heading: "How to Care"
- Content: Care instructions
- Image: Care demonstration
- Button: "Watch Care Video"

Origin Story

Metaobject content:
- Heading: "Handcrafted in Italy"
- Content: Product origin story
- Image: Workshop photo
- Button: "Meet Our Artisans"

Tips & Best Practices

1. Use consistent image sizes

2. Keep headings concise

3. Write clear, scannable content

4. Use high-quality images

5. Test on multiple products

Troubleshooting

Section Not Showing?

1. Verify metaobject is created

2. Check product association

3. Confirm "Enable metafield detection" setting

4. Ensure all required fields are filled

Content Not Updating?

1. Clear theme cache

2. Check metaobject is published

3. Verify product association

Need help? Contact our support team at [e-mail] for assistance.

Pro Tip: Create your metaobject first to establish your content structure before creating multiple versions.