Hey @SB Verma, can you send me a Webflow preview link? The issue seems that the list-collections.json does not contain any sections, so Shopify throws an error. Did you use the Liquify template and change anything on the List Collection page?
Thank you. Do you use Github? If so, can you send me the link to the repository? Or if not, send the theme as a file if possible.
While we wait a little explantation. The list-collection page is more for displaying all collections on the store. You dont have acess on the collection object directly. You need to loop over the collections befor you can access the collection object inside.
so li-for="collection in collections".
{
"sections": {
"list_collection_hero": {
"type": "list_collection_hero"
},
"list_collection": {
"type": "list_collection"
}
},
"layout": "list-collections",
"wrapper": "main.main-wrapper",
"order": [
"list_collection_hero",
"list_collection"
]
}
Can you paste the above part into your list-collections.json in Shopify directly? That should solve the issue with the wrapper.
As Jonas said, the collection list page is for displaying the collections. So to get into each collection, you would need to loop over every collection
What we normally do is We direct user from list-collection (all collection) page to collection(single collection) but
What our design demands is that we must showcase product of each collection on list-collection page and I'm using the Tabs for that
I'm rendering multiple collection (in kind of a similar way) on home page so I think what Jonas recommended will work
Thanks guys for the response @Jan @jonas.halbstark
On the other note
- is there any method( liquify attribute) we can use Metaobject values of product ?
- How to get colors of variant to use as background of element ?
Yup, you can access any liquid values. It just depends on your structure in Shopify.
So if you have a product metafield that's called color, then you can use li-object="product.metafields.custom.color" to display it. If you want to access a referenced metaobject that's called color, then it would be li-object="product.metafields.custom.color.value.FIELD_NAME"
To get the color of a variant, you could create a variant metafield or metaobject and set the style of the element to that field.
So for example: li-attribute:style="background-color: {{product.selected_or_first_available_variant.metafields.custom.color}}"
@SB Verma, i found some issues that may lead to this issue. In the head of the project there is a <style> tag not closing. Can you check this and try to convert again?
Very dumb mistake but that is working fine now
thanks for the help @jonas.halbstark 🤝
so you dont habe any issues anymore with missing wrappers?
No Problem 🙂 can always happen
@Jan
This didn't work as expected
Since shopify doesn't let you access color values(like hex code), you can't use random colors or names as background color.
I'm able to use variant name as background color only when it's a valid CSS name (like red, black, blue)
Is their any work around ??
