Store Module v3.3.0 — Introducing Product Modifiers

We’re thrilled to announce that Store module v3.3.0 for ExpressionEngine is now available! This release brings one of the most highly requested features to life: Product Modifiers.

What are Product Modifiers?

Product Modifiers (also known as Product Options) allow you to extend the base price of a product using custom fields.
For example, selling a phone? Now you can easily offer an optional USB cable for a few extra dollars — directly within your product page!

With this feature, you can create flexible upsell options and offer customers personalized choices without creating dozens of individual products.

How It Works

Setting up a product modifier is simple. Inside the {exp:reinos_store:add_to_cart} tag, you can add the {reinos_store_modifier} tag to define the options:

{reinos_store_modifier
    name="incl_cable"
    label="USB cable"
    value="yes"
    sku="incl_cable"
    price="9.00"
}

This creates a checkbox allowing the customer to add a USB cable to their purchase (+$9.00).

Want to offer more complex choices like T-shirt sizes? No problem! You can easily generate a dropdown:

{reinos_store_modifier
    name="size"
    label="Size"
    value="XL"
    sku="xl"
    price="3"
}
{reinos_store_modifier
    name="size"
    label="Size"
    value="L"
    sku="l"
    price="2"
}

And render it with:

{modifiers}
    <label for="{modifiers:label}">{modifiers:label}</label>
    <select name="{modifiers:form_input_name}">
        <option value="">----</option>
        {modifiers:options}
            <option value="{modifiers:options:value}">{modifiers:options:title} (+{modifiers:options:price:formatted})</option>
        {/modifiers:options}
    </select>
{/modifiers}

You can even combine checkboxes and select fields in one product form!

Dynamic Price Updates

To make the shopping experience even smoother, Store 3.3.0 supports dynamic price updates with JavaScript.
Simply add the {exp:reinos_store:modifier_js} tag at the bottom of your page, and apply one of these classes to your price elements:

• reinos-store-dynamic-price
• reinos-store-dynamic-price-plus-tax

When customers select options, the displayed price will automatically adjust — no page reload needed.

Example: Grid Setup for Product Modifiers

Store 3.3.0 also plays nicely with grid fields!
Let’s say you sell T-shirts in different sizes (S, M, L, XL, XXL), each with its own price. You can use a grid field in your channel entry to manage these variants easily.

Here's a basic example:

<div class="grid grid-cols-3 gap-3">
    {exp:channel:entries channel="products"}
        {exp:reinos_store:add_to_cart ...}
            {product_modifiers}
                {reinos_store_modifier
                    name="size"
                    label="Size"
                    value="{product_modifiers:size}"
                    sku="{product_modifiers:size}"
                    price="{product_modifiers:price}"
                }
            {/product_modifiers}
            
            <div class="product">
                <h2>{title}</h2>
                <span class="reinos-store-dynamic-price">{product_sale_price:formatted}</span>

                {modifiers}
                    <label>{modifiers:label}</label>
                    {if modifiers:name == 'size'}
                        <select name="{modifiers:form_input_name}">
                            <option value="">----</option>
                            {modifiers:options}
                                <option value="{modifiers:options:value}">{modifiers:options:title} (+{modifiers:options:price:formatted})</option>
                            {/modifiers:options}
                        </select>
                    {/if}
                {/modifiers}
                
                <input type="submit" value="Add to Cart"/>
            </div>
        {/exp:reinos_store:add_to_cart}
    {/exp:channel:entries}
</div>

{exp:reinos_store:modifier_js}

This setup makes it super easy to manage multiple product options dynamically without complex setup.

📄 Read the Full Changelog

Curious about all the improvements and fixes included in version 3.3.0?
👉 Check out the full changelog here

⬇️ Download the Latest Version

Ready to upgrade and start using product modifiers today?
👉 Download Store 3.3.0 here

A huge thank you to our amazing community for your continuous feedback and support — you make these improvements possible!
We can't wait to see how you use product modifiers in your stores!