Skip to main content
This guide provides detailed instructions on how to manually create product option sets in Sectionly:AI Product Options, covering core features including element addition, group management, and application settings.

​
Accessing the Creation Page

1

Enter the App admin dashboard

2

Select "Sectionly:AI Product Options"

3

Click "Option Sets"

4

Click "Create Option Sets"

Navigation to creation page

​
Core Workflow

​
Adding Elements

Click the ”+ Add Element” button and the system will display an element type selection menu with 3 main categories of different element types to choose from.
  1. Select Element Type
    • Choose the desired element type from the popup menu
    • For example: Click “Text Input” and the element will be immediately added to the list
    • The preview area on the right will display the added element effects in real-time
Adding element example
  1. Configure Element Properties
    • Configure each element’s settings according to your specific needs
    • For detailed configuration options, please refer to the related documentation
Element configuration interface

​
Group Management

The grouping feature helps you better organize related elements and optimize frontend display logic.
1

Click "Add Group" to add a group element

2

In "Group Members", check the elements you want to include in the group

3

Elements will be displayed in the group according to their order in the main list

Adding groups Group Example: When creating an “Appearance Customization” group, you can check the already added “Color Swatch” and “Image Picker” elements. In the frontend preview, these two elements will be displayed under this group. Group member selection

​
Option Set Application and Settings

​
Product Application Scope

Manual Product Selection
  1. Enable the “Manual Selection” toggle
  2. Click “Click to select products” to search and select target products
  3. Each product has a “Remove” button on the right to individually remove unwanted products
  4. Click the “Reset” button to clear all selected products at once and replan the application scope Manual product selection Remove products Reset selection

​
Basic Information Configuration

1

Click the "⋯" button next to "New Option Set"

2

Modify the option set name in the popup window (e.g., "Summer T-shirt Customization")

3

Select status:

  • “Active”: Enabled, can be applied to products
  • “Inactive”: Disabled, temporarily not applied
Basic information configuration

​
Top Action Buttons

Abandon current configuration, close the popup without saving any changes.Discard button
Save current configuration without closing the configuration popup, allowing continued adjustments.Save button
Desktop Preview: Click the PC icon and the preview area on the right displays the desktop layout effect.Desktop previewMobile Preview: Click the M icon and the preview area simulates mobile device interface layout.Mobile preview
If you haven’t configured App Block embedding and other display settings in the theme editor, or need to fine-tune how the option set displays in your store theme (such as position and style adaptation), click the “Theme Editor” button to quickly jump to the Shopify online theme editor.Theme editor
Click the “Preview” button to open a dedicated popup that only displays products where the current configuration is actually applied. Click “Preview” next to a product to jump to the frontend detail page and validate the configuration effects.Preview validation

​
Important Notes

Important Reminders
  • After creating an option set, the status defaults to “Active”
  • You can manage option sets in the “Option Sets List” (such as modifying status, copying, deleting, etc.)
  • When multiple active option sets have overlapping product applications, the system follows priority rules of “precise matching first” and “latest update takes precedence”