You’ve probably thought about updating your landing page, and we know it can be tough. Coming up with new ideas every day or week isn’t easy, so here’s a helpful suggestion: try using alternate sections.
What Are Alternate Sections
Alternate sections are typically divided into two halves: one side features an image, while the other contains text and a call to action. Each section alternates the position of the image and text compared to the previous section, creating a visually engaging pattern as they stack.
Below you can see an example of alternate sections:
How To Implement Alternate Sections
For this part, sections should be created with block structure included. Each of these blocks need to have an image picker, text inputs for title, description, button and URL for CTA.
The part that makes alternate magic is shown below:
{% for block in section.blocks %}
{% if forloop.index0 | modulo: 2 %}
<!-- Print HTML of the block with image on the left -->
{% else %}
<!-- Print HTML of the block with image on the right -->
{% endif %}
{% endfor %}
This snippet reorganizes blocks to consistently display images in a zig-zag pattern.
You can use this feature in various scenarios and adapt it as needed for your store.
