Promotional banner

Copy-paste a theme-editor section for marketing - A call-to-action banner with heading, text, button and alignment options.

MarketingTheme sectionFree to copyOS 2.0 themes

Live previewCustomize in playground

New season arrivals

Discover what is new in the store this month.

Shop the collection

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.

promo-banner.liquid

Complete source

1{%- if section.settings.heading != blank -%}2  <section class="gpl-promo gpl-promo--{{ section.settings.align }}" style="--gpl-promo-bg: {{ section.settings.bg }};">3    <h2>{{ section.settings.heading | escape }}</h2>4    {%- if section.settings.text != blank -%}<p>{{ section.settings.text | escape }}</p>{%- endif -%}5    {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}6      <a class="gpl-promo__button" href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>7    {%- endif -%}8  </section>9{%- endif -%}10 11{% schema %}12{13  "name": "Promotional banner",14  "settings": [15    { "type": "text", "id": "heading", "label": "Heading", "default": "New season arrivals" },16    { "type": "textarea", "id": "text", "label": "Text", "default": "Discover what is new in the store this month." },17    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the collection" },18    { "type": "url", "id": "button_link", "label": "Button link" },19    { "type": "color", "id": "bg", "label": "Background", "default": "#14532d" },20    {21      "type": "select",22      "id": "align",23      "label": "Alignment",24      "options": [25        { "value": "left", "label": "Left" },26        { "value": "center", "label": "Centre" }27      ],28      "default": "left"29    }30  ],31  "presets": [{ "name": "Promotional banner" }]32}33{% endschema %}34 35{% stylesheet %}36.gpl-promo {37  background: var(--gpl-promo-bg);38  color: #fff;39  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);40  border-radius: 16px;41}42.gpl-promo--center { text-align: center; }43.gpl-promo h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }44.gpl-promo p { margin: 0 0 1.25rem; max-width: 36rem; }45.gpl-promo--center p { margin-inline: auto; }46.gpl-promo__button {47  display: inline-block;48  background: #fff;49  color: #111;50  padding: 0.75rem 1.25rem;51  border-radius: 999px;52  font-weight: 600;53  text-decoration: none;54}55{% endstylesheet %}56

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.

promo-banner.liquid

Complete source

1{%- if section.settings.heading != blank -%}2  <section class="gpl-promo gpl-promo--{{ section.settings.align }}" style="--gpl-promo-bg: {{ section.settings.bg }};">3    <h2>{{ section.settings.heading | escape }}</h2>4    {%- if section.settings.text != blank -%}<p>{{ section.settings.text | escape }}</p>{%- endif -%}5    {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}6      <a class="gpl-promo__button" href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>7    {%- endif -%}8  </section>9{%- endif -%}10 11{% schema %}12{13  "name": "Promotional banner",14  "settings": [15    { "type": "text", "id": "heading", "label": "Heading", "default": "New season arrivals" },16    { "type": "textarea", "id": "text", "label": "Text", "default": "Discover what is new in the store this month." },17    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the collection" },18    { "type": "url", "id": "button_link", "label": "Button link" },19    { "type": "color", "id": "bg", "label": "Background", "default": "#14532d" },20    {21      "type": "select",22      "id": "align",23      "label": "Alignment",24      "options": [25        { "value": "left", "label": "Left" },26        { "value": "center", "label": "Centre" }27      ],28      "default": "left"29    }30  ],31  "presets": [{ "name": "Promotional banner" }]32}33{% endschema %}34 35{% stylesheet %}36.gpl-promo {37  background: var(--gpl-promo-bg);38  color: #fff;39  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);40  border-radius: 16px;41}42.gpl-promo--center { text-align: center; }43.gpl-promo h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); }44.gpl-promo p { margin: 0 0 1.25rem; max-width: 36rem; }45.gpl-promo--center p { margin-inline: auto; }46.gpl-promo__button {47  display: inline-block;48  background: #fff;49  color: #111;50  padding: 0.75rem 1.25rem;51  border-radius: 999px;52  font-weight: 600;53  text-decoration: none;54}55{% endstylesheet %}56