Want practical Shopify Tutorials to take the headache out of updating your store, and help you increase your sales? Join the Blackbelt Commerce VIP Dojo.Note: Since we published the article below back in 2013, Shopify has updated their tutorial with a shiny new version that works much better. We’ve left the post below in case you’d like to refer to it, but your best bet is to follow Shopify’s new version here:
Need to show a collection of products, on a page in your Shopify Store?
Shopify’s initial article provides a decent starting point, but there’s a problem with it.
Using the method above, you can end up with the same product image over and over, if your collections contain the same first product. The reason is this: Shopify’s solution above takes the FIRST image of the FIRST product in that collection.
If you have two collections – “Under $100” and “Hats“, the first product could be the same – a hat priced at $20. That same hat will show TWICE when you add your collections using the method above. This doesn’t look good.
What we need: The ability to set and use the COLLECTION image instead.
Showing a collection image – instead of a product image – allows us to set a specific image for each collection and show it here on the page. The way this works is:
- If there is a collection image, show it. This means we could have a unique image for our “Under $100” collection and our “Hats” collections in the example above.
- If there is no collection image, show the FIRST image of the FIRST product in the collection. This is a failsafe. No collection image? Show a product image instead, so we don’t end up with a blank image.
How to do it: Here’s the code you want
Pssst… want more business-growing tips and solutions like these? We built a whole suite of useful add-ons for serious Shopify store owners, based on our work on over 250 Shopify Projects.
→See the Shopify Toolkit here..
Now, on to the rest of the tutorial…
Follow the tutorial here, with one crucial change: In linklist.l iquid (the snippet this tutorial will ask you to create), use the following code instead. You may need to tweak the CSS settings – this snippet is built for the wonderful Mobilia Theme – but the logic and layout will work for any theme.
Here it is:
{% if linklists[linklist].links.size > 0 %} <!-- BEGIN table.products --> <table class="products"> {% tablerow link in linklists[linklist].links cols: 3 %} <div class="one-third column thumbnail"> <a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection."> {% if link.object.image.src %} <!-- collection image --> <img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" /> {% else %} <!-- if there's no collection image, show the first product image instead --> <img src="{{ link.object.products.first.featured_image | product_img_url: 'large' }}" alt="{{ link.object.title | escape }}" /> {% endif %} <br/><span class="info">{{ link.title }}</span> </a> </div> {% endtablerow %} </table> <!-- END table.products --> {% else %} <p>Please {{ 'create a link list' | link_to: '/admin/links' }} that contains links to the collections you wish to feature here. The title of that link list must be <strong>{{ linklist | replace: '-', ' ' | capitalize }}</strong>.</p> {% endif %}Wrap-Up
- Sometimes, we want to show collections on a page. This is often used in sub-category pages.
- Shopify’s tutorial is a great start, but there’s a gap. It doesn’t grab the collection image – just the first product’s first image – so you can end up with the same image over and over again, which doesn’t look good.
- To avoid this, follow the same tutorial, but use the code above in your new ‘linklist.liquid‘, instead of the original.
***
Pssst… want more business-growing tips and solutions like these? We built a whole suite of useful add-ons for serious Shopify store owners, based on our work on over 250 Shopify Projects.
→See the Shopify Toolkit here..
***
Thank you for showing interest in Shopify Insider Blog @ Blackbelt Commerce. We also have some top blog recommendations for you to check out; Media Gallery For Shopify which social media network is good for your brand?, image gallery,how much does it cost to hire a shopify expert?, andSEO For Your Shopify Store. Keep a lookout for new blog posts.
Questions? Comments on a better way? I’d love to hear them in the comments. If you’d like us to take a look at the page on your shop, please be sure to include a link (with the password if it’s password protected), otherwise, we won’t be able to see it �� Thanks! Kizunaquant 評判
Hey Tristan,
Awesome post! I’m getting some funny behavior on my store with this:
Here are the links that are returning:
www.mystore.com/pages/”/collections/flour-grains-rice”
www.mystore.com/pages/”/collections/herbs-spices-seasonings”
Any ideas on why this is happening?
Hey Tosin,
Glad you found it useful.
Looks like you have some extra quotes in there where it’s generating the collection + product. My suggestion would be to check the line of code that’s generating the part after /pages/, as a first stop. Also – you won’t want /pages/ AND /collections/ in the same URL, as that won’t work. It should be one or the other.
So – it’s probably a line of code that needs fixing up – where the last part of the URL is being generated. Hope that helps!
Tristan.
Hi, Im having exactly the same problem as above. I copied the code as shown and added the linklist name in. I’m trying to show the collections on my home page.
Thank you. 🙂
Hi there, I’d need a link to be able to see it 🙂 What happens when you use the above code?
When I use your alternate code – I get the same extra ” in my links, and gives me a placeholder instead of the image.
When I change the snippet to the one in the shopify instruction it pulls the image, and does not give the extra “
Hi there, could you send a link to your page? I can take a look. Thanks!
I have added one template called christmas-offer and one collection called “christmas offer”.Now I want to add this collection to christmas offer page.Please suggest the solution.
Hi there, could you send a link to your page? I’d need to see that in order to be able to make a suggestion 🙂 Thanks!
Thank you so much for posting this free content! I’m sure at some point I’m going to need expert help and you will be first on my list since you’ve proved (through this forum) that you know what you are doing. Thanks for the help and compliments to your marketing strategy. Thanks so much!
Thanks Sarah, glad you liked it!
The password to get into the store is 4167858618
I followed all the instructions, but it keeps giving me this:
Please create a link list that contains links to the collections you wish to feature here. The title of that link list must be Norval morrisseau.
Any ideas?
Hi Janet,
That’s a guideline in itself 🙂 Did you create the link list, under Navigation?
Hello i am using the https://icon-shopify-theme.myshopify.com/ theme, are you familiar with a way to show the collections in the same format as the feature products are showing?
I dont want a caousel, i just want a row of four selections with showing the collections that way instead of a carousel, Let me know if you can help. thanks
Hey Paul! This should be more or less built into your theme, using the collection-list.liquid template. Looks like it’s working quite well, as per this page: https://icon-shopify-theme.myshopify.com/collections
If that’s what you need, you can just link there from your navigation. If not, just respond here and I’ll see if I can help further.
Cheers,
Tristan.
Thanks SOOOO much. I struggled all morning annoyed at my lack of experience in liquid. The only, and literally ONLY thing I’d want past the point of my new custom collections page shown here: https://flyryde.myshopify.com/pages/design would be if it could react to page size the same way my main collections page does. In other words, on mobile it would size down to show only 1 collection per row instead of sizing down the 3 collections currently shown.
Either way, HUGE thanks again!
Hi there,
Glad it helped! Well done, the page is looking nice 🙂 For mobile view, it differs by theme. Since you’re using BlockShop, my suggestion would be to try adding the responsive div classes to the page you created. Here’s an example which you can apply to the 3 x columns:
Instead of just
Dear Tristan,
Hope you are doing great. Need a small help please. I have implemented the page.list-collections code and currently having an issue where all collections are displayed in the center of the page.
How can I get them to form a row (next to each other)
Regards,
Srinivas
Hi there — could you please send a link to the page? And I’ll take a look and see if I can recommend. (Can’t quite tell without seeing the page 🙂 ). Thanks – Tristan.
HelloTrsitan!
Thank you for posting this great tutorial, i have very similar request, buy a little bit different.
I have created custom Page, and want to add multiply collections, but dont want them to be auto generated, i just want to insert line of code that will show collection, i managed to display featured product collection, but cant find a way to display different collection. Any suggestion?
Here is the layout
https://drive.google.com/open?id=0B9_r3iDkYzEUZE9SVmxWUlp6ZkRhVFdGWFQ3c09tMXFTa3Bv
Basicly 1 custom page will have 3 collections .
Best regards Dimitri!
Hi Sam! Thanks for reading. Unfortunately this one is a bit more complex than what we can do here, but if you’d like some help feel free to contact us and we may be able to help as a mini-project 🙂 Hope that helps, just let me know if you have any other questions.
Thanks,
Tristan.
Hi Tristan,
I followed the Shopify tutorial, and tried to implement your changes because their’s is giving me a column of collections instead of rows. Unfortunately I can’t seem to find where the linklist.liquid creation is mentioned or used in their tutorial or yours.
Your help/insight would be greatly appreciated.
pwd: tracietricia
Hi Bob, looks like the password isn’t working, so I can’t take a look at the moment. Feel free to let us know if it opens later and we can take a look. Cheers!
Hi I’ve tried to follow this tutorial to the letter, but whenever I assign the page template I’ve created to a new page, it seems to overwrite my page title and display “Product Collections” – and just shows a page of all of my collections – not the ones I’ve made out in the Link List.
I’ve tried it twice, with 2x different pages and link lists and have the same result so far. Can you please point me in the right direction?
The page in question is https://rideonbmx.com.au/pages/testcollections
Hey Chris! Looking mostly good, but I can see what you mean about the title. It all depends on your theme, we’d need to take a look at the backend of your store to check that out. We’d be happy to do so, but that’s a little more than what we can cover for free as part of the post. If you’d like us to delve into it in a mini-project (1-2 hours would likely cover it), please contact us over here and happy to help: https://www.blackbeltcommerce.com/contact/
Thanks!
Tristan.
Hi Tristan, I’m using the Supply theme and don’t have linklist.liquid. So what can I do?
HI Gary! Best bet would be to create linklist.liquid, then insert it using:
{% include ‘linklist.liquid’ %}
at the right place in your template. Does that help? 🙂
Hey! This is really exciting… When I paste it in though it says “Please create a link list that contains links to the collections you wish to feature here. The title of that link list must be .” on the page I created… What do I need to change in the coding to fix this?
I’m using Blockshop theme
Hi Lani – glad to help. Did you try creating the link list? 🙂 What this means is, go to Online Store > Navigation and create a new link list, per the guidelines 🙂 Hope that helps, just let me know if you have any other questions.
Thanks,
Tristan.
In other cases, these agreements may be the standard form of real estate lending within their jurisdiction. Familiarize yourself with certain regulations in relation to your restrictions on abandoned properties
in storage facilities. We will pinpoint the traffic driving service which, if done correctly, can be be extremely good for you as the company, as
well as to customers, which can transform into regular clients, as is necessary with such an internet business.
Hi the link to the tutorial is dead, so I have no idea how to apply this edited code and how it affects the original. Is there somewhere that I can access the full tutorial?
I have noticed you don’t monetize your website, don’t waste your traffic,
you can earn additional cash every month because you’ve
got high quality content. If you want to know how to make extra money, search for: Ercannou’s essential adsense
alternative
How is that?