FreeBlockSocial proof

Quote Block

Name: Quote Block
Brand: modblo

Single testimonial with serif type, pastes into Custom Liquid.

#quote#testimonial#social-proof#editorial#custom-liquid

Live preview

See it in action.

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

About this block

Editorial single-quote block, large serif quote mark, italic-feel typography, avatar + name + role. Use between content sections for soft social proof.

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

Paste the snippet below into the Custom Liquid setting on a Custom Liquid section in your Theme Editor. Edit text, colors, and links directly in the code, every editable spot is marked with an EDIT comment.

modblo-quote-block.liquid

{%- comment -%}
  modblo. Quote Block (single testimonial)
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
{%- endcomment -%}

<style>
  .modblo-quote { background:#fff; color:#0b0b0c; padding:clamp(48px,8vw,112px) 0; }   /* EDIT colors */
  .modblo-quote__inner { max-width:760px; margin:0 auto; padding:0 24px; text-align:center; }
  .modblo-quote__mark { color:#6366f1; margin:0 auto 12px; display:block; }            /* EDIT mark color */
  .modblo-quote__text {
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(22px,3vw,30px); line-height:1.4; letter-spacing:-.01em;
    margin:0; quotes:'"' '"'; font-weight:400;
  }
  .modblo-quote__text::before { content:open-quote; }
  .modblo-quote__text::after { content:close-quote; }
  .modblo-quote__by { display:inline-flex; align-items:center; gap:12px; margin-top:28px; }
  .modblo-quote__avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,#6366f1,#10b981); }
  .modblo-quote__name { font-weight:600; font-size:14px; margin:0; text-align:left; }
  .modblo-quote__role { font-size:12px; opacity:.65; margin:2px 0 0; text-align:left; }
</style>

<section class="modblo-quote">
  <div class="modblo-quote__inner">
    <svg class="modblo-quote__mark" viewBox="0 0 32 32" width="44" height="44" fill="currentColor" aria-hidden="true">
      <path d="M9 22h-4v-9c0-3.3 2.7-6 6-6v3c-1.7 0-3 1.3-3 3v1h4v8zM23 22h-4v-9c0-3.3 2.7-6 6-6v3c-1.7 0-3 1.3-3 3v1h4v8z" opacity=".25"/>
    </svg>
    <blockquote class="modblo-quote__text">
      We replaced four conversion apps with these sections in a weekend. AOV up 14%, theme score up 22 points.
    </blockquote>                                                        {%- comment -%} EDIT quote {%- endcomment -%}
    <footer class="modblo-quote__by">
      {%- comment -%} EDIT avatar, replace the <div> with an <img src="..."> if you have one {%- endcomment -%}
      <div class="modblo-quote__avatar"></div>
      <div>
        <p class="modblo-quote__name">Maya Lin</p>                          {%- comment -%} EDIT name {%- endcomment -%}
        <p class="modblo-quote__role">Founder · North Coast Apparel</p>     {%- comment -%} EDIT role {%- endcomment -%}
      </div>
    </footer>
  </div>
</section>

What you can customize

Custom Liquid sections don't expose theme-editor settings, so customization happens in the code. Here's what to edit:

What	How to edit
Quote text	Find the value in the code and change it directly.
Name	Find the value in the code and change it directly.
Role / company	Find the value in the code and change it directly.
Avatar	Replace the gradient <div> with an <img src="https://cdn.shopify.com/..."> if you have an upload.

SEO & accessibility notes

Real semantic <blockquote> + <footer>, schema-friendly and screen-reader friendly.
CSS quotes property handles the curly quote marks, no manual character entry.

Pairs nicely with

Browse all

Free

Content

Icon Feature Cards

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

100 perf·beginner

Free

Content

Image with Text

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

100 perf·beginner

Free

Trust

Trust Badges

Compact horizontal trust strip, pastes into Custom Liquid.

100 perf·beginner

Free