For each of my product I will have 1 picture and 1 video.
Very basically I'm trying to show the picture in one part of my product-template and the video somewhere else.
My picture will always be the first media uploaded (therefore the "featured media") and the video always be second.
Therefore I want to update this code from "show the featured_media" to "show the video in the list of media" :
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{% for media in product.media %}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
I have tried playing around with the featured_media assignement but can't figure how to simply extract the video (or the second media) and display it properly.
here is the idea for you to work with.
When you clicked on the image/video you have on the product admin page, you can set alt text. This value can get called by media.alt when you loop through the set of product.media. check the condition of the media.alt and display or hide stuff as you like.
{% for media in product.media %}
{% if media.alt contains 'myVideo' %}
do something
{% endif %}
{% endfor %}
Another example, this one check for the media type media.media_type and display the content.
{% for media in product.media %}
{% case media.media_type %}
{% when 'image' %}
<div class="product-image">
<img src="{{ media | img_url: '100x100'}}" alt="{{ media.alt }}">
</div>
{% when 'external_video' %}
<div class="product-single__media">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__video">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media">
{{ media | media_tag }}
</div>
{% endcase %}
{% endfor %}
https://www.shopify.com/partners/blog/product-media
Related
I have a Collection metafield called "Top Level". It is a single-value text field, and it has one pre-filled option called "yes".
If a Collection has "yes" selected for this metafield, then I need to display the Collection's Title and Image on the Product page that has that Collection selected. If a Collection does NOT have "yes" selected, then that Collection's data should NOT be displayed on the product page. In other words, if "Ranch Dip" product is in the Dips collection, and the Dips collection has "yes" selected for the "Top Level" collection metafield, I need the Dips title and image to be displayed on the Ranch Dip product page.
This code successfully displays the metafield and title:
<div id="productcategory" class="productblock">
{% for p_col in product.collections %}
{{ p_col.title }}
<img src="{{ p_col.image | image_url }}">
{{ p_col.metafields.custom.top_level }}
{% endfor %}
</div>
But this code will also display the title and image for each collection the product is associated with, whether or not the "Top Level" field value is yes or blank.
=================
This code completely hides the metafield and title on the product page; I was expecting it to check for "blank" value in the "Top Level" field and return the "Top Level" collection's title and image:
{% if p_col.metafields.custom.top_level != blank %}
<div id="productcategory" class="productblock">
{% for p_col in product.collections %}
{{ p_col.title }}
<img src="{{ p_col.image | image_url }}">
{{ p_col.metafields.custom.top_level }}
{% endfor %}
</div>
{%- endif -%}
The code below also didn't work. I was expecting it to match up with a value of "yes" for the Top Level field, and thus display the title and image field contents; it does not work, and nothing is displayed.
{% if p_col.metafields.custom.top_level == "yes" %}
<div id="productcategory" class="productblock">
<h2>product category image goes here...</h2>
{% for p_col in product.collections %}
{{ p_col.title }}
<img src="{{ p_col.image | image_url }}">
{{ p_col.metafields.custom.top_level }}
{% endfor %}
</div>
{%- endif -%}
How can I accomplish the output I described above?
You need to check the value of meta-fields and code is like this sample code
{% if p_col.metafields.custom.top_level.value == "yes" %}
<div id="productcategory" class="productblock">
<h2>product category image goes here...</h2>
{% for p_col in product.collections %}
{{ p_col.title }}
<img src="{{ p_col.image | image_url }}">
{{ p_col.metafields.custom.top_level }}
{% endfor %}
</div>
{%- endif -%}
You can check more about the metafields here
#Onkar got me most of the way there. The last thing I had to do was to move the "for" statement outside of the "if" statement. It is now returning the value I need.
{% for collection in product.collections %}
{% if collection.metafields.custom.top_level.value == "yes" %}
<div id="productcategory" class="productblock">
<div class="productcategory">
<div class="productcategory-image"><img src="{{ collection.image | image_url }}"></div>
<div class="productcategory-title">{{ collection.title }}</div>
</div>
</div>
{%- endif -%}
{% endfor %}
We built our Shopify site so that the only product variants would be size. However, we also wanted to display different styles of the same product as thumbnail links on product pages. This was done using the vendor attribute and the following liquid code:
{% assign vendor = product.vendor %}
{% assign handle = product.handle %}
{% assign counter = '' %}
{% for product in collections['shop-all'].products %}
{% if vendor == product.vendor and counter.size < 4 and handle != product.handle %}
{% capture temp %}{{ counter }}*{% endcapture %}
{% assign counter = temp %}
<div class="recommendations_img">
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title }}" />
</a>
</div><!-- .recommendations_img -->
{% endif %}
{% endfor %}
However, this doesn't work because of Shopify's 50 product limit per page. The pagination workaround doesn't work either because it's on a product page.
So this is what we need:
To display all products (image and link only) that match the same vendor as the current product. Something more along these lines:
{% assign vendor_handle = vendor | handleize %}
{% for product in all_products[vendor_handle].vendor %}
<a href="{{ product.url }}" title="{{ product.title }}">
<img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title }}" />
{% endfor %}
Thanks in advance for your help.
Below is my piece of code and I am grabbing some items from the general settings in Shopify. The first variable settings.featured1 in curly bracket pulls the value in but inside the contains statement it doesn't. Any ideas on why?
<h1>{{ settings.featured1 }}</h1><div class="leftArrow">❰</div>
<div class="shift-scroll">
{% for collection in collections %}
{% if collection.handle contains settings.featured1 %}
{% tablerow product in collection.products limit:8 %}
<div class="one-third column alpha thumbnail even">
<a href="{{ product.url | within: collection }}" title="{{ product.featured_image.alt | escape }}">
<img class="scroll-img" src="{{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</div>
{% endtablerow %}
{% endif %}
{% endfor %}
</div>
Jacob's answer led me in the right direction. I had to downcase the setting var.
{% assign search_term = settings.featured2 | downcase %}
{% for collection in collections %}
{% if collection.handle contains search_term %}
I have a shopify blog with over 150 articles in it
{% assign countItem = 0 %}
{% for article in blogs.recipes.articles %}
{% if countItem < 3 %}
{% if article.tags contains product.title %}
{% assign countItem = countItem | plus: 1 %}
<li class="article">
<a href="{{ article.url }}">
<img src="{{ article | img_url: 'grande' }}" alt="{{ article.title }}" />
<span class="title">{{ article.title }}</span>
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
However blogs.recipes.articles only returns 50.
Any way to remove this limitation?
Shopify limits the results to 50 so as to balance the server load. As per shopify docs.
Don't ever paginate a collection by more than 50, that's how many products maximum you should query per page. Be respectful of Shopify's app servers. If you are not using any paginate tags, pagination does kick in behind the scene and you will only receive the first 50 products in said collection.
However I have tried to load more than 50 products by using paginate tag. But that slows the page load and also the page may become unresponsive if the number of records is large. You can give it a try as following:-
{% paginate blogs.recipes.articles by 500 %}
{% assign countItem = 0 %}
{% for article in blogs.recipes.articles %}
{% if countItem < 3 %}
{% if article.tags contains product.title %}
{% assign countItem = countItem | plus: 1 %}
<li class="article">
<a href="{{ article.url }}">
<img src="{{ article | img_url: 'grande' }}" alt="{{ article.title }}" />
<span class="title">{{ article.title }}</span>
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
{% endpaginate %}
I'm relatively new to coding and had been trying out for the past 3 months.
I am working on shopify, and the problem is I need the fourth image in every collection page to be bigger than the rest.
Current theme: minimal
current code in collection:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% include 'product-loop' with collection.handle %}
{% endfor %}
<div>
I've research and it might be something to do with {% if forloop.index == 4 %} but I still can't seem to work it out, thus I need any of your professional help with this.
What about:
{% for product in collection.products %}
{% if forloop.index == 4 %}
{{ product.featured_image | product_img_url: 'large' | img_tag }}
{% else %}
{{ product.featured_image | product_img_url: 'small' | img_tag }}
{% endif %}
{% endfor %}
With the Minimal Shopify theme, I would suggest doing something like this in collection.liquid:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% if forloop.index == 4 %}
{% assign image_size = 'large' %}
{% else %}
{% assign image_size = 'small' %}
{% endif %}
{% include 'product-loop' with collection.handle with image_size %}
{% endfor %}
</div>
And then change this line in product-loop.liquid:
<img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
to this:
<img src="{{ product.featured_image | product_img_url: image_size }}" alt="{{ product.title | escape }}" />
The image for the 4th product in a collection will be large, and all other product images small. If however you want every 4th product image to be large, you would put this in collection.liquid instead:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% capture image_size %}{% cycle 'small', 'small', 'small', 'large' %}{% endcapture %}
{% include 'product-loop' with collection.handle with image_size %}
{% endfor %}
</div>