A sentence or two about what happened and why it mattered.
` | | | `image` | `image_picker` | Image | – | | | `image_mobile` | `image_picker` | Mobile image | – | | | `link_label` | `text` | Link text | – | | | `link_url` | `url` | Link | – | | | `link_new_tab` | `checkbox` | Open link in a new tab | `false` | | ## Install ### In Shopify admin 1. Work on a copy, not your live theme: in Shopify admin go to **Online Store > Themes**, open the **…** menu on your current theme and choose **Duplicate**. 2. On the copy, open the **…** menu and choose **Edit code**. 3. In the `sections` folder, add a new file named `lib-timeline.liquid` and paste the contents of `sections/lib-timeline.liquid` from the source below. Save. 4. In the `snippets` folder, add `lib-image.liquid` and `lib-button.liquid` the same way. If a snippet is already there from another Lib section, it is the same file; keep one copy. 5. Open **Customize** on the copy, choose **Add section** and pick **Lib · Timeline**. Replace the sample content with your own and set the colors. 6. Preview the copy, then publish it when it looks right. ### With Shopify CLI From your local theme folder, download the files and push only them to an unpublished theme (find its ID with `shopify theme list`): ```sh curl -fsSL -o sections/lib-timeline.liquid https://lintelagency.com/resources/shopify-sections/files/lib-timeline.liquid curl -fsSL -o snippets/lib-image.liquid https://lintelagency.com/resources/shopify-sections/files/lib-image.liquid curl -fsSL -o snippets/lib-button.liquid https://lintelagency.com/resources/shopify-sections/files/lib-button.liquid shopify theme push --theme{{ b.date | escape }}
{%- endif -%} {%- if b.title != blank -%} <{{ item_tag }} class="lib-timeline__title">{{ b.title | escape }} {%- endif -%} {%- if b.image != blank or b.image_mobile != blank -%}A sentence or two about what happened and why it mattered.
" }, { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Below 750px." }, { "type": "text", "id": "link_label", "label": "Link text" }, { "type": "url", "id": "link_url", "label": "Link" }, { "type": "checkbox", "id": "link_new_tab", "label": "Open link in a new tab", "default": false } ] } ], "presets": [ { "name": "Lib · Timeline", "blocks": [ { "type": "milestone", "settings": { "date": "2019", "title": "The first wheel" } }, { "type": "milestone", "settings": { "date": "2021", "title": "Our own kiln" } }, { "type": "milestone", "settings": { "date": "2024", "title": "The studio shop opens" } } ] } ] } {% endschema %} ``` ### snippets/lib-image.liquid ```liquid {%- comment -%} MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections {%- endcomment -%} {% doc %} Responsive image with optional art direction: a separate mobile image (below 750px), each honouring its own focal point from the theme editor. Falls back to a placeholder. @param {image} [image] - Desktop image (also used on mobile when no mobile image is set) @param {image} [image_mobile] - Mobile image, below 750px @param {string} [class] - Class for the img element @param {string} [sizes] - sizes attribute for the desktop image (default 100vw) @param {boolean} [eager] - Load immediately with high fetch priority (use for the first sections on a page) @param {string} [placeholder] - placeholder_svg_tag name when no image is set (default 'lifestyle-1') @example {% render 'lib-image', image: section.settings.image, image_mobile: section.settings.image_mobile, class: 'lib-hero__img', sizes: '(min-width: 990px) 50vw, 100vw', eager: true %} {% enddoc %} {%- liquid assign desktop = image if desktop == blank assign desktop = image_mobile endif assign img_sizes = sizes | default: '100vw' assign img_loading = 'lazy' assign img_priority = 'auto' if eager assign img_loading = 'eager' assign img_priority = 'high' endif assign art = false if image != blank and image_mobile != blank assign art = true endif -%} {%- if desktop != blank -%}