1. Bold Commerce Help Center
  2. Product Options - Shopify
  3. Tutorials

Change how Priced Options are Shown on the Product Page

Follow
Avatar
MC
Published:
Updated:

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.

Note: Adding priced options is a Premium feature. Visit Upgrade to Premium (or Downgrade to Basic) for more information on how to upgrade.

  1. From Shopify's admin, select Apps.

    Select Apps

  2. Select Product Options by Bold.

    Select Product Options by Bold

  3. Select Settings.

    settings

  4. Select Frontend Settings.

    Frontend Settings

  5. Within the "Price Display Settings", select your desired option.
    Price Display Settings
    • Default: Priced options will show below the options.
      Default
    • 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.
      Add to Price
    • Append to Price: The option price will display beside the product price as an additional cost.
      Append to Price
  6. Select Save.

    select save

  7. From Shopify's admin, select Online Store.

    select online store

  8. Select Actions.

    Actions

  9. Select Edit code.

    Edit code

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

    find product.liquid

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

    insert the element

  12. Select Save.

    select save

That's it!

Next Steps:

Blog Posts:

6 out of 16 found this helpful

Comments

4 comments
Sort by Date Votes
  • Avatar
    Luke Carl Hartman

    "Frontend Settings" is not an option, nor is "Price Display Settings". Did the display options change?
    Thanks for your help!

    0
    Comment actions Permalink
  • Avatar
    Brendin

    Hey Luke!

    Thanks so much for reaching out :) It's possible that you may be using an older version of Product Options with a slightly different user interface. I've gone ahead and created a ticket for you with our Merchant Success team and they'll be more than happy to assist you further from here!

    Please let us know through our email response if you have any further questions from here.

    Cheers,
    Brendin

    0
    Comment actions Permalink
  • Avatar
    Alex Tinder

    My theme doesn't have the same code for #11, I can't figure out where it's supposed to go.

    1
    Comment actions Permalink
  • Avatar
    Brendin

    Hey Alex!

    Thanks for reaching out :) It's possible that you may be using a slightly older version of Product Options that has a different coding installation.

    I've gone ahead and created a ticket on your behalf (Request #488147) and our Merchant Success team will be more than happy to assist further from here!

    Please let us know if you need anything else in the meanwhile and we'll be glad to help.

    Cheers,
    Brendin
    Knowledge Centre Manager

    0
    Comment actions Permalink

Please sign in to leave a comment.

Articles in this section

See more