How to Add Data Attributes to Your Shopify Theme for SeaText

SeaText uses a small HTML data attribute to know which parts of your Shopify store it should analyze and optimize. When you add data-seatext (or the exact attribute name from your dashboard) to an element, the SeaText script reads that marker and sends the enclosed content to its AI agents — such as the CRO Reading Analysis agent, the Ecommerce Product Copy agent, or the SEO Content Factory agent. Those agents then generate improved copy, run reading‑telemetry tests, or publish new Q&A pages based on the marked content. Without the attribute, the script sees the page but cannot tell which sections are candidates for optimization.

Why the Data Attribute Is Required

The attribute acts as a precise scope signal. SeaText’s JavaScript snippet, which you paste into theme.liquid, scans the DOM for elements that carry the attribute. When it finds one, it extracts the inner HTML and passes it to the appropriate AI agent. For example, the CRO Reading Analysis agent measures dwell time, scroll deceleration, and re‑reading patterns on that specific block. The Ecommerce Product Copy agent rewrites product names and descriptions to increase add‑to‑cart rates. The SEO Content Factory agent identifies buyer questions and publishes indexed answer pages. Each agent only activates on content you explicitly mark, so you keep full control over what gets optimized.

How SeaText Processes the Attribute

After you save the attribute in your Liquid template, the SeaText script loads on every page view. It runs a lightweight selector: document.querySelectorAll('[data-seatext]') (or your custom attribute name). For each matched element, it captures the current HTML, sends it to the SeaText backend along with the visitor’s context (referrer, keyword, device, etc.), and receives optimized variants. The script then swaps the original content with the winning variant in real time — without flicker, thanks to a zero‑millisecond routing layer. This happens only for visitors who meet the agent’s targeting rules; other visitors see the original content. The attribute is therefore the gateway that connects your static theme code to SeaText’s live optimization pipeline.

Step‑by‑Step Implementation for Product Pages

Step 1: Open the Theme Code Editor

In Shopify admin, go to Online Store > Themes. Click the three‑dot menu on your live theme and choose Edit code.

Step 2: Find the Product Description Template

Look in the Sections or Templates folder for product.liquid, product-template.liquid, or main-product.liquid. The file that outputs {{ product.description }} is the one you need.

Step 3: Wrap the Description Output

Locate the line that prints the description. It often looks like:

<div class="product__description rte">
  {{ product.description }}
</div>

Add the data attribute to that wrapper (or add a new wrapper if none exists):

<div class="product__description rte" data-seatext>
  {{ product.description }}
</div>

Use the exact attribute name shown in your SeaText integration snippet (usually data-seatext or data-ai-scope).

Step 4: Save and Verify

Click Save. Open a product page on the storefront, right‑click the description, choose Inspect, and confirm the attribute appears in the HTML.

Adding Attributes to Other Templates

SeaText can optimize any page type. Repeat the same wrap‑and‑save pattern for each template you want to include.

Collection Pages

Edit collection.liquid or collection-template.liquid. Find the collection description output ({{ collection.description }}) and add the attribute:

<div class="collection-description rte" data-seatext>
  {{ collection.description }}
</div>

Standard Pages

Edit page.liquid or page-template.liquid. Wrap the page content:

<div class="page-content rte" data-seatext>
  {{ page.content }}
</div>

Blog Posts

Edit article.liquid or article-template.liquid. Wrap the article body:

<div class="article-content rte" data-seatext>
  {{ article.content }}
</div>

Handling Dynamic Content

Some themes load product descriptions via AJAX (quick‑view modals, infinite scroll, or section rendering API). In those cases, the attribute must be present in the HTML fragment that the JavaScript injects. Check your theme’s JavaScript files for templates that render product HTML on the client side. Add the attribute to the fragment’s root element. If you cannot modify the fragment, you can re‑initialize SeaText after the dynamic insert by calling window.seatext && window.seatext.refresh() (if the script exposes that method). Consult SeaText documentation for the exact refresh API.

