# Ai+ PDP Content

***

### K**ey Benefits**

* **Higher conversion rates:** Richer visuals and clearer explanations help shoppers feel confident and buy sooner.
* **Stronger brand trust:** Consistent storytelling, lifestyle imagery, and proof points make the product feel more premium and credible.

***

### **Steps**

* Select the Tools content seen under the prompt box. 
* Select Ai+ as the option
* P**aste the link to the product page** you want to enhance (PDP URL).
* **Choose a template** from the options that appear. Choose from a template you created and saved for Ai+ content or use one of the several Maker Ai+ templates.
* Answer the questions we generate from the PDP. You can also add any extra details and upload additional image assets at this stage.
* Maker will display the credits that will be used to generate the images. Click on "Allow" to proceed.
* Once the desktop AI+ content is generated, you can choose to re-generate the images again if you'd like by selecting them on the preview panel. 
* Use the prompts or visual editing to make any adjustments.
* Publish the project.

***

### Creating a new Ai+ Template 

**Step 1:** Design the layout for the enhanced content in Figma, then export it as an image.

**Step 2:** Set up your [style guide](/features/style-guide.md) using the Figma link, custom fonts, and any other brand assets.

*(We recommend Figma as your design tool since you can use the same file for Steps 1 and 2. If you use a different tool, create a style guide using the "Upload your brand guidelines" process instead -- this lets you upload the exported image and add additional assets like custom fonts.)*

**Step 3:** Start a new project in Maker. Add the following prompt, select the style guide you just created, and upload the exported image.

```
Role: You are an expert front-end developer working inside an AI coding environment that takes a webpage
 screenshot(s) and a JSON style guide to generate production-grade, responsive React + TypeScript code with
 Tailwind CSS.
Do not use unsplash placeholders. I will provide the assets after youve completed the plan.

IMPORTANT! Ensure the output code comply with visual editor guidelines

  1. Layout and Responsiveness
  Treat the screenshot as the source of truth for structure, spacing, and hierarchy.
  Use Tailwind responsive prefixes (sm:, md:, lg:, xl:) for mobile-first layouts. Ensure layouts look
  intentional on all breakpoints, not just stacked.
  Use percentage-based widths, Tailwind's max-w-* constraints, and responsive utilities so the layout feels
  fluid. Use Tailwind grid/flex utilities; avoid absolute positioning unless for overlapping decorative
  elements.
  Add breakpoints based on content — if the layout visually breaks at a width, add a responsive prefix there
  rather than relying only on standard breakpoints.

  2. Style Guide Integration
  All typography, colors, radii, and spacing should come from the provided design system tokens in the
  Tailwind config.
  If a required value is missing or significantly different from existing tokens, create it and add it to the
  Tailwind config's theme.extend. Match tokens by intent (e.g., a large display heading maps to the style
  guide's display size, not a raw pixel value).

  3. Data and Asset Handling
  Replace proprietary brand names, logos, external alt text, and image filenames with generic placeholders
  (e.g., "Company Name", placeholder-hero.jpg) to protect intellectual property. Use the Unsplash tool to find
   appropriate stock photos where the screenshot shows photography. Remove proprietary mentions after the
  first version.

  4. Typography and Layout Integrity
  Apply Tailwind's text-pretty class (text-wrap: pretty) to body text paragraphs and list items to prevent
  widows — this avoids single words stranded on a final line.
  Apply text-balance on h1 and h2 elements for symmetrical line lengths.
  Use responsive text sizing (e.g., text-lg md:text-2xl lg:text-4xl) so headings scale smoothly from mobile to
   desktop.
  Apply break-inside-avoid (Tailwind: break-inside-avoid) to logical "chunks" like cards, testimonial items,
  or feature blocks so they don't split across columns or page breaks.
  Do not apply text-wrap utilities to buttons, inputs, or interactive elements — leave these at their default
  wrapping behavior.
  These are progressive enhancements — they improve the experience in modern browsers and degrade gracefully
  in older ones, so use them freely.

  5. Content Editability ("Select to Edit" Compatibility)
  Expose all editable values (strings, image URLs, labels) as flat props on the top-level component. Do not
  nest data inside arrays or deep objects — the "Select to Edit" panel needs to see individual string/number
  props (e.g., heroTitle, ctaLabel, heroImageUrl).
  Add descriptive data-name attributes to all major sections and interactive elements (e.g., data-name="Hero
  Section", data-name="CTA Button") so they appear in the visual editor's element list.

  6. Componentization
  Break the screenshot into logical sections (Navbar, Hero, Features Grid, Testimonials, Footer, etc.).
  Implement each as a clean, reusable component. Prioritize clarity over clever patterns — avoid deep nesting
  that makes the component tree hard to navigate or edit.

  7. Accessibility and Semantics
  Use semantic HTML (<main>, <section>, <nav>, <footer>). Ensure accessible contrast using style guide colors.
  Interactive elements should be keyboard-focusable with visible focus states using design tokens (e.g., ring
  color from the style guide).

  8. Discipline
  Only implement what's visible in the screenshot. Do not add animations, modals, hover effects, or sections
  that aren't shown. Keep code lean and production-ready.
```

**Step 4:** Once the project is created, use the prompts and visual editor to refine the design.

**Step 5:** Once the design is locked, select the left dropdown and add the project to both the AI+ Content and Templates collections.

