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 options.

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

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

What themes support this feature?

In order to work, this feature requires support from the theme your website uses. The following theme versions include this feature by default:

Vivify Version 5.1.14
Ocean Avenue Version 5.1.9
Axiom Version 5.1.10
Themia 5.0.0
Homely 5.0.0

Where your theme does not support this feature, please refer to the guidance below for the necessary coding amendments to your theme's files.

Required theme changes

Please note: not all themes are coded in exactly the same way and there maybe small variations in how to apply the code depending on your theme and whether changes have already been made to your theme files.

The main changes take place within the theme file product_form.twig. Older theme versions do not have this file, so if your theme doesn't contain product_form.twig the changes will need to be made inside product.twig instead.

Within the product_form.twig file, there will be a number of references to product.X variables, for example product.in_stock or product.reward_points. These will need to be extended to include a new current_variation variable.

1. The 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. Within the product form, a new variable should be added:

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

7. After {% set options = product.current_variation..., references to product.options should be altered to options.

8. Within {% for option in options %} there are two blocks of code outputting product options. The one used depends on the theme setting "Variation buttons".

In both blocks value.current is queried to add an active class and/or selected attribute respectively:

{% 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. In a separate product.twig file, the scripts block needs to be amended to include a current_variation.image_index clause to select any variation assigned image:

{% 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 %}

Assistance with code installation

ShopWired's support team is not able to assist users with installation of the code for this feature.

However, ShopWired's coding partners Coding Masters are able to offer installation for a small fee. The service can be requested here.

Variables

{{ product.current_variation }} this variable returns true if a valid variation was specified in the URL.

The product.variations object contains some new variables to assist with this feature:

{{ variation.url }} returns the URL of the variation (visiting this URL will pre-select the variation options from the drop down)

{{ variation.purchasable }} returns true or false depending on whether the variation can be purchased or not.

For more information, click here.

Menu Close

Get Support From ShopWired Close

Send A Message