I have a dev theme for a shopify store. Basically it's a child theme. I would like to get how to display the best selling products on the front page. I tried something like this but no luck maybe because the sample is outdated.
<div class="row">
{% for product in collections["all"].products | limit:12 | sort_by: 'best-seller' %}
{% include 'product-grid-item' with "all" %}
{% endfor %}
</div>
Is there any way we can create something like this? Thanks in advance.
An easy way of doing it, as sort on Shopify won't work with the value best-seller, is to create a new Collection called (for example) Best Sellers where you have all your products (you could set as the sole condition for product price to be greater than $0 if it applies on your store).
Then, set that collection sorting to By best selling on your admin dashboard.
Finally, use Liquid in a similar way as per the following:
<div class="row">
{% for product in collections.best-sellers.products | limit:12 %}
{% include 'product-grid-item' with "all" %}
{% endfor %}
</div>
Related
I have a shopify store with new, used and refurbished amplifiers & speakers.
This condition is stored in a manual collection (four of them). The others collections being automated.
I would like to display the condition of the product on the product page or the products list.
So basically I need to get all the collections and filter to display one of the four :
If the product belongs to collection "used" display collection "used"
If the product belongs to collection "new" display collection "new"
etc...
The closest to what I want to do has been made trough this code :
{% assign product_collection = product.collections.first %}
{% if product_collection %}
This product is part of my {{ product_collection.title | link_to: product_collection.url }} Collection
{% endif %}
Found here : https://community.shopify.com/c/Shopify-Design/RESOLVED-Display-Collection-on-Product-Page/td-p/230899
With this I am not able to filter on the four collections.
I have spent the day on this...If somebody can help, that would save my day :)
You can add all collections(title or handle value) on the product-grid-item.liquid.
<div class= "grid-item
{% for product_collection in product.collections %}
{{product_collection.title | handle }}
{% endfor %}
">
...
</div>
And then you can filter them with JavaScript on the frontend.
Hope this could help you
I'm new in Shopify theme development. I'm stuck in for loop query. for loop not working properly when try to query by tag. Below is my code.
{% assign query_tag = block.settings.home_section_tag %}
{% if collections.new-releases.products.size > 0 %}
{% for product in collections.new-releases.products limit:4 %}
{% if product.tags contains query_tag %}
<div class="col-12 col-md-6 col-lg-3">
<h3>{{ product.title | escape }}</h3>
</div>
{% endif %}
{% endfor %}
{% endif %}
Above code show me only 1 product it supposed to be 4 products. Also limit:1, limit:2, limit:3 not working (No product showing), limit:4 show me 1 product, limit:5 show me 2 products, limit:6 show me 3 products, limit:7 show me 3 product, limit:8 show me 4 products (it's on going). if I remove product query by tag limit: working properly. I don't understand what is the issue with my code.
I need help for this issue and need an explanation why it's not working.
It works correctly. Initially, you get first 4 products from the new-releases collection. And then you filter the result by the query_tag within the loop.
You can:
Increase the limit to 50 (not good if your collection has more items), or
Create another collection filtered by the query_tag and use for loop on that collection limiting to 4
How do I get product meta fields in Shopify store cart.js response?
Currently, In cart.js not providing any details of product metafields.
You have many possible hack.
The one I would recommend if you are using CartJS is
In your product page, print the product metafield in the HTML
<div class="product-page" data-metafield="{{product.metafield.namespace.value}}">
</div>
When product is added, simply add the metafield as a line item property
var properties = {metafield : $('.product-page').data('metafield')};
CartJS.addItem(variantId, 1 ,properties);
The metafield is now accessible at CartJS.cart.items[i].properties[metafield] !
** You can do this by adding the following step**
Add the below code in product form
{% for field in product.metafields.namespace%}
<input required class="required hidden" id="customID" type="hidden" value='{{ field | last }}' name="properties[metafields[{{ field | first }}]]">
{% endfor %}
it will add in your cart object you can access it by
{% for field in item.properties.metafields %}
{{ field | first }}: {{ field | last }}
{% endfor %}
Metafields are available client-side via Liquid. You do not need cartJS to fetch them. You can render the product metafields of interest into your own data structure of choice, and use the as you wish anyway you want.
You could also build out a StorefrontAPI based system and try GraphQL if you're really keen.
You can access the metafield using item.product.metafields.your-namespace.your-key.
You can get the metafields content of the appropriate products, collections, orders by assigning it to a variable in the liquid file.
In the product-template.liquid, you can use
{% assign var_meta = page.metafields.meta_namespace %}
// You can use the Shopify docs to understand how you create Metafields
{% assign key = 'meta_key' %}
{% assign key_val_meta = meta_namespace.meta_key %}
Access the variable
{{key_val_meta}}
If you assign unique values to the metafield, you could use it to get the exact information you can input that information in your cart.js function.
{%- if item.product.metafields.my_fields.minimum_order_quantity != blank -%}
{{ item.product.metafields.my_fields.minimum_order_quantity }}
{%- endif -%}
Use this code and show data on cart page
I'm currently working on a shopify site and need to create a filter on a products page. My goal is to have primer paints show up in a different section of the product collection page. What I'm having trouble with is how to filter for primers. We have a tag set up in the product page named "Primer". What I want is for the loop to check whether a product has the primer tag, and if so, display that as one of the products in the loop. I'm relatively new to Liquid, so I don't know how to combine clauses if that's possible. I've looked up the "Where" clause, but don't entirely understand how it works.
Here is the code as it stands:
<div class="{% if settings.show_collection_sidebar %}desktop-10{% else
%}desktop-12{% endif %} tablet-6 mobile-3" id="bside">
<div id="product-loop">
{% for product in collection.products %}
<div class="product {% if settings.products_per_row == '3' %}
desktop-4{% cycle ' first', '', ' last' %}
{% elsif settings.products_per_row == '4' %}
desktop-3{% cycle ' first', '', '', ' last' %}
{% endif %} tablet-half mobile-half"
id="prod-{{ product.id }}"
data-alpha="{{ product.title }}"
data-price="{{ product.price }}">
{% include 'product-listing' %}
</div>
{% endfor %}
</div>
</div>
How could I filter for the desired results? I've tried {% if product.tags contains 'Primer' %} in quite a few places, but to no avail.
Thanks for your help.
Have you considered using two collections to accomplish what you're after?
If you made a dynamic ("Smart") collection for all your primers (Let's assume the handle for the collection is 'primer'), you can access that collection at any time through Liquid:
{% assign primer_collection = collections['primer'] %}
{% for product in primer_collection.products %}
<h2>HAVE SOME {{ product.title }}!</h2>
{% endfor %}
Then, if you wanted to exclude all of your primer products from the main collection, create a collection named 'all' (or at least with the handle 'all' - the actual title doesn't strictly matter - see footnote). By default, the 'All' collection is, true to its name, every product in your store. However, if you create your own 'all' collection, you can define it to mean "Everything except certain items" - in your case, 'everything but the primer'
Having Shopify pre-filter everything for you through the collections themselves greatly reduces the headaches of trying to apply filters after-the-fact and dealing with misleading item counts, uneven pagination, etc.
Handles: At the bottom of each collection and product in your Shopify admin is the SEO settings. Editing these allows you to change what the handle for the collection/product is, and this is what Shopify uses to look up your collection/product internally
I have some items in my shopify store that have similar themed items that compliment it well.
I know I could just add an <a href link in there, but I'd like to do something that is actually part of liquid, and would also be easier for my non-programmer partner (who also has the authority to make me sleep on the couch :-( ...) to add these links. Is there a way to add a link using the liquid formatting? Something like This would go great with ${items.ellington-coffee-table-set}!?
It would be great to be able to access a product like this collections.my-collection-handle.products.my-product-handle, but unfortunately it is not possible to get a product by its handle in liquid.
You would have to loop through the collection to find the product like this:
{% for product in collections.my-collection-handle.products %}
{% if product.handle == 'my-product-handle' %}
{{ 'my product' | link_to: product.url }}
{% endif %}
{% endfor %}
But that looks pretty messy if all you want is a link to the product, and you still have to hard-code the product's handle. This would be simpler:
{{ 'my product' | link_to: '/products/my-product-handle' }}
Still not ideal, but probably a better alternative than coding an <a href=... link manually.