Skip to content
Back to blog

Product Images in a Chatbot: How to Set Them Up Right

How to show product images in a website chatbot: feed fields, card layout for mobile, image rules and upkeep, so shoppers see the right photo, price and stock.

To show product images in a chatbot, the assistant needs a clean source of product data (a WooCommerce store or a Google Merchant or Facebook product feed), an image URL on every product that a browser can load, and a card layout that works on a phone. Get those three right and the chatbot can answer “do you have a blue one under $50?” with the product, its photo, its price and its stock status, instead of a paragraph of text the shopper has to picture.

This guide covers where the images come from, which fields matter, how to format cards for desktop and mobile, what to check before you go live, and how to keep it all accurate without babysitting it.

Konvuno
Keep Product Answers Up to Date
Konvuno syncs product catalogs from WooCommerce and Google Merchant or Facebook feeds, keeping product answers, prices, and availability current.

TL;DR

  • Pull images from your catalog feed, not from page scraping or manual uploads. One source of truth keeps photo, price and availability in step.
  • Every product needs a public image URL over HTTP or HTTPS, a main photo that shows the actual product, and no watermarks, borders or promotional text.
  • Keep cards simple on mobile: one clear image, name, price, stock status and one button. Drop images that add no information.
  • Aim for source photos of 1500×1500 pixels or larger. Google Merchant Center sets a 500×500 minimum for all products starting 31 January 2027.
  • Automatic feed sync is what keeps chatbot answers current. Stale feeds are the main reason chatbots show the wrong photo or price.

Table of Contents

Why images change how shoppers use a chatbot

A text answer to a product question forces the shopper to imagine. “The Alder backpack comes in sage, charcoal and rust” is accurate, but the shopper still has to leave the chat, open a page and look. An image in the answer closes that gap in one step.

Images matter most in three situations:

  • Browsing questions. “What do you have for trail running?” is a request to look at options, not read a list.
  • Variant questions. Color, pattern and finish are visual. Words are a poor substitute.
  • Confirmation. Someone who asked “is this the one with the removable strap?” wants to see the product before they trust the answer.

Not every answer needs a picture. Opening hours, shipping times and return policy are text questions. A good chatbot shows images when the question is about a product and stays plain otherwise.

Where a chatbot gets its product images

There are four common sources, and they are not equal.

Source How it works Main risk
WooCommerce catalog The assistant reads product data directly from your store Low, if image fields are filled in
Google Merchant or Facebook product feed The assistant syncs from a feed you already publish Low, if the feed is healthy
Scraping your pages The assistant guesses which image on a page is the product Picks banners, icons, wrong variants
Manual uploads You attach images to answers by hand Goes stale the day a product changes

For any store with more than a handful of products, the first two win. The data already exists, it is already maintained for shopping channels, and it updates when you change the product.

WooCommerce

WooCommerce’s documented product response includes the product name, permalink, SKU, price, sale status, categories, and images with their source URLs and alt text. Variations carry their own price, SKU, stock status and selected attributes. That is nearly everything a product card needs, in one structured record.

Fields included in a WooCommerce product record

The same documentation shows the product endpoint can be searched and filtered by text, SKU, category, tag, attribute, price, sale status, stock status and visibility. For a chatbot, this is what makes “show me sale items in stock” answerable from real data.

Google Merchant and Facebook feeds

If you already run shopping ads or a Facebook catalog, you have a feed that describes every product. Google’s product data specification requires an image_link for the main product image, and the URL must use HTTP or HTTPS and be crawlable. Availability must match your landing page, checkout pages and structured data.

That last rule is useful beyond ads. A chatbot reading the same feed inherits the discipline you already apply for Google: one price, one availability value, one image per product.

The fields a chatbot needs to show the right product

An image alone is not enough. A card that shows a photo with the wrong price does more harm than no card. At minimum, each product record should carry:

  1. A stable product ID or SKU, so the chatbot never mixes up two similar items.
  2. Title that matches the product page.
  3. Main image URL, public and permanent.
  4. Price and sale price, in the currency your customers see.
  5. Availability: in stock, out of stock, or preorder. Google also expects an availability date for preorder or backorder items.
  6. Product page URL, so the card can send the shopper to buy.
  7. Variant data: size, color and the image that belongs to each variant.

Variants deserve special attention. In WooCommerce, a parent product has images, while each variation has its own identifier, price, attributes and stock status. If your variable products use one parent photo for every color, the chatbot will happily show a sage backpack when the shopper asked for rust. Assign an image to each variation that differs visually.

How to format product cards for desktop and mobile

Most chatbot sessions on a small business site happen on a phone, in a narrow panel. Design for that first.

What the photo itself should look like

Google’s image best practices recommend a crisp, well-lit shot of the full product on a clean, solid white or light-neutral background, with the product filling 75% to 90% of the frame. That framing also happens to suit small chat cards: the product stays recognizable when the image is shrunk to a thumbnail.

Lifestyle shots look great on a product page but crop badly in a card. Use the clean hero shot as the card image and leave the lifestyle photos for the page.

What belongs on the card

Keep it to what helps a decision:

  • One image
  • Product name
  • Price (and sale price if there is one)
  • Stock status
  • One button, such as “View product”

If a card needs a second line of copy to explain itself, the product title is probably too long. Trim it in the feed rather than in the widget.

Mobile rules that matter

The Nielsen Norman Group’s guidance on big pictures on small screens says the decision to include an image should rest on its information value. If a picture does not add real understanding, removing it usually makes a small screen easier to use. For a chatbot, that means: show the image when someone asks about a product, and skip decorative images in policy or support answers.

The same source notes that small images such as icons and line drawings can sit inline next to text, but that approach rarely works for photographs. Give product photos their own space in the card, with the text beneath or beside a properly sized thumbnail.

