FreeBlockContent

Image with Text

Name: Image with Text
Brand: modblo

Editorial side-by-side image and text, pastes into Custom Liquid.

#content#image#text#editorial#story#custom-liquid

Live preview

See it in action.

Fully interactive, drag, click, scroll inside the frame, toggle to mobile.

About this block

A foundational content block, image on one side, headline + paragraph + CTA on the other. Toggle image position by changing one CSS class. Stacks cleanly on mobile.

Install in 90 seconds

01
Open your Shopify admin and go to Online Store → Themes → Customize.
02
On any template, click "Add section" where you want the block to appear.
03
Choose "Custom Liquid" from the section list.
04
Paste the code from this page into the Custom Liquid setting and click Save.
05
Edit text and colors directly in the code (look for the comments marking edit points).

The code

In your Shopify theme editor, add a Custom Liquid section and paste the snippet below into its content field. You can change text, colors, and links right inside the code. Every editable spot is marked with an EDIT comment.

modblo-image-with-text.liquid

{%- comment -%}
  modblo. Image with Text Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Toggle layout: change class="modblo-iwt modblo-iwt--left" to "modblo-iwt--right" to swap sides.
{%- endcomment -%}

<style>
  .modblo-iwt { background:#fff; color:#0b0b0c; padding:clamp(48px,7vw,96px) 0; }      /* EDIT colors */
  .modblo-iwt__inner {
    max-width:1200px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
    align-items:center;
  }
  .modblo-iwt--right .modblo-iwt__inner { direction:rtl; }
  .modblo-iwt--right .modblo-iwt__inner > * { direction:ltr; }
  .modblo-iwt__media {
    aspect-ratio:4/5; overflow:hidden; border-radius:16px;
    background:linear-gradient(135deg,#1e293b 0%,#475569 100%);            /* EDIT image: replace with <img> */
  }
  .modblo-iwt__img { width:100%; height:100%; object-fit:cover; }
  .modblo-iwt__eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.65; font-weight:600; margin:0 0 14px; }
  .modblo-iwt__h { font-size:clamp(28px,3.5vw,42px); letter-spacing:-.02em; line-height:1.1; margin:0 0 18px; }
  .modblo-iwt__text { font-size:16px; line-height:1.65; opacity:.82; }
  .modblo-iwt__btn {
    display:inline-block; margin-top:22px;
    background:#6366f1; color:#fff;                                       /* EDIT button color */
    padding:12px 22px; border-radius:12px; font-weight:600; font-size:14px; text-decoration:none;
  }
  @media (max-width:768px) {
    .modblo-iwt__inner, .modblo-iwt--right .modblo-iwt__inner { grid-template-columns:1fr; gap:24px; direction:ltr; }
    .modblo-iwt__media { aspect-ratio:5/4; max-height:360px; }
  }
</style>

<section class="modblo-iwt modblo-iwt--left">                                    {%- comment -%} EDIT layout: --left or --right {%- endcomment -%}
  <div class="modblo-iwt__inner">
    <div class="modblo-iwt__media">
      {%- comment -%} EDIT image: replace this gradient div with <img src="..."> {%- endcomment -%}
      {%- comment -%}
      <img src="https://cdn.shopify.com/your-image.jpg" alt="" class="modblo-iwt__img">
      {%- endcomment -%}
    </div>
    <div class="modblo-iwt__body">
      <p class="modblo-iwt__eyebrow">Our story</p>                          {%- comment -%} EDIT eyebrow {%- endcomment -%}
      <h2 class="modblo-iwt__h">
        Made on the same coast for four generations.                    {%- comment -%} EDIT heading {%- endcomment -%}
      </h2>
      <div class="modblo-iwt__text">
        <p>
          Every fiber is grown, woven, and cut on the same coast.
          We work with three families who've been in this craft for four generations.
        </p>                                                             {%- comment -%} EDIT text {%- endcomment -%}
      </div>
      <a class="modblo-iwt__btn" href="/pages/about">Read the journal →</a> {%- comment -%} EDIT link + label {%- endcomment -%}
    </div>
  </div>
</section>

What you can customize

Custom Liquid sections don't have visual theme editor settings, so changes happen directly in the code. Here's what to edit:

What	How to edit
Image position	Change the section className from modblo-iwt--left to modblo-iwt--right.
Image	Replace the gradient .modblo-iwt__media with the commented-out <img> tag and your own image URL.
Eyebrow	Find the value in the code and change it directly.
Heading	Find the value in the code and change it directly.
Body text	Find the value in the code and change it directly.
Button label + URL	Find the value in the code and change it directly.

SEO and accessibility notes

Direction:rtl swap for right-aligned layout, no media query needed for the order swap.
Aspect-ratio 4/5 on the image reserves space, no CLS during load.
Falls back to a clean gradient placeholder if no image is set.

Pairs nicely with

CTA Banner

Full-bleed conversion banner, pastes into Custom Liquid in the Theme Editor.

100 perf·beginner

Free

Social proof

Quote Block

Single testimonial with serif type, pastes into Custom Liquid.

100 perf·beginner

Free

Content

Icon Feature Cards

Three-up icon + title + text grid, pastes into Custom Liquid.

100 perf·beginner

Free