Buy box conversion blocks

Copy-paste a theme-editor section for product page - A stackable conversion kit for the buy area - reorderable blocks: trust points, stock status, delivery estimate, guarantee and payment icons in one section.

Product pageTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

In stock - ready to ship

Free shipping over $50

Order today - dispatched in 24 hours

30-day money-back guarantee

Secure checkout - UPI, cards & COD

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.
6Place directly under the Product information section (or inside it via a Custom Liquid block) - blocks reorder in the theme editor.

buy-box-booster.liquid

1<div class="gpl-booster" style="--gpl-accent: {{ section.settings.accent }};">2  {%- for block in section.blocks -%}3    {%- case block.type -%}4      {%- when 'feature' -%}5        <p class="gpl-booster__row" {{ block.shopify_attributes }}>6          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="m5 13 4 4L19 7"/></svg>7          {{ block.settings.text | escape }}8        </p>9      {%- when 'stock' -%}10        <p class="gpl-booster__row gpl-booster__stock" {{ block.shopify_attributes }}>11          <span class="gpl-booster__dot{% if product.selected_or_first_available_variant.available %} gpl-booster__dot--in{% endif %}"></span>12          {% if product.selected_or_first_available_variant.available %}{{ block.settings.in_stock | escape }}{% else %}{{ block.settings.out_stock | escape }}{% endif %}13        </p>14      {%- when 'delivery' -%}

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.

6Place directly under the Product information section (or inside it via a Custom Liquid block) - blocks reorder in the theme editor.

buy-box-booster.liquid

1<div class="gpl-booster" style="--gpl-accent: {{ section.settings.accent }};">2  {%- for block in section.blocks -%}3    {%- case block.type -%}4      {%- when 'feature' -%}5        <p class="gpl-booster__row" {{ block.shopify_attributes }}>6          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="m5 13 4 4L19 7"/></svg>7          {{ block.settings.text | escape }}8        </p>9      {%- when 'stock' -%}10        <p class="gpl-booster__row gpl-booster__stock" {{ block.shopify_attributes }}>11          <span class="gpl-booster__dot{% if product.selected_or_first_available_variant.available %} gpl-booster__dot--in{% endif %}"></span>12          {% if product.selected_or_first_available_variant.available %}{{ block.settings.in_stock | escape }}{% else %}{{ block.settings.out_stock | escape }}{% endif %}13        </p>14      {%- when 'delivery' -%}

Full source is for members

One payment - every snippet, guide and bundle

Get all-access