Overview
Within the Bold Product Options app, you will be able to adjust the Frontend settings of the app. This article will go through each selection within these settings, and let you know how to pick the best options for your store.
To adjust your 'frontend settings', select Settings > Frontend Settings from within Product Option's menu, and you'll find the settings shown below.
Price Display Settings (Premium)
Product Options allows you to change the way that your priced options are shown on the product page. It can either be integrated into the product price, or be displayed as an add-on. You can decide how you'd like them to display from within the app.
When choosing an option that affects how the pricing is visable on the product page, there will be code that must be inserted into the Theme files. To add this code, please click here for step-by-step instructions.
Note: If you need any help setting this feature up on your store, please contact our Merchant Success team.
To set the add to price option for your store, follow these steps:
- From within the Product Options app, select Settings > Frontend Settings.
- Under Price Display Settings, select Add to Price.
- Select Save.
- From Shopify's admin, select Online Store.
- Select Actions on your theme, then Edit Code.
- 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.
- Insert the new element:
into the existing Product Price class, which should look similar to this:bold_option_price_display<span class="bold_option_price_display product-price_price - Select Save.
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 in the theme files. It will show your priced option in your custom element, wherever you choose to display it on your page.
- 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 option. This option requires additional code to be added to your theme files to ensure this works. For more instructions, please select the Add to Price Instructions, below:
- Default: Priced options will show below the options.
-
- Append to Price: The option price will display beside the product price as an additional cost.
- Append to Price: The option price will display beside the product price as an additional cost.
Dropdown Option Display Settings
Make adjustments to the way that your dropdown option type looks in terms of price display and empty value. Use the preview on the right-hand side to see your adjustments and how they'll look.
Option Help Text Display Settings
Choose what kind of help text you want to be displayed to customers when choosing their options. The text that will appear 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.
- Help Text: Option help text will be displayed as text below the option.
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".
