Shopify liquid template: repeat HTML code only once

Question

I could successfully add a second hard coded store address in my Shopify template. Now, I'm attempting to add a second address.

The challenge I'm facing is this hard coded address is getting repeated because of a for loop which binds the value from the settings.json file.

The hard coded address is getting repeated three times, since it is being considered by the for loop. But the for loop cannot be removed, because it binds the first address, contact, and visiting hours.

I've tried using an if block with with my hard code, but it didn't work out.

Here is my code:

<div class="container main content main-wrapper">
  {% if section.settings.image == nil %}
    <h1 class="center">{{ page.title }}</h1>
    <div class="feature_divider"></div>
  {% endif %}

  <div class="sixteen columns featured_links">
    <div class="section clearfix feature">
      {% for block in section.blocks %}
        <div class="{% if section.settings.featured_promos_per_row == 2 %}eight columns {% cycle 'alpha', 'omega' %}{% elsif section.settings.featured_promos_per_row == 3 %}one-third column {% cycle 'alpha', '', 'omega' %}{% else %}four columns {% cycle 'alpha', '', '', 'omega' %}{% endif %} {% if section.settings.featured_links_style != blank %}{{ section.settings.featured_links_style }} {% cycle 'delay-025s', 'delay-05s', 'delay-075s', 'delay-1s' %}{% endif %} center">
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% endif %}

          <div class="{% if section.settings.rounded_image != blank %}rounded{% endif %}">
            {% if block.settings.image != nil %}
              <img  src="{{ block.settings.image | img_url: '300x' }}"
                    alt="{{ block.settings.image.alt }}"
                    data-src="{{ block.settings.image | img_url: '2048x' }}"
                    class="lazyload"
                    {% comment %} data-sizes="auto" {% endcomment %}
                    data-srcset=" {{ block.settings.image | img_url: '2048x' }} 2048w,
                                  {{ block.settings.image | img_url: '1600x' }} 1600w,
                                  {{ block.settings.image | img_url: '1200x' }} 1200w,
                                  {{ block.settings.image | img_url: '1000x' }} 1000w,
                                  {{ block.settings.image | img_url: '800x' }} 800w,
                                  {{ block.settings.image | img_url: '600x' }} 600w,
                                  {{ block.settings.image | img_url: '400x' }} 400w"
                     />
            {% else %}
              {% capture i %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
              {{ 'collection-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--promotions' }}
            {% endif %}
          </div>

          {% if block.settings.title != blank %}
            <h3>{{ block.settings.title | escape }}</h3>
            {% if section.settings.show_divider %}
              <div class="feature_divider"></div>
            {% endif %}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}

          {% if block.settings.text != blank %}
            {{ block.settings.text }}
          {% endif %}

        {% if section.blocks===1%}
        <div class="store-new">
          <br><p>XYZ</p><p>XYZ,<br>XYZ<br>XYZ</p>
        </div>
         {% endif %}        

        </div>

        {% if section.settings.featured_promos_per_row == 2 %}
          {% cycle '', '<br class="clear " />' %}
        {% elsif section.settings.featured_promos_per_row == 3 %}
          {% cycle '', '', '<br class="clear" />' %}
        {% else %}
          {% cycle '', '', '', '<br class="clear" />' %}
        {% endif %}
      {% endfor %}
    </div>

    {% if section.settings.contact_address != blank %}
    <br class="clear" />
    <div class="embed-container maps">
        <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q={{ section.settings.contact_address | replace: ' ', '+' }}&amp;z={{ section.settings.zoom_level }}&amp;output=embed"></iframe>
    </div>
    {% endif %}
  </div>


</div>

Can someone please help me understand why is this happening?

Sulli Zerance Sulli Zerance · Accepted Answer · 2018-04-27T15:51:34

you can use

{{ if forloop.index0 == 1 }}

or

{{ if forloop.index == 2 }}

instead of

{% if section.blocks===1%}

Shopify liquid template: repeat HTML code only once

1 Answers