On loading, Shopify’s developer documentation on responsive layouts for mobile recommends using the sizes attribute so the browser picks the smallest sufficient image for the viewport. A chat widget that loads a 3000-pixel original for a 120-pixel thumbnail will feel slow on a mobile connection. Serve a resized version, and load images only when a card is actually shown.

Accessibility

Every product image should have alt text. WooCommerce stores it with the image, so fill it in once and every surface that reads your catalog benefits. Write it like a short description of the product (“Rust-colored canvas backpack with leather straps”), not a keyword string. Do not rely on the image alone to carry the price or availability: keep those as real text on the card so screen readers and low-bandwidth users get them.

Image rules to check before you go live

Google Merchant Center’s specification is a handy checklist even if you never run ads. It says product images must accurately display the product, use an accepted image format, and must not be placeholders, generic images, promotional text, watermarks, borders or upscaled thumbnails.

Run through this list on your catalog:

  • No placeholders. A grey “image coming soon” tile in a chat card looks broken.
  • No sale banners baked into the photo. The price in the image will be wrong the moment the sale ends. Let the card show the live price as text.
  • No watermarks or borders. They shrink the product and look cluttered at thumbnail size.
  • Accessible URLs. The image must load for anyone, so avoid URLs that sit behind a login or block outside requests.
  • Real resolution. Google recommends 1500×1500 pixels or larger for best performance, and announced a 500×500 pixel minimum for all products beginning 31 January 2027. Photos below that line are worth reshooting now.

If you want to go deeper on how image accuracy and structured data support each other, this walkthrough on ecommerce schema markup types is a practical companion.

Keeping images, prices and stock accurate

The hard part is not the first setup. It is month six, when a supplier changes a pack, you discontinue a color, and a price moves during a sale.

OpenAI’s merchant guidance says rich shopping results combine images, pricing and key details, and that complete, current feeds improve catalog coverage and accuracy. The principle applies to any assistant: the fresher the feed, the fewer wrong answers.

A few habits keep things in line:

  • Fix the source, not the chatbot. When a photo is wrong, correct it in WooCommerce or your feed. Every channel then updates together.
  • Use automatic sync. Manual exports are forgotten. A scheduled sync is not.
  • Keep one price and one availability value everywhere. The chatbot, the product page, structured data and checkout should agree. This guide to catalog data consistency shows why mismatches cost you trust as well as rankings.
  • Review what shoppers ask. If people keep asking about a product the chatbot cannot illustrate, that product probably has a missing or poor image.
  • Retire dead products. Remove discontinued items from the feed instead of leaving them as out of stock forever.

What we have learned about product images in chat

We build Konvuno for owners who do not have a developer or a support team, so we look at this topic from the owner’s chair. Our view is plain: the chatbot should never be the place where you maintain product images. It should read them from the catalog you already keep.

That is why Konvuno syncs product catalogs automatically from WooCommerce or any Google Merchant or Facebook product feed. Answers about products, prices and availability stay current without anyone re-entering data. The second thing we see is that most image problems are catalog problems in disguise: a missing variant photo, a placeholder, a banner baked into the picture. A chatbot just makes those problems visible faster, because shoppers meet them in a conversation.

The third is that you should be able to try before you commit. In Konvuno you can configure the assistant fully and preview it before paying, so you can ask it the questions your shoppers ask and see exactly what comes back.

— Konstantin

Setting this up with Konvuno

If you run WooCommerce or publish a Google Merchant or Facebook feed, setup is short. You add one script tag to your site, connect your catalog, and manage everything from the hosted dashboard: conversations, captured leads, knowledge and analytics on what visitors actually ask. There is no per-seat pricing and no developer dependency.

Plans are Starter at 29 EUR per month, Growth at 79 EUR per month and Business at 199 EUR per month, and every plan includes full conversational catalog capabilities. You can compare them on the Konvuno plans page.

A practical rollout checklist

Use this order and you will catch most problems before shoppers do.

  1. Audit 20 top products. Open each one and check the main image against the list above: real photo, clean background, no text overlays, enough resolution.
  2. Fix variants. For every product with color or pattern options, make sure each variation has its own image.
  3. Check the feed. Confirm image_link resolves publicly and that price and availability match the product page.
  4. Connect the catalog. Sync from WooCommerce or your feed, not from a spreadsheet.
  5. Test on a phone. Ask the assistant five real questions: a browse question, a price question, a variant question, a stock question and one it should not illustrate. Look at how the cards render in a narrow panel.
  6. Watch the first two weeks. Read the conversations and the analytics. Questions that end without a click are your to-do list.

FAQ

Can a chatbot show product images without a developer?

Yes, if it connects to a catalog you already maintain. With a WooCommerce store or a Google Merchant or Facebook product feed, the product data and image URLs already exist, so the assistant reads them instead of someone coding each answer. You mostly configure it from a dashboard.

What image size should I use for chatbot product cards?

Start with source photos of 1500×1500 pixels or larger, which is Google’s recommendation for best performance. The chat widget should then serve a smaller resized copy to fit the card. Google’s announced minimum for all products from 31 January 2027 is 500×500 pixels.

Why does my chatbot show the wrong image or price?

Usually the source data is out of date or inconsistent. Check that the product page, feed and structured data agree, that variants have their own images, and that your catalog syncs automatically. Fix the error at the source and every channel updates.

Do I need images in every chatbot answer?

No. Images help most when a shopper asks about a product, a color or a comparison. For shipping, returns and opening hours, plain text is faster to read, especially on a phone.

Can AI create product images for my chatbot?

AI tools can generate or edit images, but anything shown as your product must accurately display the real item. Google’s rules rule out generic images and misleading visuals, so use real photography for the main card image and treat generated scenes as extras.

Sources