SPO – Smart Product Options

Navigate to the app's listing page on the Shopify App Store and click Add app. You will be guided through the standard install process — granting the app certain permissions and approving the charge. New users will receive a free trial period; billing starts after the trial ends. If you uninstall before the trial ends, you will not be charged.

Activate the App on Your Theme

After installing, click the Activate button in the status bar at the top of the app page. You will be redirected to the theme editor with the app embed block toggle already enabled. Click Save in the upper right corner to apply the changes.

Add the App Block to the Product Page

After activating the embed block, add the SPO section to your product page template so that custom options appear in the correct position on the storefront.

---

An Option Set is a collection of options (e.g. Color, Size, Engraving Text) that you build once and assign to one or many products.

1. From the app's left menu, select Option Sets and click Create Option Set.
2. In the Option set name field, provide a name for your set.
3. In the Options tab, click Add new option to start adding options.

4. From the popup, select the option type you want to create (Swatch, Dropdown, Text field, Checkbox, etc.).

5. In the Option title field, provide a label (e.g. "Color", "Size") — this is shown on the product page above the option values.
6. Optional: Check Option is required if customers must select a value before purchasing (e.g. choosing a size before adding to cart).

7. Optional: Below the Option Title, additional display settings let you control how option values appear on the product page.

Values Elements

The Option Elements section provides additional settings to refine how options are displayed:

• Description — Add a descriptive note or instructions to help customers make informed selections.
• Order — Defines the position of the option on the product page. A lower number places it higher in the list.
• CSS Classes — Assign custom CSS classes for advanced styling (developer feature).

Add Values to Your Option

Add values to your option. The first value is pre-created by default. Basic settings are available in the general view; enhanced settings are grouped in their corresponding tabs.

Basic Settings

• Fill in the Value title field — shown on the storefront for most option types (hidden by default for Swatches).
• Upload a picture by clicking the image icon — for Swatches, this image becomes the swatch automatically.
• Enter a price adjustment: positive values add to the product price (+$), negative values subtract from it (–$).
• Check Default value to pre-select this value when the product page loads.

Enhanced Settings

Advanced Pricing

• The price set in Basic Settings becomes the main value price (Enable advanced pricing is pre-selected by default).
• Add a Compare price to display a crossed-out original price during sales.
• Choose a Price type — Fixed or Percent. When Percent is selected, the amount is calculated off the original product price.

Images & Colors

• The image uploaded in Basic Settings appears here automatically and is set as the swatch icon.
• Enable Enlarge on hover to show a larger preview of the swatch image when hovered.
• Enable Replace main image to make this image become the main product image when selected.

Description

Add a description to each option value if needed — for example, to explain what a material feels like or provide sizing guidance. The description display type (tooltip, inline text, etc.) can be configured in the app's Settings admin section.

---

SPO lets you create rules to dynamically show or hide options based on the value of other options. For example: show an "Engraving Text" field only when the customer selects "Personalized" from a Style dropdown.

1. From the option set admin panel, navigate to the Rules tab.
2. Click the Add new rule green button.
3. Click the + Add option link
4. From the Select option dropdown menu, choose the target option.
5. Choose a condition operator from the second dropdown. It can be either is or is not.
6. Choose the value of the target option you selected in the first dropdown.
7. Optional: If you need to add more conditions, please click the + Add option link again and perform the same steps described above.
8. If you added more than one condition, you need to set a condition type. Navigate to the Need all/any of these conditions to trigger action setting above the conditions, and select either all or any condition type.
9. Click the + Add action link.
10. Expand the dropdown with available actions and choose an appropriate one.
11. After you choose an action (except the Hide options or values), please add the corresponding attribute to the field that shows up. If you choose the Hide options or values action, click the + Add option link.
12. Select the dependable option from the Select option dropdown menu.
13. Select either All or particular option value(s) from the Select value dropdown menu. The app allows creating an unlimited number of rules, to add a new rule click the Add new rule green button again and follow the steps described above.

---

After creating an option set, assign it to products so that the options appear on your storefront. From the Option Sets page, open the option set and click the Products tab. Choose between two assignment methods:

Manually

Select products one by one from the list, or select all at once to assign in bulk. Best when you want precise control over exactly which products receive this option set.

Automatically

Set a condition — both existing and future products that match the condition will be assigned automatically. Conditions can be based on:

• Product Type
• Vendor
• Product Tag

---