Skip to main content

Inline Product Page Widget

Updated

Overview

The Inline Product Page Widget (PDP Widget) displays AI-powered question buttons directly on your product pages. These suggestion chips sit right alongside your product information, so shoppers can ask a common question with one click, without opening the chat first.

When a shopper clicks a question button, the full Rep AI chat opens with that question already asked.

On Shopify, you place the widget with Shopify's own theme editor: drag it where you want it and save. No code needed.

What This Feature Does

The Inline PDP Widget adds a lightweight engagement point to your product pages. It displays question chips that:

  • Show relevant questions about the specific product being viewed
  • Blend into your product page layout, right where you place them
  • Encourage interaction by putting common questions up front
  • Open the chat when clicked, with the selected question already asked

It works alongside your floating chat widget. It doesn't replace it.

Why Use the Inline PDP Widget?

  • Increase engagement: Shoppers see relevant questions before they think to ask
  • Reduce friction: No need to open the chat first. Questions are visible right away
  • Context-aware: Questions adapt to the product being viewed
  • Place it without code: On Shopify, drag it into position in your theme editor

How It Works

For Your Shoppers

When shoppers view a product page, they see a short set of suggested questions next to your product information, for example:

  • "What's my size?"
  • "Add to cart"
  • "What do you recommend?"
  • "Ask another question"

Clicking any question opens the full Rep AI chat with that question already submitted, and the AI answers right away.

Behind the Scenes

The questions are AI-generated and context-aware. They're tailored to:

  • The specific product being viewed
  • Your product's attributes and variants
  • Common customer questions for similar items
  • Your store's typical FAQ topics

These are the same suggestion chips that appear during a chat conversation. The widget brings them forward onto the product page.

Setting Up the Inline PDP Widget

Step 1: Open the widget settings

  1. Log in to your Rep AI Console
  2. Go to Settings > Chat Widget
  3. Open the Embedded widgets tab
  4. The Inline PDP widget card is at the top of the tab

Step 2: Turn the widget on and set a title

  1. Switch the Inline PDP widget toggle ON
  2. In the Title field, enter the heading shoppers see above the question buttons (up to 50 characters)

Suggested titles:

  • "Ask about this product"
  • "Have questions?"
  • "Need help deciding?"
  • "Quick questions"

If you leave the Title field empty, shoppers see "Ask your Concierge".

Step 3: Choose where the widget appears

Under Placement, Shopify stores see two options:

  • Theme editor (Recommended): place the widget anywhere on your product page using Shopify's theme editor. This option is selected for you when you first turn the widget on.
  • Custom container: display the widget inside a specific HTML element on your page. This option is meant for developers.

Not on Shopify? You won't see these options. Your widget uses a custom container ID. Skip to Place the Widget with a Custom Container ID below.

Step 4: Place the widget in Shopify's theme editor

  1. With Theme editor selected, click Adjust in theme editor. (If Custom container is selected, the same button reads Open theme editor.)
  2. Rep checks your published theme and shows a short confirmation before opening Shopify:
    • "This adds a Rep AI block to your product page": you don't have the widget in your theme yet. Shopify opens with the block already added.
    • "Rep AI is already on your product page": you've already placed it. Shopify opens so you can move the block you already have.
    • "We couldn't check your theme": Rep couldn't read your theme just now. Opening the theme editor adds a block, so if you already have one, remove the extra before you save.
  3. Click Open theme editor. Shopify's theme editor opens in a new tab on your product page template.
  4. In the left sidebar, find the block called Rep AI product questions. To move it, drag it by its handle in the sidebar list.
    • Don't see it? Click Add block, open the Apps tab, and choose Rep AI product questions.
  5. In the editor preview, the block shows a placeholder with example questions. On your live store, each product gets its own AI-generated questions.
  6. Click Save in Shopify. Nothing changes on your storefront until you save there.

Tip: Place the widget near the Add to Cart button. It's where shoppers are deciding, and where a quick answer helps most.

Step 5: Save in Rep AI

  1. Go back to the Rep AI Console tab
  2. Click Save and preview at the top of the page
  3. Rep checks your storefront and updates the status at the top of the widget card (see Checking That Your Widget Is Live below)

Save and preview opens your store's home page. To see the widget, open any product page.

Do the Shopify step first, then save in Rep. Rep checks your storefront when you save, so saving after you've placed the block means the check can find it.

Place the Widget with a Custom Container ID

