← back to Dw Rail Front Page
sections/rail-front-page.liquid
221 lines
{%- 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
comment
Luxe fallback imagery (high-end lines only) so the section renders with real
imagery before a merchant picks assets. Never Brewster/York/WallQuest.
endcomment
assign hero_fallback = 'https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg'
assign block_fallbacks = 'https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75107.jpg,https://cdn.shopify.com/s/files/1/0015/4117/7456/files/T75111_70b8dbaa-4a4c-4660-b503-0df6999bad94.jpg' | split: ','
-%}
<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_color }};
--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-image:url('{{ hero_fallback }}')"{% 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 }}')"{% else %} style="background-image:url('{{ block_fallbacks[forloop.index0] | default: block_fallbacks.first }}')"{% 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 — high-end line only", "info": "Mural / gold-leaf / glass-bead / grasscloth. Never Brewster/York/WallQuest." },
{ "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_color", "label": "Hero subtext color", "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 %}