Shopify Liquid

3 CTA Pills (Top Title)

A horizontal bar featuring three pill-shaped trust badges with integrated SVG icons. It displays key service highlights like fast shipping, 24/7 support, and product quality to build immediate customer confidence.

EasyTrustProduct PageCROShippingBadgeBadge

156 lines · 9.4 KB

Setup 5–10 minutes 4 min read 156 lines

Key features

Inline SVG iconography for fast loading
Flexbox-based horizontal alignment
Compact 'pill' design styling
Mobile-responsive container structure
Static text for core trust signals

Best use cases

Below the 'Add to Cart' button to reduce friction
In the header for store-wide value propositions
Above the footer for global trust signals
On product pages to highlight shipping and support guarantees

Compatibility

Most Shopify themes
Shopify Online Store 2.0

The code

Shopify Liquid

1<div class="tablet-container">
2  <div class="tablet">
3    <svg
4      xmlns:dc="http://purl.org/dc/elements/1.1/"
5      xmlns="http://www.w3.org/2000/svg"
6      xmlns:xlink="http://www.w3.org/1999/xlink"
7      width="15"
8      fill="#2e2f3c"
9      version="1.1"
10      id="Layer_1"
11      x="0px"
12      y="0px"
13      viewBox="0 0 24 24"
14      style="enable-background:new 0 0 24 24;"
15      xml:space="preserve"
16    >
17      <metadata>
18        <dc:creator>Davooda</dc:creator>
19        <dc:relation>https://davooda.com</dc:relation>
20      </metadata>
21
22      <style type="text/css">
23        .st0{fill:none;stroke:#1E1E1E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
24        .st1{fill:none;stroke:#1E1E1E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
25        .st2{fill:none;stroke:#1E1E1E;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
26        .st3{fill:#1E1E1E;}
27        .st4{fill:#FFFFFF;stroke:#1E1E1E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
28        .st5{fill:none;stroke:#1E1E1E;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
29        .st6{fill:none;stroke:#010101;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
30        .st7{fill:#010101;}
31        .st8{fill:none;stroke:#010101;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
32      </style>
33      <g>
34        <path
35          class="st0"
36          d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
37        />
38        <line class="st0" x1="5" y1="13" x2="2" y2="13" />
39      </g>
40      <line class="st0" x1="15" y1="18" x2="9" y2="18" />
41      <circle class="st0" cx="6.5" cy="18.5" r="2.5" />
42      <circle class="st0" cx="17.5" cy="18.5" r="2.5" />
43      <polyline class="st0" points="15,7 15,12 15,14 " />
44      <line class="st0" x1="1" y1="9" x2="7" y2="9" />
45      <line class="st0" x1="4" y1="19" x2="3" y2="19" />
46    </svg>
47    <span>Envío Rapido</span>
48  </div>
49
50  <div class="tablet">
51    <svg
52      xmlns="http://www.w3.org/2000/svg"
53      width="15"
54      fill="#2e2f3c"
55      xmlns:xlink="http://www.w3.org/1999/xlink"
56      fill="#000000"
57      version="1.1"
58      id="Capa_1"
59      viewBox="0 0 361.014 361.014"
60      xml:space="preserve"
61    >
62      <g>
63        <g id="Layer_5_47_">
64          <path
65            d="M331.035,126.94H318.01c-3.563,0-3.682-2.333-3.805-3.494C307.375,59.094,252.77,8.791,186.637,8.791h-12.26    c-65.644,0-119.929,49.56-127.409,113.229c-0.191,1.631-0.291,4.92-3.291,4.92H29.978C20.987,126.94,0,136.401,0,184.18v25.075    c0,35.436,20.987,43.609,29.978,43.609h43.584c8.991,0,16.347-7.356,16.347-16.347v-93.23c0-8.991-7.356-16.347-16.347-16.347    c0,0-2.052-0.18-1.529-3.835c7.192-50.319,50.129-89.313,102.344-89.313h12.26c51.86,0,94.912,38.418,102.2,88.288    c0.235,1.608,1.111,4.86-1.385,4.86c-8.991,0-16.347,7.356-16.347,16.347v93.23c0,8.991,7.356,16.347,16.347,16.347h8.184    c2.25,0,1.868,1.798,1.667,2.704c-6.667,30.104-21.637,64.256-55.238,64.256h-24.889c-2.54,0-3.167-1.861-3.65-2.743    c-4.032-7.367-11.851-12.364-20.841-12.364h-22.933c-13.118,0-23.753,10.634-23.753,23.753c0,13.119,10.635,23.752,23.753,23.752    h22.933c9.112,0,17.023-5.132,21.005-12.662c0.348-0.658,0.633-2.026,3.321-2.026h25.054c22.823,0,53.365-11.341,69.259-65.373    c1.694-5.758,3.068-11.496,4.187-17.026c0.154-0.761,0.25-2.27,2.625-2.27h12.9c8.991,0,29.978-8.174,29.978-43.609v-25.075    C361.013,137.082,340.026,126.94,331.035,126.94z"
66          />
67        </g>
68      </g>
69    </svg>
70    <span>24/7 Soporte</span>
71  </div>
72
73  <div class="tablet">
74    <svg
75      xmlns="http://www.w3.org/2000/svg"
76      width="15"
77      fill="#2e2f3c"
78      xmlns:xlink="http://www.w3.org/1999/xlink"
79      version="1.1"
80      viewBox="0 0 256 256"
81      xml:space="preserve"
82    >
83      <defs></defs>
84      <g
85        style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
86        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
87      >
88        <path
89          d="M 45 37.605 c -0.254 0 -0.509 -0.048 -0.749 -0.146 l -16.076 -6.494 c -1.024 -0.414 -1.519 -1.58 -1.105 -2.604 c 0.414 -1.024 1.58 -1.519 2.604 -1.105 L 45 33.448 l 36.253 -14.646 L 45 4.157 L 8.747 18.803 l 11.485 4.64 c 1.024 0.414 1.519 1.58 1.105 2.604 c -0.414 1.025 -1.58 1.52 -2.604 1.105 L 2.659 20.657 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 s 0.495 -1.549 1.251 -1.854 L 44.251 0.146 c 0.48 -0.194 1.018 -0.194 1.498 0 l 41.593 16.803 c 0.756 0.306 1.251 1.039 1.251 1.854 s -0.495 1.549 -1.251 1.854 L 45.749 37.46 C 45.509 37.557 45.254 37.605 45 37.605 z"
90          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
91          transform=" matrix(1 0 0 1 0 0) "
92          stroke-linecap="round"
93        />
94        <path
95          d="M 45 90 c -0.393 0 -0.783 -0.116 -1.119 -0.342 C 43.331 89.286 43 88.665 43 88 V 35.605 c 0 -0.815 0.495 -1.549 1.251 -1.854 l 41.593 -16.803 c 0.615 -0.249 1.316 -0.176 1.867 0.196 c 0.552 0.372 0.882 0.993 0.882 1.658 v 52.395 c 0 0.815 -0.495 1.549 -1.251 1.854 L 45.749 89.854 C 45.508 89.952 45.253 90 45 90 z M 47 36.955 v 48.081 l 37.593 -15.187 V 21.768 L 47 36.955 z"
96          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
97          transform=" matrix(1 0 0 1 0 0) "
98          stroke-linecap="round"
99        />
100        <path
101          d="M 45 90 c -0.253 0 -0.508 -0.048 -0.749 -0.146 L 2.659 73.052 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 V 18.803 c 0 -0.665 0.331 -1.286 0.882 -1.658 c 0.55 -0.372 1.251 -0.446 1.867 -0.196 l 16.075 6.495 c 1.024 0.414 1.519 1.58 1.105 2.604 c -0.414 1.025 -1.578 1.52 -2.604 1.105 L 5.408 21.768 v 48.081 L 43 85.035 V 36.955 l -14.825 -5.989 c -1.024 -0.414 -1.519 -1.58 -1.105 -2.604 c 0.414 -1.024 1.58 -1.519 2.604 -1.105 l 16.076 6.494 C 46.505 34.057 47 34.79 47 35.605 V 88 c 0 0.665 -0.33 1.286 -0.882 1.658 C 45.783 89.884 45.393 90 45 90 z"
102          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
103          transform=" matrix(1 0 0 1 0 0) "
104          stroke-linecap="round"
105        />
106        <path
107          d="M 28.924 53.036 c -0.253 0 -0.507 -0.048 -0.749 -0.146 l -9.441 -3.813 c -0.756 -0.306 -1.251 -1.039 -1.251 -1.854 V 25.297 c 0 -0.815 0.495 -1.549 1.251 -1.854 L 60.326 6.64 c 0.48 -0.194 1.018 -0.194 1.498 0 l 9.441 3.814 c 0.756 0.306 1.251 1.039 1.251 1.854 s -0.495 1.549 -1.251 1.854 L 30.924 30.46 v 20.576 c 0 0.665 -0.331 1.286 -0.881 1.658 C 29.708 52.92 29.317 53.036 28.924 53.036 z M 21.483 45.874 l 5.441 2.198 v -18.96 c 0 -0.815 0.495 -1.549 1.251 -1.854 l 37.002 -14.948 l -4.103 -1.657 L 21.483 26.646 V 45.874 z"
108          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
109          transform=" matrix(1 0 0 1 0 0) "
110          stroke-linecap="round"
111        />
112        <path
113          d="M 52.372 78.616 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.024 0.081 -2.189 1.105 -2.604 l 9.44 -3.813 c 1.025 -0.411 2.19 0.081 2.604 1.105 c 0.414 1.024 -0.081 2.189 -1.105 2.604 l -9.44 3.813 C 52.875 78.568 52.621 78.616 52.372 78.616 z"
114          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
115          transform=" matrix(1 0 0 1 0 0) "
116          stroke-linecap="round"
117        />
118        <path
119          d="M 52.372 71.526 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.023 0.081 -2.189 1.105 -2.604 l 9.44 -3.814 c 1.025 -0.411 2.19 0.081 2.604 1.105 c 0.414 1.023 -0.081 2.189 -1.105 2.604 l -9.44 3.814 C 52.875 71.479 52.621 71.526 52.372 71.526 z"
120          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
121          transform=" matrix(1 0 0 1 0 0) "
122          stroke-linecap="round"
123        />
124        <path
125          d="M 52.372 64.436 c -0.792 0 -1.541 -0.473 -1.855 -1.252 c -0.414 -1.024 0.081 -2.189 1.105 -2.604 l 9.44 -3.813 c 1.025 -0.412 2.19 0.081 2.604 1.105 c 0.414 1.024 -0.081 2.189 -1.105 2.604 l -9.44 3.813 C 52.875 64.388 52.621 64.436 52.372 64.436 z"
126          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"
127          transform=" matrix(1 0 0 1 0 0) "
128          stroke-linecap="round"
129        />
130      </g>
131    </svg>
132    <span>14 días devolución</span>
133  </div>
134</div>
135
136<style>
137  .tablet-container{
138  width: 100%;
139  display: flex;
140  gap: 7px;
141  }
142  .tablet{
143  width: max-content;
144  background-color: #eeeeee;
145  border-radius: 5px;
146  max-width: 200px;
147  padding: 1px 5px;
148  font-size: 9.5px;
149  line-height: 20px;
150  display: flex;
151  font-weight: 700;
152  gap: 5px;
153  align-items: center;
154  color: #2e2f3c;
155  }
156</style>

How to install 3 CTA Pills (Top Title) on your Shopify theme

This snippet belongs in sections/main-product.liquid, directly under the Add to cart button, where it reinforces the purchase decision. Expect the whole job to take about 5–10 minutes.

1From your Shopify admin, open Online Store → Themes, click the … button on your live theme and choose Duplicate. Always work on a copy so you can roll back instantly.
2On the duplicated theme, click … → Edit code to open the theme code editor.
3Open sections/main-product.liquid in the file tree. If your theme uses different file names, search for the template that renders the area where you want the block to show up.
4Click Copy code on this page, then paste the snippet directly under the Add to cart button, where it reinforces the purchase decision.
5The snippet ships with its own scoped <style> block, so you do not need to touch base.css or theme.css. If you prefer to keep CSS centralised, move the contents of the style tag into your theme stylesheet and delete the inline block.
6Click Save, then hit Preview and check the block on desktop, tablet and mobile widths.
7When you are happy with the result, publish the duplicated theme from Online Store → Themes → Actions → Publish.

How to customise it

Every value below lives inside the snippet, so you can adapt 3 CTA Pills (Top Title) to your brand without touching the rest of the theme.

Colours — the snippet uses #2e2f3c, #1E1E1E, #FFFFFF, #010101. Replace those values inside the style block with your brand palette, keeping at least a 4.5:1 contrast ratio between text and background so the block stays accessible.
Sizing — adjust the font-size values (9.5px) and the padding so the block carries the same visual weight as the elements around it.
Corners — border-radius: 5px controls the roundness. Set it to 0 for a sharper editorial look, or increase it for a softer, app-like feel.
Copy — rewrite the hard-coded text (for example “Davooda”) in your own brand voice, and translate it if you sell in more than one language.

Common mistakes to avoid

These are the issues merchants run into most often when installing a snippet like this one.

Editing the live theme directly. Duplicate it first — a single unbalanced Liquid tag can take a storefront down mid-campaign.
Pasting the code into the wrong file. Dropped into layout/theme.liquid instead of sections/main-product.liquid, this block will render on every page of the store, including ones where it makes no sense.
Renaming the CSS classes in the markup but not in the style block, or vice versa. The class names have to match exactly or the styling silently disappears.
Publishing without testing on a real phone. Most Shopify traffic is mobile, and layout problems almost always surface there first.

Performance notes

What this block costs you in load time, and how to keep that cost at zero.

The CSS is inline and scoped to this block, so it adds no extra network request. At a few kilobytes it has no measurable effect on your Lighthouse score.
Run PageSpeed Insights before and after you add the block so you have a concrete number rather than a guess.

SEO & accessibility

How to add this block without damaging your on-page structure or your rich results.

Nothing in this snippet should replace your page <h1>. Keep product and page headings intact and use <h2> or <h3> for the block's own heading so the document outline stays clean.
If the block shows review or rating content, keep it consistent with the structured data your review app already outputs. Duplicating or contradicting rating markup can cost you the rich result entirely.
The block does not create a new URL, so there is no canonical or indexing change to make. It improves on-page engagement signals rather than crawlability.

Frequently asked questions

3 CTA Pills (Top Title) — questions merchants ask

Will this snippet work with my theme?

It is built with standard Liquid, HTML and CSS, so it works with Dawn and virtually every Online Store 2.0 theme, as well as most vintage themes. The only thing that changes between themes is the file you paste it into — if yours has no sections/main-product.liquid, look for the equivalent template that renders the same area.

Do I need an app to use it?

No. This is theme code you own outright: no monthly fee, no third-party script tag, and no app that can break your storefront the next time it updates.

How long does it take to add “3 CTA Pills (Top Title)” to a store?

Most merchants have it live in under fifteen minutes — duplicate the theme, paste the code, adjust the colours and copy, preview on mobile, publish.

The styling looks broken after pasting. How do I fix it?

Confirm you copied the whole snippet including the closing style tag, then check whether one of your theme's own CSS rules is overriding it. If a theme rule wins, increase the specificity of the snippet's selector rather than scattering !important through the file.

Will it slow my store down?

Not meaningfully. It is inline markup with scoped CSS and at most a few lines of vanilla JavaScript — no external libraries, no extra HTTP request. Optimising your product images will always have a far bigger impact on load time.

Can I use it on a client store or a commercial project?

Yes. Every snippet in the MCO Hub library is free to copy, modify and ship on any store, including client work. Attribution is appreciated but not required.