### CMS Implementation

These are the recommended steps for adding the Maker AI+ content to your product pages. The embed code should be pasted into your product record as-is and output directly in your product template. Please verify these steps in your own CMS.

***

### Shopify

**Step 1: Get the embed code for your product**

From your Maker dashboard, open the project for the product you want to implement and copy the embed code.

**Step 2: Add a metafield to the product in Shopify**

Metafields allow you to attach custom data to individual products in Shopify, which is exactly what we need here since every product has different content.

In your Shopify admin, go to **Settings > Custom Data > Products:**

1. Click Add definition
2. Name it something like Ai Product and set the namespace to&#x20;
3. Name it something like Ai Product, set the namespace to maker, and the key to ai\_product
4. Set the type to Multi-line text
5. Save the definition

Now go to the individual product:

6. Go to **Products** and open the product that matches your Maker project
7. Scroll down to the Metafields section at the bottom of the product page
8. Find the maker.ai\_product field you just created
9. Paste the embed code into that field
10. Save the product

Repeat this for each product you want to add Ai+ content to.

**Step 3: Add the metafield output to your product template**

This step only needs to be done once. Your developer will add a single line to your product template that outputs whatever embed code is stored in that product’s metafield.\
1\. In Shopify admin, go to Online Store > Themes > Actions > Edit Code\
2\. Open your product template (usually `sections/main-product.liquid` or `templates/product.liquid`)\
3\. Add the following snippet anywhere in the file, ideally near the top or bottom of the main content section:

```
{% if product.metafields.maker.ai_product != blank %}
  {{ product.metafields.maker.ai_product.value }}
{% endif %}
```

4\. Save the file\
From this point on, whenever a product has a embed code stored in its `maker.ai_product` metafield, it will automatically output in the page HTML for that product. Products without a metafield value will simply output nothing.<br>

**Step 4: Verify**

Go to your live product page and see if the Ai+ content loads correctly.&#x20;

***

### BigCommerce

BigCommerce’s Stencil framework also renders server-side. The approach here uses custom product fields.<br>

**Step 1: Enable custom fields on your product**

1\. In your BigCommerce admin, go to Products and open the product that matches your Maker project\
2\. Scroll to the Custom Fields section\
3\. Add a new custom field:\
Name: `maker_ai_product`\
Value: paste the embed code from Maker AI\
4\. Save the product\
Repeat for each product.<br>

**Step 2: Output the custom field in your product template**

1\. In your BigCommerce admin, go to Storefront > My Themes > Advanced > Edit Theme Files\
2\. Open `templates/pages/product.html`\
3\. Add the following snippet:

```
{{#each product.custom_fields}}
  {{#if (equals name "maker_ai_product")}}
    {{{value}}}
  {{/if}}
{{/each}}
```

**Step 4: Save and push your theme** **and** **verify**

Go to your live product page and see if the Ai+ content loads correctly. <br>

***

### **Magento (Adobe Commerce)**

In Magento, the equivalent of metafields is product attributes.<br>

**Step 1: Create a product attribute**\
1\. In your Magento admin, go to Stores > Attributes > Product\
2\. Click Add New Attribute\
3\. Set the attribute code to `maker_ai_product`\
4\. Set the input type to Textarea\
5\. Under Storefront Properties, set Visible on Catalog Pages on Storefront to No (this is backend-only data)\
6\. Save the attribute and assign it to the relevant attribute set<br>

**Step 2: Add the embed code to each product**

1\. Go to Catalog > Products and open the product that matches your Maker project\
2\. Find the `maker_ai_product` attribute field\
3\. Paste the embed code content from Maker AI\
4\. Save the product\
Repeat for each product.\
Step 3: Output the attribute in your product template\
In your product detail page template (`app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/product/view.phtml`), add:

```
<?php if ($product->getMakerAiProduct()): ?>
  <?= $product->getMakerAiProduct() ?>
<?php endif; ?>
```

Clear cache after saving:

```
php bin/magento cache:clean
```

***

### **Custom or Headless CMS**

If you're on a custom-built platform or a headless setup, the concept is the same: store the embed code against the product record in your database or CMS, then output it server-side in the product page template.

**For Next.js or React-based storefronts**

Store the embed code in your product data (CMS, database, or API) and inject it in the body of the page using dangerouslySetInnerHTML:

```
export default function ProductPage({ product }) {
  return (
    <>
      {/* rest of your page */}
      {product.makerAiProduct && (
        <div
          dangerouslySetInnerHTML={{ __html: product.makerAiProduct }}
        />
      )}
    </>
  );
}
```

For any server-rendered platform (PHP, Python, Ruby, etc.)\
Store the embed code in your product database field and output it in the template:

```
<?php if (!empty($product['maker_ai_product'])): ?>
  <?= $product['maker_ai_product'] ?>
<?php endif; ?>
```

***

### Summary&#x20;

| Platform           | Where em is stored   | Template change needed |
| ------------------ | -------------------- | ---------------------- |
| Shopify            | Product metafield    | Yes, one-time          |
| BigCommerce        | Product custom field | Yes, one-time          |
| Magento            | Product attribute    | Yes, one-time          |
| Next.js / Headless | Product data / CMS   | Yes, one-time          |

The template change is always a one-time setup. Once it’s done, you only need to add or update the embed code in the product record from now on.

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maker.co/features/ai+-pdp-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.