← back to Dw Theme Tab Banners
initial scaffold: home-tab-banners section + sample homepage template
a95d1a29e8ee1ab49729b382cae8a83e2e6469b1 · 2026-07-16 08:42:29 -0700 · Steve
Files touched
A .gitignoreA README.mdA sections/home-tab-banners.liquidA templates/index.json
Diff
commit a95d1a29e8ee1ab49729b382cae8a83e2e6469b1
Author: Steve <steve@designerwallcoverings.com>
Date: Thu Jul 16 08:42:29 2026 -0700
initial scaffold: home-tab-banners section + sample homepage template
---
.gitignore | 8 +++
README.md | 22 ++++++++
sections/home-tab-banners.liquid | 116 +++++++++++++++++++++++++++++++++++++++
templates/index.json | 38 +++++++++++++
4 files changed, 184 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1924158
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..2fb2929
--- /dev/null
+++ b/README.md
@@ -0,0 +1,22 @@
+# dw-theme-tab-banners
+
+New DW homepage that turns the collection **tabs** (a Shopify menu / linklist)
+into a wall of **banners**, one per link, each `href`-linked to its collection.
+Replaces the sections below the hero (`home-masonry`, `home-collections`, etc.).
+
+## Files
+- `sections/home-tab-banners.liquid` — the section. Loops a chosen menu, emits a
+ banner per link. Image = collection image → first product image → fallback.
+ All settings editable in the theme editor (menu, columns, height, overlay, CTA).
+- `templates/index.json` — sample homepage: `home-slideshow` hero + `home-tab-banners`.
+
+## Deploy (GATED — needs Steve's go)
+Development-theme preview against the LIVE store (`designer-laboratory-sandbox`):
+```
+cd <live theme working copy> # shopify theme pull --live first
+cp <this>/sections/home-tab-banners.liquid sections/
+# merge templates/index.json (keep your real hero block)
+shopify theme push --development --path . # preview URL, NOT live
+```
+Notes: store is at the 20-theme cap — a new dev theme may evict an old one.
+Going live = `--allow-live --only templates/index.json,sections/home-tab-banners.liquid`.
diff --git a/sections/home-tab-banners.liquid b/sections/home-tab-banners.liquid
new file mode 100644
index 0000000..7a4af65
--- /dev/null
+++ b/sections/home-tab-banners.liquid
@@ -0,0 +1,116 @@
+{% comment %}
+ home-tab-banners
+ ----------------
+ Auto-generates ONE full-bleed banner per link in a chosen menu ("tabs"),
+ each linking (href) to that link's target (usually a collection).
+ Drop this in place of home-masonry / home-collections on the homepage.
+
+ - Banner image = the linked collection's image, else its first product image, else a fallback.
+ - Banner title = the menu link's title (override per-link by editing the menu).
+ - Banner href = the menu link's url.
+ Add a tab to the menu -> a new banner appears automatically. No manual blocks.
+{% endcomment %}
+
+{% assign menu = linklists[section.settings.menu] %}
+
+<section
+ class="home-tab-banners home-tab-banners--{{ section.settings.height }}"
+ data-section-id="{{ section.id }}"
+ data-section-type="home-tab-banners"
+>
+ {% if section.settings.title != blank %}
+ <h2 class="section-title home-tab-banners__title">{{ section.settings.title | escape }}</h2>
+ {% endif %}
+
+ {% if menu.links.size == 0 %}
+ <div class="home-tab-banners__empty">
+ {{ 'Pick a menu in the theme editor — one banner is generated per link.' }}
+ </div>
+ {% else %}
+ <div class="home-tab-banners__grid" style="--cols: {{ section.settings.columns }};">
+ {% for link in menu.links %}
+ {% assign col = link.object %}
+ {% assign img = blank %}
+ {% if link.type == 'collection_link' and col.image %}
+ {% assign img = col.image %}
+ {% elsif link.type == 'collection_link' and col.products.first.featured_media.preview_image %}
+ {% assign img = col.products.first.featured_media.preview_image %}
+ {% endif %}
+
+ <a class="home-tab-banner" href="{{ link.url }}" aria-label="{{ link.title | escape }}">
+ <div class="home-tab-banner__media">
+ {% if img != blank %}
+ {{ img | image_url: width: 1600 | image_tag:
+ loading: 'lazy',
+ sizes: '(min-width: 750px) 50vw, 100vw',
+ widths: '480, 750, 1100, 1600',
+ alt: link.title | escape }}
+ {% else %}
+ <div class="home-tab-banner__placeholder"></div>
+ {% endif %}
+ {% if section.settings.overlay %}<span class="home-tab-banner__scrim"></span>{% endif %}
+ </div>
+ <div class="home-tab-banner__label">
+ <span class="home-tab-banner__title">{{ link.title | escape }}</span>
+ {% if section.settings.show_cta %}
+ <span class="home-tab-banner__cta">{{ section.settings.cta_text | escape }}</span>
+ {% endif %}
+ </div>
+ </a>
+ {% endfor %}
+ </div>
+ {% endif %}
+</section>
+
+{% style %}
+ .home-tab-banners { width: 100%; }
+ .home-tab-banners__title { text-align: center; margin: 1.5rem 0; }
+ .home-tab-banners__grid {
+ display: grid;
+ grid-template-columns: repeat(var(--cols, 2), 1fr);
+ gap: {{ section.settings.gap }}px;
+ }
+ @media (max-width: 749px) { .home-tab-banners__grid { grid-template-columns: 1fr; } }
+ .home-tab-banner { position: relative; display: block; overflow: hidden; text-decoration: none; }
+ .home-tab-banners--short .home-tab-banner__media { aspect-ratio: 21 / 9; }
+ .home-tab-banners--medium .home-tab-banner__media { aspect-ratio: 16 / 9; }
+ .home-tab-banners--tall .home-tab-banner__media { aspect-ratio: 4 / 5; }
+ .home-tab-banner__media { position: relative; width: 100%; }
+ .home-tab-banner__media img,
+ .home-tab-banner__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
+ .home-tab-banner__placeholder { background: #ece7e0; }
+ .home-tab-banner img { transition: transform .6s ease; }
+ .home-tab-banner:hover img { transform: scale(1.04); }
+ .home-tab-banner__scrim { position: absolute; inset: 0;
+ background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
+ .home-tab-banner__label { position: absolute; left: 0; right: 0; bottom: 0;
+ padding: 1.25rem 1.5rem; color: #fff; display: flex; align-items: baseline;
+ justify-content: space-between; gap: 1rem; }
+ .home-tab-banner__title { font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; }
+ .home-tab-banner__cta { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
+ border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 2px; }
+{% endstyle %}
+
+{% schema %}
+{
+ "name": "Tab Banners",
+ "class": "shopify-section--tab-banners",
+ "settings": [
+ { "type": "text", "id": "title", "label": "Heading", "default": "" },
+ { "type": "link_list", "id": "menu", "label": "Menu (tabs)",
+ "info": "One banner is generated per link. Point this at your collection-tab menu." },
+ { "type": "range", "id": "columns", "label": "Columns", "min": 1, "max": 4, "step": 1, "default": 2 },
+ { "type": "range", "id": "gap", "label": "Gap (px)", "min": 0, "max": 24, "step": 2, "default": 4 },
+ { "type": "select", "id": "height", "label": "Banner height", "default": "medium",
+ "options": [
+ { "value": "short", "label": "Short (21:9)" },
+ { "value": "medium", "label": "Medium (16:9)" },
+ { "value": "tall", "label": "Tall (4:5)" }
+ ] },
+ { "type": "checkbox", "id": "overlay", "label": "Darken bottom for text", "default": true },
+ { "type": "checkbox", "id": "show_cta", "label": "Show CTA text", "default": true },
+ { "type": "text", "id": "cta_text", "label": "CTA text", "default": "Shop" }
+ ],
+ "presets": [ { "name": "Tab Banners", "category": "Collection" } ]
+}
+{% endschema %}
diff --git a/templates/index.json b/templates/index.json
new file mode 100644
index 0000000..a8e5193
--- /dev/null
+++ b/templates/index.json
@@ -0,0 +1,38 @@
+{
+ "sections": {
+ "hero": {
+ "type": "home-slideshow",
+ "blocks": {
+ "slide": {
+ "type": "slide",
+ "settings": {
+ "image": "shopify://shop_images/HomeHero.jpg",
+ "content-alignment": "center",
+ "overlay-color": "#ffffff",
+ "title": "Designer Wallcoverings",
+ "subheading": "Curated collections",
+ "cta": "Shop All",
+ "url": "shopify://collections/all"
+ }
+ }
+ },
+ "block_order": ["slide"],
+ "name": "Slideshow",
+ "settings": { "layout": "content-width", "autoplay": false }
+ },
+ "tab_banners": {
+ "type": "home-tab-banners",
+ "settings": {
+ "title": "",
+ "menu": "main-menu",
+ "columns": 2,
+ "gap": 4,
+ "height": "medium",
+ "overlay": true,
+ "show_cta": true,
+ "cta_text": "Shop"
+ }
+ }
+ },
+ "order": ["hero", "tab_banners"]
+}
(oldest)
·
back to Dw Theme Tab Banners
·
(newest)