Resetting a Liquid Variable in Shopify

January 4, 2023

I needed to make two seperate slideshows in shopify, one for mobile and one for desktop. This is an oversimplified example but what I do not understand is why the variable image_position is not reset to 0. This should be simple, but coming from javascript, I have no idea what could cause this not to work, and I also have a limited understanding whether liquid even implements some kind of scope.

<!-- Capture desktop images -->
{%- capture desk_slideshow_images -%}
  {%- for image in product.images -%}
    <div class="desktop__image" data-image-index="{% increment image_position %}">
          <img src="{{ image | img_url: 'x1600' }}">
    </div>
  {%- endfor -%}
{%- endcapture -%}

<!-- Try to reassign image_position variable to 0 -->
{% assign image_position = 0 %}


<!-- Capture mobile images -->
{%- capture mobile_slideshow_images -%}
  <!-- Another attempt to reassign image_position variable to 0 -->
  {% assign image_position = 0 %}

  {%- for image in product.images -%}
    <img class="mobile__image" src="{{ image | img_url: 'x1600' }}" data-image-index="{% increment image_position %}">
  {%- endfor -%}
{%- endcapture -%}

If there are three product images, on desktop the output is shown below. The data-image-index starts at 0 and increments as I would expect. But in the second block, it does not start counting from 0 again.

<div class="desktop__image" data-image-index="0">
  <img src="...">
</div>
<div class="desktop__image" data-image-index="1">
  <img src="...">
</div>
<div class="desktop__image" data-image-index="2">
  <img src="...">
</div>

However, on mobile, it starts counting at 2 producing the following output:

<img class="mobile__image" src="..." data-image-index="3">
<img class="mobile__image" src="..." data-image-index="4">
<img class="mobile__image" src="..." data-image-index="5">

>Solution :

From Shopify’s documentation:

Variables that are created with increment are independent from those created with assign and capture.

Instead of using increment, you could use an assign declaration again and increment the value there. Here’s an example based on your code:

<!-- Capture desktop images -->
{%- capture desk_slideshow_images -%}
  {% assign image_position = 0 %}
  {%- for image in product.images -%}
    <div class="desktop__image" data-image-index="{{ image_position }}">
          <img src="{{ image | img_url: 'x1600' }}">
    </div>
    {% assign image_position = image_position + 1 %}
  {%- endfor -%}
{%- endcapture -%}

<!-- Capture mobile images -->
{%- capture mobile_slideshow_images -%}
  <!-- Another attempt to reassign image_position variable to 0 -->
  {% assign image_position = 0 %}
  {%- for image in product.images -%}
    <img class="mobile__image" src="{{ image | img_url: 'x1600' }}" data-image-index="{{ image_position }}">
    {% assign image_position = image_position + 1 %}
  {%- endfor -%}
{%- endcapture -%}