d
Topic
hayden Member
Posts:
4
Last edited 7 months ago

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

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 %}

 

i
Replies
dandelion Member
Posts:
99
7 months ago

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)

Leena L. Member
Posts:
10
Last edited 7 months ago

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!

Screen shot 2017 04 05 at 12.06.08 pm thumb
Posts:
1
7 months ago

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

Leena L. Member
Posts:
10
6 months ago

Hi Jason,

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

Leena

 

Posts:
1
3 months ago

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

shopx Member
Posts:
2
29 days ago

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

cyrus Member
Posts:
6
9 days ago

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

cyrus Member
Posts:
6
9 days ago

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)

 

 

Button thumb
cyrus Member
Posts:
6
9 days ago

After linking:

Button disappears thumb