Use this option if your store isn't on Shopify, uses a headless or page-builder front end, or you'd rather control the exact HTML element yourself.

  1. Under Placement, select Custom container (non-Shopify stores see the field directly)
  2. Enter the ID of the HTML element where the widget should render, without the # symbol
    • The ID must start with a letter and can contain letters, numbers, hyphens (-), and underscores (_)
    • Up to 128 characters
  3. The widget appears inside that element, below anything already there

Finding the right container ID

  1. Open one of your product pages in a web browser
  2. Right-click near where you want the widget to appear (for example, just below the Add to Cart button)
  3. Select Inspect or Inspect Element
  4. In the developer tools, look for an element with an id="" attribute in the spot you want
  5. Copy the ID value (without the quotes)

Example: if you see <div id="product-info">, your container ID is product-info.

IDs are case-sensitive, so ProductInfo and productinfo are different IDs. Choose an element that exists on both the desktop and mobile versions of your product page.

Test before you save

Click Test on my store in the preview panel. One of your product pages opens in a new tab with the container ID you typed applied, even if you haven't saved it yet.

  • A PREVIEW banner marks the page. Only you see this preview. Your shoppers don't.
  • The preview stays active as you browse other product pages in that tab, so you can check several products.
  • Nothing is saved. When it looks right, return to the Console and click Save and preview.

Test on my store is available for Custom container only. For Theme editor placement, Shopify's theme editor is your preview.

With Custom container selected, the widget appears only inside your container. Any Rep AI block in your theme is ignored.

Checking That Your Widget Is Live

After you save, a status message at the top of the widget card tells you whether the widget is showing on your product pages:

  • Checking your storefront…: Rep is confirming the widget renders where you chose. This takes a moment.
  • Live on your product pages: the widget is showing. The message also says where: "Position set in your theme editor" or the container it's inside. Click View on store to open a product page and see it.
  • Not showing on your product pages: the widget can't render, and the message says why:
    • Theme editor: the Rep AI block isn't in your published theme. Add it in the theme editor (Step 4), or set a custom container ID.
    • Custom container: the container ID wasn't found on your product page. Fix the ID, or on Shopify, place the widget in your theme editor instead.
  • We couldn't check your storefront: Rep couldn't view your store, for example because it's password-protected. Your placement may be fine. Open a product page yourself to confirm.

When Rep checks: each time you save a change to the widget's placement in Rep: turning it on, switching placement option, or changing the container ID. Rep doesn't re-check on its own. So a change you make only in Shopify's theme editor shows up in the status after your next placement save in Rep. Until then, open a product page to confirm.

The Storefront preview next to the settings shows a sample product page with the widget's position marked. Switch between Mobile and Desktop to see both layouts. It's an illustration, not a live view of your store.

Moving or Removing the Widget

To move the widget, click Adjust in theme editor, then drag your existing Rep AI product questions block to its new spot and save in Shopify. Move the block you have rather than adding a new one.

Keep one block per product page. Shopify lets a page hold more than one Rep AI block, and each extra block shows the widget to your shoppers one more time. If Rep finds more than one, the widget card warns you: "Your product page is showing 2 Rep AI blocks…". Open your theme editor and remove the extras. They all carry the same name, so tell them apart by position.

To remove the widget from your product pages, either:

  • Switch the Inline PDP widget toggle OFF in Rep and save. This hides it everywhere, and your settings are kept for later.
  • Or delete the Rep AI product questions block in Shopify's theme editor and save there. With Theme editor selected, no block means no widget.

Understanding the Question Chips

How many questions appear?

The widget displays up to 5 AI-generated question chips at a time. These are the most relevant questions for the product being viewed.

Can I customize the questions?

The questions are generated automatically by Rep AI and can't be edited one by one. They're the same questions that appear as suggestion chips during a chat conversation.

The AI chooses questions based on:

  • Product attributes and metadata
  • Common questions for similar products
  • Your store's knowledge base and FAQs
  • Customer behavior patterns

What happens when a chip is clicked?

When a shopper clicks a question chip:

  1. The full Rep AI chat opens
  2. The selected question is submitted automatically, as if the shopper typed it
  3. Your AI assistant responds right away with a personalized answer
  4. The conversation continues naturally from there

Mobile Considerations

The widget works on both desktop and mobile. Tapping a chip on mobile opens the mobile chat experience, using your mobile chat widget settings.

