wt-features-css-styling

Layout and styling with WriteText.ai

WriteText.ai gives you the flexibility to style and arrange your generated content exactly the way you want. Whether you’re working with a page builder, applying custom CSS classes, or integrating with an existing site template, every section of your generated content can be positioned, formatted, and styled to match your brand’s visual identity.

Publishing your content with WriteText.ai

WriteText.ai is seamlessly integrated as an add-on for WooCommerce, Magento, and Shopify, so there’s no need to worry about technical setup for these platforms. Instead, what this page discusses is how your generated content gets published and laid out on your storefront.

There are five main ways to do this, each with different levels of control and complexity:


The sections below outline each method in more detail, including functionality, complexity, expected outcomes, and platform compatibility.

Important note: Meta title, meta description, Open Graph description, and image alt text are generated and transferred to the ecommerce system as plain text without any formatting, as these texts are not visible on the page itself. This article focuses on how to lay out visible text in the product and category pages, specifically long and short product descriptions as well as category texts.

All text can be modified after text generation before being transferred to the live shop.  

Option 1: Plain text transfer

WriteText.ai generates plain text for category description and long & short description. Once generated, the text is transferred to the corresponding fields in the ecommerce platform. While the text is plain, it may be divided into multiple paragraphs depending on the length.

This is the most basic way to use WriteText.ai.

  Output:  Plain text written with one or more paragraphs depending on the length, no formatting.

Works with

  • WooCommerce
  • Shopify
  • Magento

Complexity

Easy. Once WriteText.ai is installed, any person familiar with the ecommerce system can generate and publish content.

Option 2: HTML-formatted text

Using this option, WriteText.ai generates HTML text using predefined templates set up in the backend of WriteText.ai. It works just like under Option 1 where the output is transferred to either category description, long and/or short product description fields; however, it does require that a template is linked to the ecommerce site so that WriteText.ai knows which text sections to generate and in which order. The linking of template and ecommerce site is done in the backend of WriteText.ai.

  Output:  The final output is one HTML page for each description type. The formatting uses the ecommerce site’s stylesheet for Normal Text, H1–H6 headings, bullets, numbering, margins, paragraph breaks, etc. and allows you to configure Normal Text bold, underline and italics as well as choose if the output is in bullet points, numbers, or as a text paragraph.

The result is of higher quality than plain text without templates as described under Option 1. The text is more engaging, it can contain specific sections such as features, advantages, and benefits, and it can be fully customized by inserting images and custom prompts (Pro version) to create output that meets all your requirements. You also have full control over the order of the different sections that appear in the final output.

All text is output as a single HTML page in the category description and/or the long or short product description depending on which text is being generated.  

Works with

  • WooCommerce
  • Shopify
  • Magento

Complexity

Not very complex, but some familiarization setting up and linking templates is required. Expect to use about 30 minutes learning how to configure, link and choose a template when generating text for the first few times.

Option 3: Page builder

Page builders allow you to lay out your product and category pages by dragging and dropping elements in the page, then linking specific text sections from the WriteText.ai template to these elements. WriteText.ai generally works with most page builders such as Elementor for WordPress. (Installing and configuring a page builder is beyond the scope of this article but there are many resources on the Internet for how that is done.)

Once the page has been laid out, each block in the page must be linked to a WriteText.ai text section using a so-called block id. The block id can be found in the templates section of WriteText.ai’s backend. Once you have opened the template that you want to link with the page builder, hover over the section then copy the “block id” then paste it into the corresponding block in the page builder. Continue until all block id’s have been linked with the page builder template then save it before generating and transferring the text to the shop.

If the output does not fit in the sections you have set up in the page builder, then either adjust the text length by modifying the template or adjust your layout in the page builder.

Works with

  • WooCommerce
  • Shopify

Note: The page builders for Magento are not as flexible as those for WooCommerce and Shopify so this option does not work for Magento. See option 4.

Complexity

Working knowledge of the page builder used in the site is required. In addition to that, expect to use about 30 minutes learning how to configure, link and choose a template when generating text for the first few times.

Option 4: Positioning text and images using class names

This option is used to position where a piece of text (called a "text block") or an image (called an “image block”) appears on a product or category page using so-called CSS class names.  

A text block is just a chunk of text wrapped in HTML tags, like <div>, <p>, or <span> and an image is likewise wrapped in similar HTML tags. By giving the text block or image a CSS class name, a front-end developer can format how the text appears (by overwriting WriteText.ai’s template formatting) as well control where the text block is positioned on the product or category page.

Changing appearance and/or position can be done independently of each other.

Here's how it works

WriteText.ai generates the text for the product descriptions based on the template chosen as discussed above. The text is saved in the long and/or short product descriptions field(s)* and can be accessed directly in the backend of WooCommerce, Shopify and Magento.

WriteText.ai adds a special class name in the HTML output, for instance wtai-features-section for the feature section, wtai-image_1-section for the first image embedded in the text and so on. The class names are not visible in the generated text, and each class name is unique to avoid conflicts.

A front-end developer uses class names to position text and image blocks accurately on a product or category page, typically adhering to a design specification. This ensures that when the page loads in a browser, the text and image blocks are consistently positioned correctly. While positioning the text block, the front-end developer can also apply custom formatting, such as changing standard bullet points to colored bullets or checkmarks, as used in WriteText.ai’s demo store’s technical specifications section.

This method works similar to using a page builder, except that the layout (placing of the text and image blocks) uses class names and requires a front-end developer.

Works with

  • WooCommerce
  • Shopify
  • Magento

Complexity

A front-end developer with a working knowledge of CSS / HTML is needed. In addition to that, expect to use about 30 minutes learning how to configure, link and choose a template when generating text for the first few times.


* In most ecommerce systems, the long product description is a detailed text field used to present the full product information, often displayed in the main product page content area. The short product description (sometimes called an excerpt or summary) is a smaller text field intended for concise highlights, typically shown near the product title, price, or in product listings. Depending on the platform and theme, a store may use only the long description, only the short description, or both, with the short description serving as a quick preview while the long description provides the full details.

Comparison table

Approach Placement control Setup effort Best for Styling method
Option 1: Plain text transfer as category description, long and/or short descriptions  None, plain text, written into category or product description fields  Low Shops using standard themes without any layout on the product and category page None
Option 2: HTML- formatted text transferred to category description as well as long and/or short descriptions  Moderate (single content area, style by class)  Medium Shops using standard themes without customization that want full control over text and images

CSS Classes: Use predefined class names (e.g., .wtai-features-section) in your main stylesheet to style sections globally.

Example: .wtai-features-section { font-size: 16px; font-weight: bold; }

Content is published directly into the theme’s default description container, styled based on class-based rules.

Page builder High (block-level mapping)  Medium Pixel-perfect layouts, non-dev teams

Block IDs: Use unique block IDs to map sections in your page builder tool.

Example: #wtai-features-block-id { background-color: #f0f0f0; padding: 20px; }

Content is mapped via Block IDs and styled using the builder's tool or custom CSS

Custom layout Very High (template code)  Medium–High  Full control in bespoke themes

CSS Classes: Use class names (e.g., .wtai-features-section).

Sections use custom fields to store content, and developers map content to the layout via classes or Block IDs.

Example: .wtai-features-section { font-size: 18px; font-weight: normal; }

You must ensure custom fields are output and connected properly to the front-end template.

Option 5: Integrating with WriteText.ai’s API

If you need full freedom without any limitations, then you can use the API to integrate with your ecommerce system, ERP system, PIM system, Inventory system etc. The API supports all the functionality of WriteText.ai., except for managing negative keywords.

API integration is primarily used by companies employing an omni-channel strategy with interconnected components such as ERP systems, POS, inventory systems, ecommerce platforms, and more. By leveraging WriteText.ai and its API as the source for all optimized product text, businesses can streamline content creation, ensuring consistency and accuracy across multiple platforms. This integration enables automated, high-quality product descriptions tailored to enhance SEO, improve customer engagement, and drive sales, all while reducing manual effort and maintaining brand coherence across diverse systems.

Read more about the WriteText.ai API here.

Works with

  • Proprietary ecommerce systems
  • Other ecommerce platforms not natively supported by WriteText.ai
  • ERP systems
  • PIM systems
  • Inventory systems
  • POS
  • Store displays

Complexity

Complex. You will need a front-end and back-end developer with working knowledge of CSS / HTML development. In addition to that, expect to use about 30 minutes learning how to configure, link and choose a template when generating text for the first few times.

Quick troubleshooting

icon-park-solid_check-one
Not seeing any content in the frontend? Your template probably isn’t printing the Description fields yet. Enable the standard Description or map sections via a builder.
icon-park-solid_check-one
Unexpected bullets or spacing? Add/adjust list and margin rules for .wtai-section in your main stylesheet.
icon-park-solid_check-one
Multiple H1s? If your theme already shows an H1, set the Title block in your WriteText.ai template to a different heading level (H2–H6) or disable it.
icon-park-solid_check-one

Empty gap in a page builder? Remove or hide the unused block; builders keep placeholders until you do. 

Unlike traditional “enterprise” tiers, this plan does not require 25,000 products or six-figure credit usage per year. Instead, it’s tailored for businesses that want the reassurance of expert setup and configuration, ongoing support, and a guaranteed smooth start.

What you get out of the box (no setup) 

If your theme has a built-in long description (and maybe short description) field(s), WriteText.ai publishes content there either as plain text or (if you use a template) as one continuous HTML block composed of the sections set up in the template being used.

Need help customizing your storefront?

Get expert assistance with styling, template setup, and theme tweaks through WriteText.ai Enterprise—a separately billed service that’s not just for big shops but for anyone who wants hands-on customization and support.