Enhance ShopAssist - Magento

Read Enhance ShopAssist first. The pills need questions in the client dashboard, and Compare needs the shop-level switch from support.

Both features are settings of the ShopAssist module, version 1.2.0 or newer. Open Stores → Configuration → ShopAssist → AI Shopping Assistant.

Every setting can be changed per website and per store view, so a store view can use its own heading, label and colors.

Question pills

1. Open the Ask ShopAssist group.
2. Set Show question pills on product pages to Yes.
3. Set the appearance to match the store. At least set Pill color to the merchant's brand color.
4. Select Save Config, then refresh Configuration and Page Cache in System → Cache Management.

This example changes five values from the defaults: an orange Pill color, the chat icon, Subtle hover, Squared button and a 12px gap. The product page below shows the result.

A color that is not a plain CSS color is ignored and the default is used.

The Magento switch only places the container. What fills it comes from the client dashboard:

1. In the dashboard, open FAQ and generate questions for the products.
2. Switch the pills on for each product that should show them. A product with its pills off stays hidden on the storefront, even with questions.

The pills then appear on that product's page, under the add-to-cart form. The container stays hidden on every other product, so switching the module on changes nothing for a product you have not prepared.

A click opens the chat with the product name and the question, for example Jade Yoga Jacket: Is it warm enough for an evening run? When the question has a stored answer in the dashboard and the pill starts the conversation, the shopper gets that answer word for word. Otherwise the assistant answers from the catalog. Ask something else opens an empty chat.

A shopper can click a pill before the chat has finished loading, because the module loads the chat only after the page. The click is kept, and the chat opens with that question as soon as it is ready.

The block is shopassist.questions in the catalog_product_view layout. To place it somewhere else on the page, move it in the theme's Magento_Catalog/layout/catalog_product_view.xml:

<move element="shopassist.questions" destination="product.info.main" after="product.info.price"/>

Compare

1. Open the Compare group.
2. Set Show Compare buttons to Yes.
3. Set the label, color and placement to match the store.
4. Select Save Config, then refresh the caches as for the pills.

This example uses an orange Button color, Medium size, the home page as a third listing page, and After the anchor with .price-box, which puts the card button under the price instead of over the photo.

The button appears on the product image and on every product card in category and search results. It needs Compare switched on for the shop as well, see Before you start. With only the Magento setting on, no button appears.

The two places work differently:

• On a product page, Compare opens a panel of similar products. The shopper picks one, and the chat opens with the two side by side and a recommendation.
• In a listing, the first click marks that card Selected, and every other card's button changes to Compare with. A click on a second card opens the comparison. Clicking the selected card again clears it.

The module tells the widget which product a product page shows, so that button appears without a lookup. On Luma-style cards the widget reads the product from the card itself. On other cards it asks the store's GraphQL API once per card.

The two selectors are set for Luma and for themes built on it. On another theme, set Product image selector and Product card selector to that theme's markup.

A card must contain a link to the product page. To skip the per-card request, it also needs an element with the id product-item-info_<product id> or a data-product-id attribute, as Luma cards have.

Troubleshooting