Change the Order and Placement of Options

Overview

With Bold Product Options, you are able to adjust how your options appear within the product pages of your store. This includes being able to adjust the order of how the options appear, and the placement of where they appear.

 


 

This step-by-step will help with changing the order of how the options appear on the product page. From directly within the app, move the options around to reflect the same way you'd like them to appear on the product page.

 Example

In the example below, the options for Size and Would You Like to Add A Case? could be swapped.
Adjust The Order of Options

It is important to have all of the options within the same option set to be able to have the functionality to adjust the order they display in. Having multiple option sets apply to the same products may result in errors, and being unable to have them display in order.

To adjust the order of the options on the product page, please follow these steps:

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

    Drag the option using the square

  4. 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 the option set in Product Options, it's possible that the product is also 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 in the Product Search page within the Product Options admin:

Product Search Page

Product Example Search Results

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 to remove any unwanted options from a product page. Please visit Product Options not Displaying and follow the steps under New Options not Displaying on Storefront for steps on refreshing the Product Options cache in your theme's liquid code.

This step-by-step will help with moving the placement of your Product Options on the product page. From within your Shopify theme files, you are able to move options above or below Shopify options, 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.

  1. From the Shopify admin, select online store.
  2. Select themes.
  3. Select actions, then edit code.
  4. Find the product.liquid template.
  5. Find the quantity code box, which should look like this:

    PO_Quantity_Box_Code_-_Picture_1.png

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

    PO_Add_Quantity_Box_Code_-_Picture_2.png

  7. Select Save.
Was this article helpful?
0 out of 0 found this helpful