Shopify collection issue with limiting and expanding the content

Question

I have a collection in Shopify that I want to only display 4 products from. Then, if a user clicks a button to expand and see more of the collection - the rest of the collection will appear. Currently I am simply limiting the collection to 4, what I'm trying to find is a way to make a link fill in the rest of the collection. Not sure if it would be better to use 2 different collections rather than limiting in this way. This is my current code:

<ul id="collection-grid" class="product-grid">


 {% assign collectionName = 'featured-products' %}

    {% for product in collections.featured-products.products limit:4 %}

    <div class="grid_left">
    {% include 'product-grid-item' %}
    </div><!-- end of grid_left -->
 {% endfor %}
</ul>



    <div class="expand_selection">

      <a href=""><img src="http://cdn.shopify.com/s/files/1/0173/1766/files/expand.gif" alt="Expand" /></a> Click to expand for more supplements...

    </div><!-- end of expand_selection -->

hjblok hjblok · Accepted Answer · 2013-09-09T08:39:29

You could use a hidden <div> and some javascript (I've used jQuery for simplicity), for example:

{% for product in collections.featured-products.products limit:4 %}
  <!-- first 4 products -->
{% endfor %}

<a href="#" onclick="jQuery("#rest_of_collection").show()">show all products</a>

<div id="rest_of_collection" style="display:none">
  {% for product in collections.featured-products.products offset:5 %}
    <!-- other products -->
  {% endfor %}
</div>

Shopify collection issue with limiting and expanding the content

1 Answers