How to show shopify product variants as a product or related products on the products details page ?

Some of us might have come across a requirement where we need to show the variants of a product like colors, size, etc. in terms of products or related products with carousel kind of effect and so.

Recently, I got into similar kind of situation where a product was having variants like colors: red, green, brown, etc. and size: 10, 20, 30, 40, 50, etc. Now, the requirement was to display a related products section showing the shopify product images in box layouts with unique variants clicking on which should take the user to that variant specific page. For example:

1. BOX-1 RED
2. BOX-2 GREEN
3. BOX-3 BROWN

I want through the shopify docs and apis to gather information on this and believe me it took hours to get to this solution after searching over internet for close solutions and after merging helpful tips from the Shopify Guru’s here I am with the solution.

EXAMPLE-1:

{% for option in product.options %}
	{% if option == 'Color' %}
		{% assign index = forloop.index0 %}
		{% assign colorlist = '' %}
		{% assign color = '' %}
		{% for variant in product.variants %}
			{% capture color %}
			{{ variant.options[index] }}
			{% endcapture %}
			{% unless colorlist contains color %}
			
				<!--GET COLOR-->
				{{ color }}
				<!--GET VARIANT ID -->
				{{ variant.id }}
				<!--GET VARIANT URL-->
				{{ variant.url }}
				<!--GET VARIANT IMAGE-->
				<img src="{{ variant.image.src | img_url: "medium"  }}"	alt="{{ color }}" />
			
			{% capture tempList %}
			{{colorlist | append: color | append: ' '}}
			{% endcapture %}
			{% assign colorlist = tempList %}
			{% endunless %}
		{% endfor %}
	{% endif %}
{% endfor %}

Example-2: In the below example, you have to take care of the css if you want to display the related products in carousel and with some other effects. This example is for providing some idea on how to overcome the issue of displaying unique variants out of 100’s of combinations.

<div class="sr-related-products">
	<div id="sr-related-products" class="products_block exclusive block">
		<h4 class="title_block productscategory_title">
			<span>Related Products</span>
		</h4>
		<div class="block_content">	
			<div class="owl-row">
				<div class="owl-carousel slide">
					<div class="item">
						<div class="product_block  ">
							<div class="product-container text-left product-block">
								<div class="product-image-container image ">
									<a class="product_img_link" href="{{ variant.url }}" title="{{ color }}">
										<img class="replace-2x img-responsive" src="{{ variant.image.src | img_url: 'medium'  }}" alt="{{ color }}"/>                
									</a>
								</div>
							</div>
						</div>         
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$('#sr-related-products .owl-carousel').each(function(){
			$(this).owlCarousel({
				items : 4,
				lazyLoad : true,
				navigation : true,
				navigationText : ["translation missing: en.products.carousel.preview", "translation missing: en.products.carousel.next"]
			}); 
		});
	});
</script>

I hope this example of Shopify – Display of variants as related products will be useful for you. Please share your valuable suggestions. Thanks!

Related Post

Advertisements

Yuvraj has written 39 articles

"Learn & Share" - I believe in this. What about you?