Change the Order and Placement of Options

Modified on Mon, 29 Apr at 3:23 AM

Overview

SC Product Options not only allows you to create options, but customize them, too. You can adjust both the order of how the options appear, and the placement of where they appear.

Select an option below to view more information.

Change the Order of Options

In order to adjust the order of your options, all applicable options must be in the same option set. Having multiple option sets applied to the same product may result in errors and will not be able to display them in order.

From within the Product Options app, select Options in the top navigation bar.
Select Edit next to the Option Set that you'd like to change.
On the left edge of the option, use the square to drag the option up or down on the list.
Once you're happy with the order, select Save Option Set.

If you notice that an option is appearing on the storefront that isn't apart of your preferred option set, it's possible that the product is in another option set.

You can find all of the option sets that a product is tied to by searching the product title or product number on the Product Search page of the app admin.

Note: If a product is not part of any other option sets within Bold Product Options, the Product Options cache will need to be cleared from within your theme's liquid code. Please visit Product Options not Displaying and follow the steps under New Options not Displaying on Storefront for steps on clearing the Product Options cache.

Change the Placement of Options

From within your Shopify theme files, you're able to move options above or below your Shopify variants, or the product description.

Alert

For Step 3, you may notice that this code is already located within your theme files. If the code is already within your theme file, please move the existing code instead of adding duplicates.

From the Shopify admin, select online store.
Select themes.
Select actions, then edit code.
Find the product.liquid template.
Find the quantity code box, which should look like this:
Add this code in just before the opening div:
```
<div class="bold_options" data-product-id="{{ product.id }}"></div>
```
Note: This coding can also be placed elsewhere in this theme file. This guide only lays out where we believe it will fit best for the majority of users.
Select Save.