Style your widgets

Design in the PersonalizerAI dashboard controls how widgets look and what each product card shows: colors, fonts, layout, card settings, swatches and custom code. How search opens, sorts and filters is set on the Search screen, in its Search experience tab.

Which screen do I use?

Design

Open Design in the PersonalizerAI dashboard. The header has a mode toggle (Visual / Code), and a Save button. The right side shows a live preview with sample products from your catalog. Use the phone, tablet, and desktop buttons above the preview to see your widgets at those widths. Each shows the columns your storefront shows there: a tablet carousel shows Desktop columns, and while Mobile columns is not set, a phone grid shows 1 column and a phone carousel shows one card with the next one partly hidden. The Checkout Block has its own Checkout page in the sidebar — see Checkout & after purchase.

Design: controls on the left, live preview on the right.

Theme detection

The Theme detection card reads the settings of one Shopify theme. It copies that theme's background, text, and sale badge colors into the widget design. Your live theme's button color, button text color, corner radius, and font keep applying on your storefront.

Detect colors from at the top of the card selects the theme to read. It starts on your live theme. Select a different theme only to copy colors from it, for example from a theme that you will publish soon. The widget design that you save is used with every theme.

1. Open the PersonalizerAI dashboard.
2. Go to Design.
3. Optional: in Detect colors from, select a different theme.
4. Click Detect from theme.
5. Wait for the message Theme colors applied.
6. Check the preview.
7. Click Save.

When detection fails, a preset menu appears: Apply a preset.... Select one of the three presets as a starting point, then adjust the tokens by hand:

• Light & Clean — white cards, dark text.
• Dark & Bold — dark cards, light text, strong weights.
• Warm & Rounded — cream tones, larger text, roomier cards.

Presets set background, text, price, and badge colors and spacing. They never change your button color, corner radius, or font, so your theme's still apply. They also never change Desktop columns, Tablet columns, or Mobile columns: a column count you have not set still shows Default, and a count you set stays.

The same three presets appear in Step 2 (Style) of the setup guide. See Install & the setup guide.

Design tokens (Visual mode)

Visual mode groups the design tokens into eight tabs: Colors, Type, Layout, Cards, Swatches, Match theme, Surfaces, and Advanced. Every change updates the preview at once. Nothing reaches your storefront until you click Save.

Per-surface overrides (Surfaces tab)

The Surfaces tab styles one placement differently from the rest. For each surface you can override eight values: Primary accent, Widget background, Text, Secondary text, Corner radius, Desktop columns, Tablet columns, and Mobile columns. If you give a surface a dark Widget background, set its Text and Secondary text too, or its text stays dark on the dark background. A value you leave blank uses the base design's value.

A blank Primary accent, Widget background, Text, Secondary text, or Corner radius field shows in gray the value the surface uses: the base design's value, else your theme's (accent and radius, while Match my theme automatically is on), else the standard widget value.

Desktop columns, Tablet columns, and Mobile columns are menus, like the ones on the Layout tab. To remove your choice, click Use default. Until you select a value, a menu shows what the surface uses:

• If the base design sets that value, the menu shows Same as base design and the value, for example Same as base design · 4 columns.
• If the base design has no value either, the menu shows the same default as the Layout tab: Default · 4 columns, Default · same as Desktop, up to 3, or Default · 2 columns (1 on small phones). See the note on unset values above.

Tablet columns applies to grids only. Carousels show Desktop columns on tablets. Mobile columns applies to grids and carousels.

1. In Design, open the Surfaces tab.
2. In Add a place, pick the placement from the suggestion list, for example Cart drawer (cart-drawer).
3. Click Add.
4. Fill only the values you want to override.
5. Click Save.

Code mode (advanced)

Switch the mode toggle to Code for three editors: HTML, CSS, and JS. The editors validate as you type and show error counts per tab. The app does not accept a save while a tab has errors.

Code mode preview: the status banner says exactly what is simulated and what runs on the storefront only.

For your own markup outside the widgets, or a template placed in your theme, see Build your own widget.

Version history

Every code save creates a version. The history dialog lists each version with its date and changed sections. You can load any earlier version into the editors.

