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 change the placement of where they appear.

Please select the drop downs below for more information on how to complete these changes:

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 your Product Options app, select Options from 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.

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.

To change the placement of options on the product page, please follow these steps:

  1. From within your theme's code settings, find the product.liquid template.
  2. Find the quantity code box, which should look like this:

    PO_Quantity_Box_Code_-_Picture_1.png

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

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