How do I wrap my products in a new <div class="row"></div> after every 3rd product? I have looked at using the cycle iteration tag but can't quite figure out how to implement properly in my code.
{% for product in collection.products %}
<!-- product -->
<div class="col-xs-6 col-md-4 product">
<!-- / product-link -->
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
<!-- / product-image -->
<!-- product-details -->
<div class="product-details">
<h3 class="product-title">{{product.title}}</h3>
<h6 class="product-price"> {{ product.price | money }}</h6>
</div><!-- / product-details -->
</div><!-- / product -->
{% endfor %}
You might use a modulo calculation applied on forloop.index then apply an if statement according to modulo result.
{% assign modulo = forloop.index | modulo : 3 %}
{% if modulo == 0 %}
<div class=«row»>
{% endif %}
https://help.shopify.com/themes/liquid/filters/math-filters#modulo
Worked it out, if there are any better ways/suggestions I would be happy to hear them :)
{% for product in collection.products %}
{% cycle '<div class="row">','','' %}
<!-- product -->
<div class="col-xs-6 col-md-4 product">
<!-- / product-link -->
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
<!-- / product-image -->
<!-- product-details -->
<div class="product-details">
<h3 class="product-title">{{product.title}}</h3>
<h6 class="product-price"> {{ product.price | money }}</h6>
</div><!-- / product-details -->
</div><!-- / product -->
{% cycle '','','</div>' %}
{% endfor %}
Related
I Have a custom product grid for one of the brands I am selling that has 4 tabs to hover and the content is changing in every tab. When i try to create another grid, 2 of the tabs are not showing the pictures i've inserted. First tab that's not showing pictures
and 2 of the tabs are showing as needed.
Security section
The code is the same for both sections.
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Switches')" id="defaultOpen">Switches</button>
<button class="tablinks" onmouseover="openCity(event, 'Routers')">Routers</button>
<button class="tablinks" onmouseover="openCity(event, 'Security')">Security</button>
<button class="tablinks" onmouseover="openCity(event, 'Wireless')">Wireless</button>
</div>
<script type="lazyload2">
// Get the element with id="defaultOpen" and click on it
setTimeout(function() { openCity(event, 'Switches'); document.getElementById('defaultOpen').className += " active"});
</script>
<div class="row tabcontent" id="Switches" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_1 }} col-sm-{{ section.settings.banner_col_1 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_1 != blank %}
{% assign img_banner_col_1 = section.settings.image_banner_col_1 | img_url: "master" %}
{% assign img_banner_col_1_alt = section.settings.image_banner_col_1_alt %}
{% else %}
{% assign img_banner_col_1 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_1 }}" alt="{{ img_banner_col_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_2}} col-sm-{{section.settings.banner_col_2}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_2_1 != blank %}
{% assign img_banner_col_2_1 = section.settings.image_banner_col_2_1 | img_url: "master" %}
{% assign img_banner_col_2_1_alt = section.settings.image_banner_col_2_1_alt %}
{% else %}
{% assign img_banner_col_2_1 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_1}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_2_2 != blank %}
{% assign img_banner_col_2_2 = section.settings.image_banner_col_2_2 | img_url: "master" %}
{% assign img_banner_col_2_2_alt = section.settings.image_banner_col_2_2_alt %}
{% else %}
{% assign img_banner_col_2_2 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_2 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_2}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_2_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_2 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-left:0px;">
{% if section.settings.image_banner_col_3 != blank %}
{% assign img_banner_col_3 = section.settings.image_banner_col_3 | img_url: "master" %}
{% assign img_banner_col_3_alt = section.settings.image_banner_col_3_alt %}
{% else %}
{% assign img_banner_col_3 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_3 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #dbe2e4); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_3}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_3_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_3 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
And this is the code i am using for other sections
<div class="row tabcontent" id="Security" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_7 }} col-sm-{{ section.settings.banner_col_7 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_7 != blank %}
{% assign img_banner_col_7 = section.settings.image_banner_col_7 | img_url: "master" %}
{% assign img_banner_col_7_alt = section.settings.image_banner_col_7_alt %}
{% else %}
{% assign img_banner_col_7 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_7 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_7 }}" alt="{{ img_banner_col_7_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_7 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_8}} col-sm-{{section.settings.banner_col_8}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_8 != blank %}
{% assign img_banner_col_8 = section.settings.image_banner_col_8 | img_url: "master" %}
{% assign img_banner_col_8_alt = section.settings.image_banner_col_8_alt %}
{% else %}
{% assign img_banner_col_8 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_8 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_8}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_8_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_8 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:0px;">
{% if section.settings.image_banner_col_9 != blank %}
{% assign img_banner_col_9 = section.settings.image_banner_col_9 | img_url: "master" %}
{% assign img_banner_col_9_alt = section.settings.image_banner_col_9_alt %}
{% else %}
{% assign img_banner_col_9 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_9 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_9}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_9_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_9 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_10 != blank %}
{% assign img_banner_col_10 = section.settings.image_banner_col_10 | img_url: "master" %}
{% assign img_banner_col_10_alt = section.settings.image_banner_col_10_alt %}
{% else %}
{% assign img_banner_col_10 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_10 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_10}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_10_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_10 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
What is the mistake i am making here?
I've tried copying the working grids code and edited from there. Still the same. Can't see banner parts.
I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}
I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?
I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>