Your store has one code history. Your storefront uses the most recent version with every theme. When you publish a different theme, your code and its history do not change. Detect colors from has no effect on your code.

1. In Design, switch the mode toggle to Code.
2. Click History.
3. In Code version history, select the version you want.
4. Click Load this version.
5. Check the code in the editors and the preview.
6. Click Save to publish it, or Discard to go back to your saved code.

Change a color

1. Open the PersonalizerAI dashboard.
2. Go to Design.
3. Open the Colors tab.
4. Click the color row, for example Primary accent.
5. Pick the new color.
6. Check the preview.
7. Click Save.

Remove a color you set

1. In Design, open the Colors tab.
2. Under the color row, click Use default, Use theme color, or Remove card border.
3. Make sure that the row shows Default, From your theme, Same as Text (for Price, when Text is set), or No card border.
4. Click Save.

Remove a type or layout value you set

1. In Design, open the Type or Layout tab.
2. Under the control, click Use default, Use theme font, or Use theme radius.
3. Make sure that the control shows Default, Inherit from theme, or From your theme.
4. Click Save.

Product cards in Design

What each product card shows is set in Design too, under the same preview and the same Save: the Cards and Swatches tabs, and Custom product card at the bottom of the Advanced tab. (These used to be a separate Product cards page; old links to it open the matching Design tab.)

The Cards tab, next to the live preview.

Cards

The Cards tab is the policy for every recommendations widget. One change applies to all placements; a widget block's own settings in your theme editor still win for that block. A select left on Default names what your storefront does then, for example Default · Hide. The preview updates as you change Quick add-to-cart, vendor, ratings, badges and the compare-at price. The rest are marked Not shown in preview: check them on your store after you save.

Show compare-at price is on unless you set it to Hide. Hidden, a product on sale shows only its current price, in the normal price color, on every card, list row and Quick View, in recommendations and in search. The sale badge still shows if Show product badges is on, but it reads Sale instead of a percentage such as -11%. Bundle items never show the compare-at price. A custom card template that uses {{ compare_at_price }} still shows it: remove the placeholder from your template (see Build your own widget). No theme block overrides this setting.

If a value can't be saved, the field says why and Save stays off until you fix it; the button's tooltip names the tab. The limits are: Swatch options up to 200 characters, and Card max width up to 40 characters.

Swatches

The app guesses swatch colors from option names. The guess fails for names like "Sage Green" or "Oat Milk". The Swatches tab fixes that: give an option value an exact color or an image swatch. The map applies to every widget, and to search filters: in a Color filter on the search page, the search pop-up and collection pages, each value you mapped shows as a swatch the shopper can tap, with its name on hover. Values you did not map stay as checkboxes. A swatch needs an option name, a value, and a color or an image URL; one that's missing something says so and holds Save.

Custom product card

Advanced → Custom product card replaces the whole built-in product card with your own web component. This is a developer feature. It also replaces your Code mode card template: while one is set, Design shows a note over the preview, and the preview shows the built-in cards because it can't draw your element. See Build your own widget.

On a phone

Design is made for a computer screen. On a phone it says so and stacks the controls above the preview.

Search experience

Open Search in the PersonalizerAI dashboard and choose the Search experience tab. It controls the search from Search widgets. It has five cards, and a sixth, Preview on my store (below):

