List products from same collection on product page

Solved
Highlighted
New Member
4 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

Success.

Shopify Partner
455 80 100

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
Messenger: @sarhov
Telegram: @sarhov
2 Likes
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
New Member
1 0 0

Thanks 

0 Likes