Skip to content
Qivra Help Center

Product Selector Field

The Product Selector field allows customers to choose products from your Shopify store directly within forms. This guide explains how to use this powerful integration.

What is Product Selector?

Section titled “What is Product Selector?”

The Product Selector is a specialized field that:

FeatureDescription
Search ProductsCustomers can search your catalog
Show ImagesDisplays product thumbnails
Auto-FillPre-selects current product on product pages
Collects Product DataSubmission includes full product details

When to Use Product Selector

Section titled “When to Use Product Selector”
Use CaseExample
Product Inquiries”Ask about this product”
Warranty RegistrationRegister specific product
Return RequestsSelect product to return
Product ReviewsReview specific product
Custom OrdersRequest customization for product
Bulk OrdersSelect multiple products

Adding Product Selector to Forms

Section titled “Adding Product Selector to Forms”

Step 1: Open Form Builder

Section titled “Step 1: Open Form Builder”
  1. Edit your form
  2. Click Add Elements

Step 2: Add Product Selector

Section titled “Step 2: Add Product Selector”
  1. Find Product Selector in field types
  2. Click to add to your form

Step 3: Configure Settings

Section titled “Step 3: Configure Settings”
SettingDescription
LabelField label (e.g., “Select Product”)
RequiredMake selection mandatory
Allow MultipleLet users select multiple products
Show ImagesDisplay product thumbnails
Auto-Select Current ProductPre-fill on product pages

Product Selector Settings

Section titled “Product Selector Settings”

Single vs. Multiple Selection

Section titled “Single vs. Multiple Selection”
ModeBest For
SingleWarranty, returns, reviews
MultipleBulk orders, wholesale, inquiries

Auto-Select Current Product

Section titled “Auto-Select Current Product”

When enabled on product pages:

  1. Form detects current product
  2. Product is pre-selected
  3. Customer can change if needed

How to Enable:

  1. Select Product Selector field
  2. Toggle Auto-Select Current Product
  3. Save form

Show Product Images

Section titled “Show Product Images”

Display thumbnails in selector:

OptionEffect
EnabledShows product image next to name
DisabledText-only list

Recommendation: Enable for better visual recognition.

Displaying Product Selector

Section titled “Displaying Product Selector”

On Product Pages

Section titled “On Product Pages”

Best experience with auto-select:

  1. Add form to product page
  2. Enable auto-select
  3. Customer sees current product pre-filled

On General Pages

Section titled “On General Pages”

For general inquiries:

  1. Product Selector shows search
  2. Customer searches for product
  3. Selects from results

Search Functionality

Section titled “Search Functionality”

Product Selector includes search:

  1. Customer types product name
  2. Results filter in real-time
  3. Select from matching products

Submission Data

Section titled “Submission Data”

What’s Included

Section titled “What’s Included”

When a product is selected, submission includes:

DataDescription
Product IDShopify product ID
Product TitleProduct name
Product HandleURL handle
Product URLLink to product page
Product ImageThumbnail URL
Variant InfoIf variant selected
PriceProduct price

Using Product Data

Section titled “Using Product Data”

In notifications and exports:

Product: {product_title}
Product ID: {product_id}
Link: {product_url}
Price: {product_price}

Conditional Logic with Products

Section titled “Conditional Logic with Products”

Show Fields Based on Product

Section titled “Show Fields Based on Product”
IF "Product" = "Custom Item"
THEN show "Customization Details" field

Product Category Logic

Section titled “Product Category Logic”
IF "Product Category" = "Electronics"
THEN show "Serial Number" field

Integration with Other Features

Section titled “Integration with Other Features”

Combined with File Upload

Section titled “Combined with File Upload”

For product issues:

  1. Product Selector - Which product
  2. File Upload - Photos of issue
  3. Description - What’s wrong

Combined with Order Number

Section titled “Combined with Order Number”

For returns:

  1. Order Number - Locate order
  2. Product Selector - Which item
  3. Reason - Why returning

Best Practices

Section titled “Best Practices”

Label Clearly

Section titled “Label Clearly”

Use descriptive labels:

GoodPoor
”Which product is this about?""Product"
"Select the product to review""Select"
"Product needing service""Item”

Set as Required

Section titled “Set as Required”

For product-specific forms:

  • Always require product selection
  • Ensures context for submission

Use Auto-Select

Section titled “Use Auto-Select”

On product pages:

  • Always enable auto-select
  • Reduces friction for customer
  • Ensures correct product

Combine with Context

Section titled “Combine with Context”

Add supporting fields:

  • Order number
  • Purchase date
  • Serial number (if applicable)

Troubleshooting

Section titled “Troubleshooting”

Products Not Loading

Section titled “Products Not Loading”
CauseSolution
API sync issueWait for sync or refresh
No productsAdd products to Shopify
Permission issueCheck app permissions

Auto-Select Not Working

Section titled “Auto-Select Not Working”
CauseSolution
Not on product pageOnly works on product pages
Theme issueCheck theme integration
Multiple productsFeature detects first product

Images Not Showing

Section titled “Images Not Showing”
CauseSolution
No product imagesAdd images to products
Image optimizationCheck image URLs
CDN issuesVerify Shopify CDN access

Video Tutorial

Section titled “Video Tutorial”
Play
Section titled “Related Docs”