← back to Designer Wallcoverings
Backup: live PDP section pre-MOQ-push (rollback source)
ce69f4ccd0ec9223e5dc07309908db24fa451b6f · 2026-06-22 14:06:01 -0700 · Steve Abrams
Files touched
A shopify/theme-moq/sections-product.LIVE-143739584563.prepush.bak.liquid
Diff
commit ce69f4ccd0ec9223e5dc07309908db24fa451b6f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 22 14:06:01 2026 -0700
Backup: live PDP section pre-MOQ-push (rollback source)
---
...ns-product.LIVE-143739584563.prepush.bak.liquid | 333 +++++++++++++++++++++
1 file changed, 333 insertions(+)
diff --git a/shopify/theme-moq/sections-product.LIVE-143739584563.prepush.bak.liquid b/shopify/theme-moq/sections-product.LIVE-143739584563.prepush.bak.liquid
new file mode 100644
index 00000000..68ba1bc9
--- /dev/null
+++ b/shopify/theme-moq/sections-product.LIVE-143739584563.prepush.bak.liquid
@@ -0,0 +1,333 @@
+<section class="product-section">
+ <div class="product-container">
+ <div class="breadcrumb">
+ <a href="/">HOME</a> / <a href="/collections/products">PRODUCTS</a> / {{ product.vendor | upcase }} | {{ product.title | upcase }}
+ </div>
+
+ <div class="product-grid">
+ <!-- LEFT: Product Image -->
+ <div class="product-gallery">
+ {% if product.featured_image %}
+ <img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" class="product-main-image">
+ {% endif %}
+
+ <!-- Color swatches -->
+ {% if product.images.size > 1 %}
+ <div class="product-swatches">
+ <p class="swatch-label">Other Colorways</p>
+ <div class="swatch-grid">
+ {% for image in product.images %}
+ <img src="{{ image | img_url: '100x100' }}" alt="{{ product.title }}" class="swatch-image">
+ {% endfor %}
+ </div>
+ </div>
+ {% endif %}
+ </div>
+
+ <!-- RIGHT: Product Details -->
+ <div class="product-details">
+ <div class="product-header">
+ <p class="brand">{{ product.vendor }}</p>
+ <h1 class="product-title">{{ product.title }}</h1>
+ </div>
+
+ <!-- SKU & Price -->
+ <div class="product-meta">
+ {% if product.selected_or_first_available_variant.sku %}
+ <p class="sku"><strong>SKU:</strong> {{ product.selected_or_first_available_variant.sku }}</p>
+ {% endif %}
+ <p class="price"><strong>PRICE:</strong> {{ product.selected_or_first_available_variant.price | money }}</p>
+ </div>
+
+ <!-- Form -->
+ <form method="post" action="/cart/add" id="product-form">
+ <!-- Size/Variant Selector -->
+ {% if product.available %}
+ <div class="form-group">
+ <label class="form-label">SIZE:</label>
+ <div class="variant-buttons">
+ {% for variant in product.variants %}
+ <button type="button" class="variant-btn {% if variant == product.selected_or_first_available_variant %}active{% endif %}" data-variant-id="{{ variant.id }}">
+ {{ variant.title }}
+ </button>
+ {% endfor %}
+ </div>
+ </div>
+
+ <!-- Quantity -->
+ <div class="form-group">
+ <label class="form-label">QUANTITY:</label>
+ <div class="quantity-control">
+ <button type="button" class="qty-btn minus">−</button>
+ <input type="number" name="quantity" value="1" min="1" class="qty-input">
+ <button type="button" class="qty-btn plus">+</button>
+ </div>
+ </div>
+
+ <!-- Buttons -->
+ <div class="form-actions">
+ <button type="button" class="btn btn-secondary">REQUEST SAMPLE</button>
+ <button type="button" class="btn btn-secondary">SPEC SHEET</button>
+ </div>
+ <button type="submit" class="btn btn-primary" id="add-to-cart">ADD TO CART</button>
+
+ <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
+ {% endif %}
+ </form>
+
+ <!-- Specifications -->
+ <div class="specifications">
+ <h3>SPECIFICATIONS</h3>
+ <dl>
+ {% if product.metafields.custom.width %}
+ <dt>Width</dt>
+ <dd>{{ product.metafields.custom.width }}</dd>
+ {% endif %}
+ {% if product.metafields.custom.length %}
+ <dt>Length</dt>
+ <dd>{{ product.metafields.custom.length }}</dd>
+ {% endif %}
+ {% if product.metafields.custom.material %}
+ <dt>Material</dt>
+ <dd>{{ product.metafields.custom.material }}</dd>
+ {% endif %}
+ {% if product.vendor %}
+ <dt>Designer</dt>
+ <dd>{{ product.vendor }}</dd>
+ {% endif %}
+ {% if product.metafields.custom.unit %}
+ <dt>Unit</dt>
+ <dd>{{ product.metafields.custom.unit }}</dd>
+ {% endif %}
+ </dl>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<style>
+.product-section {
+ padding: 2rem;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.breadcrumb {
+ font-size: 0.875rem;
+ margin-bottom: 2rem;
+ color: #666;
+}
+
+.breadcrumb a {
+ color: #333;
+ text-decoration: none;
+}
+
+.product-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
+ margin-bottom: 3rem;
+}
+
+.product-gallery {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.product-main-image {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.swatch-label {
+ font-size: 0.875rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+}
+
+.swatch-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1rem;
+}
+
+.swatch-image {
+ width: 100%;
+ height: auto;
+ cursor: pointer;
+ border: 2px solid #eee;
+ transition: border-color 0.2s;
+}
+
+.swatch-image:hover {
+ border-color: #333;
+}
+
+.product-header {
+ margin-bottom: 1.5rem;
+}
+
+.brand {
+ font-size: 0.875rem;
+ color: #999;
+ margin: 0 0 0.5rem 0;
+}
+
+.product-title {
+ font-size: 1.5rem;
+ font-weight: 400;
+ margin: 0;
+ line-height: 1.2;
+}
+
+.product-meta {
+ display: grid;
+ gap: 0.5rem;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+}
+
+.product-meta p {
+ margin: 0;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-label {
+ display: block;
+ font-weight: 600;
+ font-size: 0.875rem;
+ margin-bottom: 0.75rem;
+}
+
+.variant-buttons {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+
+.variant-btn {
+ padding: 1rem;
+ border: 2px solid #333;
+ background: white;
+ color: #333;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+ font-size: 0.875rem;
+}
+
+.variant-btn.active {
+ background: #333;
+ color: white;
+}
+
+.quantity-control {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ gap: 0.5rem;
+ max-width: 200px;
+}
+
+.qty-btn {
+ background: white;
+ border: 1px solid #ddd;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ font-size: 1.2rem;
+}
+
+.qty-input {
+ border: 1px solid #ddd;
+ text-align: center;
+ font-weight: 600;
+}
+
+.form-actions {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.btn {
+ padding: 1rem;
+ border: none;
+ border-radius: 50px;
+ font-weight: 600;
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.btn-primary {
+ background: #333;
+ color: white;
+ width: 100%;
+}
+
+.btn-primary:hover {
+ background: #000;
+}
+
+.btn-secondary {
+ background: #333;
+ color: white;
+}
+
+.btn-secondary:hover {
+ background: #000;
+}
+
+.specifications {
+ margin-top: 3rem;
+ border-top: 1px solid #eee;
+ padding-top: 2rem;
+}
+
+.specifications h3 {
+ font-size: 0.875rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ letter-spacing: 0.05em;
+}
+
+.specifications dl {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 1rem 2rem;
+}
+
+.specifications dt {
+ font-weight: 600;
+ font-size: 0.875rem;
+}
+
+.specifications dd {
+ margin: 0;
+ font-size: 0.875rem;
+ color: #666;
+}
+
+@media (max-width: 768px) {
+ .product-grid {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+
+ .variant-buttons {
+ grid-template-columns: 1fr;
+ }
+
+ .form-actions {
+ grid-template-columns: 1fr;
+ }
+}
+</style>
← ac76db9f Add push script for grid slider + description deploy
·
back to Designer Wallcoverings
·
auto-save: 2026-06-22T14:06:44 (2 files) — shopify/collectio d61b657d →