Set up a recommendation element

Recommendation elements show shoppers a personalized selection of products anywhere on your store — product, collection, cart, or home page. This guide walks through creating an element, placing it on your storefront, and tracking how it performs.

Step 1 — Create your element

Open the Recommendation Elements page in the app and click Create an element.

New elements are live by default, but they won’t appear on your store until you add the placeholder ID to your storefront (Step 4), so you can safely experiment with the configuration beforehand.
If you’d like to test the element before fully rolling it out, you have a few options:
• Preview it directly in the admin
• Display it on specific products for testing purposes
• Add it to an unpublished theme
You can also toggle Test Mode on at any time from the Element edit page (Element tab → Visibility) if you’d prefer.

Step 2 — Pick a strategy template

Templates are pre-built recommendation strategies. Pick the one closest to what you want — you can fine-tune it in the next step.

• Personalized Products — 1:1 recommendations tailored to each shopper, based on their activity and the purchasing patterns of similar shoppers.
• Frequently Bought Together — products often purchased alongside the one being viewed. Best for product pages.
• Similar Products — products with matching type, title, or tags. Sorted from most to least similar.
• Recently Viewed — products the shopper has looked at, starting from the moment the element is created.

Tip: you can mix templates within a single element — e.g., one segment of Personalized + one of Frequently Bought Together.

Step 3 — Customize your element

Name it

Click the pencil next to the element title to rename it. Use a descriptive name like Personalized PDP so it's easy to find later.

Choose which products to show

The Products Selection section controls what the element shows. Click the pencil to open the strategy editor — it works like a regular Shopify collection, but more powerful: combine personalization, popularity, recency, and other parameters into a single strategy.

Tip: always include at least one segment without personalization. New visitors don't have personalization data yet — this fallback determines what they see.

Heads up: this won't create a collection on your collections page. The element is managed only from the Recommendation Elements page.

Tweak the layout

Adjust the layout type (Scrollable row or Gallery), text, sizes, margins, and colors. The right side shows a live preview as you change things. For more advanced styling, you can drop in custom CSS.

Step 4 — Place it on your storefront

Pick the path that matches your setup. Once the placeholder ID is wired in, the element starts showing on your site immediately.

Standard Shopify theme

1. Activate the Kimonix Utils app embed: Shopify Admin → Online Store → Themes → Edit theme → App embeds (top left), then activate the Kimonix Utils app embed.
2. Add a KX Element app block where you want the recommendation to appear.
3. Copy the Placeholder ID from the element's edit page and paste it into the block settings.

You can add the element to the home page, collection page, product page, or cart page/drawer.

Headless storefront or custom theme code

Instead of using the KX Element block, paste this div directly into your site code wherever the recommendation should appear. Replace YOUR_PLACEHOLDER_ID with the Placeholder ID from the element's edit page:

<div kimonix_placeholder_id="YOUR_PLACEHOLDER_ID" class="kimonix-element"></div>

Drop the div into any Liquid template, React component, or HTML file — the Kimonix script will hydrate it on render.

Step 5 — Preview with Test mode (optional)

Want to verify everything looks right before shoppers see it? Turn on the Test mode toggle on the element's edit page and click Launch site in test mode. The element only renders in that preview URL — regular visitors won't see it. Once you're happy, turn Test mode off.

For personalized templates, click around a few products in the preview to trigger personalization and see real recommendations.

Step 6 — Track performance

The Analytics section shows how each element is performing: Sales, Items Sold, Orders, Clicks, and Views. Pick any time range to compare or zoom in.

Using Shopify Markets?

If your store uses Shopify Markets, enable the integration in the app so elements show correct prices and translations per market.

1. Make sure the Shopify Markets integration feature is included in your plan (part of the Superior plan).
2. Click your store name in the top right of the app, then Settings.

1. Scroll to the Shopify markets section and turn on the integration.

That's it — your element is ready to boost AOV. Need a hand? Message us through the in-app chat.