How to display products and collections in the same section

Store Design
1

I have a certain category of products on my home page “Camera and Filter Accessories". This category has several individual products and also one collection of 4 products. The way I have it set up right now is that I placed each of the individual products in its own “collection” (of one product) and use a “Collection List: Carousel” on the home page to display each of the collections (although some are just one product in a collection). The problem with this is that clicking on a collection that only has one product takes it to the collection page, then I have to click on the product to go to the product page.

How can I display each of the individual products and one collection in the same section on the home page and have the link go directly to the product page instead of the collection page?

2

What’s the homepage you are referring? and what theme?

3

(post deleted by author)

4

Hello @buckeyestargazer ,

This is a very common Shopify UX issue, and your instinct is right.

If a collection has only one product, redirect to the product page.

{% if collection.products_count == 1 %}
  <script>
    window.location.href = "{{ collection.products.first.url }}";
  </script>
{% endif %}
5

Hello @buckeyestargazer

Can products bypass collection pages?

6

Thanks everyone for the replies. The home page is buckeyestargazer.com and the theme is Horizon.

oscprofessional, where do I put this code? On that product collection page?

7

Hi @buckeyestargazer

Backup first and try this code.

In file sections/collection-list.liquid find code

  <a
    class="collection-card__link"
    {% unless onboarding %}
      href="{{ collection.url }}"
    {% endunless %}
  >

and replace with

  {% if collection.products.count == 1 %}
    {%  assign first_product = collection.products[0]  %}
    {%  assign collection_link = first_product.url %}
  {% else  %}
    {%  assign collection_link = collection.url %}
  {% endif %}
  <a
    class="collection-card__link"
    {% unless onboarding %}
      href="{{ collection_link }}"
    {% endunless %}
  >

This will change link from collection to single product

8

Thank you. I found this code in /collection-card.liquid and switched it out and all works well. Thanks!

1 Like