Shopify Custom Dimensions: How to Handle Dynamic Pricing for Your Unique Products

View original discussion by 31999 on Shopify Community →

Hey everyone, your friendly Shopify migration expert here! I was just browsing through the community forums and stumbled upon a really interesting discussion that I know many of you, especially those selling custom or made-to-order items, will relate to. It's all about making Shopify work for products with arbitrary, user-defined dimensions and getting that dynamic pricing just right. Let's dive into the thread and see what insights we can pull out!

The Custom Product Conundrum: When Shopify's Variants Aren't Enough

The original poster, 031999, laid out a classic challenge: they're selling a printed item that customers can order at custom, arbitrary sizes. Now, if you've been on Shopify for a while, you know its native pricing logic is built around fixed variants. You set a price for a 'Small' t-shirt, a 'Medium' t-shirt, and so on. But what do you do when a customer needs a print that's 24" x 36" and another that's 30" x 40"?

031999, who uses an app called Globo Product Options for their variations, came up with a clever workaround: they created 'square footage groups' as variants. So, if a print is between 0-5 sq ft, it falls into one variant, and 6-10 sq ft into another, each with its own price. This is a brilliant way to conform to Shopify's variant structure!

The core problem they were facing, though, was connecting the dots. How do you get the customer's chosen dimensions (e.g., 24" and 36" from dropdowns) to automatically calculate the square footage, and then select the correct 'square footage group' variant in the backend to apply the right price at checkout?

As 031999 put it, "Essentially if a customer chooses 24” on a dropdown menu, and 36” on the other dropdown, the app can understand go choose the “6 Square Feet” variation and apply it at checkout." They even acknowledged, "Yes I know Shopify is not made for this. But there has to be some app that can handle this. Or even an app that creates a new custom product every time a customer makes selections."

Community Insights: Two Paths to a Solution

This is where the community really shines, offering a couple of different angles to tackle this kind of complex requirement. It highlights the flexibility of the Shopify platform, even if the native system doesn't handle every niche perfectly.

Path 1: The Code-Driven Power-Up with Theme Customization

Another community member, Maximus3, jumped in with a direct and powerful solution: theme code manipulation. They said, "You can get inside the theme and manipulate the code to suit your need." This is often the route for highly specific, custom functionality that apps might not cover perfectly.

Here's the gist of what Maximus3 suggested:

  • Target the right files: You'd typically add this kind of logic to files like main-product.liquid or product-form.liquid, or even a custom liquid section in your theme editor. These are the files that control how your product page behaves and how the product form interacts with Shopify's backend.
  • Leverage JavaScript: The core of this solution involves custom JavaScript. This script would:
    1. Grab the width and height values as the customer selects them.
    2. Calculate the square footage (or whatever metric you're using).
    3. Compare that calculated value against your predefined square footage groups (variants).
    4. Programmatically select the correct Shopify variant on the product form. This selection then triggers Shopify's built-in price update for that variant.
  • AI as a helper: Maximus3 even mentioned using tools like Shopify's Sidekick (an AI assistant) to "give you a script that does the math and basically do whatever you want it to do." This is a fantastic point for merchants who might not be coding experts but are comfortable with a little guidance.

This approach gives you ultimate control and precision, ensuring the logic is exactly what your business needs. It's a testament to Shopify's underlying flexibility for developers and those willing to get their hands dirty in the code.

Path 2: The App Hunt for Specific Logic

031999's initial question was about finding an app. While they mentioned using Globo Product Options for variations, that app primarily handles adding custom options (like text fields or dropdowns) that often become line item properties at checkout, rather than dynamically switching the base product variant itself based on calculations.

The challenge with finding a single app that perfectly executes the "calculate dimensions, determine square footage group, and then select the corresponding backend variant" sequence is that most product options apps are designed to add *additional* choices, not to *override* or *select* the base variant based on complex logic. While some advanced product builders or customizers might get close, they often require significant setup to map complex calculations to variant IDs or might create a new 'custom product' on the fly, which can sometimes be resource-intensive.

It's not impossible, but you'd be looking for an app with very specific "logic rules" or "conditional pricing" features that can interact directly with your product variants in this calculated way. Sometimes, even with a great app, a small snippet of custom JavaScript might still be needed to tie everything together seamlessly on the frontend.

Making It Happen: Step-by-Step for a Code-Based Solution

Given the insights from Maximus3, a code-based approach, possibly assisted by AI, is likely the most robust way to achieve this specific dynamic variant selection. Here's how you might approach it:

  1. Map Your Variants Clearly: First, ensure your product variants are perfectly aligned with your square footage groups. For example, have variants like "Small Print (0-5 sq ft)", "Medium Print (6-10 sq ft)", etc., each with its own specific variant ID and price.

  2. Identify Your Theme Files: In your Shopify admin, navigate to "Online Store" > "Themes" > "Actions" > "Edit code." You'll typically be looking for files related to your product page, such as main-product.liquid, product-form.liquid, or potentially a section file like product-form.liquid if your theme uses sections. Look for where your dimension input fields and the product form itself are rendered.

  3. Develop the JavaScript Logic: This is the core. You'll need JavaScript that listens for changes in your width and height input fields. When those change, the script should:

    • Read the current width and height values.
    • Calculate the square footage.
    • Compare the calculated square footage to your predefined ranges for each variant.
    • Once the correct variant range is identified, find the corresponding variant ID (you can get these from your Shopify admin or by inspecting your product page's HTML/JavaScript).
    • Use Shopify's JavaScript API (specifically, the variant ID) to programmatically select that variant in the product form. This will update the displayed price and ensure the correct item is added to the cart.

  4. Implement and Test Thoroughly: Add your JavaScript code within