Product Picked Setup Guide

Installation

• Navigate to Shopify app store
• Install the Product Picked app
• Follow the prompts to connect it to your store
• Once installed, go to your Product Picked admin panel
• Click “Sync Products” to load your store’s products into our recommendation engine
• Click “Install theme block” to add the AI widget to your store theme

Configuration Options

The extension provides several customizable settings:

• Header: Main title displayed above the AI widget
• Description: Explanatory text shown below the header
• Placeholder text: Default text shown in the search input
• Suggestions: Pre-written example prompts (one per line)
• Theme: Choose from 30+ DaisyUI themes to match your store design

Custom CSS Classes

In case none of our provided themes fit your style, you can use custom CSS classes to style the extension according to your brand’s design. Below are the main CSS classes used in the extension:

Container Classes

• pp-container - Main widget container
• pp-products-container - Container for product results
• pp-products-input-container - Container for input section

Header & Text Classes

• pp-header - Main header text
• pp-description - Description text below header
• pp-message - Info/alert messages

Input Classes

• pp-input-container - Search input wrapper
• pp-example-prompts - Container for suggestion buttons

Product Display Classes

• pp-product-grid - Grid layout for products
• pp-products-input-container - Input area within products section

Question Flow Classes

• pp-questions-container - Container for AI questions
• pp-question - Individual question element
• pp-questions-loader - Loading state for questions

Loading States

• pp-input-loader - Loading animation for input