Add Sub-Collections To Your Collections Pages (Full Tutorial)

Рет қаралды 2,118

Күн бұрын

Your navigation menu is the map to your store. From simple to advanced, there are many different ways to approach them.
One way is to add subcollections to your collection page, and in this video you learn how.
This video is an updated version of Level 3 from our video "Shopify Navigation Menus at 5 Levels of Difficulty" ( • Shopify Navigation Men... ).
----------------------------
📄 Code for this video can be found here: theprompted.co/blogs/tutorial...
👉 Want to hire us for personalized help? Book a consult call: theprompted.co/pages/hire-us
▶️ Subscribe for more videos like this ➡ @theprompted
----------------------------
TIMESTAMPS
00:00 - Introduction
00:35 - What it looks like to have subcollections added
01:38 - Creating the subcollections metafield
03:35 - Editing the theme code
04:10 - Adding the subcollection section in the theme editor and demo customization
06:27 - How to create a collection with only subcollections (no products)
09:30 - Why we don't use the default collection list
11:24 - Final thoughts
----------------------------
#shopify #tutorial #ecommerce #navigationmenu
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
----------------------------
Music track: lucid by massobeats
Source: freetouse.com/music

Пікірлер: 61

@MK-Tech 5 ай бұрын

Thanks for another great video.

@FireFly969 4 ай бұрын

I enter to the video, I think from a channel that has 100s of subs because of the quality of the looking of the channel and the video thumbnail, and I get surprised with the number of views and subs. Great content quality, it's just a matter of time to make 100s of subs, keep up the great work ❤

@theprompted 4 ай бұрын

Thank you!

@Mimi-w5x 5 күн бұрын

Thank you so much 👍👍 one more detail to add, how to hide the default name of the collection if we want to show the name on the image like you have in the video. thanks again

@mdmostofasujon9958 Ай бұрын

Great video

@CHBeck0514 2 ай бұрын

Thanks! This is exactly what I need to display my sub-collections. The only problem for me is the section for sub-collections has the option to "Enable swipe on mobile" but since I am using multiple sub-collections, now I have multiple rows of sub-collections showing on desktop. How can I enable a carousel on desktop so that all of the sub-collections remain on the same row?

@goldfishman2 5 ай бұрын

Hey man, still loving the content! I hope the algorithm favors you soon you really deserve it. I am curious if it would be possible to code into the store a review type app like Loox? I understand it would probably be a big undertaking and maybe more complex than it is worth, but I know I would personally pay money for the code if it is possible for you to do. Much love ❤

@Klee87278 5 ай бұрын

U can add custom reviews section but u will be adding the reviews manually as blocks, and customers will not be able to integrate with nor post reviews since that require access to the theme settings and adding blocks. it's better to use app for reviews tbh unless you're fine with manual reviews and not letting customer post there own

@theprompted 5 ай бұрын

we just switched from loox to judge.me and have found it quite good so far. using the paid version, but they have a free tier too

@TenKeep-qx9be Ай бұрын

hi, once again thanks a lot! Would like to ask that is it possible to add the subcollection on homepage as well, something like Pink Lily's website?

@theprompted Ай бұрын

To add a list of collections, you can use the default "Collection list" section. It will give you the option to select a number of different collections and show their cover photo. This gives you a base to work with, but if you want it to have a different design aesthetic, then this will require some custom development.

2 ай бұрын

Amazing as always, I'm just wondering how to add a title to this custom collection? I'm going to use it as a "complete the look" section

@theprompted 2 ай бұрын

I'm assuming you don't mean the collection title that is set in the Products --> Collection area of the Shopify admin? Because that title would still show when you add the subcollections.

2 ай бұрын

@@theprompted exactly, I mean adding a title to the subcollection itself so it shows up as a different collection

@MK-Tech 4 ай бұрын

Just followed your great tutorial, and it looks and works great. However to be able to replace our custom made collection list section that I have since before there are a few features that im missing in this list. Would love to know how one could edit the code to improve this list so it gets the following features?: 1. Display up to 6 collections on desktop, instead than max 5 (found the number value in the code and it worked). 2. When adding more collections that fit on one row, the "Enable "View all" button if list includes more collections than shown" feature doenst work, it still add another row on desktop to display all added collections. 3. Display the collections as a carousel also on desktop (like swipe option on mobile) if more than the max numbers of collections per row are added. 4. When it's displayed as a carousel on desktop (as for improvement no 2 above), show a sneak peak of the next one that you can scroll to fully display. The same way as it is on Swipe on mobile where it's displayed 2 +1/3 ish where the +1/3 is to display that there is more to see. 5. Add a custom title to display under the collection image to display the custom name instead of the collection name. 6. Instead of showing the collection banner image, show the main image of the first product in the collection selected. 7. Possibility to add a custom image instead of displaying the default image. 8. Add a title for the Collection List to be displayed for example top left of the list. For reference, the "custom made collection list section" that im referring to above can be seen on one of my sites for example here: tacngear.se/collections/ryggsackar-vaskor

