Can Debut theme populate the /collections/vendors page on Shopify?

JonnyMac
Tourist
11 0 1

Hi there,

 

I'm using the Debut theme and was wondering if there's a way to populate the page /collections/vendors in a similar way to the /collections page?

 

At the moment, my /collections/vendors page shows 'Sorry, there are no products in this collection'.

 

The URLs to my store are

 

https://wonderroom.co.nz/collections/vendors

 

https://wonderroom.co.nz/collections

 

Thanks

 

John

Replies 14 (14)

Lonecrowlab
Shopify Partner
36 1 4
JonnyMac
Tourist
11 0 1

Thanks for the reply, but it's not really want I'm looking for. I want the actual page with the slug /collections/vendors to be populated with the vendors. I tried following that tutorial, but created a collections template instead. The slug/handle is /collections/vendors but it doesn't seem to change anything.

neckerson
Explorer
50 2 15
JonnyMac
Tourist
11 0 1

Thanks neckerson for the reply.

 

I've already implemented that solution, but it's still not what I'm asking.

 

At the moment, there's a page https://wonderroom.co.nz/collections/vendors that has no products on it.

 

I want to populate that page with a grid of vendors in the same way https://wonderroom.co.nz/collections

 

John

neckerson
Explorer
50 2 15

@JonnyMac-- If you implement the solution on the blackbeltcommerce site, you'll end up with an ordered list of vendors with basic styling that can be accessed via the page URL.

 

If you want to duplicate the look on the collections page (it looks like the Debut theme), you'll need to decide if you wish to upload a custom image for each vendor, or simply use the first image for each vendor's product collection. If the latter, you'll be able to pull in the image via Liquid object, if the former, you'll probably need to hardcode the image asset_urls into the theme.

 

From there you'll need to create a new snippet with code that duplicates what's happening on the collections page. This shouldn't be too hard - what you're looking to do is carry over the styles & responsive image handling, substituting the product images with your vendor images. Look at the code inside sections/collection.liquid and snippet/product-card-grid.liquid to get started.

 

This will take some work, but when you're done, I think you'll accomplish what you're looking to do!

JonnyMac
Tourist
11 0 1

Thanks again for the reply, however, you're not reading my question properly. I want to populate the page https://wonderroom.co.nz/collections/vendors because right now it shows 'Sorry, there are no products in this collection'

 

Thanks

 

John

neckerson
Explorer
50 2 15

@JonnyMac :The problem with your requirement is that Shopify uses the /collections path to search for a specific collections. In this instance, it's searching for a collection named "vendors", and when it can't find it, it's displaying no products.

To get the functionality you're looking for, you'll have to create a custom page that displays links to collections in a grid form as you describe. 🙂 

JonnyMac
Tourist
11 0 1

@neckerson 

 

Yes, but is there a way to do this, so that the page at the https://wonderroom.co.nz/collections/vendors can be populated. Everything else I can figure out, I just want the page at that specific URL populated.

 

Thanks

 

John

neckerson
Explorer
50 2 15

Unless there's a clever way to do something with a collection of collections, or a third-party app that I'm unaware of, I think you're limited to using a URL redirect & a custom page to achieve this. There does seem to be a hole in Shopify's features where this is concerned...

JonnyMac
Tourist
11 0 1

@neckersonthanks again for the reply.

 

Yea, I tried redirecting, but it didn't seem to work. I'll give it another try.

 

Thanks

 

John

PaulNewton
Shopify Partner
6274 573 1319

You could try creating a collection "vendor" or "vendors" so it actually exists to avoid oddities.

 

In your collection template find the relevant areas|loops and replace or surround it with:

 

{% if collection.handle == "vendor" %}
Do specific stuff if this IS the vendor collection
{% endif %}

or 

{% unless collection.handle == "vendor" %}
Do stuff when it's NOT the vendor collection
{% endunless %}

You can use shop.vendors to go over all the unique vendors for a shop in liquid

 

{% for vendor in shop.vendors %}
  {{ vendor | link_to_vendor }}
{% endfor %}

Of course to have manageable descriptions or images per vendor you'll want to setup a collection(manual or smart) per vendor, which is different than search filtering a collection by vendors.

Doing that you'd need to grab collections by handles that match vendor names.

 

 

{% for vendor in shop.vendors %}
  {{ collections[vendor].description }}
  {{ collections[vendor].image }}
{{ collections[vendor].url}} {% endfor %}

Note: you'll need to "handleize" vendor names for this to work smoothly using assign,capture and the handelize filter.

 

 

Note: /collections ,aka the collections listing page, aka collected collections , is commonly using the template list-collections.liquid example in the slate starter theme.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


DavidModus
Shopify Partner
33 2 9

Hi Jonnymac, I like what you did,I've checked out:

https://wonderroom.co.nz/pages/brands-artists-2

 

How did you do it?

 

David

JonnyMac
Tourist
11 0 1
hi David. Sorry I couldn't tell you. I initially set up this site but
handed it off in 2019. It's since been updated
DavidModus
Shopify Partner
33 2 9

Thanks, I've got the code below working, I can make it look pretty with my theme 🙂

 

<ul class="brand-list">
{% for product_vendor in shop.vendors %}
{% assign handle = product_vendor | handleize %}
{% assign collection = collections[handle] %}
{% if collection %}
<li>
{% if collection.url %}
<a class="brand-title" href="{{ collection.url }}" title="{{ collection.title }}">
<img style="margin: auto; border-radius: 1px;" src="{{ collection.image | image_url: width: 200, height: 200 }}" alt="{{ collection.title }}">
<p>{{ collection.title }}</p></a>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>

 

DDH