Trying to pull images into a into a wrapper after assigning a specific collection but my images are all returning - //cdn.shopify.com/s/assets/no-image
<div id="NewColorOptions" class="color-select">
{% assign color_options = '' %}
{% for collection in collections %}
{% if product.handle contains collection.handle %}
{% assign collection = collection.handle %}
{% for p in collection.products %}
{% assign p_handle = '--' | append: p.handle | append: '--' %}
{% if color_options contains p_handle %}
{% comment %} Probably Duplicates {% endcomment %}
{% else %}
{% assign color_options = color_options | append: p_handle %}
{% assign product_text = p.title | handleize | remove : collection.handle | replace : '-', ' ' %}
<a href="{{ p.url }}" datattitle="{{ product_text | textilize | upcase }}" {% if p.url contains product.handle %}class="ActiveThumb"{%endif%}>
<img {% if forloop.first == true %} class="imgOne" {% endif %} src="{{ image.src | product_img_url: 'compact' }}">
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
I assume my error is within my <img> tag but I'm not sure why that would be breaking.
Related
I have a "Related Products" section on my Product page. Right now it shows products that a related by "collection". Is it possible to show related products that have the same Tag?
This is my related-products.liquid code.
Thanks.
{% assign number_of_products = 4 %}
{% assign number_of_products_to_fetch = number_of_products | plus: 1 %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% if collection and collection.products_count > 1 %}
<div class="related">
<h1>You Might Also Like</h1>
<div class="products clearfix">
{% assign current_product = product %}
{% assign current_product_found = false %}
{% for product in collection.products limit: number_of_products_to_fetch %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
<li>
<a href="{{ product.url | within: collection }}" class="product__image" title="{{ product.title | escape }}">
<img src="{{ product.featured_image.src | img_url: '350x350' }}" alt="{{ product.featured_image.alt | escape }}">
</a>
</li>
{% endunless %}
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
Let's change up your for loop that traverses the collection of items, and ignores items that are not tagged.
{% for product in collection.products limit: number_of_products_to_fetch %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
{% if current_product_found.tags contains 'best-tag-ever' %}
<li>
<a href="{{ product.url | within: collection }}" class="product__image" title="{{ product.title | escape }}">
<img src="{{ product.featured_image.src | img_url: '350x350' }}" alt="{{ product.featured_image.alt | escape }}">
</a>
</li>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
Note! This will still only traverse through the collection that is provided. That means that the products that will show up need to be a) included in such collection, and b) be tagged with 'best-tag-ever'. If you would like to show products from the entire store instead of said collection, you can swap out that collection for the all collection which has every product in your store.
Check the below code for adding the related products using Tags -
{% assign number_of_related_products_to_show = 2 %}
{% assign current_product = product %} {% assign current_product_tags = product.tags %}
{% assign found_first_match = false %} {% assign found_second_match = false %}
{% assign first_related_product = true %}
{% paginate collections.all.products by 1000 %}
{% for product in collections.all.products %}
{% unless product.handle == current_product.handle %}
{% for tag in product.tags %}
{% if current_product_tags contains tag %}
{% if found_first_match == false %}
{% assign found_first_match = true %}
{% assign first_match = tag %}
{% else %}
{% assign found_second_match = true %}
{% assign second_match = tag %}
{% endif %}
{% endif %}
{% endfor %}
{% if found_first_match == true %}
{% if first_related_product == true %}
{% assign first_related_product = false %}
Related products
{% endif %}
{% if product.tags contains first_match or product.tags contains second_match %}
{% include 'product-grid-item' with collection.handle %}
{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
{% if first_related_product == false %}
{% endif %}
{% endpaginate %}
I’m setting up a custom Shopify theme for a client. Their products come in different colours and sizes. I need to display each colour variant separately on the collection page, but without showing all size variants as separate items.
Then, still on the collection page, within each product item, I need to display the range of sizes that variant is available in.
So something like:
T-shirt (Red)
Sizes: XS S M L XL XXL
T-shirt (Blue)
Sizes: XS S M L XL XXL
I’ve been using the solution from this post: Shopify show color variants in collection but not size variant, which has got me part of the way there - I am able to display the colour variants individually, but now I’m not sure how to then output the size variants along with the product.
Here’s a simplified version of the code I’m using:
{% for product in collection.products %}
{% for option in product.options %}
{% if option == "Color" or option == "Colour" %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign product = variant %}
<a class="product" href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | img_url: '480x480' }}">
{{ product.title }}
<ul class="product__sizes">
<!-- Need to output sizes here -->
</ul>
</a>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
Any help at all is much appreciated!
You were almost there, but I had to clean your code a little since you had 3 for's in each other, which is quite a lot of loops.
Here is the modified code:
{% for product in collection.products %}
{% assign options = product.options %}
{% assign have_color = false %}
{% assign size_index = false %}
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if have_color != false %}
{% assign variants = product.variants %}
{% assign colorlist = '' %}
{% assign sizelist = '' %}
{% assign color = '' %}
{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
{% comment %}We use the # to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
{% assign string_check = variant.options[size_index] | append: '#' | prepend: '#' %}
{% unless sizelist contains string_check %}
{% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}#{{ variant.options[size_index] }}#{% endcapture %}
{% endunless %}
{% endfor %}
{% assign sizelist_array = sizelist | replace: '#', '' | split: ',' %}
{% for variant in variants %}
{% capture color %}
{{ variant.options[have_color] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign product = variant %}
<a class="product" href="{{ product.url | within: collection }}">
<img src="{{ product.featured_image.src | img_url: '480x480' }}">
{{ product.title }}
<ul class="product__sizes">
{% for size in sizelist_array %}
<li>
{{ size }}
</li>
{% endfor %}
</ul>
</a>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
The main difference is that I took out the color check in an outside for loop and in the same loop I get the size option index. In addition there is a separate loop that populate a sizelist variable.
Here is a code breakdown of the additionally added items:
{% assign have_color = false %}
{% assign size_index = false %}
I added to variables, one for the color check and one for the size index.
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colour" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% comment %}Get the size index{% endcomment %}
{% if option == "Size" %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
In this loop we check if the product have a color and set the size index.
{% assign sizelist = '' %}
We create down another variables that will hold all of the sizes.
{% comment %}Get All Sizes{% endcomment %}
{% for variant in variants %}
{% comment %}We use the # to wrap the string since sizes tend to have parts of other sizes, example S,XS,L,XL,XXL{% endcomment %}
{% assign string_check = variant.options[size_index] | append: '#' | prepend: '#' %}
{% unless sizelist contains string_check %}
{% capture sizelist %}{% unless forloop.first %}{{sizelist}},{% endunless %}#{{ variant.options[size_index] }}#{% endcapture %}
{% endunless %}
{% endfor %}
Here we populate the sizelist variable with all the sizes, we use the # character to create unique strings that we can check if they are contained in the list.
{% assign sizelist_array = sizelist | replace: '#', '' | split: ',' %}
After that we clean the populated variable from the # character and split it by , to create an array.
<ul class="product__sizes">
{% for size in sizelist_array %}
<li>
{{ size }}
</li>
{% endfor %}
</ul>
And this is the sweet moment when we output the sizes.
I want to load product accessories when an end user looks at a one of my product pages. I have figured out how to exclude collections from displaying,
but I am unsure how to set the 'liquid' to call one collection specifically.
{% assign number_of_related_products_to_show = 12 %}
{% assign number_of_related_products_to_fetch = number_of_related_products_to_show | plus: 1 %}
{% assign exclusions = 'frontpage,all,dual_camera,single_camera,series_dr650s,series_dr400_series' | split: ',' %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if collection and collection.all_products_count > 1 %}
{% unless exclusions contains collection.handle %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endunless %}
{% endif %}
{% endfor %}
{% endif %}
{% if collection and collection.products_count > 1 %}
<div class="h_row_4 animated fadeInUp" data-animation="fadeInUp">
<div class="clearfix">
<h3>{{ 'products.general.related_products' | t }}</h3>
{% assign current_product = product %}
{% assign current_product_found = false %}
</div>
<div class="carosel product_c">
<div class="row">
<div id="featured-products-section-{{ section.id }}" class="owl-carousel">
{% for product in collection.products limit: number_of_related_products_to_fetch %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
{% include 'product-loop' %}
{% endunless %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
Any help would be appreciated.
To loop through a specific collection:
{% for product in collections[handle-of-the-collection-you-want].products %}
Do something
{% endfor %}
im currently face this problem where by tag count show current view count which is corrent.
IMG
but when i click to individual tag, the number will add up together.
IMG
{% for tag in collection.all_tags %}
{% assign products_count = 0 %}
{% for product in collection.products %}
{% if product.tags contains tag %}
{% assign products_count = products_count | plus: 1 %}
{% endif %}
{% endfor %}
{% assign is_advanced_tag = false %}
{% assign cat = tag | split: '_' | first %}
{% unless cat == tag %}
{% if cat_array contains cat %}
{% assign is_advanced_tag = true %}
{% if current_tags contains tag %}
<li class="active-filter ">{{ tag | remove_first: cat | remove_first: '_' }}</li>
{% else %}
<li>{{ tag | remove_first: cat | remove_first: '_' | link_to_tag: tag }}</li>
{% endif %}
{% endif %}
{% endunless %}
{% if is_advanced_tag == false %}
{% if current_tags contains tag %}
<li class="active-filter ">
{{ tag }}({{ collection.products_count }})
</li>
{% else %}
<li>{{ tag | link_to_tag: tag }} ({{ collection.products_count }})</li>
{% endif %}
{% endif %}
{% endfor %}
is there any where to show the non current view of product count. thanks
I want to update the "New Order Notification" mail for my Shopify store with custom HTML code, but while pasting the code it simply doesn't paste 100% of it. I've contacted Shopify and they've told me there is no character limit but a file size limit of 64 or 128 kb.
The store has 18 main categories (collections). What I'm trying to do is make sure the products get sorted based on category name.
The following piece of code appears 18 times (for every category) in the custom template:
{% if verse_kantenklaar_maaltijden_salades != blank %}
<tr>
<td colspan="2">
<h2 style="margin-bottom:15px;margin-top:5px!important;font-weight:bold;">Verse kant-en-klaar maaltijden - salades</h2>
</td>
</tr>
{% for line_item_id in verse_kantenklaar_maaltijden_salades %}
{% for line_item in line_items %}
{% capture line_item_string %}{{line_item.id}}{% endcapture %}
{% if line_item_id == line_item_string %}
{% assign bonus = 'no' %}
{% for tag in line_item.product.tags %}
{% if tag == 'Bonus' %}
{% assign bonus = 'yes' %}
{% endif %}
{% endfor %}
<tr>
<td>
<img alt="" src="{{ line_item.product.featured_image | product_img_url: 'large' }}" style="width: 400px;">
</td>
<td style="text-align:left;">{{ line_item.title }} ({{ line_item.product.metafields.global.item_size }})<br>
<span style="font-size:34px;font-weight:bold;">
{% if bonus == 'yes' %}
{{ line_item.product.metafields.global.wpob | round: 2 }}
{% else %}
{{ line_item.product.metafields.global.wpo | round: 2 }}
{% endif %}
</span>
{% if bonus == 'yes' %}
<span style="font-size:18px;font-weight:bold;">BONUS</span>
{% endif %}
{% if line_item.quantity > 1 %}<span class="item_count" style="display: block;position: relative;width: 50px;text-align: center;background-color: #d14836;color: white;font-weight: 700;min-width: 80px;line-height: 40px;border-radius: 50px;">{{ line_item.quantity }}</span>{% endif %}
</td>
</tr>
{%endif%}
{% endfor %}
{% endfor %}
{% endif %}
For the full code (with 3 categories) take a look at this gist.
Is there a way to simplify (using loops) or compress this to make sure the total template stays within Shopify limits?
Or might this be caused by something else? The total code length is around 1500 lines.
For anyone interested, here's the more efficient version (thanks to Evulse):
{% assign sort_array = "" %}
{% for line_item in cart.items %}
{% for tag in line_item.product.tags %}
{% if tag == 'Tag I want second' %}
{% assign sort_array = sort_array | append: 'B:' | append: line_item.id | append: ',' %}
{% endif %}
{% if tag == 'Tag I want First' %}
{% assign sort_array = sort_array | append: 'A:' | append: line_item.id | append: ',' %}
{% endif %}
{% if tag == 'Tag I want Third' %}
{% assign sort_array = sort_array | append: 'C:' | append: line_item.id | append: ',' %}
{% endif %}
{% endfor %}
{% endfor %}
{% assign sort_array = sort_array | split: ',' | sort %}
{% for prefixed_line_item_id in sort_array %}
{% for line_item in cart.items %}
{% capture line_item_string %}{{line_item.id}}{% endcapture %}
{% assign line_item_id = prefixed_line_item_id | split: ':' | last %}
{% if line_item_id == line_item_string %}
{{line_item.product.title}}
{%endif%}
{% endfor %}
{% endfor %}