How can I display prices for all product variants next to the variant box on the product page?

[JohnWalter]

I’m selling products with variants based on ‘size’ and ‘Quantity’ attributes, each with a unique price. I want to display the price of each variant ( on product page) within its respective label (or in a new span element next to it), regardless of whether it’s selected or not. Can you provide the specific code snippets required to implement this?

Thank you in advance for your help. Your assistance will not go unrewarded!

Note: Dawn theme

My current Structure

The structure I want is shown below. Similar to the example, when selecting options, the variant prices should update in their box or in a new span tag nearby. With a small CSS adjustment, it should be easy to hide the initial prices for the ‘Size’ variants.

Since there is a dynamic relationship between the ‘Size’ and ‘Quantity’ variants, prices should update whenever these options are

thanks

[rajweb]

Hey @JohnWalter ,

To implement this feature on the Dawn theme for Shopify, where each variant option displays its corresponding price, you’ll need to modify the Liquid template and add some JavaScript. Here’s a step-by-step guide to help you display the price next to each variant option.

Step 1. Update the Product Template:

1. Open the main-product.liquid file in your Dawn theme.

2. Locate the area where the variant options are displayed, usually inside product-form or product-variant sections.

3. Modify the code to include a placeholder for each variant’s price. Add a or similar element next to each option button, where the price will be displayed.

Here’s an example structure for the variant options:

  
  

    {% for option in product.options_with_values %}
      {% if option.name == 'Size' %}
        {% for value in option.values %}
          
        {% endfor %}
      {% endif %}
    {% endfor %}
  

  
  

    {% for option in product.options_with_values %}
      {% if option.name == 'Quantity' %}
        {% for value in option.values %}
          
        {% endfor %}
      {% endif %}
    {% endfor %}
  

Step 2. Add JavaScript to Display Prices for Each Variant:

Next, you’ll add JavaScript to retrieve the prices for each variant and display them in the respective placeholder.

1. In the Dawn theme, navigate to main-product.js or create a new JavaScript file if one doesn’t exist.

2. Write JavaScript to:

document.addEventListener("DOMContentLoaded", () => {
  // Get variant data
  const productVariants = {{ product.variants | json }};

  // Add price to each option based on variant data
  function updateVariantPrices() {
    document.querySelectorAll(".size-option").forEach((sizeOption) => {
      const size = sizeOption.getAttribute("data-size");
      
      document.querySelectorAll(".quantity-option").forEach((quantityOption) => {
        const quantity = quantityOption.getAttribute("data-quantity");

        // Find the variant that matches the size and quantity
        const matchingVariant = productVariants.find(
          (variant) =>
            variant.option1 === size && variant.option2 === quantity
        );

        if (matchingVariant) {
          // Set the price in the span element within the button
          sizeOption.querySelector(".variant-price").innerText = `$${matchingVariant.price}`;
          quantityOption.querySelector(".variant-price").innerText = `$${matchingVariant.price}`;
        }
      });
    });
  }

  // Run function on page load
  updateVariantPrices();
  
  // Optional: Update price on selection change if dynamic interaction needed
  document.querySelectorAll(".size-option, .quantity-option").forEach((option) => {
    option.addEventListener("click", () => {
      // Re-run the function to update prices
      updateVariantPrices();
    });
  });
});

3. Add CSS for Styling (Optional):

To control the appearance of the prices, add custom CSS in theme.css or your preferred CSS file. For instance:

.variant-price {
  font-size: 0.9em;
  color: #666;
  margin-left: 5px;
}

You can also hide the price for certain options (e.g., ‘Size’) if they shouldn’t be displayed by default.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

1. Fetch the variant prices based on selected options (size and quantity).
2. Display each variant’s price next to the corresponding button.

Here’s an example of how to achieve this:

[akshay_bhatt]

Hi @JohnWalter ,

To display each variant’s price next to its respective size and quantity label on your Dawn theme, you’ll need to adjust the product page code. Here’s how you can do it:

1. Edit main-product.liquid :

   • In Online Store > Themes > Edit Code, locate and open main-product.liquid (found in Sections in the Dawn theme).
   • Add a span next to each variant option label to hold the price.

2. Add JavaScript to Display Variant Prices:

   • Add JavaScript code to loop through each variant and display the corresponding price next to each label.

   • Place the following JavaScript at the bottom of your main-product.liquid file, inside a tag:

CSS Adjustment (optional):

• If you’d like to hide the initial price displayed in the size options and only show the dynamically added price, add this CSS to your theme’s CSS file:

.product-form__input select option {
    display: inline;
    font-weight: bold;
    color: #333;
}

• This code will automatically display each variant’s price next to the size and quantity options and update it dynamically when an option changes.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt