I have a meta field that is of type "Dimension"
When I display the field on my product page it shows:
{"value":402.0,"unit":"mm"}
I want it to display as 402mm so I tried to do something like the following:
{{ product.metafields.my_fields.box_height | dimension_with_unit }}
But this doesn't work, and I cannot find anywhere how to do this.
You must use .value on the end:
{{ product.metafields.my_fields.box_height.value }}
This will then display as 402mm
Related
I am using a plugin that filters products. This means that products are no longer shown in the traditional product loop. I think the plugin has switched to using javascript to show products on the collection page rather than liquid.
For every product on a collection page, I wish to show its colour. Each product has a colour associated with it using a custom field.
If I manually manually enter a product handle in the below code, the colour for the product handle that has been entered successfully displays for each product.
{{ all_products["MANUALLY ENTERED PRODUCT HANDLE"].metafields.custom_fields["colour"] }}
I am also able to dynamically able to get a products handle with {!productHandle!}
For some reason however when I put the two together like this:
{{ all_products["{!productHandle!}"].metafields.custom_fields["colour"] }}
The result is that nothing is shown.
My question is, how can I dynamically pull the product handle into the custom field? I have already tried
{{ all_products[product.handle].metafields.custom_fields["colour"] }}
and
{{ all_products[product-handle].metafields.custom_fields["colour"] }}
Try saving the handle as a string. Eg:
{% capture fizz %}{{product.handle}}{%endcapture%}
{{ all_products[fizz].metafields.custom_fields["colour"] }}
Note that all_products is also limited to just 20 products.
I want product title to be on the top of the price.
The answer is very specific to the theme you are using. You need to find which file is being used for product item. Generally its under "snippets" folder and named as "product-grid-item.liquid" ( it can be different in your theme )
Next you need to move your product title code in that file which looks like this
{{ product_title }}
Then you need to move that above the price tag code which may look like this
{{ featured.price | money }} or {{ product.price | money }}
You will need experience with html coding to make the changes properly.
Or you can download and share the theme files with me so that i can tell you exactly what changes you need done.
I'm new in Shopify and looking for suggestions to implement a specific size chart to add product page. Adding some code in sections->product-template.liquid to get size chart using this code to filter with the product.type
{% if product.type == 'mens' %}
// put your tank top sizing chart here
{{ pages.mens-size-chart.content }}
{% endif %}
{% if product.type == 'women' %}
// put your tank top sizing chart here
{{ pages.women-size-chart.content }}
{% endif %}
This work but, I don't want to filter with the product.type .There is any way to add some dropdown in admin new product panel and get this filed to show size chart without adding any app its possible.
Here is the step by step documentation to add size chart to product pages.
Shopify create size chart
I can think of at least 5 approaches you can use in this case.
Section
Create a section for the product with blocks.
Each block will have the following fields:
product field, where you will select the product
page field, where you will select the page you want
Then loop the blocks and look if the product field is equal to the product handle and use that page
Link List
Create a link list with products.
The title will be the page handle and the url will be the product.
You loop each link in the navigation and check if it's url is equal to the product handle. If yes, you use it's title to get the page content.
Prefix pages
Since you are creating pages based on the type, you can prefix them. So if the type is "mens" the page can be called product_mens and you will get the page based on the product type with the product_ prefix.
Settings
You can create a textarea with a similar syntax:
product-handle|page-handle
product-handle|page-handle
You use the filter newline_to_br, split the result by br, loop each item and split it by | and you got the product-handle and the page handle that you can check.
Tags
You can use prefixed tags, that can target the page. The same as the prefixed pages, here you create a tag with the page-handle and add some kind of prefix to it. Then you loop all of the tags and check if there is a page with any of the prefixed tags.
we have a simple Shopify store using the free "Meta Fields Editor" to add a simple custom field integer value to each of the products. Some products will have a meta value of 3, others 2 or 1. Many will have no meta value at all. We would like to be able to display the products in search results, by the meta field value entered for each product in descending order (weighted ordering). However, despite the ability to set meta values and display them in search results and collections pages, Shopify does not make it easy to Order or Sort products by a custom meta field. In the search results page I am able to call the custom meta value using
{{item.metafields.important.important}}
So far I have tried to order the products using this method
{% assign products = collection.products | sort:
'item.metafields.important.important' %}
{% for product in products %}
{{ product.title }}
{% endfor %}
But this results in null results.
Any insight anyone can give me in how to display products in order of a custom field would be much appreciated!
After attempting to find a Liquid solution I was finally able to solve this problem using custom metafields and jQuery. In the Shopify collection template, I added a data attribute to be included with each product like so:
<div id="product_list">
<div data-imp="{{product.metafields.important.important}}" class="product_block" /> PRODUCT #1 </div>
<div data-imp="{{product.metafields.important.important}}" class="product_block" /> PRODUCT #2 </div>
</div>
Then I used a simple jQuery function to sort the nodes by data attribute in descending order
var $wrapper = $('#product_list');
$wrapper.find('.product_block').sort(function (a, b) {
return +b.dataset.imp - +a.dataset.imp;
})
.appendTo( $wrapper );
}
Hope this helps somebody!
Nope. Doesn't work. Only fixed filters affect the sorting order. You can manually sort the products from the collection page in admin panel.
Each product has the custom fields options. Can I output those custom fields on each product item in the product list page? If so, how? I have tried adding the ProductOtherDetails and the %%SNIPPET_ProductCustomFieldItem%% in the CategoryProductsItem.html, but got no output at all of any of the items I have tried. Any suggestions or pointers on how and if this is possible?
As of September 2015, you can now access %%GLOBAL_ProductCustomFields%% on any template file that renders a particular panel's individual items. For example:
-Snippets/CategoryProductsItem.html for category list pages
-Snippets/HomeFeaturedProductsItem.html for the featured products panel
I recommend adding the custom field name as a class to each field for easy hiding, and accessing of the value in case the custom fields ever change you won't be accessing them via :nth-child CSS which would break. You can do so by modify Snippets/ProductCustomFieldItem.html to add the custom field name to the CSS class or ID like this:
<div class="DetailRow %%GLOBAL_CustomFieldName%%">
<div class="Label">%%GLOBAL_CustomFieldName%%:</div>
<div class="Value">
%%GLOBAL_CustomFieldValue%%
</div>
</div>
Doing so, will output like this in each item in the category list.
Above, I am using the custom fields to send through shipping time, as well as "Starting At" to prepend to the list page price if the item is a parent which has children of higher prices. In my opinion, these features greatly increase the user experience.
For Faceted Search (handlebars.js)
I recommend adding this to Panels/FacetedSearchProductGrid.html:
{{#each product.custom_fields}}
{{ id }} : {{ name }} : {{ value }}
{{/each}}
Those filters will be limited to the Product pages specifically. The only way around it is to hash together a solution using jQuery to go and fetch items in question from the product page. A pain, but do-able with unnecessary effort.