Image with text assign left & right in block section

Topic summary

A developer is working on a Shopify section that alternates image and text positioning in a block layout. The code uses a modulo operation to determine odd/even iterations, placing images on the right and text on the left for odd blocks, with the reverse for even blocks.

Key Implementation Details:

  • Uses {% assign evens = forloop.index | modulo: 2 %} to alternate layouts
  • Conditionally renders image and text columns based on the modulo result
  • Includes settings for block images, titles, and content

Alternative Approach Mentioned:

  • Using {% capture %} blocks with a section setting (optionid == 'image_first') to control whether images appear first

The posts include code snippets and reference images, though some text appears corrupted or reversed. The discussion focuses on technical implementation of alternating left/right layouts in Shopify’s Liquid templating system.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

{% for block in section.blocks %}

{% assign evens = forloop.index | modulo: 2 %} {%if evens == 1 %}
{%if block.settings.image %} {%endif%}
{% if block.settings.title %}

{{ block.settings.title | escape }}

{% endif %}
{{ block.settings.content }}
{% else %}
{%if block.settings.image %} {%endif%}
{% if block.settings.title %}

{{ block.settings.title | escape }}

{% endif %}
{{ block.settings.content }}
{% endif %}
{% endfor %}

{% capture image %}

image
{% endcapture %}

{% if section.settings.optionid == ‘image_first’ %}
{{ image }}
{% endif %}

text
{% unless section.settings.optionid == 'image_first' %} {{ image }} {% endunless %}