Free playground

Read the Liquid. See the storefront.

Original, working examples of Shopify sections and snippets. Inspect the code, preview the output, copy the files and adapt them for your own theme. No account needed.

Browse the resource library

These are free educational examples — written for this playground or adapted from real storefront builds. They are not the paid library — member resources live behind sign-in and are only released after licensing is confirmed.

Announcement bar

A dismissible top-of-page message with configurable text, link and colours.

Theme section

Dark theme canvas

Free delivery on orders over $75

Approximate rendering. Your theme's fonts, colours and base styles will apply on the storefront.

sections/announcement-bar.liquid

1{%- if section.settings.text != blank -%}2  <div class="gpl-announcement" role="region" aria-label="Announcement"3       style="--gpl-bg: {{ section.settings.bg }}; --gpl-fg: {{ section.settings.fg }};">4    {%- if section.settings.link != blank -%}5      <a href="{{ section.settings.link }}">{{ section.settings.text | escape }}</a>6    {%- else -%}7      <p>{{ section.settings.text | escape }}</p>8    {%- endif -%}9    <button type="button" class="gpl-announcement__close" aria-label="Dismiss announcement">&times;</button>10  </div>11{%- endif -%}12 13{% schema %}14{15  "name": "Announcement bar",16  "settings": [17    { "type": "text", "id": "text", "label": "Message", "default": "Free delivery on orders over $75" },18    { "type": "url", "id": "link", "label": "Link (optional)" },19    { "type": "color", "id": "bg", "label": "Background", "default": "#0b1220" },20    { "type": "color", "id": "fg", "label": "Text colour", "default": "#c8f542" }21  ],22  "presets": [{ "name": "Announcement bar" }]23}24{% endschema %}

Settings

Message

Background

#0b1220

Text colour

#c8f542

Dismissible

These controls mirror how the snippet reads theme settings or render parameters on a real store.

How to add this to your theme

Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
Paste the Liquid code, then add the CSS to your theme's base stylesheet or into a {% stylesheet %} tag at the end of the same file.
Open the theme editor, add the section to a template, and replace the example values using the section settings.
Preview the storefront and test it on a phone-sized screen before publishing.

File name shown: sections/announcement-bar.liquid · These are GPLMart's original teaching examples, not the paid library. They are provided as-is for learning.

1{%- if section.settings.text != blank -%}2 <div class="gpl-announcement" role="region" aria-label="Announcement"3 style="--gpl-bg: {{ section.settings.bg }}; --gpl-fg: {{ section.settings.fg }};">4 {%- if section.settings.link != blank -%}5 <a href="{{ section.settings.link }}">{{ section.settings.text | escape }}</a>6 {%- else -%}7 <p>{{ section.settings.text | escape }}</p>8 {%- endif -%}9 <button type="button" class="gpl-announcement__close" aria-label="Dismiss announcement">×</button>10 </div>11{%- endif -%}12 13{% schema %}14{15 "name": "Announcement bar",16 "settings": [17 { "type": "text", "id": "text", "label": "Message", "default": "Free delivery on orders over $75" },18 { "type": "url", "id": "link", "label": "Link (optional)" },19 { "type": "color", "id": "bg", "label": "Background", "default": "#0b1220" },20 { "type": "color", "id": "fg", "label": "Text colour", "default": "#c8f542" }21 ],22 "presets": [{ "name": "Announcement bar" }]23}24{% endschema %}