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 %}
Related
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.
In Snippets/product-form.liquid there's a block of code:
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
This is displaying options for products with X's over the unavailable swatches:
<div data-value="option name" class="swatch-element color optionName-swatch available soldout">
<div class="tooltip">Option Name</div>
<label for="optionName">
<span class="crossed-out"></span>
</label>
</div>
When those non-compatible variants are clicked, a large "UNAVAILABLE" message is displayed:
<p class="modal_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD">
<meta itemprop="seller" content="site">
<link itemprop="availability" href="http://schema.org/InStock">
<meta itemprop="itemCondition" content="New">
<span class="sold_out">Unavailable</span>
<span itemprop="price" content="10.00" class="">
<span class="current_price "></span>
</span>
<span class="was_price"></span>
<span class="sale savings"></span>
</p>
I've tried checking for variant.available, product.variants.first.available, and variant.inventory_quantity > 0 before {% include 'product-swatch' with option %}, without success.
How do I hide the non-compatible variants?
Edit: Here's what's currently inside of product-swatch.liquid:
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign file_extension = 'png' %}
{% assign swatch = product-swatch %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% if option == swatch %}
{% assign found_option = true %}
{% assign option_index = forloop.index0 %}
{% assign downcased_option = swatch | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign is_color = true %}
{% endif %}
{% endif %}
{% endfor %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="option_title">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
<span class="crossed-out"></span>
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
{{ value }}
<span class="crossed-out"></span>
</label>
{% endif %}
</div>
{% endunless %}
{% endif %}
{% endfor %}
</div>
It seems you're looking for the Linked Options functionality.
Have a look at this doc:
https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus
The code is hosted on GitHub:
https://gist.github.com/carolineschnapp/1083007
It's adjusted to work with swatches as well (I suppose you're using the default implementation).
Edit your product-swatch.liquid file under "snippets" folder.
Find {% for variant in product.variants %} and Put {% if variant.available %} right after it.
Find {% endfor %} and Put {% endif %} right before it.
If its not working, share the codes of product-swatch.liquid with us.
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 %}
Is there a way to use variant image as thumbnail if available? For example, I have a product that comes in Black, Blue and Red, and successfully associate them with specific image. How do i get those images as list item and using just standard featured image if color variant isn't available? Here's the scenario for help:
{% if variant color is available %}
<ul class="variantimage-on">
<li>Black Image</li>
<li>Blue Image</li>
<li>Red Image</li>
</ul>
{% else %}
<ul class="variantimage-off">
<li><img src="{{ product.images.first | product_img_url: 'grande' }}" alt="{{ product.title }}" /></li>
</ul>
{% endif %}
Would something like this work for you?
{% if product.options contains 'Color' %}
<ul class="variantimage-on">
{% for image in product.images %}
{% for variant in image.variants %}
<li><img src="{{variant.image.src | img_url: 'large'}}"
alt="{{variant.title}}"/></li>
{% endfor %}
{% endfor %}
</ul>
{% else %}
...
{% endif %}
If all your variant titles start with the color name, you could do a sort by title (group by color) then iteration with a "if new color". Replace the innermost for loop by this:
{% assign variants = image.variants | sort: 'title' %}
{% assign color = "" %}
{% for variant in variants %}
{% assign words = variant.title | split: ' ' %}
{% if color != words[0] | downcase %}
{% assign color = words[0] | downcase %}
<li><img src="{{variant.image.src | img_url: 'large'}}"
alt="{{variant.title}}"/></li>
{% endif %}
{% endfor %}
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>