How to Integrate a Calculation-Driven Pricing Model for Products on Shopify Using Two Inputs:

How to Integrate a Calculation-Driven Pricing Model for Products on Shopify Using Two Inputs:


A common challenge many Shopify store owners grapple with is integrating a dynamic pricing model for products, especially when pricing depends on multiple factors. Let's say you're selling customizable buttons or charms for dresses in bulk, where the price hinges on both size and quantity. Figuring out such a versatile pricing model on Shopify can be intricate. However, imagine a solution that streamlines this process for you.

Today, we'll show you how to utilize two dropdown options, size, and quantity, to craft the perfect pricing strategy for your products.

Shopify app - Live Product Options


Step 1 - Install the App on Shopify and Complete the Onboarding Process:
Before diving into the nitty-gritty of product pricing, you'll first need the right tool. The Shopify App "live product options" is your go-to solution. Click here to initiate the download. Upon downloading, an easy-to-follow onboarding process awaits, reminiscent of setting up your favorite social media profile. Follow the prompts and set your preferences.

Step 2 - Select Your Product:
With the app now part of your Shopify toolkit, locate the 'New Product' section, identifiable by its Plus sign. This interface allows for either individual or bulk product selection. Scroll through, make your choices, and once decided, proceed by tapping on 'Select Product' marked by a search magnifier.

Step 3 - Delve into Product Options:
Upon product selection, a fresh interface emerges, prompting you to specify product options. To proceed, locate and tap on the 'Add Options' button, which is adorned with a Plus sign.

Step 4 - Define Size and Quantity Dropdowns Methodically:
Having engaged the 'Add Options' button, the stage is set to detail our essential dropdowns. First, direct your attention to the 'Type' category and from there select 'Dropdown'. Now, it's time to label this dropdown. Name it 'Size' and begin introducing the respective sizes. For instance, populate it with values like 2x2, 3x3, 4x4, and 5x5. Though you can attach pertinent images to these sizes for clarity, we'll omit this step for simplicity.

Then, beckon another dropdown option into existence, dedicated to 'Quantity'. Label it thoughtfully and begin filling it with values. Your spectrum can range from 50 to 10,000 or any other range that mirrors your business's offerings.

  • Value 1 is 50, value 2 is 100, value 3 is 200, value 4 is 500, value 5 is 1000, value 6 is 2000, value 7 is 5000 and value 8 is 10000.

Step 5 - The Heart of the Matter: Pricing Formula:


// First, get the selected size and quantity values
var selectedSize = options.value('size');
var selectedQuantity = options.value(‘quantity');

// Determine the price of the selected size
var sizePrice = 0;

if (selectedSize == '2x2') {
sizePrice = 7;
} else if (selectedSize == '3x3') {
sizePrice = 8;
} else if (selectedSize == '4x4') {
sizePrice = 9;
} else if (selectedSize == '5x5') {
sizePrice = 10;

// The final price will be the product of size price and quantity
var finalPrice = sizePrice * selectedQuantity;

// Apply a 20% discount on the final price
finalPrice = finalPrice * 0.8; // 0.8 is equivalent to subtracting 20%

return finalPrice;


Having set our parameters, let’s lay down the pricing groundwork:

2x2, the price is set to 7$.
3x3, the price is set to 8$.
4x4, the price is set to 9$.
5x5, the price is set to 10$.

Now, enter the computational phase: Multiply the size's price by the chosen quantity. If discounts are part of your selling strategy, apply the pertinent percentage to the subtotal, finalizing your product's price.

With the formula's blueprint ready, the next step is integrating this formula for each quantity pairing. Direct your attention to the curly brace icon in the pricing sector and input this tailored formula.

Step 6 - Venturing Beyond Basics: Advanced Settings:
While the steps elucidated ensure a solid foundation, those with an appetite for intricacy can explore advanced settings. The palette includes image variants, button stylizations, and unique number inputs, rendering the customization landscape boundless.

Step 7 - Seal the Deal: Activate and Save:
Configuration and customization behind, the next logical step is making your settings operational. Activate these meticulously crafted settings and commit them with a save.

Step 8 - Craftsmanship in Design and CSS Adjustments:
While the app offers a pristine design out of the box, branding often demands unique aesthetics. Navigate through the design settings, tuning and tailoring as per brand identity. Expertise in CSS? Leverage it for granular control over appearance.

Step 9 - Support: Your Safety Net:
The realm of custom pricing brims with complexities. Should you find yourself grappling with nuances or needing clarity on a specific setting, their support team is just a call away. Moreover, their documentation serves as an enlightening resource.


Evolving your Shopify store with multi-parameter pricing, like size and quantity, can be a game-changer for the user experience. The "live product options" app is an ally, equipping store owners with a simplified, rapid, and trustworthy method to integrate dynamic pricing. Make this valuable addition to your store today and watch flexibility meld with an enriched user experience.

Step up your Shopify game. Download the app now!

About Live Product Options

Use Live Product Options to create a custom personalized shopping experience with unlimited product options and a live preview of the product.

Super easy installation

No theme modifications are required.

The App does not add any liquid to your theme and can be installed and uninstalled without the risk of messing up your theme code.

Personalize products

Personalize your products with custom text inputs and image file uploads. Show a live updating preview of the product image with the customers inputs.

Perfect for print on demand products like canvas, posters, picture framing, monogram or text engraving.

Unlimited Product Options

Extend the 100 variant limit by adding unlimited custom product options:

  • text (single / multi line)
  • select dropdown
  • radio / checkbox
  • swatches (button / images / colors)
  • color picker
  • file upload (with Ajax support)
  • HTML

Conditional Logic

Show product options with conditional logic based what the customer has selected.

Live preview

Show a live preview of the product options that updates in real time when the customer changes an option.

Live preview can consist of multiple layers to build a preview image:

  • overlay (image with transparent parts)
  • mask (crop preview with a provided mask or shape e.g. circle)
  • text
  • upload

In-App Editor

Create custom product configurations with the simple to use visual editor inside the app. Configure specific areas for customers to add text or image uploads.

Order Archive & Export

The app archives each order with all the products and their custom options. Export a ZIP file with all the file uploads and CSV containing the options and custom text inputs.

View in Shopify App store
Back to blog