Verifying the Integration

1. Open a product, collection, page, and blog post on the live store.
2. Inspect each target element in browser dev tools.
3. Confirm the attribute exists and matches the name from your dashboard.
4. Open the Console tab and look for SeaText log messages (e.g., "SeaText: scope found").
5. If you see errors like "SeaText: account not found" or "SeaText: domain mismatch", double‑check that you are using a live, primary domain (development URLs like localhost or dynamic preview links are restricted per SeaText security policy).

Troubleshooting Common Errors

Symptom	Likely Cause	Fix
Attribute not visible after save	Edited a draft/unpublished theme, or cached version served	Ensure you edit the live theme. Clear Shopify cache (theme editor > Actions > Clear cache) and browser cache.
JavaScript console shows "SeaText script not loaded"	Snippet missing from theme.liquid or placed incorrectly	Paste the SeaText snippet inside <head> or before </body> in theme.liquid. Save and reload.
Console shows "Domain mismatch" or "Account not found"	Using a development domain, or multiple stores on one account	SeaText requires a real, primary domain per account. Create a separate SeaText account for each store. Avoid localhost and dynamic preview URLs.
Content flickers or reverts after optimization	Conflict with another script that rewrites the same element	Check for other personalization or A/B testing scripts. Ensure only one tool controls the marked element. Use SeaText’s preview mode to isolate.
Dynamic content (quick view) lacks attribute	Attribute only in static template, not in AJAX fragment	Add attribute to the fragment template in your theme’s JavaScript or call seatext.refresh() after injection.
No optimization visible after weeks	Agents not activated in dashboard, or traffic too low for statistical significance	Log into SeaText dashboard, activate desired agents (CRO Reading Analysis, Ecommerce Product Copy, etc.). Note: AI agents need some traffic to generate variants.

Key Facts and Limits

Fact	Details
Installation time	Script paste: under 1 minute. Attribute wrapping: 5–15 minutes per template.
Security	Script is inert until you activate agents in the dashboard. Content integrity is preserved.
Multiple domains	One SeaText account = one primary URL. Multiple stores need separate accounts.
Development URLs	localhost and dynamic preview domains are blocked for security.
Headless Shopify (Hydrogen, Next.js)	Not covered here. Add the attribute in your React/Vue component JSX/TSX instead of Liquid.
Performance impact	Negligible. Attribute is a few bytes. AI processing happens server‑side; only the winning variant is swapped client‑side.

Frequently Asked Questions

What exact attribute name should I use?

Check your SeaText dashboard → Integration → Shopify. The snippet shows the attribute (commonly data-seatext or data-ai-scope). Copy it exactly.

Can I mark multiple elements on the same page?

Yes. Each element with the attribute is treated as an independent optimization scope. For example, you can mark the product description, the upsell block, and the FAQ section separately.

Do I need to add the SeaText script before the attributes?

Order doesn’t matter for the attribute itself, but the script must be present on the page for optimization to run. Add the script to theme.liquid as instructed in the integration guide.

Will this work on password‑protected or draft themes?

SeaText only processes traffic on the live, public domain. Password pages and draft themes are not evaluated.

How do I test without affecting live visitors?

Use SeaText’s preview mode in the dashboard, or create a duplicate theme, add attributes there, and preview the duplicate theme via the Preview link in the theme editor.

What if my theme uses sections and blocks instead of a single template?

Find the section file that renders the description (e.g., sections/main-product.liquid). Add the attribute to the block’s wrapper div. The process is identical.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

• Shopify Schema Markup: How to Implement Structured Data?
• Add SEO metadata to your theme
• Dynamic data sources

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

• Shopify Schema Markup: How to Implement Structured Data?
• Add SEO metadata to your theme
• Dynamic data sources

Learn more

Visit the website for more information.