Overview

Through the frontend settings, SC Product Options 2.0 allows you to change the way your priced options are shown on the product page.

To adjust your Frontend Settings, select Settings > Frontend Settings from within the Product Options app admin.

Price Display Settings (Premium)

 Product Options 2.0 can be integrated into the product price, or be displayed as an add-on. You decide how you'd like your options to display.

When selecting an option that affects how the pricing is visible on the product page, you must also install the necessary code.

Within the Price Display Settings, select your desired option.

• 
  
  • Default: Priced options will show below the options.
    
  • Class: This requires you to create a new element and place it into your theme files. It will show the priced option in your custom element, wherever you choose to display it.
    
    
  • Add to Price: When a priced option is selected, the product's price will update to reflect the total price of both the product and the option. This option requires additional code to be added to your theme files in order to function properly. For more instructions, please select the dropdown for the Add to Price Install Instructions, below.
    
• 
  
  • Append to Price: The option price will display beside the product price as an additional cost.
    

Add to Price Install Instructions

1. From within the Product Options app, select Settings > Frontend Settings.
2. Under Price Display Settings, select Add to Price.
3. Select Save.
4. From the Shopify admin, select Online Store.
5. Select Actions on your theme, then Edit Code.
6. Under Templates, find product.liquid.
   

   Note: If your theme uses sections, this could be found under Sections in product-template.liquid or product-form.liquid.

7. Insert the new element:

   bold_option_price_display

   into the existing Product Price class, which should look similar to this:

    <span class="bold_option_price_display product-price_price 

8. Select Save.

Dropdown Option Display Settings

Customize your dropdown menu's price display and empty value. You can use the right-hand preview to view your adjustments before you publish them.

Option Help Text Display Settings

Choose what kind of help text you want to be displayed to your customers while they're choosing their options. The text that appears is set when you create an option.

• Under Option Help Text Display Settings, select Help Text, Tooltip or Off.

  

  • Help Text:Option help text will be displayed as text below the option.

    Note: Radio Buttons are the type of option being used in this example. The help text may look different on your store depending on which option type you choose.

    

  • Tooltip: Option help text will be shown as a tooltip while hovering over the option.

    Note: Radio Buttons are the type of option being used in this example. The tooltip may look different on your store depending on which option type you choose.

    

  • Off: Option help text will not be shown.

    

Note: Selecting Display the option price beside each priced option will always show the additional price next to the option within the list of options.

Language Settings

Adjust the language that appears if a customer attempts to add a product to their cart without choosing a required option.

Below, the message entered in the Option Required Message was Please select a {option}.

Note: Using {option} in your message will auto-fill the name of your option set. In this case, the option set name is Size.

Troubleshooting

Having trouble with the frontend settings, or have a question about a different feature? We're here to help!

Please visit Need Help? Contact Us for more information on how to get in touch with our support team.