{% doc %} LUNE Product Showcase Renders a single product (image gallery + details) driven entirely by the live `product` object, so editing/publishing a product in Shopify Admin updates this page automatically — no hardcoded content. Place this file at: sections/lune-product-showcase.liquid Then assign it to your product template from the Theme Editor (Online Store > Themes > Customize > Products > add section). {% enddoc %} {% liquid assign current_variant = product.selected_or_first_available_variant %}

{{ product.title }}

{{ current_variant.price | money }}
{{ product.description }}
{% for option in product.options_with_values %}
{{ option.name }}
{% for value in option.values %} {% endfor %}
{% endfor %}
{% for tag in product.tags %} {% assign parts = tag | split: ':' %} {% if parts.size == 2 %}
{{ parts[0] }}{{ parts[1] }}
{% endif %} {% endfor %}
{% comment %} Variant JSON so JS can react to option changes without a page reload {% endcomment %}
{{ shop.name | slice: 0, 12 | upcase }}
{% stylesheet %} .lune-product{ --lp-night:#12141B; --lp-panel:#1B1E27; --lp-moon:#F1ECDF; --lp-hush:#8C90A0; --lp-glow:#D9C9A8; --lp-rule:rgba(241,236,223,0.14); display:grid; grid-template-columns: 78px 1fr 1fr; gap:28px; max-width:1040px; margin:0 auto; padding:56px 40px 90px; background:var(--lp-night); color:var(--lp-moon); font-family: inherit; } @media (max-width: 860px){ .lune-product{ grid-template-columns:1fr; padding:36px 22px 70px; } .lune-product__thumbs{ order:2; flex-direction:row !important; flex-wrap:wrap; } .lune-product__stage{ order:1; } .lune-product__details{ order:3; } } .lune-product__thumbs{ display:flex; flex-direction:column; gap:12px; } .lune-thumb{ width:60px; height:60px; border-radius:8px; background:var(--lp-panel); border:1px solid var(--lp-rule); cursor:pointer; padding:4px; overflow:hidden; } .lune-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:4px; } .lune-thumb--active{ border-color:var(--lp-glow); } .lune-product__stage{ background:var(--lp-panel); border-radius:16px; min-height:440px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .lune-product__stage img{ width:100%; height:100%; object-fit:cover; } .lune-product__placeholder{ color:var(--lp-hush); } .lune-product__details h1{ font-size:32px; margin:0 0 8px; } .lune-product__price{ font-size:19px; color:var(--lp-glow); margin-bottom:18px; } .lune-product__desc{ color:var(--lp-hush); font-size:15px; line-height:1.7; max-width:44ch; margin-bottom:10px; } .lune-option{ margin-top:22px; } .lune-option__label{ font-size:12px; letter-spacing:1.5px; color:var(--lp-hush); margin-bottom:10px; } .lune-option__values{ display:flex; gap:10px; flex-wrap:wrap; } .lune-opt-btn{ min-width:44px; height:40px; padding:0 12px; border:1px solid var(--lp-rule); border-radius:8px; background:none; color:var(--lp-moon); font-size:13px; cursor:pointer; } .lune-opt-btn--active{ border-color:var(--lp-glow); color:var(--lp-glow); } .lune-cta-row{ display:flex; gap:14px; margin-top:30px; } .lune-btn{ flex:1; padding:15px 18px; border-radius:10px; font-size:14px; cursor:pointer; } .lune-btn--primary{ background:var(--lp-glow); color:var(--lp-night); border:none; } .lune-btn--secondary{ background:none; color:var(--lp-moon); border:1px solid var(--lp-rule); } .lune-btn:disabled{ opacity:0.5; cursor:not-allowed; } .lune-spec-list{ margin-top:26px; font-size:13px; color:var(--lp-hush); } .lune-spec-list div{ display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--lp-rule); } .lune-toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--lp-panel, #1B1E27); border:1px solid rgba(241,236,223,0.14); color:#F1ECDF; padding:13px 22px; border-radius:10px; font-size:13.5px; opacity:0; transition:opacity .3s ease, transform .3s ease; z-index:60; } .lune-toast--show{ opacity:1; transform:translateX(-50%) translateY(0); } .lune-overlay{ position:fixed; inset:0; background:rgba(11,12,17,0.7); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:50; } .lune-overlay--show{ opacity:1; pointer-events:auto; } .lune-bag-scene{ position:relative; width:220px; height:260px; } .lune-bag-graphic{ position:absolute; bottom:0; left:0; width:100%; transform:scale(0.9); transition:transform .4s cubic-bezier(.3,1.6,.4,1); } .lune-overlay--show .lune-bag-graphic{ transform:scale(1); } .lune-bag-graphic--bounce{ animation: luneBagBounce .45s ease; } @keyframes luneBagBounce{ 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.06) rotate(-1.5deg); } 70%{ transform:scale(0.98) rotate(1deg); } } {% endstylesheet %} {% schema %} { "name": "LUNE Product Showcase", "settings": [], "presets": [ { "name": "LUNE Product Showcase" } ] } {% endschema %}