Tutorial: How to add view all products button to Minimal Theme

New Member
4 0 1

Not sure if this is the right place to post this, but I just wanted to make a quick and easy tutorial to add a View all products button to the Minimal theme. I have realized a lot of people ask this, and I realized its really simple so here it is. 

Step 1: go to your minimal theme and go to edit code

 

I'm showing you how to add the button at the bottom of the page after your featured collection, so when you scroll through the items when you get to the end you have the option to see all products. If you would like to add this somewhere else then you can add this to another section if you're familiar with code. 

Step 2:  Click Sections and then Featured-collection.liquid. On line 54 and 55 you will see two of the same code </div>

In between the 2, you need to paste this code:

{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/all" class="btn">View All Products</a>
          </div>
    {% endif %}

Should look like this

 

</div>

{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/all" class="btn">View All Products</a>
          </div>
    {% endif %}

</div>

 

 

Step 3: after you pasted the code, scroll down to the bottom of the page. you will see

   "label": "Center text below product images"
      }
  
    ],
    "presets": [

 

 

Under "Label" there is a curly bracket "}" you're going to want to add a comma right after that curly bracket and then paste this code underneath the bracket you just added a comma to.

  {
        "type": "checkbox",
        "id": "show_view_all_button",
        "label": "Display the View All Button"
      }

Should look like this

 "label": "Center text below product images"
      },

  {
        "type": "checkbox",
        "id": "show_view_all_button",
        "label": "Display the View All Button"
      }

  ],
    "presets": [

Step 4: Now click save in the top right of the document and then Customize

Step 5: Now under sections click "Featured Collection" and there should be a view all products checkbox!

Additional Notes: If you want to change the text on the buttom to say something different just change the text of "View All Products" to whatever you want, for example I'll change it to "Shop All".

{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/all" class="btn">Shop All</a>
          </div>
    {% endif %}

 

1 Like
Excursionist
97 0 7

That is probably more elegant than what I did: I simply have a collection which contains 'all products' and I put this up as a featured collection. https://mountainherbs.net/

(I am a bit annoyed though that the label 'all plants' is in the middle of the picture and that the picture is a bit big in comparison to the letters- but that's another problem)

0 Likes
Shopify Partner
10 0 0

Hi Hayden,

Thank you for sharing your knowledge! It's easy to understand for people who don't understand code! Would like to know the code if I want to show the "View All" link at the corner instead of a button? And how to link the "View all" button accordingly to certain collection instead of view all the collection's products? Hope to hear from you soon :D

Thank you in advance!

0 Likes
Shopify Partner
1 0 0

Hi Leena,

Here's what I used to make a "View All" button for the specific collection featured.

Replace Hayden's Step 2 code with this:

{% if section.settings.show_view_all_button %}
          <div class="text-center">
          <a href="/collections/{{ section.settings.featured_collection }}" class="btn">View All</a>
          </div>
    {% endif %}

Everything else is the same as Hayden wrote.

Jason

0 Likes
Highlighted
Shopify Partner
10 0 0

Hi Jason,

Thank you so much! It's work! Really appreciate your help!

Leena

 

0 Likes
New Member
1 0 0

i followed the steps and i could see the new checkbox option but when i try to check it/enable it doesnt work :(

0 Likes
New Member
2 0 0

I have the same problem. Are there any news about that?

0 Likes
New Member
6 0 0

Bumping this.  Works great to get the option to select the button...but the button doesn't show up on the page.

0 Likes
New Member
6 0 0

What I'm noticing is the button will pop up when you first install a collection, but as soon as you link it to your collection...your images show up and the button disappears.

I've attached an image of it showing up...then disappearing after I link my collection.

(images and description blocked out because I'm just getting this up and it's embarassing)

 

 

0 Likes
New Member
6 0 0

After linking:

0 Likes