Show related products by tag

Highlighted
Excursionist
23 1 2

Hey There !

I want to show related products by tag on my  store. This code works perfect. But it shows 280x390 pixel images under product. That means are they are very huge. How can i make them look smaller in a row. (usually will be 6 products in 1 row) Note: My main images are 1200x1800 pixels.

{% assign number_of_related_products_to_show = 6 %} 
    {% assign current_product = product %} {% assign current_product_tags = product.tags %} 
    {% assign found_first_match = false %} {% assign found_second_match = false %} 
    {% assign first_related_product = true %} 
    {% paginate collections.all.products by 1000 %} 
    {% for product in collections.all.products %} 
    {% unless product.handle == current_product.handle %}
     {% for tag in product.tags %} 
    {% if current_product_tags contains tag %} 
    {% if found_first_match == false %} 
    {% assign found_first_match = true %} 
    {% assign first_match = tag %} 
    {% else %} 
    {% assign found_second_match = true %}
     {% assign second_match = tag %}
     {% endif %}
     {% endif %}
     {% endfor %}
     {% if found_first_match == true %}
     {% if first_related_product == true %} 
    {% assign first_related_product = false %}
        {% endif %}
     {% if product.tags contains first_match or product.tags contains second_match %} 
    {% include 'product-grid-item' with collection.handle %} 
    {% endif %} 
    {% endif %} 
    {% endunless %} 
    {% endfor %} 
    {% if first_related_product == false %}
        {% endif %}
     {% endpaginate %} 

 

0 Likes
Highlighted
Excursionist
629 110 323

share your page url so that i can give you solution

0 Likes
Highlighted
Excursionist
23 1 2

Hey @candiSoft 

This is page that i only add tags at product 

https://sulegiyim.com/collections/tum-urunler/products/piliseli-elbise-1

0 Likes
Highlighted
Excursionist
629 110 323

In your theme Owl Carousel pluggin is used.
- to make your images' surroundings smaller you need to find jquery code for owl carousel and then set margin wich is defined in that code and you can also set number of images(currently 4) but you can set it 5 to 7 for desktop view.
-the code will look like below.

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

-Here is the link to learn mmore about your slider.
https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html 

 

-I hope you understood.
-if not contact me on candisoft100@gmail.com

-if satisfied with answer give like and mark my answer as accepted solution.

Thank You

0 Likes
Highlighted
Excursionist
23 1 2

Hey @candiSoft 

I think you are talking about the owl carousel dynmamic recommandations section. This is not the place that i want to change. I want to connect my recommendent-product section to owl carousel. I dont want to change owl carousel settings they are already customized well. Thanks for your help anyways.

0 Likes