← back to Designer Wallcoverings
Collection cards: image-only with hover overlay (pattern name + vendor)
1b6044abeb07598f8a30d826e462fa21e7a669ec · 2026-06-22 17:57:23 -0700 · Steve Abrams
Files touched
M shopify/_cwGRID/assets/custom.cssM shopify/_cwGRID/snippets/product-list-item.liquidA shopify/push-pdp-to-live-5.0.pyA v51-attempt.png
Diff
commit 1b6044abeb07598f8a30d826e462fa21e7a669ec
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 22 17:57:23 2026 -0700
Collection cards: image-only with hover overlay (pattern name + vendor)
---
shopify/_cwGRID/assets/custom.css | 65 ++++++++++++++++++++++
shopify/_cwGRID/snippets/product-list-item.liquid | 7 +++
shopify/push-pdp-to-live-5.0.py | 65 ++++++++++++++++++++++
v51-attempt.png | Bin 0 -> 1627744 bytes
4 files changed, 137 insertions(+)
diff --git a/shopify/_cwGRID/assets/custom.css b/shopify/_cwGRID/assets/custom.css
index 25d5d7fa..04911446 100644
--- a/shopify/_cwGRID/assets/custom.css
+++ b/shopify/_cwGRID/assets/custom.css
@@ -1434,3 +1434,68 @@ input.add-to-cart:hover,
--grid-columns: 2 !important;
}
}
+
+/* === Collection Cards: Image-only with hover overlay === */
+.product-list-item {
+ position: relative;
+}
+
+.product-list-item-details {
+ display: none !important;
+}
+
+.product-list-item-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0);
+ transition: background 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+}
+
+.product-list-item:hover .product-list-item-overlay {
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.product-list-item-info {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ text-align: center;
+ color: white;
+ padding: 20px;
+}
+
+.product-list-item:hover .product-list-item-info {
+ opacity: 1;
+}
+
+.product-list-item-overlay .product-list-item-vendor {
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: #ccc;
+ margin: 0 0 8px;
+}
+
+.product-list-item-overlay .product-list-item-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: white;
+ margin: 0;
+ line-height: 1.4;
+}
+
+.product-list-item-overlay .product-list-item-title a {
+ color: white;
+ text-decoration: none;
+}
+
+.product-list-item-overlay .product-list-item-title a:hover {
+ text-decoration: underline;
+}
diff --git a/shopify/_cwGRID/snippets/product-list-item.liquid b/shopify/_cwGRID/snippets/product-list-item.liquid
index 0f8ba1c0..5f483383 100644
--- a/shopify/_cwGRID/snippets/product-list-item.liquid
+++ b/shopify/_cwGRID/snippets/product-list-item.liquid
@@ -115,6 +115,13 @@
{% endif %}
</figure>
+ <div class="product-list-item-overlay">
+ <div class="product-list-item-info">
+ <p class="product-list-item-vendor">{{ item.vendor }}</p>
+ <h2 class="product-list-item-title"><a href="{{ item.url | within: collection }}">{{ item.title }}</a></h2>
+ </div>
+ </div>
+
<div class="product-list-item-details">
{% if product_vendor %}
<p class="product-list-item-vendor">{{ item.vendor | link_to_vendor }}</p>
diff --git a/shopify/push-pdp-to-live-5.0.py b/shopify/push-pdp-to-live-5.0.py
new file mode 100644
index 00000000..9aacaf6a
--- /dev/null
+++ b/shopify/push-pdp-to-live-5.0.py
@@ -0,0 +1,65 @@
+#!/usr/bin/env python3
+"""
+Push the PDP redesign (Sample/Roll size pills + uniform CTA pills) onto the
+LIVE theme "Steves Version 5.0" (142250278963).
+
+SAFE: backs up each asset (GET-before-PUT) into live-5.0-pdp-backups/ before
+writing, and surgically inserts the 2 theme.liquid include lines after the
+existing dw-card-hover.js include (does NOT overwrite the rest of theme.liquid).
+Idempotent: re-running won't double-insert.
+
+Run from anywhere: python3 ~/Projects/Designer-Wallcoverings/shopify/push-pdp-to-live-5.0.py
+Revert: PUT each live-5.0-pdp-backups/*.bak back to its key on theme 142250278963.
+"""
+import os, re, json, urllib.request, urllib.parse, datetime, sys
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+os.chdir(HERE)
+STORE = 'designer-laboratory-sandbox.myshopify.com'
+TT = re.search(r'shpat_[a-f0-9]{32}', open('../DW-Agents/dw-agents/update-theme-quantity.js').read()).group(0)
+THEME = '142250278963' # LIVE Steves Version 5.0
+H = {'X-Shopify-Access-Token': TT, 'Content-Type': 'application/json'}
+base = 'https://%s/admin/api/2024-01/themes/%s/assets.json' % (STORE, THEME)
+
+def get(key):
+ u = base + '?' + urllib.parse.urlencode({'asset[key]': key})
+ return json.load(urllib.request.urlopen(urllib.request.Request(u, headers=H)))['asset']['value']
+def put(key, val):
+ body = json.dumps({'asset': {'key': key, 'value': val}}).encode()
+ return urllib.request.urlopen(urllib.request.Request(base, data=body, method='PUT', headers=H)).status
+def norm(s): return s.replace('\r\n', '\n').rstrip()
+
+os.makedirs('live-5.0-pdp-backups', exist_ok=True)
+stamp = datetime.datetime.now().strftime('%Y%m%d-%H%M%S')
+LOCAL = 'theme-5.0-duplicate'
+
+for key in ['assets/dw-pdp-restyle.css', 'assets/dw-pdp-size-pills.js']:
+ want = open(os.path.join(LOCAL, key), encoding='utf-8').read()
+ try:
+ cur = get(key)
+ open('live-5.0-pdp-backups/%s.%s.bak' % (key.replace('/', '_'), stamp), 'w', encoding='utf-8').write(cur)
+ print('backup existing', key)
+ except Exception:
+ print('new asset', key)
+ put(key, want); ver = get(key)
+ print('PUT', key, 'verify=', 'OK' if norm(ver) == norm(want) else 'MISMATCH')
+
+tl = get('layout/theme.liquid')
+open('live-5.0-pdp-backups/layout_theme.liquid.%s.bak' % stamp, 'w', encoding='utf-8').write(tl)
+if 'dw-pdp-size-pills.js' in tl:
+ print('theme.liquid already has PDP includes — skip')
+else:
+ anchor = '<script src="{{ \'dw-card-hover.js\' | asset_url }}" defer></script>'
+ if anchor not in tl:
+ print('!! anchor (dw-card-hover include) not found in live theme.liquid — ABORT theme.liquid edit'); sys.exit(1)
+ inject = (anchor +
+ "\n{%- comment -%} DW PDP restyle: size <select> -> pills + uniform CTA pill layout (2026-06-22) {%- endcomment -%}"
+ "\n{{ 'dw-pdp-restyle.css' | asset_url | stylesheet_tag }}"
+ "\n<script src=\"{{ 'dw-pdp-size-pills.js' | asset_url }}\" defer></script>")
+ tl2 = tl.replace(anchor, inject, 1)
+ put('layout/theme.liquid', tl2); ver = get('layout/theme.liquid')
+ print('PUT layout/theme.liquid verify=', 'OK' if 'dw-pdp-size-pills.js' in ver else 'MISMATCH',
+ '(+%d bytes)' % (len(tl2) - len(tl)))
+
+print('\nDONE. Backups in shopify/live-5.0-pdp-backups/ (stamp %s).' % stamp)
+print('Preview: https://www.designerwallcoverings.com/products/stablewood-dwtt-72420')
diff --git a/v51-attempt.png b/v51-attempt.png
new file mode 100644
index 00000000..3f515f56
Binary files /dev/null and b/v51-attempt.png differ
← f74571ed Add push script for collection grid slider + descriptions de
·
back to Designer Wallcoverings
·
auto-save: 2026-06-22T18:07:50 (2 files) — v51-collection.pn d302582e →