Hello Shopify Developers.
I'm a newbie on Shopify. I want to build a menu just like http://www.nastygal.com/. It shows menu items and featured products in menu area.
Would you give me a suggestion how to make a menu like this?
I'm not sure this is the best idea, though I think that I can create special collections to assign menus. I want to add a custom field in collection page to assign category to special menu. I noticed that I may use meta-fields for this but not sure.
How to add meta-fields to description fields in collection admin page?
How to get values from meta-fields in front page?
I'm open for suggestions, please teach me.
Best regards, Lorant.
I'd say there was a couple of steps to making this work, but it shouldn't be hard.
Create a collection that contains the products in it that you would like to show in the menu.
In your navigation link list create a link that points to collection you want to show in the menu. Call it something like show-products.
The menu liquid would look something like this:
{% assign linklist = linklists.main-menu %}
{% for link in linklist %}
{% if link.title == 'show-products' and link.type == 'collection_link' %}
{% assign menu_collection = link.object %}
{% for menu_product in menu_collection.products %}
{{ menu_product.featured_image | product_img_url: 'compact' | img_tag: menu_product.title }}
{{ menu_product.title }}
{% endfor %}
{% else %}
{% include 'my-normal-menu-link' with link %}
{% endif %}
{% endfor %}
Note: this code is untested, but I don't see why it wouldn't work.
Related
I have create many collections like All Products, New Releases, T-Shirts, Pants etc. And I have two categories of products like Men's and Women's. Some collections specifically for Men's and some collections specifically for Women's. I create two tags Men's and Women's. I create menu by collections query by tags. My my products collection url is like this:
/collections/all-products/mens
/collections/all-products/womens
/collections/new-releases/mens
/collections/new-releases/womens
/collections/bras/womens
I want to show some text and menu list when collection.url show /mens or /womens.
{% if collection.url contains mens %}
do something
{% endif %
Above condition not working. I know why not working because {{ collection.url }} provide /collections/all-products. {{ page.url }} will not work for collection object. I haven't find any suggestion or liquid code reference where show men's or women's products in collections page it will show specific text.
If use in loop it will work.
{% for product in collection.products %}
{% for tag in product.tags %}
{% if tag contains 'mens' %}
<h3>Mens Products</h3>
{% endif %}
{% endfor %}
{% endfor %}
Above code will not work for me because it's inside loop. I need to show outside of loop. I don't understand how to achieve it. here is the reference site. Below have image how I want.
Need help!
You have access to the current_tags, refer to docs: https://shopify.dev/docs/themes/liquid/reference/objects/current-tags
This will return an array of all the tags you are viewing at the moment (in case you are viewing more than one tag).
So your check will be:
{% if current_tags contains 'mens' %}
do something
{% endif %}
That's pretty much the just of it.
I really like how the menu is coming along! Here are some ideas you could consider for your category specific menu, if you've not gotten where you want yet.
For your url strategy, what you're looking for is handle. Handles are specific to liquid. https://shopify.dev/docs/themes/liquid/reference/basics/handle
You could make a custom collection template if those 2 categories need to be fairly different: https://shopify.dev/tutorials/customize-theme-create-alternate-templates. If you do that, then you can use template_prefix from the collection object.
Assign a variable outside your loop and then set it inside the loop like:
{% assign is_mens = false %}
{% for tag in product.tags %}
{% if tag contains 'mens' %}
{% assign is_mens = true %}
{% endif %}
{% endfor %}
then {% if is_mens %} or {% unless is_mens %} for your dynamic content, or a case statement to define content specific to categories in your menu.
Hope this helps!
Just wondering why this is not populating products in the Shopify page template but it's working normally in the article template:
{%- assign firstsecthandle = page.metafields.first-sect.rev-handle -%}
{% for product in collections[ firstsecthandle ].products %}
...
{% endfor %}
As a result of this, I get the list of collections instead of products on page template but on the article template I get products.
On the page template it works only if I put the exact URL handle of collection:
But I need collection-handle to be dynamically declared not to have static value.
A variant which is working with a static 'collection-handle':
{% for product in collections.collection-handle.products %}
...
{% endfor %}
I'm trying to set up a page which displays a list of collections, like the general 'list-collections.liquid', but only display collections that contain products with a certain product tag.
I've tried doing it like this:
{% assign var = 'test' %}
{% assign tagtrue = false %}
{% for collection in collections %}
{% unless collection.handle == 'frontpage' %}
{% for product in collection.products %}
{% for tag in product.tags %}
{% if tag contains var %}
{% assign tagtrue = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% if tagtrue == true %}
<a href="{{ collection.url }}" title="{{ 'collections.general.link_title' | t: title: title }}">
{% if collection.image != blank %}
{{ collection | img_url: '480x480' | img_tag: collection.title }}
{% elsif collection.products.first != blank %}
{{ collection.products.first | img_url: '480x480' | img_tag: collection.title }}
{% else %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg placeholder-svg--small' }}
{% endif %}
</a>
<p>
{{ collection.title }}
</p>
{% endif %}
{% endunless %}
{% endfor %}
But when I go to the collection list page this still returns all collections. Any ideas how to do this?
If you look at the documentation, you'll find that a product has a special method on it labelled collections. In other words, that gives you a list of all the collections the product belongs to.
So now on to your question. You ask how you can display a list of collections, but only the ones that contain products with a specific tag. OK... fair enough. You will blow speed out the window, but a simple algorithm might be:
create a collection of products with tag foomanchu
iterate the products in that collection, and use the product.collections
for each collection listed, add it to a list if it has not already been added
Once done that loop, you have the answer. A list of collections for products with a specific tag.
Good luck with performance on that, and remember to keep it simple. That looping is fast for a small shop with limited inventory, but if you have many thousands of skus with a tag spread out across many collections, you'll be challenged for instant rendering.
You can get a speed improvement over David Lazar's answer by using Shopify's map filter.
As with his answer, step 1 is to create a collection with the rule "Product contains tag" and enter the tag that you are using.
Now assuming that you have that collection object in a Liquid variable named collection, you would get the handles of all the collections through a simple map command, followed by a uniq command to strip out all the duplicates:
{% assign all_collection_handles = collection.products | map: 'collections' | map: 'handle | uniq %}
The map filter gets very specific information from the wad of objects, so it's quite a bit faster than iterating through a lot of big objects with a slew of fields you don't care about.
(Note that uniq only works on strings, numbers, or other simple data types, which is why we map all the way to the collections' handles)
Now you can iterate through all_collection_handles to do what you need to do:
{% for handle in all_collection_handles %}
{% assign collection = collections[handle] %}
<!-- Cool stuff here -->
{% endfor %}
Since you should have a much shorter list of collections than you do of products, this should be reasonably performant. Be aware as always that the more heavy-lifting that you're doing in the Liquid code the more likely you'll get page-load delays, so keeping your loops short and using focused filters such as map whenever possible will help keep things running as fast as possible.
Note: If your page starts to suffer from extreme page-load lag, you may want to skip doing this as part of the page-load and just leave a placeholder element, then use Javascript to fetch the information you need and create the display you want.
I am trying to check if my current page is a collection page not a single product page in some collection.
I mean for example if someone goes to collection page of shoes then I can check using collection.handle == 'Shoes' but if I select a product from that page then it will still give me true But I want my condition to be true on if it is collection page.
Thanks for your Help!
Use this simple way with template:
{% if template contains 'collection' %}
Do something
{% endif %}
As Shopify evolves you can now use this:
{% if template.name == 'collection' %}
Do something
{% endif %}
A safer alternative to avoid rare cases where templates are badly named would be to use request.page_type - see the Shopify docs
{% if request.page_type == 'collection' %}
Do something
{% endif %}
I would use:
{% if template == 'collection' %}
Do something
{% endif %}
Because if you use contains and not == (equal to) you may run risk of it changing down the line if you ever created a new template which contained the word collection?
You can try this in condition.
{%if request.page_type == "collection" %}
--- True if visit collection page or sub collection page. ---
{% endif %}
Thanks.
on shopify, i want a line of code of code from theme.liquid to show only on collection pages regardless the template used (i have a few custom collection templates). how do i write the code to do this?
currently i'm using.
{% if template == 'collection.home' %}
<div class="filter_btn">
loremipsum
</div>
{% endif %}
{% if template == 'collection.featured' %}
<div class="filter_btn">
loremipsum
</div>
{% endif %}
similar duplicate of code above for other collection template
i will be adding new collections with new custom templates in the future, but that means i have to duplicate more of the same to cover new collection templates..
how can i have a line of code that covers all collection templates / collection pages
Use the contains operator instead:
{% if template contains 'collection' %}
I am likely a collection template
{% endif %}
See more about contains here:
http://docs.shopify.com/themes/liquid-documentation/basics/operators#contains