Variation URLs

A variation combination can be pre-selected for a website visitor by visiting a specific URL.

For example visiting the URL https://www.yourwebsite.com/product-url?variation=size:small,colour:red will pre-select the Small, Red variation.

All option values configured on a product must be included in the URL for the feature to work. For example, if there was a third option (e.g. 'material'), this would also need to be added to the URL.

This feature does not work for any product using the all variants feature.

Google Shopping

If you are using the Google Shopping app, if you select yes for List variations as separate items the app will automatically list the URL for each variation as the variation URL.

Theme support

The variation URL feature requires support from the theme your website uses. If your theme doesn't have support, variation URLs will not pre-select the variation.

The following theme versions include this feature by default:

Vivify Version 5.0.0+
Ocean Avenue Version 5.0.0+
Axiom Version 5.0.0+
Themia 5.0.0+
Homely 5.0.0+

If your theme does not support this feature, follow the coding guidance below or contact theme support for assistance.

Required theme changes

Not all themes are coded in exactly the same way, and there may be small variations required to the code below depending on your theme and whether changes have already been made.

The main changes take place within the product_form.twig file. Older themes do not have this file — in those cases, make the changes in product.twig instead.

Within product_form.twig, you’ll find references to product.X variables (for example product.in_stock or product.reward_points). These should be extended to include a new current_variation variable.

1. Outer .product-container classes and attributes

<div class="product-container{{ product.current_variation.in_stock|default(product.in_stock) ? ' in-stock' : '' }}{{ product.current_variation.sale_price|default(product.sale_price) ? ' has-sale-price' : '' }}"
    data-sku="{{ product.current_variation.sku|default(product.sku) }}"
    data-reward-points="{{ product.current_variation.reward_points|default(product.reward_points) }}"
    data-is-in-stock="{{ product.current_variation.in_stock|default(product.in_stock) ? 1 : 0 }}"
    data-can-be-added="{{ product.current_variation.purchasable|default(product.can_be_added) ? 1 : 0 }}"
    data-has-sale-price="{{ product.current_variation.sale_price|default(product.sale_price) > 0 ? 1 : 0 }}"
    data-price="{{ product.reward_points_enabled ? product.current_variation.price|default(product.price) : format_price(product.current_variation.price|default(product.price)) }}"
    data-sale-price="{{ product.reward_points_enabled ? product.current_variation.sale_price|default(product.sale_price) : format_price(product.current_variation.sale_price|default(product.sale_price)) }}"
>

2. Product prices

<div class="product-sale-price price">
    {{ format_price(product.current_variation.sale_price|default(product.sale_price)) }}
</div>
<div class="product-price price">
    {{ format_price(product.current_variation.price|default(product.price)) }}
</div>

3. Reward points

<div class="info-reward{{ product.current_variation.reward_points|default(product.reward_points) ? '' : ' hide' }}">
    <span class="product-reward-points primary label margin-right">{{ product.current_variation.reward_points|default(product.reward_points) }}</span>
    <span>Reward points</span>
</div>

4. SKUs

<div class="info-code{{ product.current_variation.sku|default(product.sku) ? '' : ' hide' }}">
    <span>SKU</span>
    <span class="product-sku">{{ product.current_variation.sku|default(product.sku) }}</span>
</div>

5. Stock quantities

<p class="product-stock-true">In stock{% if product.current_variation.sku|default(product.sku) %}: <strong class="product-stock-available">{{ product.current_variation.quantity|default(product.stock) }}</strong>{% endif %}</p>

6. Add a new variable within the product form

{% set options = product.current_variation.options|default(product.options) %}

7. Replace references

After setting options, replace any remaining references to product.options with options.

8. Variation buttons

Within {% for option in options %}, there are two blocks for displaying options. The block used depends on the theme setting configuration you have selected for the Variation buttons feature.

In both, value.current is checked to apply active or selected states:

{% if gts.variant_buttons %}
    ...
    <label class="rectangle{{ value.current ? ' active' : '' }}
    ...
{% else %}
    ...
    <select name="value[]" class="product-option required">
        <option value="">Please select...</option>
        {% for value in option.values %}
            <option value="{{ value.id }}"{% if value.current %} selected{% endif %}>
            ...

9. Selecting a variation image

In product.twig, amend the scripts block to include a current_variation.image_index clause:

{% block scripts %}
    {{ parent() }}
    ...
    {% if product.current_variation.image_index %}
        <script>
            $(function() {
                $('.js-item-image.p' + {{ product.current_variation.image_index  }}).trigger('click');
            });
        </script>
    {% endif %}
    ...
{% endblock %}

Variables

Returns true if a valid variation was specified in the URL.

The product.variations object includes new variables for this feature:

Returns the variation URL (visiting it will pre-select the variation)

Returns true or false depending on whether the variation can be purchased