Removing product variant URL ?v=

Tourist
8 0 1

We're currently using the MileHigh theme and want to remove the ?v=1488818159 URL structure from our products that use variants. How can we do this? I found articles on this topic before but were for a liquid structure that doesn't match ours.

0 Likes
Shopify Expert
7 0 1

Hello Cody,

Please make following changes

From

jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {product: {{ product | json }},onVariantSelected: selectCallback,enableHistoryState: true

To

jQuery(function($) {
new Shopify.OptionSelectors('productSelect', { product: {{ product | json }},onVariantSelected: selectCallback,enableHistoryState: false
 

Please feel free if you need any further help.
 

0 Likes
Tourist
8 0 1

Thank you, but where do I find this code?

0 Likes
Shopify Expert
7 0 1

Hello Cody,

You will find this code in product.liquid file, although if you don't find just add me as collabter account - https://www.screencast.com/t/3dnzKjdti on id metizsoft@gmail.com

I will give you detail description where you can change it.with screenshot

Thanks !

 

0 Likes
Tourist
8 0 1

Thank you! Here is the code for variants in product.liquid


                  <!-- variations section  -->

                  {% if section.settings.show_product_cart_postion == "top" %}
                  <div class="variations mt15">
                    <div class="row">
                      <div class="col-sm-12">
                        {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
                         {% for option in product.options_with_values %}
                        <div class="selector-wrapper main-product-select">
                        
                            <label {% if option.name == 'default' %}class="hidden" {% endif %} for="product-select-{{ option.name }}">
                                {{ option.name }}
                            </label>
                            <select class="single-option-selector" id="SingleOptionSelector-{{ forloop.index0 }}">
                              {% for value in option.values %}
                                <option {% if option.selected_value == value %}selected{% endif %}>
                                  {{ value }}
                                </option>
                              {% endfor %}
                            </select>
                          
                          </div>  
                        {% endfor %}
                       {% endunless %}
                        <select name="id" id="product-select-{{ product.id }}" class="product-variants form-control hidden">
                          {% for variant in product.variants %}
                          {% if variant.available %}
                          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                          {% else %}
                          <option disabled="disabled">
                            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                          </option>
                          {% endif %}
                          {% endfor %}
                        </select>
                        
                        {% if section.settings.show_product_swatches %}
                        {% if product.variants.size > 1 %}
                        {% for option in product.options %}
                        {% include 'swatch' with option %}
                        {% endfor %}
                        {% endif %}
                        {% endif %}
                      </div>
                    </div>
                  </div>
                  <div class="desc_blk_bot clearfix">
                    <div class="qty product-page-qty"> <a class="minus_btn" ></a>
                      
                      <input type="text" id="quantity" name="quantity" class="txtbox" value="1" min="1">
                      <a class="plus_btn" ></a> 
                     </div>
                    
                    <div class="price">
                      <span id="productPrice" class="money" itemprop="price" content="{{ product.selected_or_first_available_variant.price | money_without_currency }}">
                        {{ product.selected_or_first_available_variant.price | money }}
                      </span>

                      {% if product.selected_or_first_available_variant.price < product.selected_or_first_available_variant.compare_at_price %}
                      <span id="comparePrice" class="money">
                        {{ product.selected_or_first_available_variant.compare_at_price | money }}
                      </span>
                      {% endif %}
                    </div>
                    <input type="submit" name="add" class="btn_c" id="addToCart" value="{{ 'products.product.add_to_cart' | t }}">
                  <div class="maximum-in-stock-error">{{ 'products.product.maximum_quantity_error' | t }}</div>
                  </div>
                  {% endif %}

0 Likes
Shopify Expert
9764 86 1512

The code mentioned above (from Manthan) is not correct.

@Cody - what's the reason behind wanting to remove it? Curious to hear your reasons just in case it turns out this is not a change you actually need.

If it turns out you do need to remove the code what you're looking for is found in script.js.liquid:

var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant.id;
window.history.replaceState({path: newurl}, '', newurl);

^ That's what is changing the history state. It could be commented out if needed, but keeping it does have value - being that the variant will be autoselected if this url is shared or bookmarked.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
2 Likes
Tourist
8 0 1

Thanks, Jason! We want to remove it because the long, messy URL structure makes for bad SEO. I'm curious to see how this will affect variant selections by commenting out

0 Likes
Shopify Expert
9764 86 1512

What makes you think this url is used in SEO activites?

Do remember that JavaScript is modifying the history state after the page loads. It's not actually loading that url. If you slow down the page load you'll see the change happen.

I doubt that removing this will make any impact on your SEO efforts

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
5 0 0

What file that has the code you are talking about? I tried searching every file, but I couldn't find it.

0 Likes
Highlighted
New Member
2 0 0

One product can be found by different URLs on the website.

For example,
https://charmingjewellerystore.co.uk/collections/best-sellers/products/family-nest-birthstone-neckla...

https://charmingjewellerystore.co.uk/collections/jewellery-for-her/products/family-nest-birthstone-n...

both URLs lead to the same product page and this is an issue for SEO.

The product page should have a unique URL as follows: https://charmingjewellerystore.co.uk/products/family-nest-birthstone-necklace. The same formula should be used for all products. 

0 Likes