Add widgets to your theme

Widgets reach your storefront in three ways: app blocks, dynamic widgets, and checkout extensions. This page shows what each type is and how to add it.

Before you start: turn on the app embed

The app embed is a small loader inside your theme. It powers every widget on your storefront.

1. In your Shopify admin, open the theme editor for your live theme.
2. Open the App embeds panel.
3. Turn on PersonalizerAI.
4. Click Save.

The PersonalizerAI app embed in the theme editor. It must stay on.

The three placement types

Open Widgets in the app to manage all three types. The screen has five tabs: Store pages, Cart & search, Checkout, Design, and Diagnostics.

Use this decision tree to find the right type for the spot you have in mind.

Placement type 1 — app blocks

App blocks live in your page layout. You move, reorder, and remove them like any theme section. In the theme editor, the blocks appear under the app name. These are the blocks:

• Recommendations — the main recommendation widget. A Recommendation model setting selects the model per block.
• Bought together — a bundle widget for the product page.
• Cart recommendations — recommendations for the cart page.
• Recently viewed — the products the shopper opened on this browser, most recent first. It appears after the shopper views two or more products.
• Search (header) — a search button for your header.
• Search (section) — the same search button, added as a page section.
• Search results — the search results page.
• Collection filters — filters and sort controls for collection pages.

Add an app block from the app (recommended)

The app opens the theme editor at the right page, with the block ready to drop in.

1. Open Widgets in the app.
2. Open the Store pages tab (or Cart & search for the cart page, the search results page, and the header).
3. Find the page you want.
4. Click the Add button for the widget you want (for example Add Recommendations). It opens the theme editor.
5. In the theme editor, position the block on the page.
6. Click Save in the theme editor.
7. Return to the app.
8. Wait until the block moves into the page's list of placed blocks.

The Store pages tab lists each page with its placed blocks and the blocks you can add.

Add an app block by hand

1. In your Shopify admin, open the theme editor.
2. Select the page template, for example the product page.
3. Click Add section.
4. Open the Apps group.
5. Select the block, for example Recommendations.
6. Drag the block to the position you want.
7. Click Save.

The PersonalizerAI app blocks in the theme editor's Apps group.

How placement verification works

The app reads your saved theme and checks that the block is really there. After you click an Add button, the row shows "Waiting for you to save in the theme editor…". The first check runs after 3 seconds. Later checks run less often, for about 12 minutes. When the app finds the block, the block moves into the page's list of placed blocks. On your published theme it shows a Live badge. On another theme it shows On this theme.

Placement type 2 — dynamic widgets

Dynamic widgets need no change to your page layout. The app embed injects them on your storefront in the right place. There are two:

• Cart drawer recommendations — a recommendation strip inside the slide-out cart.
• Search autocomplete — search suggestions under the search box as the shopper types.

Turn on cart drawer recommendations

1. In your Shopify admin, open the theme editor.
2. Open the App embeds panel.
3. Open the settings of the PersonalizerAI embed.
4. Turn on Show recommendations in cart drawer.
5. Click Save.

The same panel sets the Recommendation model, the Number of products, and the Section title for the strip.

Cart drawer recommendations turn on inside the PersonalizerAI app embed settings.

Turn on search autocomplete

Autocomplete is part of the search features. Turn on Instant autocomplete in Step 3 of the setup guide, or later in the search settings. See Search widgets.

Placement type 3 — checkout & post-purchase extensions

These widgets run on checkout and on the pages after purchase. Shopify renders them inside its own secure surfaces, so you add them in the Shopify checkout editor — not the theme editor. These are the widgets:

• Checkout — product suggestions and a free-shipping progress bar under the order summary on the checkout page.
• Post-purchase offer — a one-click offer between payment and the thank-you page.
• Thank-you and order status — a row of recommended products on the order confirmation page and the order status page.

The Checkout tab in the app has no settings either. It shows one card for each widget, in the order the buyer sees them. Each card links to where the widget is configured: Set up checkout opens the Checkout page in the PersonalizerAI dashboard, and Open checkout editor opens the Shopify checkout editor for the other two.

See Checkout & after purchase for the full setup of each extension.

The Checkout tab shows one card for each checkout and after-purchase widget.