Say hello to WriteText.ai 3.5. Full automation, templates, and smarter product research. Discover what's new. 

wt-features-page-builder

Integrating WriteText.ai with page builders – Keep your layout. Automate your content.

Keep your existing design while populating each section with fresh, SEO-optimized content automatically. Map template sections to your blocks or fields, style them with .wtai-* classes, and enjoy hands-free text generation and publishing.

If you already use a page builder to design your product or category pages, you’ve likely invested time perfecting and testing your layout—where the product images go, how the features are displayed, how FAQs are presented, etc. With WriteText.ai, you can keep that layout exactly as it is while automatically populating each section with fresh, AI-generated, SEO-optimized content.

This guide explains how to connect WriteText.ai generated content to your page builder, style them, and ensure they display correctly on your WooCommerce or Shopify store. We also cover how to use the same approach if you’re integrating via the WriteText.ai API.

WriteText.ai does not support the Magento page builders due to its limitations. Customization of Magento is possible using CSS classes, please read more about that on Templates CSS styling.

Why choose page builder integration?

icon-park-solid_check-one
Keep your current design — no need to redo your product pages. 
icon-park-solid_check-one
Automate updates — content refreshed by the keyword optimization pipeline publishes automatically and keeps your existing design and layout.
icon-park-solid_check-one
Full styling control — use our .wtai-* classes to apply consistent design.
icon-park-solid_check-one

Flexible mapping — connect sections to custom fields/keys or API endpoints.

How it works

When you create a template in WriteText.ai, each content section is assigned a:

CSS class

e.g., .wtai-features-section (used for styling but can also be used for both positioning and styling if you are not using a page builder)

Block ID

e.g., wtai_product_description_features (used for mapping content with page builder sections)

In WooCommerce and Shopify:

  • Block IDs allow your page builder to pull in content from WriteText.ai into specific blocks or containers.
  • CSS classes are used to apply consistent styling across your site, regardless of the page builder or the stylesheet of your ecommerce platform. A frontend developer also has the option to overwrite these CSS classes—for example, to customize icons in a bullet section or adjust other design elements.
Note for API integrations: When using the WriteText.ai API, the entire product or category description is retrieved from the database and then parsed to separate individual template sections by Block ID and/or CSS class. This allows a frontend developer to place the text sections anywhere within the HTML structure of the product or category page.

Prerequisites

icon-park-solid_check-one
A fully set-up WriteText.ai template with the sections you want for products and categories (e.g., Title, Introduction, Features, Benefits, FAQs, Call-to-action). The template must be linked to your ecommerce site.
icon-park-solid_check-one
Access to your page builder.
icon-park-solid_check-one
Ability to create, read, and edit custom fields / keys.
ic_home_woo

Integration with WooCommerce (Elementor example)

In WooCommerce with Elementor, each block in your product page layout can be connected to a WriteText.ai section by using the Custom Key.

Step-by-Step:

1. Create or update template in WriteText.ai

Include the sections you want to display (e.g., Introduction, Features, FAQs). Make sure the template is linked to your WooCommerce store.

2. Open your product template in Elementor

Navigate to the single product page layout.

3. Add or Edit a Section

Use the Text Editor widget, switch its content to Dynamic Tags to pull in the content.

4. Enter the Block ID

In the widget settings, enter the Block ID for the desired section (e.g., wtai_product_description_features).

5. Style as needed

Apply your theme’s styles or add custom CSS targeting the section’s CSS class.

6. Repeat for all template sections

Map each WriteText.ai section to the correct location in your layout.

Updating existing layouts

If your layout already has sections, replace the current field value with the WriteText.ai Block ID. The next time you generate or update content in WriteText.ai, the mapped section will be updated automatically.

Output testing

Before generating large amounts of category or product text, review one or two products or categories to ensure all text sections are properly aligned. You may need to adjust the page builder layout or modify the text length in the template if a section is too long or too short. While reviewing, test the page on various devices, such as a laptop, tablet, and mobile phone, to confirm everything displays correctly. 

ic_home_shopify

Integration in Shopify (Custom Liquid) 

In Shopify’s editor, you can add Custom Liquid blocks to product templates to output WriteText.ai content.

Step-by-Step:

1. Create or update template in WriteText.ai

Make sure your desired sections are included in the template and that the template is linked to your Shopify store.

2. Open the product template in Shopify Editor

Navigate to the relevant product template under Online Store → Themes → Customize.

3. Add a “Custom Liquid” Block

Position it where you want the section to appear.

4. Insert the Block ID

Use Liquid syntax to output the meta field:

5. Style the output

The section will have its corresponding CSS class, allowing you to style it consistently. Depending on the complexity of your styling you may need a frontend developer to complete this step.

6. Repeat for other sections

Add more Custom Liquid blocks for each section you want to display.

Updating existing layouts

If your layout already has sections, replace the current field value with the WriteText.ai Block ID. The next time you generate or update content in WriteText.ai, the mapped section will be updated automatically.

Output testing

Before generating large amounts of category or product text, review one or two products or categories to ensure all text sections are properly aligned. You may need to adjust the page builder layout or modify the text length in the template if a section is too long or too short. While reviewing, test the page on various devices, such as a laptop, tablet, and mobile phone, to confirm everything displays correctly.

ic_home_api

Integration Using the WriteText.ai API 

WriteText.ai has a complete API enabling integrations with ecommerce systems not supported by WriteText.ai store, ERP system, PIM system, inventory system etc. or systems with special requirements not supported by page builders.

To learn more about the WriteText.ai API please go to the API section.  

Platform notes

icon-park-solid_check-one

WooCommerce

Tested with Elementor: mapping is done by adding a dynamic text block and setting its Custom Field / Meta Key to the WTAI Block ID. Works similarly in Divi, Oxygen, and other builders that support custom fields.

icon-park-solid_check-one

Shopify

In Online Store 2.0, you can display WTAI content by adding a Custom Liquid block in the theme editor and pulling the data from the metafield that matches the WriteText.ai Block ID.

icon-park-solid_check-one

WriteText.ai API

The API returns HTML output with section classes, which you can place anywhere in your template or saved to other systems.

Styling is handled via CSS; Block IDs are not used in API integrations.

Handling missing/removed sections (important)

Page builder mapping

If you remove a section in your WriteText.ai Template, the mapped block remains in your builder. Use your builder’s “Hide when empty” / conditional visibility so empty blocks don’t leave gaps in your layout. Different page builders use varying names for these features.

Multi-column layouts

Each column behaves independently. An empty block in Column B won’t be auto-filled by content from Column A. Use conditional display or remove the block from that column.

We have tested this integration in Elementor for WooCommerce and in Shopify’s Custom Liquid blocks.

Need help setting it up?

If you’d like expert assistance in integrating WriteText.ai into your WooCommerce or Shopify store, this is available through WriteText.ai Enterprise. Our developers specialize in ecommerce integrations, and our designers can craft conversion-focused product page layouts tailored to your brand. Enterprise isn’t just for big shops—it’s for anyone who wants a fast, hands-on setup, and it’s billed separately from your regular plan.
Explore Enterprise