@theprompted 4 ай бұрын

The custom collection list section on your site looks quite nice. Is there a reason you no longer want to use it? I've added your feature requests to my queue. Considering how this list is growing and this being a pretty specific use case, I might not get to this one in a while (unless there's others that want these features as well). I hope you understand!

@shahzaibnaseer154 5 ай бұрын

Please can you make a video on how to make a marque and featured on effect and also one video on floating objects on shopify

@theprompted 5 ай бұрын

Do you have an example of the result/feature that you're looking for?

@videosfromali 4 ай бұрын

Great content! My question would be: Is there a possibility to make subcollection list dynamic where it would show elements if they meet the filtering conditions? And may be also show the number of products inside the sub-collection? Keep up doing helpful content!

@theprompted 4 ай бұрын

Thank you! Theoretically possible, but unsure how responsive it would be. I'll add this to our list to look into

@racheldykes8529 4 ай бұрын

I think rather than having to make more collections, what would be helpful is if you could create some image links, similar to what is shown here, but instead of linking to another collection, it applies a filter by clicking the image, such as a product type filter or a custom filter you have created with metafields. That seems like less work but also more technically difficult. This would also mean someone could easily unfilter the list.

@theprompted 4 ай бұрын

Interesting suggestion! I'll add this to our list

@thedharmabum 3 ай бұрын

@@theprompted Please do. Most of us already use tags/filters so using those instead would be very helpful. Great video.

@NivethaArul-oq5ld 3 күн бұрын

Hi, missing translation: "t:sections.collection-list.settings.image_ratio.label" i keep getting this

@Klee87278 5 ай бұрын

Hey i got a great next video idea that's so needed in short format era nowadays And that's adding slideshow of hosted TikToks with url or embed code Gosh it will improve the stores x10 "it will also be great if it can include the ability to add insta reels and KZfaq shorts with it but not sure if it's possible"

@theprompted 5 ай бұрын

Great idea! Will add it to the list to investigate

@philippe-causse-berlin 4 ай бұрын

another great tutorial, thanks. Is it a way to make the thumbnails of the sub-collections the same size as the products thumbs? or did I miss something? Thanks.

@theprompted 4 ай бұрын

Yes, I explain how to adjust the size of the images at 05:00 of the video

@philippe-causse-berlin 4 ай бұрын

Thanks, I found it, but I have another small issue, the button show all is not visible on my shop. Can I send you a screenshot somewhere? @@theprompted

@theprompted 4 ай бұрын

Yes, just host it somewhere and drop a link here.

@ebbono8562 5 ай бұрын

How can you filter by product type? Is it possible maybe to add a filter based on specific tags?

@theprompted 5 ай бұрын

If by filters you mean the collection filters, then that's a different video - you can learn more here: kzfaq.info/get/bejne/bdmDfdWhrqy7dIk.html If you mean the sub-collections, then you actually select them for each collection using the collection metafield.

@nafisanakhuda4115 Ай бұрын

Hi... i am working on Gain theme of Shopify. please guide me as to where i can get the coding for new section.

@theprompted Ай бұрын

This tutorial is designed for the free Shopify themes like Dawn, Sense, Refresh, etc. Since Gain is a premium third-party theme, most likely you'll need some additional development to adapt it to your store. You can try doing that yourself or hire a developer to help. If you're interested in hiring us, you can book a call at theprompted.co/hire-us

@bradleymontanez-kf5oz 3 ай бұрын

I'm getting this error- Liquid error (sections/collection-list-custom line 36): Could not find asset snippets/card-collection.liquid any advice on whats going on here?

@theprompted 2 ай бұрын

The theme can't find the file "collection-list-custom.liquid". Did you follow the instructions to create it? If not, you'll need to do that. If you did, is it possible you created a snippet and not a section? Both snippets and sections can be .liquid files, but in this case you'll want it to be a section.

@570n312 4 ай бұрын

Im looking to do similiar but by using metafields to place a featured collection on the product page if the meta of both product and collection match.

@theprompted 4 ай бұрын

Sounds interesting! Can you describe a bit more what you're looking to do with an example?