If you use a custom container, make sure the element exists on your mobile product page too. Some themes use different page structures on mobile.

Troubleshooting

The widget doesn't appear on my product pages

Possible causes:

  • The widget is turned off, or not saved. Check that the Inline PDP widget toggle is ON and that you clicked Save and preview.
  • Theme editor placement, but no block in your published theme. Open the theme editor (Step 4) and check that Rep AI product questions is on your product template, then click Save in Shopify.
  • Your store uses more than one product template. Rep opens your default product template. Products assigned to a different template need the block added to that template too.
  • Custom container placement, but the ID isn't on the page. Check the spelling, including capital letters and hyphens, using your browser's Inspect tool.

The status says "Not showing", but I just added the block in Shopify

The status reflects the check Rep ran the last time you saved your placement settings in Rep. If you placed the block after that save, open a product page to confirm the widget is there. The status updates after your next placement save in Rep.

The status says "We couldn't check your storefront"

Rep couldn't view your store. This usually means the store is password-protected, paused, or didn't respond in time. Your widget may be working fine. Open a product page yourself to confirm.

I see the widget twice

Your product page has more than one Rep AI product questions block. Open your theme editor, remove the extra block, and click Save in Shopify.

The widget doesn't show inside Shopify's theme editor

That's expected. In the theme editor, the block shows a placeholder with example questions so you can position it. The real widget, with questions generated for each product, appears on your live store.

The widget appears in the wrong place (custom container)

  • The container ID may point to a different element than you expected
  • More than one element on the page may share the same ID

Solution: Inspect your page to confirm where the element sits, try a different ID, and use Test on my store to check before saving.

The widget shows on desktop but not on mobile (custom container)

Your mobile product page may not include the element you chose. Inspect the mobile version of the page and pick an ID that exists on both. On Shopify, you can also switch to Theme editor placement.

The widget is covered or overlapped while scrolling

Possible causes:

  • Elements above or below the widget use position: sticky styling
  • Sticky product elements, like an "Add to Cart" bar, product gallery, or product information section, overlap the widget as shoppers scroll
  • Z-index conflicts between sticky page elements and the widget

Solution: Use your browser's developer tools to look for sticky elements near the widget. You may need to:

  • Move the widget to a spot that isn't affected by sticky elements: drag the block elsewhere in the theme editor, or choose a different container ID
  • Adjust your page's CSS to account for the sticky element's height
  • Ask your developer to change the z-index or positioning of the sticky elements

The widget appears cut off or doesn't display fully

Possible causes:

  • The area the widget sits in has a fixed or limited height set in CSS
  • That area uses overflow: hidden, which clips the widget
  • That area has a max-height restriction that prevents the widget from displaying fully

Solution: Inspect the surrounding element's CSS with your browser's developer tools. Look for:

  • height: set to a fixed value
  • max-height: set to a limited value
  • overflow: hidden

If you find one, move the widget to a spot without height limits (drag the block in the theme editor, or choose a different container ID), or ask your developer to adjust the CSS so the widget fits.

Best Practices

  1. Place it near Add to Cart: shoppers look there when they're deciding
  2. Use one block per product page: move your existing block instead of adding another
  3. Choose a clear, inviting title: action-oriented wording like "Ask about this product" works better than generic text
  4. Check a few products: confirm the widget appears on different product types and templates
  5. Monitor engagement: check the In-line PDP chips card in your Sales Analytics dashboard to see how many shoppers see and click your chips
  6. Keep your product info rich: better product descriptions and metadata make the AI-generated questions more relevant

Measuring Performance

Once the widget is live, the In-line PDP chips card in AI Sales > Sales Analytics shows how many shoppers saw your question chips, how many clicked one, and the resulting click-through rate, with a day-by-day trend. Figures are compiled daily, so your first data appears within 24 hours of shopper sessions.

If the widget is switched off, the card shows a Widget turned off notice but keeps your historical figures visible.

For a full explanation of each figure, see Understanding Your Sales Analytics Dashboard: Track AI-Driven Revenue and Conversions.

Need More Help?

If you're having trouble setting up the Inline PDP Widget:

  • Contact our support team through your Rep AI Console
  • Use the Rep AI Helper chat widget for instant guidance
  • Book a consultation with our team (available for eligible plans)

The inline widget works alongside your existing chat experience, giving you more ways to connect with shoppers at the right moment.

Powered by Zendesk