• Instant search — open as a Modal or Full screen on desktop, and Full screen or Bottom sheet on mobile. Under Dropdown sections, turn Search suggestions, Recent searches, Popular searches, Collections, Pages, and Blog articles on or off, set how many items each shows, and move them up or down. Recent and popular searches show before the shopper types; the others show while they type. Products are not a section: they show in the preview results under the search box. Collections, pages and blog articles come from Shopify's own store search, in Shopify's order, and are not counted in Search analytics. To hide or pin popular terms, see Popular searches.
• Results page — the Default layout (grid or list), the Sort options shoppers can pick, their order, and the default sort (Most relevant is always offered), Filters in a Sidebar, a Drawer, or a Top bar (a row of filter buttons above the results, each opening its list; the sort sits at the end of the row; on phones the top bar shows the same Filters button as the other two), Start filter groups collapsed (not used by the top bar), how more results load (Load more button, Numbered pages, or Infinite scroll), Results per page in the modal (4–48), and Close search after a quick add (on by default: the modal closes so the shopper sees your theme’s cart; off, the modal stays open and shows “Added to cart”).
• No results — show or hide popular products when a search finds nothing. The products come from the Fallback Chains tab in Recommendations. Their heading is under Storefront text.
• Storefront text — every text shoppers see in search, one of your store's languages at a time: the search box placeholder, the no-results sentence and its tip, the recent and popular searches headers, the sort names, the filter names, the buttons, and the rest. Each row shows the text shoppers read today in that language. Type in the box to replace it for that language only; leave the box empty to keep ours. Text in braces, such as {query} or {count}, is filled in by the storefront: keep it where you want the shopper's search or the number to appear. At the top, the card says what each of your languages gets from us. A language we have not translated shows English until you change its text here. Portuguese shows Brazilian Portuguese in every market, Portugal included.
• Appearance — modal max width and height, and font family.

Preview on my store

The admin cannot draw your search as shoppers see it: that takes your theme's own fonts and colors, your real products, collections and pages, and a real phone. So Preview on my store opens your real storefront, in a new tab, with the settings on your screen, before you save them. Choose Instant search (your home page with the search open) or Results page (your search page, for the search you type), then click Preview on my store. Design has the same button on each of its preview tabs, for everything unsaved on that page: colors, fonts, card settings, swatches, your custom card, and Code mode CSS and card template (Code mode changes need the Growth plan or higher, as they do to save). On Recommendations and Bought Together it opens one of your product pages, where your widgets show wherever you placed them; on Search result cards it opens your home page with the search open. While something on the page can't be saved, the button is off and says what to fix.

• Nothing is saved, and your shoppers see nothing. Only the tab that opened shows the preview, with a dark bar at the bottom: Preview — not saved, only you see this. Exit preview shows your live store again; the × hides the bar on that page.
• A preview lasts 30 minutes, then that tab shows your live store and the bar says the preview has ended. Click the button again for a new one; a new preview replaces the last one.
• Your searches in the preview are not in Search analytics, and the first 200 each day do not count toward your plan's monthly searches. The 200 are shared with Test search in Search. After that the bar says so and they count, like any search.
• If your store has a password and your browser has not entered it yet, the password page comes first and the preview is lost after it. Enter the password, then use Open the preview again under the button.
• If the PersonalizerAI app embed is off in your live theme, your store shows none of our widgets or search, so the button says so instead of opening a preview. Turn it on in Online Store → Themes → Customize → App embeds.
• Design's own search tab shows only your cards laid out as search results; the search box, the list of suggestions and the results page can only be seen on your store.

A count outside its range shows why next to the field, and Save stays off until you fix it. For anything else, add CSS in Design's Code mode (Growth and up); the Appearance card has a starter. Search styles all start with .pai-search.

These search classes stay the same between updates: the surfaces .pai-search (the pop-up), .pai-search-inline (the search page) and .pai-collection-browse (collection filters); the pop-up .pai-search__dialog; the search box .pai-search__header, .pai-search__input and .pai-search__close; the suggestion list .pai-search__autocomplete and .pai-search__suggestion; the results .pai-search__results-header, .pai-search__results-count, .pai-search__sort and .pai-search__toolbar; filters .pai-search__facet, .pai-search__pill and .pai-search__facet-sheet; paging .pai-search__load-more and .pai-search__pager; and the empty states .pai-search__no-results and .pai-search__empty. The full list, with every variable, is in the developer contract (Bring Your Own Widget, section 11). Any other class can change in an update. Your CSS loads after ours, so a rule with one class, such as .pai-search__input { font-size: 18px; }, wins as it is. Some of our rules use two classes, such as the sticky bar on the search page; to change those, repeat the first class too: .pai-search-inline .pai-search__toolbar { … }. Colors are easiest through the variables, for example :root { --pai-search-pill-bg: #fde68a; }.

The search pop-up sits above everything on the page. Code mode does not accept a z-index above 9999, so to put your theme's cart drawer or a chat button above or below the pop-up, set its layer instead: :root { --pai-search-z-index: 900; }.