@570n312 4 ай бұрын

We sell car parts and some customers are coming to the store by hitting the product page, we want to simply display a featured product at the bottom of the product page to show them other products for that vehicle with a button saying view all. We want to mark the collection of that make and model with make and model metafield. The products would also have the same make and model metafield. This way we could create just one vehicle template "vehicle-specfic" and the metadata would sort the rest out. The issue I'm facing is that the normal theme editor approach doesn't allow for a dynamic value from the collections to product or vice versa. There would need to be a code added to match the two and push the collection through.

@theprompted 4 ай бұрын

I'm not entirely understanding the approach you're trying to take, but if I understand correctly you want the final result to have: 1. The collections are dynamically created based on the make and model that the car part is for (instead of manually creating the collection) 2. The suggested featured collection or related products at the bottom of the product page to be other parts from the same model and make of the car, which will be automatically matched up instead of having to define them individually product by product 3. Other portions of the product template to be specific to the car make and model so that each car make has a "template" At a high level, for each of the points above, you could: 1. Use tags to create the collections 2. Use a featured collection that pulls the collection that's been defined by a product metafield that identifies the make and model. For the automatic matching, one potential solution is to use a custom featured collection that does the car and make lookup based on a metaobject that maps how which collection matches which car make and model. You are correct that this would require custom coding. 3. This one will depend on what you're hoping to achieve. Basic page elements could also be defined with metafield, but if you have more complex design requirements you may require custom code to add additional sections or blocks.

@570n312 4 ай бұрын

@@theprompted if a product has a metafield and it matches the metafield of a collection then display that collection on the product page. The collections are already populated, and both the collection and product have matching metafields. The magic happens in the code where I need to display said collection if both metafields match.

@tubeta028 Ай бұрын

Hello, I am following your video and it works for my menu but I can't make it work for my home page, what happens? I really want to add my custom collection list section to the home page, any hint or help is very much appreciated. The problem is that the section is added but displays nothing. Thanks for your video.

@theprompted 27 күн бұрын

Thanks for the suggest! Will consider this for an updated version.

@Jamesaflacey 3 ай бұрын

brilliant video. Where did you copy the code from?

@Jamesaflacey 3 ай бұрын

the code doesn't work for me

@theprompted 3 ай бұрын

Are you getting any errors? What theme and version are you using?

@JoackimJohansson 4 ай бұрын

hmm am i stupid? Its not showing up on edit site. Is it same for Enterprice theme? Many thanks for video!

@theprompted 4 ай бұрын

Nooo definitely not stupid! While I haven't tested it on the Enterprise theme I would still expect something to show up. A few things to double check: - Does your metafield handle match the one used in the video (ie: subcollection_list) - Did you add at least one collection to the metafield of your desired collection? - When editing in the theme editor, are you on the actual collection that you added the metafield?

@nafisanakhuda4115 Ай бұрын

where to get the new code for new section?

@theprompted Ай бұрын

Link is in the description

@dietyadjacent3200 4 ай бұрын

Did you remove the code?

@theprompted 4 ай бұрын

The code is still there in the link in the description. If you click the triangles it will toggle open to show the code

@wifixs6580 Ай бұрын

card-collection file does not exist :( do u have the code ?

@theprompted Ай бұрын

Which theme and version are you using?

@dheerajvyas8783 Ай бұрын

metafield on collection dashboard is not showing debut theme

@dheerajvyas8783 Ай бұрын

now metafields added but that section not showing i mean when in your theme you can add section in your template but i can't

@theprompted 27 күн бұрын

If you're on the Debut theme, then that's an older Shopify theme that doesn't support sections like we show in the video. You will need to upgrade to the newer Shopify 2.0 themes (ex: Dawn, Refresh, Sense, etc) which support all the new functionality, including sections.

@Top_Reel-Ari Ай бұрын

im try its not working i created double sub collection now its not show products why

@theprompted Ай бұрын

I'm sorry it doesn't work for you. To troubleshoot, you'll want to look at a couple things: 1. Are you using a compatible theme and version? This was designed for the free Shopify themes on v13. So themes like Dawn, Refresh, Sense, etc will work. 2. Did you make a mistake when implementing the solution? You may want to install a fresh new version of Dawn and try it again. Often what happens is there was a step that was missed that can be found by simply starting from scratch. Hope that helps!

@Top_Reel-Ari Ай бұрын

@@theprompted my theme is refresh and i just found salution for it , in sub collection i add it to page and the down collection so its ok its not perfect but i am just a week to start so i alread reach and learn alot i will start watching your videos more and learn thank u so much