List products from same collection on product page

Solved
Highlighted
New Member
6 0 0

Instead of using variants for my different products I'd like to create a Product Page that will list all of the other Products from the same Collection as a drop-down list. So when the users check my "main" Product Page listed on my homepage they will see all the related products in the same collection and they can choose to click on any of them which would open that Product. My problem with variants is that they couldn't have their very own description and URL that is the reason I'd go for this separated products.

 

I've found something similar which lists all the products in the same collection but it only works if I open my site with "collections/products/" link and it is not a drop-down list:

 

<ul>
{% for product in collection.products %}
<li><a href="{{ product.url }}">{{ product.title }}</a></li>
{% endfor %}
</ul>

 

So I changed it to this:

 

<select>
{% for product in collection.products %}
<option value="{{ product.url }}">{{ product.title }}</option>
{% endfor %}
</select>

 

Now it is a drop-down list but unfortunately nothing happens when I choose any of the items in list.

 

Can anyone help me what should I add to my code? I'm using a custom template so maybe it makes it a bit more complicated.

0 Likes
Highlighted
Shopify Partner
482 86 121

This is an accepted solution.

Hi@icmoptics 

sarhov is here...

 

Well, you are on the right way, just a small update and we will make it work.

We will add javascript to make it work, we will exclude current product to be listed there and we will include collection link in urls, so the product we switch into to be able to pull its products.

<select onchange="javascript&colon;location.href = this.value;"> 
  {% for p in collection.products %}
  {% unless p.id  == product.id %}
   <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
  {% endunless %}
  {% endfor %} 
</select>

 

 

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
2 Likes
Highlighted
New Member
1 0 0

Hi there - I would like to have this same option. Where do I put that code exactly? 

 

thanks,

Beau


@sarhov wrote:

Hi@icmoptics 

sarhov is here...

 

Well, you are on the right way, just a small update and we will make it work.

We will add javascript to make it work, we will exclude current product to be listed there and we will include collection link in urls, so the product we switch into to be able to pull its products.

<select onchange="javascript&colon;location.href = this.value;"> 
  {% for p in collection.products %}
  {% unless p.id  == product.id %}
   <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
  {% endunless %}
  {% endfor %} 
</select>

 

 


 

0 Likes
Highlighted
New Member
1 0 0

Thanks 

0 Likes
Highlighted
New Member
6 0 0

I'm facing a Shopify limit: the dropdown list can only show 50 items. Unfortunately sometimes I have more than 50 items in this list. Is there any way to bypass this limit? Or a different type of dropdown menu maybe would do the job?

Example list: https://unoptix.com/collections/products/products/sfp-10g-sr

0 Likes