How to show all products on front page?

Highlighted
New Member
4 0 0

I am working on images for the sliders but am wondering how do I put all my products on the first page people see? So far I've only been able to figure out how to add the featured prducts. 

0 Likes
Highlighted
Tourist
6 0 2

Hi,

I'm not sure this is possible straight off (or is it?), but it can probably be done (untested) by either:

1. Looping through all collections and products within, but depending on your set up, you may get duplicate products, and the ordering will be strange).

2. Creating a collection with the criteria price is greater than zero (see link) and looping through all products in that category.

http://c.dgn.io/aeuz

Jon

0 Likes
Highlighted
Shopify Expert
195 0 23

Hi LaDonna, 

What theme are you using? Could you provide the password to your storefront so we can have a look?

Thanks,

Michael

Maukau - Shopify Experts in Paris, France
0 Likes
Highlighted
Shopify Partner
115 0 8

To loop through all products you can use this:

{% for product in collections['all'].products%}

  <!-- Your markup here -->

{% endfor %}

Just note that you are limited to 50 products per page, so if you have more than that you won't be able to have all of them on the front page.

---

For help using this with your theme we will need to know what theme you are using.

0 Likes
Highlighted
New Member
4 0 0

I  had it working for all of 5min and then messed something up. My shop is www.foxymountain.com and password kroopes

0 Likes
Highlighted
Shopify Partner
115 0 8

Here's a simple way to get all products on the front page for your theme.

Create a new snippet and paste this into it:

{% assign products_per_row = settings.home_featured_products_num %}
{% assign max_products = '50' %}

<div class="section-header text-center">
    <h3 class="section-header--title">Products</h3>
</div>

{% case products_per_row %}
  {% when '3' %}
    {% assign grid_item_width = 'medium--one-third large--one-third' %}
  {% when '4' %}
    {% assign grid_item_width = 'medium-down--one-half large--one-quarter' %}
  {% when '5' %}
    {% assign grid_item_width = 'medium-down--one-half large--one-fifth' %}
{% endcase %}

<div class="grid-uniform product-grid">
  {% for product in collections['all'].products limit: max_products %}
    {% include 'product-grid-item' %}
  {% endfor %}
</div>

 

Now include that snippet in your index.liquid file wherever you want it to show up. You should now have all your products on the front page.

I included the variable "max_products" so if you find that 50 products is too much for the homepage you can easily reduce the number by changing that variable.

0 Likes
Highlighted
New Member
1 0 0

When I do this, the images do not show...how do I fix that?

0 Likes
Highlighted
New Member
2 0 0

Hi How to show all the images?

0 Likes