I'm trying to accomplish the following, but I can't seem to get the img src to populate correctly with the iteration number using Shopify's liquid language.
{% for i in (1..11) %}
<div class="item">
<img src="{{ 'item-{{i}}.jpg' | asset_url }}" alt="Item {{i}}" />
</div>
{% endfor %}
Try this instead, your Liquid is trying to assign a render {{i}} inside another render {{}} which is not correct as they do not nest:
{% for i in (1..11) %}
<div class="item">
{% capture src %}item-{{i}}.jpg{% endcapture %}
<img src="{{ src | asset_url }}" alt="Item {{i}}" />
</div>
{% endfor %}
This works for me...
Related
On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.
I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.
<div class="container d-block d-md-none">
<div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
<ul class="slides">
{% for block in section.blocks %}
{%- assign advert_has_link = false -%}
{% if block.settings.link != blank %}
{%- assign advert_has_link = true -%}
{% endif %}
<li {{ block.shopify_attributes }}>
<div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
{% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.icon != 'none' %}
<div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
<i data-feather="{{ block.settings.icon }}"></i>
</div>
{% endif %}
<div class="text-advert-section__text-wrapper">
{% if block.settings.heading != blank %}
<span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
{% endif %}
{% if block.settings.subheading != blank %}
<span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
{% endif %}
</div>
{% if advert_has_link %}</a>{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})
You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.
I want to show collection related products best selling on shopify cart page. I tried some product loop but doesn't work.
This is my code which i added:
<div class="row products">
{% if collection.best-selling.products.size > 0 %}
{% for product in collection.best-selling.products %}
<li>
<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />
<a class="shop-now" href="{{ product.url }}">{{ product.title | escape }}</a>
</li>
{% endfor %}
{% endif %}
</div>
Anybody got any idea how to fix this
There are a few mistakes in yout code.
Liquid error
When targeting a specific collection you must use the collections keyword, not collection ( collection is available only on the collection page and returns that collection). So you should use here collections.best-selling.
This is deprecated product_img_url: 'medium' don't used named size such as small/medium/large etc..., use numbered sizes like 600x600 (where this is WIDTHxHEIGHT without cropping or changing the aspect ratio of the image).
HTML validation error
Outputting a li without it being in ul or ol is invalid HTML code and this will make your HTML code validation fail.
Your code should look like this
This assumes that you have a collection with a handle best-selling.
<div class="row products">
{% if collections.best-selling.products.size > 0 %}
<ul>
{% for product in collections.best-selling.products %}
<li>
<img src="{{ product.featured_image | product_img_url: '600x' }}" alt="{{ product.title | escape }}" />
<a class="shop-now" href="{{ product.url }}">{{ product.title | escape }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
I'm currently new to shopify and using a free theme call saleshunter.
On the product page itself, the thumbnail images on the slider are duplicating. Can you help me solve this?
Here's the code I found for the product images.
<div class="{{ product_image_width }}">
<div class="product-single__images">
<div class="product-single__photos slick-slider manual-init" id="ProductPhoto">
{% for image in product.images %}
<div class="product-single__photos__item">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<img src="{{ image.src | img_url: product_image_size }}" alt="{{ image.alt | escape }}">
</div>
{% endfor %}
</div>
{% if product.images.size > 1 %}
<div class="product-single__thumbnails slick-slider manual-init" id="ProductThumbs">
{% for image in product.images %}
{% for variant in image.variants %}
<div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
data-index="{{ image.position }}">
<img src="{{ image.src | img_url: product_thumb_size }}"
alt="{{ image.alt | escape }}">
</div>
{% else %}
<div class="product-single__thumbnails__item">
<img src="{{ image.src | img_url: product_thumb_size }}"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
For whatever reason, the image thumbnails duplicate based on the variants you have (i.e. small, medium, large for a red shirt, blue shirt, and black shirt). Meaning you will have 3 duplicates of one color shirt. To prevent this from happening, remove this code:
{% for variant in image.variants %}
<div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
data-index="{{ image.position }}">
<img src="{{ image.src | img_url: product_thumb_size }}"
alt="{{ image.alt | escape }}">
</div>
{% else %}
as well as one of the {% endfor %} after this code:
<div class="product-single__thumbnails__item">
<img src="{{ image.src | img_url: product_thumb_size }}"
alt="{{ image.alt | escape }}">
</div>
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 am working on a Hubspot COS website and I need to be able to run custom queries on blog posts and display a list of those blog posts in a module on the home page and in the sidebar on the website.
Where do I start? I have tried using the RSS module, but it is not specific enough for my needs.
If you have any advise it would be much appreciated. Thanks!
I was able to use blog_recent_topic_posts() to solve this problem:
<div class="row-fluid">
{% set posts = blog_recent_topic_posts('3904474513', 'featured-resource', 3) %}
{% for post in posts %}
{% set topics = post.topic_list %}
<div class="span4 resource">
<div class="resource-icon{% for topic in topics %} {{ topic.slug }}{% endfor %}"></div>
<img src="{{ post.featured_image }}" alt="{{ post.name }}">
<div class="resource-text">
<p class="r-type">
{% for topic in topics %}
{% unless topic == 'featured resource' %}
{{ topic.name }}
{% endunless %}
{% endfor %}
</p>
<h3 class="r-title">{{ post.name }}</h3>
</div>
</div>
{% endfor %}
</div>