SPO - Smart Product Options App

If you are new to this app, then navigate to the app’s listing page on the Shopify app store, and click the Add app button. You will be guided through the standard install process, where you’ll be asked to give the app certain access permissions, and then approve the charge. If you’ve never installed this app before, you will be given a free trial period, and the billing will start after the trial is over. If you uninstall the app before the trial ends, you will not be charged. After the app is downloaded, you need to make sure it’s activated on the target theme you are going to use the custom options for. To do this, please click the **Activate** button within the status bar at the top of the page:

After that, you’ll be redirected to the theme editor with the app embed block toggle enabled by default. Click Save in the upper right corner to make the changes take effect.

Add section to product page

Create an option set

Steps:

• 1. From the app’s menu on the left select Option Sets and on the page that opens click the Create Option Set button
• 2. In the Option set name field, provide a name for your set. This is for your records only, it will not show up on the front end of your store
• 3. Underneath, in the tab called Options you will create the options and values for your option set. To start, click the Add new option button

• 4. From the popup that appears, you’ll need to select the type of the option you want to create. For the argument’s sake, let’s assume you choose the Swatch option type

• 5. You’ll need to provide a title for your option in the Option title field. It will show on your product page above the option values. So if you’re adding a color swatch, you can name it simply “Color”
• 6. Optional: Select the Option is required checkbox only if you can’t allow shoppers to purchase your product without selecting from this option. For example, they can’t buy a t-shirt without selecting a size, in which case you would select Option is required

• 7. Optional: Below the Option Title, which allows you to customize the display of option values.

---

Values Elements

The Option Elements section provides additional settings to refine how options are displayed on the product page:

• Description - Allows you to add a descriptive note or instructions for the option, which can assist customers in making informed selections.
• Order - Defines the position of the option relative to others on the product page. A lower number places the option higher in the list.
• CSS Classes - An advanced setting that allows developers to assign specific CSS classes to the option section, enabling custom styling and layout adjustments.

• 8. Now you need to add values to your option. The first value is pre-created by default. The basic settings are available in the general view, the enhanced settings are grouped and placed in the corresponding tabs.

Basic settings

• Fill in the Value title field - it will show on the front end for some option types (by default it is hidden for Swatches).
• Upload a picture by clicking the image icon. Since we are creating Swatches, the image will be used as a swatch by default.
• Insert a price value into the price field next to the value title. You can use both positive and negative prices depending on your needs. The price of an option value will be added to (+$)/subtracted from (-$) the original product price upon selection.
• If you select the checkbox called Default value, this value will be pre-selected when the product page is loaded.

Enhanced settings

• Advanced pricing
  • 1. The price we added in the basic settings is the main value’s price, this makes the Enable advanced pricing checkbox preselected by default.
  • 2. You can add “Compare price” if you run some sales (compare price will be crossed out).
  • 3. Select the “Price type” (Fixed/Percent). Keep in mind that if you select the “Percent” type, the percentage will be calculated off the original product price.
  • 
• Images & Colors
  • 1. The image we uploaded earlier in the basic settings section is already available in the tab. It’s set as a swatch icon automatically.
  • 2. Enable the Enlarge on hover setting if you want to see this image enlarged when you hover over the swatch on a product page.
  • 3. Enable the Replace main image setting to make this image appear as the main product image upon selection.
  • 
• Description

  Add a description to each option value if needed. The description type can be selected in the app Settings admin section.

• 9. Now you would add the remaining values to this option, and then move on to add more options to this option set, if needed.
• 10. We recommend periodically clicking Save at the top right of the screen to preserve you progress.
• 11. Optional: now you can move on to adding rules to your option set
• 12. And, finally, you need to assign this option set to your products.

---

Define rules and conditions for your options

This app allows you to create rules to dynamically show or hide any product options based on the value of other options. Steps:

• 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.
• 

Note: The app doesn't allow using the same option values in several "show/hide actions" rules.
I.e the same option value won't show up in the second rule if it has already been used in the first rule.
We'd recommend grouping all the conditions that trigger the "show" action of a particular value into one rule.
For example:
If Condition1, Condition2, Condition3 etc. >> show options or values >> a particular option value.
Also, you may consider duplicating the option that is supposed to be dependable and use each copy for its own rule.

---

Add options to products using option sets

After you’ve created an option set you need to assign it to product(s) so that options start showing up on the front end. Steps:

• 1. From the Option sets page choose an option set you want to assign.
• 2. Within that option set, click on the Products tab.
• 3. Now you need to choose between the two ways of selecting products:
  • 3.1 Manually - you select the needed products one by one manually or select all the products from the list to assign this option set in bulk.

    

  • 3.2 Automatically - in that case, you can add a condition by which to select products. In this case, both existing products and products added in the future will be assigned with this option set automatically if the condition is met. Currently, the condition could be based on three attributes:
    • Product Type
    • Vendor
    • Product tag