Process / story timeline

Copy-paste a theme-editor section for content - Numbered steps down a vertical line - 'how it works', brand story or delivery process.

ContentTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

From our workshop to your door

1
Order placed
Cut and packed within 24 hours
2
Ships
Traced courier, tracking share

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.

timeline.liquid

1<div class="gpl-tl" style="--gpl-accent: {{ section.settings.accent }};">2  {%- if section.settings.heading != blank -%}3    <h2 class="gpl-tl__heading">{{ section.settings.heading }}</h2>4  {%- endif -%}5  <ol class="gpl-tl__list">6    {%- assign rows = section.settings.items | newline_to_br | split: '<br />' -%}7    {%- for row in rows -%}8      {%- assign parts = row | strip | split: '|' -%}9      <li class="gpl-tl__step">10        <span class="gpl-tl__num">{{ forloop.index }}</span>11        <div>12          <p class="gpl-tl__title">{{ parts[0] | strip }}</p>13          <p class="gpl-tl__cap">{{ parts[1] | strip }}</p>14        </div>

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.

timeline.liquid

1<div class="gpl-tl" style="--gpl-accent: {{ section.settings.accent }};">2  {%- if section.settings.heading != blank -%}3    <h2 class="gpl-tl__heading">{{ section.settings.heading }}</h2>4  {%- endif -%}5  <ol class="gpl-tl__list">6    {%- assign rows = section.settings.items | newline_to_br | split: '<br />' -%}7    {%- for row in rows -%}8      {%- assign parts = row | strip | split: '|' -%}9      <li class="gpl-tl__step">10        <span class="gpl-tl__num">{{ forloop.index }}</span>11        <div>12          <p class="gpl-tl__title">{{ parts[0] | strip }}</p>13          <p class="gpl-tl__cap">{{ parts[1] | strip }}</p>14        </div>

Full source is for members

One payment - every snippet, guide and bundle

Get all-access