{% for block in section.blocks %}
{% assign innerloops = forloop.index %}
<a href="">
<img src="{{ block.settings.image-menu1 | img_url:"800x" }}" alt="">
<p></p>
</a>
<a href="">
<img src="{{ block.settings.image-menu2 | img_url:"800x" }}" alt="">
<p></p>
</a>
{% endfor %}
Instead of block.settings.image-menu1 i want to use block.settings.image-menu{{}forloop.index}
you can assign a variable a value and use it.
index is a number. convert it to string by using append: ""
{% for block in section.blocks %}
{% assign index = forloop.index | append: "" %}
{% assign url = "image-menu" | append: index %}
<a href="">
<img src="{{ block.settings.url | img_url:"800x" }}" alt="">
<p></p>
</a>
{% endfor %}
Related
I have 2 links inside the header (one link takes you to one stores the other link takes you to another store). I need to add an active class to the store the user is on (bmx-store & skate-store are the 2 classes that need active class adding to). So if the user is on the bmx store, the link for that store becomes bold and underlined and vice versa.
{% if request.url contains 'source-bmx-testing.myshopify.com' %}
{% elsif request.url contains 'sourceskate.myshopify.com' %}
{% endif %}
I know the code needs to be similar to the snippet above but not sure how to add it into the code i have to add the active class to the store depending on which one you are on. Below is my code:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'bmx-link' -%}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="bmx-store">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- when 'skate-link' -%}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="skate-store">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- endcase -%}
{%- endfor -%}
{% assign bmx_class = 'bmx-store' %}
{% assign skate_class = 'skate-store' %}
{% if shop.name == 'bmx' %} <!-- use youre store name here -->
{% assign bmx_class = 'bmx-store current-store' %}
{% elsif shop.name == 'skate' %}
{% assign skate_class = 'skate-store current-store %}
{% endif %}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'bmx-link' -%}
{% assign class_block = bmx_class %}
{%- when 'skate-link' -%}
{% assign class_block = skate_class %}
{% endcase %}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="{{ class_block }}">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- endfor -%}
If stores are more than 2 other cleaner solutions can be found.
I have a bunch of portfolio posts in /_works/ and the front matter looks something like this:
title: "Rock in Rio Lisbon 2018"
date: July, 2018
image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg"
categories:
- Intro
slides:
- title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Muse & The Killers"
id: "O-rZ6IFnv9g"
override: true
On the homepage I'm using the Slides.ID to automatically grab the YouTube video's thumbnail. If the front matter includes Override: true it should display what I have defined as the image instead. Here is the what I have:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="{{ site.url }}{{ item.image }}" />
{% endfor %}
{% else %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ item.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
When Jekyll compiles, the {{ item.image }} is not working…however, if I swap it with {{ item.title }} it does work. Any ideas why this is happening?
You are reusing the 'item' variable in slides, which overwrites it. Rename the variable 'item' to 'slide' when you are looping through the slides, like this:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="{{ site.url }}{{ slide.image }}" />
{% endfor %}
{% else %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ slide.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
I would like to change the layout of a page of collections, right now it's just one column. I would like to make it at least 3 per row.
Here is the existing layout
to something like this
1:
Here's the code
<div id="content" class="col-md-12 center-column content-with-background">
<div class="row">
<div class="col-sm-12">
{{page.content}}
</div>
</div>
</div>
{% comment %}
Collections are listed here.
{% endcomment %}
{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}
{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}
{% assign image_size = 'medium' %}
{% if linklists[page.handle].links.size > 0 %}
{% assign number_of_links = 0 %}
<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">
{% for link in linklists[page.handle].links %}
{% if link.type == 'collection_link' %}
{% comment %}
If we have a collection link.
{% endcomment %}
{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}
<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% comment %}
Bring in the featured image of the first product in the collection if no collection
image has been uploaded for it.
{% endcomment %}
{% if collection.image %}
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
{% else %}
{% assign product = collection.products.first %}
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">
{{ link.title }}
</p>
</div>
{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}
{% elsif link.type == 'page_link' %}
I don't know where to edit the code so i copied the part i think it is in. Thank you so much.
Try changing the 3rd line
<div class="col-sm-12">
to this
<div class="col-md-12">
That should resize it to fit more items on the screen.
I am trying to generate related products in one of my shopify store, its showing on some products but mostly not, what I want is, display related product first by matching vendor/brand, if not found then show the products of same category:
Can anybody please suggest how to handle this?
<div class="related-products row">
{% assign vendor = product.vendor %}
{% assign vendor_handle = vendor | handleize %}
{% assign handle = product.handle %}
<h4 style="text-align:left;">More in this collection</h4>
{% assign counter = '' %}
{% for product in collections[vendor_handle].all_products %}
{% if vendor == product.vendor and counter.size < 4 and handle != product.handle %}
{% capture temp %}{{ counter }}*{% endcapture %}
{% assign counter = temp %}
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="reveal">
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ product.images.first | product_img_url: 'large' }}" class="img-responsive" alt="{{ product.title }}" />
</a>
</div>
<a href="{{ prod.url | within: collection }}" title="{{ prod.title | escape }}">
{{ product.title | escape }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
You're changing the main product by using the following line
{% for product in collections[vendor_handle].all_products %}
and what is prod?
Try the following
<div class="related-products row">
{% assign vendor = product.vendor %}
{% assign vendor_handle = vendor | handleize %}
{% assign handle = product.handle %}
<h4 style="text-align:left;">More in this collection</h4>
{% assign counter = 0 %}
{% for coll_product in collections[vendor_handle].all_products %}
{% if vendor == coll_product.vendor and counter < 4 and handle != coll_product.handle %}
{% assign counter = counter | plus: 1 %}
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="reveal">
<a href="{{ coll_product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ coll_product.images.first | product_img_url: 'large' }}" class="img-responsive" alt="{{ coll_product.title }}" />
</a>
</div>
<a href="{{ coll_product.url | within: collection }}" title="{{ coll_product.title | escape }}">
{{ coll_product.title | escape }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
I'm trying to figure out how to add a horizontal break after 4 products within the Shopify product loop. Is this possible at all? I've looked through their documentation but it doesn't show the possibility of counting or iterating over the loop.
Currently my loop looks as follows:
{% if collection.all_products_count > 0 %}
<div class="w-col w-col-12">
<div class="product-feed w-clearfix">
{% for product in collection.products %}
<a class="product product-collection w-inline-block" href="{{ product.url | within:collection }}">
<div class="reveal">
<img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="product-photo">
<img src="{{ product.images.last | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="hidden">
</div>
<h3 class="product-title">{{ product.title }}</h3>
<div class="product-price">{{ product.price | money }}</div>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{% endfor %}
</div>
{% assign count = paginate.pages %}
{% for part in (1..count) %}
<li {% if paginate.current_page == part %}class="active"{% endif %}>{{ forloop.index }}</li>
{% endfor %}
{% else %}
<p>Sorry, there are no products in this collection</p>
{% endif %}
It's fair explanation that you have not gone through the documentation properly. Refer this: - https://help.shopify.com/themes/liquid/objects/for-loops
Straight forward way to get this to work is add the following line before {% endfor %}
{% cycle '','','','<hr>' %} // or <br> if you prefer
<hr> gets added every time the forloop is iterating the 4th time. More on this - https://help.shopify.com/themes/liquid/tags/iteration-tags#cycle