Manage Products
Product Options
How to manage product options in the Spree open-source eCommerce dashboard
Product options are product attributes like size, color, or material that allow customers to choose variations of a product.
They enhance the user experience by making it easier to find and choose the desired product variant by acting as filters on the storefront, helping customers refine their searches more efficiently.
Additionally, they can streamline inventory management by linking variations to a single product listing.
To manage Options, navigate to the Options tab of the admin dashboard, found under Products.
Here you’ll see a list of all the Options currently available on your store.
When an option type is set to Filterable, your storefront visitors are presented with the option to filter a taxon of products based on the option type. A typical example of this would be to filter clothing by size and color as shown here:
Simply enter the names of the values, and click ‘+ Add One’ to add more values.
Note: When creating or importing products, any new Option Values that haven’t already been added to this Option will be added automatically.
Once you’re finished adding values, click the blue ‘Create’ button at the bottom of the page, and you’ll receive a notification that the Option has been successfully created.
For example, this will change the filter from this:
To this:
The effect is similar on product detail pages:
Feel free to change the Presentation Name, Internal Name, check or uncheck the Filterable box, and add or remove Option Values.
Once you’re finished, make sure to click the blue ‘Update’ button at the bottom of the page.
On the Option editor page, locate the red ‘Delete button at the bottom of the page and the Option will be deleted.
Here you’ll see a list of all the Options currently available on your store.
Add an New Option
To add a new Option, click ‘+ New Option Type’ in the top right corner. This will redirect you to the Option creation page.
General Information
In this section you can set the name of the Option as should be displayed on the storefront, as well as the Interal Name. If you don’t set an internal name, the presentation name will be used.
Filterable
In the General Information section, you can also select whether or not you want this Option to be filterable on product listing pages.
When an option type is set to Filterable, your storefront visitors are presented with the option to filter a taxon of products based on the option type. A typical example of this would be to filter clothing by size and color as shown here:
Option Values
Option Types represent the attribute being customized, such as size, color, or material, while Option Values are the specific choices available for that attribute, like Small, Red, or Cotton.
Simply enter the names of the values, and click ‘+ Add One’ to add more values.
Note: When creating or importing products, any new Option Values that haven’t already been added to this Option will be added automatically.
Once you’re finished adding values, click the blue ‘Create’ button at the bottom of the page, and you’ll receive a notification that the Option has been successfully created.
Option Management
Navigating back to the Options page, you’ll see that your newly created option is now listed among your other Options.
Option Ordering
If you’d like to change the order in which Options are displayed on the storefront, e.g., in filters and on product detail pages, you can drag and drop them into position by clicking on the 6 dots on the left hand side.
For example, this will change the filter from this:
To this:
The effect is similar on product detail pages:
Edit Options
To edit an Option, navigate to the Options tab, and click ‘Edit’ on the option you’d like to edit.
Feel free to change the Presentation Name, Internal Name, check or uncheck the Filterable box, and add or remove Option Values.
Once you’re finished, make sure to click the blue ‘Update’ button at the bottom of the page.
Delete Options
To delete an Option, navigate to the Options tab, and click ‘Edit’ on the option you’d like to delete.
On the Option editor page, locate the red ‘Delete button at the bottom of the page and the Option will be deleted.