Theme Customization

This guide walks you through customizing your Shopify theme to use Particular Audience search and collection blocks via the theme editor (customizer).

Enable app extension (embedded)

Enable the app’s embedded extension so its blocks are available in the theme editor.

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your theme.
3. Open App embeds (usually in the left sidebar or theme settings).
4. Find the Particular Audience (or ATS) app and turn on its checkbox.
5. Optionally set Shop URL if required.
6. Save.

Add app blocks

Add the app’s blocks to your theme so search and collection results can appear where you want.

1. In the theme editor, go to Edit theme (or the section where you want to add a block).
2. Select Add Section (or the relevant section).
3. Go to Apps tab and select a widget to add.
4. Save.

Search preview settings

Configure how search-as-you-type (preview) works: either standalone (app-owned UI) or native (using your theme’s existing search elements).

Add the ATS Search Preview block

1. In the theme editor, go to Header (or the section that contains your search).
2. Add section if needed, then Add block.
3. Add the ATS Search Preview block.

Choose mode: Standalone or Native

• Standalone
  The app renders its own search input and preview container. No selectors needed.

• Native
  The app hooks into your theme’s existing search input and a container you specify. Use the settings below.

Native mode settings

If you selected Native, configure:

Setting	Description	Example
Input selector	CSS selector for the theme’s search input.	#Search-In-Modal
Preview container	Selector for the element where results will be rendered.	form.search.search-modal__form
Container attributes	JSON of attributes required on the container for correct display.	{"tabindex":"-1","data-predictive-search":"","class": "predictive-search predictive-search--header"}
Product view settings	Number of products to show in the preview.	e.g. 5, 10
Custom CSS	Optional CSS for styling the preview.	As needed

Example for a native header search modal:

• Input selector: #Search-In-Modal — the native search input field.
• Preview container: form.search.search-modal__form — where results will be populated.
• Container attributes:
  {"tabindex":"-1","data-predictive-search":"","class": "predictive-search predictive-search--header"}
  (JSON for attributes required to display the element correctly.)

Search page settings

Configure the dedicated search results page.

1. In the theme customizer, go to the Search page (or the template used for search).
2. Inside that template, Add block and add the ATS Search Results block.
3. Adjust settings (e.g. layout, number of results) if needed.
4. Save.

Collection page settings

Configure how collection results appear on the default collection template.

1. In the theme customizer, open the default collection page/template.
2. Inside the template, Add block and add the ATS Collection Results block.
3. Change settings (e.g. grid, pagination) if needed.
4. Save.