Simple theme add " see more " button or collection link to featured collection

Shopify Partner
5 0 2

Hello

As stated in the title, I'm using Shopify Simple theme.

I want to add a See More button to the featured collections on the front page, the See More button will link to the full collection. 

Either that, or I would like to know a way to make the Featured Collection title to have a hyperlink to the actual collection, which the users can click and get sent to the collection.

I have tinkered with the theme before and successfully made my changes without any help, but after some hours of searching and tinkering I didn't come up with anything for this specific request.

Thank you. 

1 Like
Shopify Partner
1838 174 605

Hi there remus2232

The section responsible for rendering the featured collection on the front page is in Sections / featured-products.liquid. Now, to add a link to the entire collection we need to:

  1. Determine where to add it - you mention a more button or a hyperlinked title
  2. We only want to display the hyperlink if there are more product items in the collection than the feature section is setup to show

Let's keep it simple and add a hyperlink "see more" right after the feature collection title.

Around line 10 you will find the <h2 /> title tag:

{% if section.settings.title != blank %}
<h2 class="small--text-center">{{ section.settings.title | escape }}</h2>
{% endif %}

And now let's replace that with:

{% if section.settings.title != blank %}
<h2 class="small--text-center">
  {{ section.settings.title | escape }}
  {% if collections[featured].products_count > total_products %}
  - <a href="{{ collections[featured].url }}">see more</a>
  {% endif %}
</h2>
{% endif %}

That's it - we're done!

We check how many products are in the collection[featured] with the products_count property and only if there are more ">" than total_products do we show the link. The total_products variable has been assigned further up at line 4. The URL to the collection itself is a property of the collection object so we pass that in the href attribute.

A few bits and bobs to keep in mind should you want to make it even better:

  1. Make the "see more" text translatable using translation keys
  2. Add some CSS to make it prettier
  3. Probably forgot something so let me know if something pops up ;-)

Hope that helps!

I turn coffee in to code - since 1998
3 Likes
Shopify Partner
5 0 2

Hello, Karl.

You're an absolute B E A S T ! 

Thank you so much, my friend. 
This is my first contact with a templating language so every little bit helps.

I'll figure out how to position it on my own, that shouldn't be too hard

Thank you 

1 Like
Shopify Partner
1838 174 605

You're welcome :-)

To be completely honest with you, I just started 2 weeks ago because my wife needs customizations on her store. But I've been a software engineer for 20 years so learning this stuff comes easy. That said, questions like yours make me learn how to do it. So I'd need to thank you because now I also know how to and where to find these bits and pieces should my wife ever need them.

If I may, since you mention it is your first contact with any templating language, offer 2 recommended resources to help you along as you get more comfortable with Liquid.

  1. An in-depth overview covering Sections in Shopify - the why, the how and the limitations.
  2. A quick cheat sheet of all Liquid objects available in Shopify templates - much more accessible for a quick reference than clicking through the many pages on Shopify docs

Wish you all the best!

I turn coffee in to code - since 1998
2 Likes
Shopify Partner
5 0 2

Man, you kinda read my thoughts, hahaha.

I had it in the back of my mind to ask you for some 'condensed' resources on Liquid (pun intended), as I feel the official Shopify Documentation on Liquid contains information that is too far and in-between and would take ages to weed out the uninteresting bits to get to what I want.

I'm a developer/designer myself, although with only 1 year of experience up to this point.

Thank you so much for your help

All the best!

0 Likes
New Member
2 0 0

Hi Sir, I'm using Brooklyn theme, in my case i tried paste the code in and it doesn't work, perhaps Brooklyn script to get the total products count is different than Simple theme, can you show me how it is done? Thanks in advance.

0 Likes
Tourist
7 0 0

I use Brooklyn theme and have the same problem 

can you help me find the solution?

0 Likes