Image + text split

Copy-paste a theme-editor section for content - The single most-installed section type - image one side, copy + CTA the other, desktop/mobile stacked.

ContentTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Built for everyday wear

Cut from heavyweight organic cotton, pre-shrunk and garment-washed so it keeps i

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.

image-with-text.liquid

1<div class="gpl-iwt">2  <div class="gpl-iwt__media">3    {%- if section.settings.image -%}4      {{ section.settings.image | image_url: width: 900 | image_tag: class: 'gpl-iwt__img', loading: 'lazy' }}5    {%- endif -%}6  </div>7  <div class="gpl-iwt__body">8    <h2 class="gpl-iwt__heading">{{ section.settings.heading }}</h2>9    <p class="gpl-iwt__text">{{ section.settings.text }}</p>10    {%- if section.settings.cta != blank -%}11      <a class="gpl-iwt__btn" href="{{ section.settings.link }}">{{ section.settings.cta }}</a>12    {%- endif -%}13  </div>14</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

image-with-text.liquid

1<div class="gpl-iwt">2  <div class="gpl-iwt__media">3    {%- if section.settings.image -%}4      {{ section.settings.image | image_url: width: 900 | image_tag: class: 'gpl-iwt__img', loading: 'lazy' }}5    {%- endif -%}6  </div>7  <div class="gpl-iwt__body">8    <h2 class="gpl-iwt__heading">{{ section.settings.heading }}</h2>9    <p class="gpl-iwt__text">{{ section.settings.text }}</p>10    {%- if section.settings.cta != blank -%}11      <a class="gpl-iwt__btn" href="{{ section.settings.link }}">{{ section.settings.cta }}</a>12    {%- endif -%}13  </div>14</div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access