← back to Dw Rail Front Page
Rail front page: Warm Sand Liquid section + standalone preview + docs
96ce58f4cb57729d7f1f27d94098562a2565395a · 2026-07-15 11:32:04 -0700 · Steve
Files touched
A .gitignoreA README.mdA preview-standalone.htmlA sections/rail-front-page.liquid
Diff
commit 96ce58f4cb57729d7f1f27d94098562a2565395a
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Jul 15 11:32:04 2026 -0700
Rail front page: Warm Sand Liquid section + standalone preview + docs
---
.gitignore | 8 ++
README.md | 33 +++++++
preview-standalone.html | 153 ++++++++++++++++++++++++++++
sections/rail-front-page.liquid | 214 ++++++++++++++++++++++++++++++++++++++++
4 files changed, 408 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bfc09c7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.shopify/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ce11a42
--- /dev/null
+++ b/README.md
@@ -0,0 +1,33 @@
+# DW Rail Front Page — "Warm Sand"
+
+Sidebar-rail homepage for Designer Wallcoverings: a persistent left rail (centered
+logo + name, search, the FULL category list always visible, cart) beside a huge
+Gucci-style hero, then editorial image blocks + footer. No horizontal nav. On
+mobile the rail collapses to a top stack so every category is revealed on scroll.
+
+## Files
+- `sections/rail-front-page.liquid` — the installable Shopify section (theme-editor driven).
+- `preview-standalone.html` — static reference build (open in any browser).
+
+## Install (into a theme)
+1. Copy `sections/rail-front-page.liquid` into the theme's `sections/`.
+2. In the theme editor, on the **Home page** template, remove the existing
+ sections and add **Rail Front Page** (it ships a preset with 2 editorial blocks).
+3. Point the **Category menu** setting at your `main-menu` (or a dedicated menu).
+4. Set the **Hero image** and each editorial block image.
+
+## Imagery rule (enforced)
+Hero + editorial images must be **high-end lines only** — murals, real textiles
+(grasscloth/silk), gold/metallic leaf, glass-bead/glitter (Maya Romanoff Ajiro is
+the canonical example). **Never** Brewster / York / WallQuest prints (or reskins).
+
+## Full-page chrome
+The rail replaces the standard theme header/nav on the homepage. For a clean
+preview the homepage should use a layout that omits the theme header/footer groups
+(the section renders its own footer). Do this on a **development/preview theme**
+first; never edit the live theme directly.
+
+## Status
+- [x] Section built + staged locally (reversible).
+- [ ] Push to a development/preview theme for review. (gated)
+- [ ] Publish to live. (Steve's explicit go only)
diff --git a/preview-standalone.html b/preview-standalone.html
new file mode 100644
index 0000000..014aba1
--- /dev/null
+++ b/preview-standalone.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Designer Wallcoverings — Warm Sand</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+ /* ============================================================
+ Designer Wallcoverings — "Warm Sand" front page (#4)
+ Sidebar rail (centered logo + full category list + search + cart)
+ + huge hero with real product imagery. No horizontal nav.
+ Rail collapses to a top stack on mobile; all colors are CSS vars.
+ ============================================================ */
+ :root{
+ --rail-bg:#efe6d6; --rail-tx:#3a3025; --rail-mut:#8a7c66; --act-bg:#e4d7c1; --accent:#a9773f;
+ --div:#ddcfb6; --mono-bg:#a9773f; --mono-fg:#ffffff;
+ --hero-tx:#3a3025; --hero-sub:#6f6152;
+ --ed-tx:#ffffff; --cta-bg:#3a3025; --cta-tx:#efe6d6;
+ --foot-bg:#3a3025; --foot-tx:#d8cfc2; --rail-w:300px;
+ /* real DW catalog imagery — HIGH-END LINES ONLY (never Brewster/York/WallQuest prints) */
+ /* hero: Maya Romanoff "Ajiro Burst of Happiness" — glass-bead / metallic marquetry */
+ --hero-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg');
+ /* wallcoverings block: Thibaut Montado Cork — metallic gold */
+ --ed1-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75107.jpg');
+ /* grasscloth block: Thibaut Jindo Grass — real natural textile */
+ --ed2-img:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75111_70b8dbaa-4a4c-4660-b503-0df6999bad94.jpg');
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ body{font-family:'Inter',sans-serif;background:#e7dcc8;color:var(--hero-tx)}
+ a{color:inherit;text-decoration:none}
+
+ .layout{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}
+
+ /* ---------- RAIL ---------- */
+ .rail{background:var(--rail-bg);color:var(--rail-tx);display:flex;flex-direction:column;
+ border-right:1px solid var(--div);position:sticky;top:0;height:100vh}
+ .rail-head{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 22px 18px;text-align:center}
+ .mono{width:56px;height:56px;border-radius:11px;background:var(--mono-bg);color:var(--mono-fg);
+ display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:600;font-size:22px}
+ .brand{font-family:'Playfair Display',serif;font-weight:600;font-size:19px;line-height:1.1}
+ .tag{font-size:10.5px;letter-spacing:1.6px;color:var(--rail-mut)}
+ .search{width:100%;display:flex;align-items:center;gap:8px;margin-top:6px;
+ background:rgba(255,255,255,.55);border:1px solid var(--div);border-radius:999px;padding:9px 14px}
+ .search input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--rail-tx);width:100%}
+ .search input::placeholder{color:var(--rail-mut)}
+ .search svg{flex:none;stroke:var(--rail-mut)}
+ .rail hr{border:0;border-top:1px solid var(--div)}
+ .cats{flex:1;overflow:auto;padding:6px 0}
+ .cats a{display:flex;align-items:center;justify-content:space-between;padding:12.5px 26px;font-size:14.5px;
+ border-bottom:1px solid var(--div);transition:background .15s}
+ .cats a .ch{color:var(--rail-mut);font-size:15px}
+ .cats a:hover{background:var(--act-bg)}
+ .cats a.on{background:var(--act-bg);color:var(--accent);font-weight:600}
+ .cats a:last-child{border-bottom:0}
+ .rail-foot{padding:16px 26px 22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--div)}
+ .rail-foot .u{display:flex;gap:18px;align-items:center;font-size:13px;color:var(--rail-mut)}
+ .rail-foot .cart{display:inline-flex;align-items:center;gap:6px;color:var(--rail-tx)}
+ .rail-foot .cart .b{background:var(--accent);color:#fff;border-radius:999px;font-size:10px;font-weight:600;
+ min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
+ .rail-foot .tl{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--accent)}
+
+ /* ---------- MAIN ---------- */
+ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
+ text-align:center;gap:22px;padding:80px 40px;background:var(--hero-img) center/cover no-repeat;isolation:isolate}
+ .hero::before{content:"";position:absolute;inset:0;z-index:-1;
+ background:linear-gradient(rgba(231,220,200,.82),rgba(231,220,200,.62))}
+ .hero .ey{font-size:13px;letter-spacing:4px;color:var(--accent);font-weight:600}
+ .hero h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(42px,6vw,84px);line-height:1.02;max-width:820px}
+ .hero p{color:var(--hero-sub);font-size:17px;line-height:1.55;max-width:520px}
+ .cta{margin-top:8px;display:inline-block;background:var(--cta-bg);color:var(--cta-tx);border-radius:999px;
+ padding:15px 34px;font-size:13px;font-weight:500;letter-spacing:1.5px}
+ .ed{position:relative;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
+ gap:14px;padding:44px;color:var(--ed-tx);text-align:center;background-size:cover;background-position:center;isolation:isolate}
+ .ed::before{content:"";position:absolute;inset:0;z-index:-1;
+ background:linear-gradient(rgba(58,48,37,.15),rgba(58,48,37,.72))}
+ .ed.a{background-image:var(--ed1-img)} .ed.b{background-image:var(--ed2-img)}
+ .ed h2{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(28px,3.4vw,42px)}
+ .ed .pill{border:1px solid rgba(255,255,255,.85);color:#fff;border-radius:999px;padding:11px 24px;font-size:12px;letter-spacing:1.5px}
+ .foot{background:var(--foot-bg);color:var(--foot-tx);display:flex;align-items:center;justify-content:space-between;
+ flex-wrap:wrap;gap:14px;padding:36px 48px;font-size:13px}
+ .foot b{font-family:'Playfair Display',serif;font-weight:600;font-size:20px;color:#fff}
+ .foot .lnk{display:flex;gap:24px}
+
+ /* ---------- MOBILE: rail → top; ALL categories revealed on scroll ---------- */
+ @media(max-width:860px){
+ .layout{grid-template-columns:1fr}
+ .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--div)}
+ .rail-head{padding:26px 22px 16px}
+ .cats{overflow:visible}
+ .hero{min-height:64vh}
+ .rail-foot{flex-direction:row;justify-content:space-between;align-items:center}
+ .foot{padding:28px 22px}
+ }
+</style>
+</head>
+<body>
+ <div class="layout">
+ <!-- RAIL: centered logo + name, search, FULL category list, cart -->
+ <aside class="rail">
+ <div class="rail-head">
+ <div class="mono">DW</div>
+ <div class="brand">Designer<br>Wallcoverings</div>
+ <div class="tag">TO THE TRADE, SINCE 1998</div>
+ <form class="search" action="/search" role="search">
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+ <input type="search" name="q" placeholder="Search patterns, colors…">
+ </form>
+ </div>
+ <nav class="cats">
+ <a class="on" href="/collections/wallcoverings">Wallcoverings <span class="ch">›</span></a>
+ <a href="/collections/fabrics">Fabrics <span class="ch">›</span></a>
+ <a href="/collections/grasscloth-natural">Grasscloth & Natural <span class="ch">›</span></a>
+ <a href="/collections/murals-panoramic">Murals & Panoramic <span class="ch">›</span></a>
+ <a href="/collections/commercial">Commercial <span class="ch">›</span></a>
+ <a href="/pages/shop-by-color">Shop by Color <span class="ch">›</span></a>
+ <a href="/pages/shop-by-style">Shop by Style <span class="ch">›</span></a>
+ <a href="/pages/brands">Brands & Designers <span class="ch">›</span></a>
+ <a href="/collections">Collections <span class="ch">›</span></a>
+ <a href="/collections/new-arrivals">New Arrivals <span class="ch">›</span></a>
+ <a href="/pages/trade-only-benefits">Trade Program <span class="ch">›</span></a>
+ <a href="/pages/samples">Samples <span class="ch">›</span></a>
+ </nav>
+ <div class="rail-foot">
+ <div class="u">
+ <a href="/account">Account</a>
+ <a class="cart" href="/cart">Cart <span class="b">2</span></a>
+ </div>
+ <a class="tl" href="/pages/trade-only-benefits">TRADE LOGIN →</a>
+ </div>
+ </aside>
+
+ <!-- MAIN: huge hero (real texture) + editorial blocks (real photos) + footer -->
+ <main>
+ <section class="hero">
+ <div class="ey">SPRING 2026</div>
+ <h1>The Spring Collection</h1>
+ <p>The season's most beautiful walls, delivered as samples to your studio.</p>
+ <a class="cta" href="/collections/new-arrivals">DISCOVER</a>
+ </section>
+ <section class="ed a"><h2>Wallcoverings</h2><a class="pill" href="/collections/wallcoverings">DISCOVER</a></section>
+ <section class="ed b"><h2>Fabrics & Grasscloth</h2><a class="pill" href="/collections/grasscloth-natural">DISCOVER</a></section>
+ <footer class="foot">
+ <b>Designer Wallcoverings</b>
+ <div class="lnk"><a href="/pages/trade-only-benefits">Trade</a><a href="/blogs/journal">Journal</a><a href="/pages/contact">Contact</a><a href="#">Instagram</a></div>
+ <span>© 2026</span>
+ </footer>
+ </main>
+ </div>
+</body>
+</html>
diff --git a/sections/rail-front-page.liquid b/sections/rail-front-page.liquid
new file mode 100644
index 0000000..a0809cf
--- /dev/null
+++ b/sections/rail-front-page.liquid
@@ -0,0 +1,214 @@
+{%- comment -%}
+ Designer Wallcoverings — "Warm Sand" Rail Front Page
+ Sidebar rail (centered logo + full category list + search + cart) beside a huge
+ hero, then editorial image blocks + footer. No horizontal nav. Rail collapses to
+ a top stack on mobile so every category is revealed on scroll.
+ Fully theme-editor driven: colors, images, hero copy, and the category menu.
+{%- endcomment -%}
+
+{%- liquid
+ assign s = section.settings
+ assign rid = section.id
+-%}
+
+<style>
+ #shopify-section-{{ rid }}{ margin:0; }
+ .dwrail-{{ rid }}{
+ --rail-bg:{{ s.rail_bg }}; --rail-tx:{{ s.rail_tx }}; --rail-mut:{{ s.rail_mut }};
+ --act-bg:{{ s.act_bg }}; --accent:{{ s.accent }}; --div:{{ s.divider }};
+ --mono-bg:{{ s.mono_bg }}; --mono-fg:{{ s.mono_fg }};
+ --hero-tx:{{ s.hero_tx }}; --hero-sub:{{ s.hero_sub }};
+ --cta-bg:{{ s.cta_bg }}; --cta-tx:{{ s.cta_tx }};
+ --foot-bg:{{ s.foot_bg }}; --foot-tx:{{ s.foot_tx }};
+ --veil:{{ s.hero_veil }}; --rail-w:{{ s.rail_width }}px;
+ font-family:'Inter',sans-serif; color:var(--hero-tx); background:{{ s.page_bg }};
+ }
+ .dwrail-{{ rid }} *{ box-sizing:border-box; }
+ .dwrail-{{ rid }} a{ color:inherit; text-decoration:none; }
+ .dwrail-{{ rid }} .layout{ display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }
+ .dwrail-{{ rid }} .rail{ background:var(--rail-bg); color:var(--rail-tx); display:flex; flex-direction:column;
+ border-right:1px solid var(--div); position:sticky; top:0; height:100vh; }
+ .dwrail-{{ rid }} .rail-head{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:32px 22px 18px; text-align:center; }
+ .dwrail-{{ rid }} .mono{ width:56px; height:56px; border-radius:11px; background:var(--mono-bg); color:var(--mono-fg);
+ display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:600; font-size:22px; }
+ .dwrail-{{ rid }} .brand{ font-family:'Playfair Display',serif; font-weight:600; font-size:19px; line-height:1.1; }
+ .dwrail-{{ rid }} .tag{ font-size:10.5px; letter-spacing:1.6px; color:var(--rail-mut); }
+ .dwrail-{{ rid }} .search{ width:100%; display:flex; align-items:center; gap:8px; margin-top:6px;
+ background:rgba(255,255,255,.55); border:1px solid var(--div); border-radius:999px; padding:9px 14px; }
+ .dwrail-{{ rid }} .search input{ border:0; background:transparent; outline:none; font:inherit; font-size:12.5px; color:var(--rail-tx); width:100%; }
+ .dwrail-{{ rid }} .search input::placeholder{ color:var(--rail-mut); }
+ .dwrail-{{ rid }} .search svg{ flex:none; stroke:var(--rail-mut); }
+ .dwrail-{{ rid }} .cats{ flex:1; overflow:auto; padding:6px 0; }
+ .dwrail-{{ rid }} .cats a{ display:flex; align-items:center; justify-content:space-between; padding:12.5px 26px; font-size:14.5px;
+ border-bottom:1px solid var(--div); transition:background .15s; }
+ .dwrail-{{ rid }} .cats a .ch{ color:var(--rail-mut); font-size:15px; }
+ .dwrail-{{ rid }} .cats a:hover{ background:var(--act-bg); }
+ .dwrail-{{ rid }} .cats a.on{ background:var(--act-bg); color:var(--accent); font-weight:600; }
+ .dwrail-{{ rid }} .cats a:last-child{ border-bottom:0; }
+ .dwrail-{{ rid }} .rail-foot{ padding:16px 26px 22px; display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--div); }
+ .dwrail-{{ rid }} .rail-foot .u{ display:flex; gap:18px; align-items:center; font-size:13px; color:var(--rail-mut); }
+ .dwrail-{{ rid }} .rail-foot .cart{ display:inline-flex; align-items:center; gap:6px; color:var(--rail-tx); }
+ .dwrail-{{ rid }} .rail-foot .cart .b{ background:var(--accent); color:#fff; border-radius:999px; font-size:10px; font-weight:600;
+ min-width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
+ .dwrail-{{ rid }} .rail-foot .tl{ font-size:12px; font-weight:600; letter-spacing:1px; color:var(--accent); }
+ .dwrail-{{ rid }} .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
+ text-align:center; gap:22px; padding:80px 40px; background-size:cover; background-position:center; isolation:isolate; }
+ .dwrail-{{ rid }} .hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--veil); }
+ .dwrail-{{ rid }} .hero .ey{ font-size:13px; letter-spacing:4px; color:var(--accent); font-weight:600; }
+ .dwrail-{{ rid }} .hero h1{ font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(42px,6vw,84px); line-height:1.02; max-width:820px; }
+ .dwrail-{{ rid }} .hero p{ color:var(--hero-sub); font-size:17px; line-height:1.55; max-width:520px; }
+ .dwrail-{{ rid }} .cta{ margin-top:8px; display:inline-block; background:var(--cta-bg); color:var(--cta-tx); border-radius:999px;
+ padding:15px 34px; font-size:13px; font-weight:500; letter-spacing:1.5px; }
+ .dwrail-{{ rid }} .ed{ position:relative; min-height:500px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
+ gap:14px; padding:44px; color:#fff; text-align:center; background-size:cover; background-position:center; isolation:isolate; }
+ .dwrail-{{ rid }} .ed::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(58,48,37,.15),rgba(58,48,37,.72)); }
+ .dwrail-{{ rid }} .ed h2{ font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(28px,3.4vw,42px); }
+ .dwrail-{{ rid }} .ed .pill{ border:1px solid rgba(255,255,255,.85); color:#fff; border-radius:999px; padding:11px 24px; font-size:12px; letter-spacing:1.5px; }
+ .dwrail-{{ rid }} .foot{ background:var(--foot-bg); color:var(--foot-tx); display:flex; align-items:center; justify-content:space-between;
+ flex-wrap:wrap; gap:14px; padding:36px 48px; font-size:13px; }
+ .dwrail-{{ rid }} .foot b{ font-family:'Playfair Display',serif; font-weight:600; font-size:20px; color:#fff; }
+ .dwrail-{{ rid }} .foot .lnk{ display:flex; gap:24px; }
+ @media(max-width:860px){
+ .dwrail-{{ rid }} .layout{ grid-template-columns:1fr; }
+ .dwrail-{{ rid }} .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--div); }
+ .dwrail-{{ rid }} .rail-head{ padding:26px 22px 16px; }
+ .dwrail-{{ rid }} .cats{ overflow:visible; }
+ .dwrail-{{ rid }} .hero{ min-height:64vh; }
+ .dwrail-{{ rid }} .rail-foot{ flex-direction:row; justify-content:space-between; align-items:center; }
+ .dwrail-{{ rid }} .foot{ padding:28px 22px; }
+ }
+</style>
+
+<div class="dwrail-{{ rid }}">
+ <div class="layout">
+ <aside class="rail">
+ <div class="rail-head">
+ {%- if s.logo != blank -%}
+ <img class="mono" src="{{ s.logo | image_url: width: 120 }}" alt="{{ shop.name }}" width="56" height="56" style="object-fit:cover">
+ {%- else -%}
+ <div class="mono">{{ s.mono_text }}</div>
+ {%- endif -%}
+ <div class="brand">{{ s.brand_name | newline_to_br }}</div>
+ {%- if s.tagline != blank -%}<div class="tag">{{ s.tagline }}</div>{%- endif -%}
+ {%- if s.show_search -%}
+ <form class="search" action="{{ routes.search_url }}" method="get" role="search">
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+ <input type="search" name="q" placeholder="{{ s.search_placeholder }}" aria-label="Search">
+ </form>
+ {%- endif -%}
+ </div>
+ <nav class="cats" aria-label="Categories">
+ {%- for link in linklists[s.menu].links -%}
+ <a href="{{ link.url }}"{% if link.active or link.child_active %} class="on"{% endif %}>{{ link.title }} <span class="ch">›</span></a>
+ {%- else -%}
+ {%- comment -%} Fallback if no menu is chosen {%- endcomment -%}
+ <a href="{{ routes.all_products_collection_url }}" class="on">All Products <span class="ch">›</span></a>
+ {%- endfor -%}
+ </nav>
+ <div class="rail-foot">
+ <div class="u">
+ <a href="{{ routes.account_url }}">Account</a>
+ {%- if s.show_cart -%}<a class="cart" href="{{ routes.cart_url }}">Cart <span class="b">{{ cart.item_count }}</span></a>{%- endif -%}
+ </div>
+ {%- if s.trade_link != blank -%}<a class="tl" href="{{ s.trade_link }}">{{ s.trade_label }}</a>{%- endif -%}
+ </div>
+ </aside>
+
+ <main>
+ <section class="hero"{% if s.hero_image != blank %} style="background-image:url('{{ s.hero_image | image_url: width: 2400 }}')"{% else %} style="background:{{ s.page_bg }}"{% endif %}>
+ {%- if s.hero_eyebrow != blank -%}<div class="ey">{{ s.hero_eyebrow }}</div>{%- endif -%}
+ <h1>{{ s.hero_heading }}</h1>
+ {%- if s.hero_sub != blank -%}<p>{{ s.hero_sub }}</p>{%- endif -%}
+ {%- if s.cta_label != blank -%}<a class="cta" href="{{ s.cta_link | default: routes.all_products_collection_url }}">{{ s.cta_label }}</a>{%- endif -%}
+ </section>
+
+ {%- for block in section.blocks -%}
+ <section class="ed" {{ block.shopify_attributes }}{% if block.settings.image != blank %} style="background-image:url('{{ block.settings.image | image_url: width: 2000 }}')"{% endif %}>
+ <h2>{{ block.settings.heading }}</h2>
+ {%- if block.settings.label != blank -%}<a class="pill" href="{{ block.settings.link | default: routes.all_products_collection_url }}">{{ block.settings.label }}</a>{%- endif -%}
+ </section>
+ {%- endfor -%}
+
+ <footer class="foot">
+ <b>{{ s.brand_name | replace: '<br>', ' ' | strip_newlines }}</b>
+ {%- if linklists[s.footer_menu].links.size > 0 -%}
+ <div class="lnk">{%- for link in linklists[s.footer_menu].links -%}<a href="{{ link.url }}">{{ link.title }}</a>{%- endfor -%}</div>
+ {%- endif -%}
+ <span>© {{ 'now' | date: '%Y' }} {{ shop.name }}</span>
+ </footer>
+ </main>
+ </div>
+</div>
+
+{% schema %}
+{
+ "name": "Rail Front Page",
+ "tag": "section",
+ "class": "section-rail-front-page",
+ "settings": [
+ { "type": "header", "content": "Brand" },
+ { "type": "image_picker", "id": "logo", "label": "Logo (optional — overrides monogram)" },
+ { "type": "text", "id": "mono_text", "label": "Monogram", "default": "DW" },
+ { "type": "text", "id": "brand_name", "label": "Brand name (use a line break for two lines)", "default": "Designer\nWallcoverings" },
+ { "type": "text", "id": "tagline", "label": "Tagline", "default": "TO THE TRADE, SINCE 1998" },
+ { "type": "link_list", "id": "menu", "label": "Category menu", "default": "main-menu" },
+ { "type": "checkbox", "id": "show_search", "label": "Show search in rail", "default": true },
+ { "type": "text", "id": "search_placeholder", "label": "Search placeholder", "default": "Search patterns, colors…" },
+ { "type": "checkbox", "id": "show_cart", "label": "Show cart in rail", "default": true },
+ { "type": "text", "id": "trade_label", "label": "Trade link label", "default": "TRADE LOGIN →" },
+ { "type": "url", "id": "trade_link", "label": "Trade link" },
+ { "type": "range", "id": "rail_width", "min": 240, "max": 360, "step": 10, "unit": "px", "label": "Rail width", "default": 300 },
+
+ { "type": "header", "content": "Hero" },
+ { "type": "image_picker", "id": "hero_image", "label": "Hero image (use a HIGH-END line — mural / gold-leaf / glass-bead / grasscloth)" },
+ { "type": "text", "id": "hero_eyebrow", "label": "Eyebrow", "default": "SPRING 2026" },
+ { "type": "text", "id": "hero_heading", "label": "Heading", "default": "The Spring Collection" },
+ { "type": "textarea", "id": "hero_sub", "label": "Subheading", "default": "The season's most beautiful walls, delivered as samples to your studio." },
+ { "type": "text", "id": "cta_label", "label": "CTA label", "default": "DISCOVER" },
+ { "type": "url", "id": "cta_link", "label": "CTA link" },
+
+ { "type": "header", "content": "Footer" },
+ { "type": "link_list", "id": "footer_menu", "label": "Footer menu", "default": "footer" },
+
+ { "type": "header", "content": "Colors — Warm Sand" },
+ { "type": "color", "id": "page_bg", "label": "Page background", "default": "#e7dcc8" },
+ { "type": "color", "id": "rail_bg", "label": "Rail background", "default": "#efe6d6" },
+ { "type": "color", "id": "rail_tx", "label": "Rail text", "default": "#3a3025" },
+ { "type": "color", "id": "rail_mut", "label": "Rail muted text", "default": "#8a7c66" },
+ { "type": "color", "id": "act_bg", "label": "Active row background", "default": "#e4d7c1" },
+ { "type": "color", "id": "accent", "label": "Accent (brass)", "default": "#a9773f" },
+ { "type": "color", "id": "divider", "label": "Divider", "default": "#ddcfb6" },
+ { "type": "color", "id": "mono_bg", "label": "Monogram background", "default": "#a9773f" },
+ { "type": "color", "id": "mono_fg", "label": "Monogram text", "default": "#ffffff" },
+ { "type": "color", "id": "hero_tx", "label": "Hero heading text", "default": "#3a3025" },
+ { "type": "color", "id": "hero_sub", "label": "Hero subtext", "default": "#6f6152" },
+ { "type": "color_background", "id": "hero_veil", "label": "Hero legibility veil (over image)", "default": "linear-gradient(rgba(231,220,200,.82),rgba(231,220,200,.62))" },
+ { "type": "color", "id": "cta_bg", "label": "CTA background", "default": "#3a3025" },
+ { "type": "color", "id": "cta_tx", "label": "CTA text", "default": "#efe6d6" },
+ { "type": "color", "id": "foot_bg", "label": "Footer background", "default": "#3a3025" },
+ { "type": "color", "id": "foot_tx", "label": "Footer text", "default": "#d8cfc2" }
+ ],
+ "blocks": [
+ {
+ "type": "editorial",
+ "name": "Editorial block",
+ "settings": [
+ { "type": "image_picker", "id": "image", "label": "Image (HIGH-END line only)" },
+ { "type": "text", "id": "heading", "label": "Heading", "default": "Wallcoverings" },
+ { "type": "text", "id": "label", "label": "Button label", "default": "DISCOVER" },
+ { "type": "url", "id": "link", "label": "Link" }
+ ]
+ }
+ ],
+ "max_blocks": 4,
+ "presets": [
+ {
+ "name": "Rail Front Page",
+ "blocks": [
+ { "type": "editorial", "settings": { "heading": "Wallcoverings" } },
+ { "type": "editorial", "settings": { "heading": "Fabrics & Grasscloth" } }
+ ]
+ }
+ ]
+}
+{% endschema %}
(oldest)
·
back to Dw Rail Front Page
·
fix duplicate hero_sub id + luxe fallback imagery ef1ad00 →