How To display title, image etc. from product meta field of type product? - shopify

I'm trying to display the products I saved in a meta field on my product detail page like this:
<h2>Cross Selling goes here</h2>
{{ product.metafields.custom.styled_with }}
... but all I get it is:
["GID://SHOPIFY/PRODUCT/7978216456473","GID://SHOPIFY/PRODUCT/7978217177369","GID://SHOPIFY/PRODUCT/7978217537817","GID://SHOPIFY/PRODUCT/7978217570585"]
How can I render these products? I want to access the product title, image etc.
I'm using the Dawn Theme.
Do I need to run a query or something?
Thanks in advance!
I tried this line of code
{{ product.metafields.custom.styled_with }}
and I expected that I would have access to the product information directly (product title etc.)

I solved this by adding .value
{% for recommended_product in product.metafields.custom.styled_with.value %}
{{ recommended_product.title }}
{% endfor %}

Related

Display collection metafield in product page (Shopify)

there is a way to display a collection metafield in the porduct page?
Each product have a product type that matches the collection, so in the product page of this product I want to display the metafield of that product.
{{ collection.metafields.custom.metafield1 }} doesn't work because of course I'm not in the collection page, so I need to link collection.metafields.custom.metafield1 and product.type, but I don't know how.
Hope I was clear, thank you.
Each product have a product type that matches the collection, so in the product page of this product I want to display the metafield of that product.
I solved with the following code
{% assign collectionHandle = product.type %}
{% assign the_collection = collections[collectionHandle] %}
{% assign my_metafield = the_collection.metafields.custom.categoria_1 %}
{{ my_metafield.value }}
As you suggest it was fun to solve the problem :-D
Hard to understand your question, but it would probably go like this. In Liquid, every product has a type. So you would use that on the collections object to get just the collection you want, and from that, the special metafield assigned.
{% assign the_collection = collections['{{ product.type }}'] %}
That assigns some collection, assuming it exists, based on the current product type, to your variable. Now you would ask for your special metafield that may or may not exist in that collection's metafields.
{% assign my_metafield = the_collection.metafields.some_namespace.some_key %}
And with that, you could get the value and splash it out there as you please.
<h1> {{ my_metafield.value }} </h1>
yes I understand your point, and I figure out your code and I tried to use it:
{% assign the_collection = collections['{{ product.type }}'] %}
{% assign my_metafield = the_collection.metafields.custom.categoria_1 %}
<span>{{ my_metafield.value }}</span>
and I don't understand why it does not work.
The product type exists and is "Piatti"
The collection "Piatti" exists and has the metafield custom categoria_1
I attach a sceenshot of the metafield in order to be more cleare.
metafield structure

Liquid: How to get product title in `abandoned_cart` email?

I want to inject some custom liquid in my abandoned cart email on Shopify. Shopify has docs here saying the product_title can be found under line_items under abandoned_cart.
I naturally assume you can get the product_title with something akin to...
<p>You left {{ abandoned_checkout.line_items[0].product_title }} in your cart.</p>
But this doesn't work. What's the proper way to get the product name of the first item?
If you are working with email template for "Abandoned checkout" in notification settings, this should work:
{{ subtotal_line_items[0].product.title }}
Loop code:
{% for line in subtotal_line_items %}
{{ line.product.title }}
{% endfor %}
And here is some useful documentation here:
https://help.shopify.com/en/manual/orders/notifications/email-variables#line-item
All products for the abandoned cart will keep here: subtotal_line_items and you should operate with the Product object. So in the your case it should be:
<p>You left {{ subtotal_line_items[0].product.title }} in your cart.</p>

Get Shopify Product Meta Description

In the Collection Template, I would like to add the Meta Description instead of the normal Product Description. I tried to replace {{ product.description }} with {{ page_description | escape }} but nothing is showing up. Do I need to add something like {% for product in collection.products %} (doesn't work) around it?

How to fetch product metafields in cart.js Shopify

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

Shopify link directly to other item

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.