← back to Reno Visualizer
Step 3: index.html — real Shopify images + product deep-links, no checkout
3035e40bcd13db169d111790b255b8dcefaad137 · 2026-07-16 07:36:36 -0700 · Steve Abrams
- Pattern grid uses real CDN images from shopify-catalog (image field)
- initShopStep: shows "View on Designer Wallcoverings →" link using
shopify_url = https://www.designerwallcoverings.com/products/<handle>
opens in new tab rel="noopener noreferrer", no cart/checkout
- Lead success screen: CTA button links to product page after capture
- submitLead: sends pattern_handle + pattern_shopify_url in lead body
- Nav note: "Links to the live Designer Wallcoverings product page."
- Sort + density controls unchanged and persisted to localStorage
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Files touched
Diff
commit 3035e40bcd13db169d111790b255b8dcefaad137
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 16 07:36:36 2026 -0700
Step 3: index.html — real Shopify images + product deep-links, no checkout
- Pattern grid uses real CDN images from shopify-catalog (image field)
- initShopStep: shows "View on Designer Wallcoverings →" link using
shopify_url = https://www.designerwallcoverings.com/products/<handle>
opens in new tab rel="noopener noreferrer", no cart/checkout
- Lead success screen: CTA button links to product page after capture
- submitLead: sends pattern_handle + pattern_shopify_url in lead body
- Nav note: "Links to the live Designer Wallcoverings product page."
- Sort + density controls unchanged and persisted to localStorage
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
public/index.html | 18 +++++++++++++++---
1 file changed, 15 insertions(+), 3 deletions(-)
diff --git a/public/index.html b/public/index.html
index d2ecf08..e179a8e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -211,7 +211,8 @@ body { font: 15px/1.5 -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(
<a class="nav-logo" href="/">Designer Wallcoverings</a>
<span class="nav-tag">See It On Your Wall</span>
<span class="nav-spacer"></span>
- <a class="nav-cta" href="https://designerwallcoverings.com" target="_blank" rel="noopener">Shop All Patterns</a>
+ <span class="nav-tag" style="font-size:10px;opacity:0.6;">Links to the live Designer Wallcoverings product page.</span>
+ <a class="nav-cta" href="https://www.designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Shop All Patterns</a>
</nav>
<!-- Step progress bar -->
@@ -416,6 +417,8 @@ body { font: 15px/1.5 -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(
<h3>We've got your look!</h3>
<p>Check your inbox — we'll send ordering details, a sample link, and any project notes.</p>
<br>
+ <div id="lead-success-product-link"></div>
+ <br>
<button class="btn-ghost" onclick="startOver()">Visualize another pattern</button>
</div>
@@ -552,7 +555,6 @@ function renderPatterns(products) {
<img src="${esc(imgSrc)}" alt="${esc(p.title)}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><rect width=%22200%22 height=%22200%22 fill=%22%23e8e4dc%22/></svg>'">
<div class="pattern-meta">
<div class="pattern-title">${esc(p.title)}${p.is_sample ? '<span class="pattern-sample-badge">Sample</span>' : ''}</div>
- <div class="pattern-sub">${esc(p.color || '')}${p.collection ? ' · ' + esc(p.collection) : ''}</div>
<div class="pattern-sub">${esc(p.vendor || '')}</div>
${p.price ? `<div class="pattern-price">${fmtPrice(p.price)}/roll</div>` : ''}
</div>
@@ -817,13 +819,15 @@ function initShopStep() {
if (!p) return;
const imgSrc = p.image_url || p.image || '';
const roomSrc = r?.custom ? r.dataUrl : (r?.src || '');
+ const productUrl = p.shopify_url || (p.handle ? `https://www.designerwallcoverings.com/products/${p.handle}` : '');
$('#look-preview').innerHTML = `
<img class="look-room-thumb" src="${esc(roomSrc)}" alt="Room" onerror="this.style.display='none'">
<img class="look-pattern-thumb" src="${esc(imgSrc)}" alt="${esc(p.title)}" onerror="this.style.background='${esc(p.hex||'#e8e4dc')}'">
<div class="look-info">
<h3>${esc(p.title)}</h3>
- <p>${esc(p.vendor || '')} · ${esc(p.color || '')}${p.collection ? ' · ' + esc(p.collection) : ''}</p>
+ <p>${esc(p.vendor || '')}${p.color ? ' · ' + esc(p.color) : ''}${p.collection ? ' · ' + esc(p.collection) : ''}</p>
<p class="price">${fmtPrice(p.price)}/roll</p>
+ ${productUrl ? `<p style="margin-top:6px;"><a href="${esc(productUrl)}" target="_blank" rel="noopener noreferrer" style="font-size:12px;color:var(--brand-light);text-decoration:underline;">View on Designer Wallcoverings →</a></p>` : ''}
</div>`;
}
@@ -835,6 +839,7 @@ async function submitLead(e) {
const p = state.selectedPattern;
const r = state.selectedRoom;
+ const productUrl = p?.shopify_url || (p?.handle ? `https://www.designerwallcoverings.com/products/${p.handle}` : '');
const body = {
email: $('#lead-email').value.trim(),
name: $('#lead-name').value.trim(),
@@ -843,6 +848,8 @@ async function submitLead(e) {
pattern_sku: p?.sku || null,
pattern_title: p?.title || null,
pattern_vendor: p?.vendor || null,
+ pattern_handle: p?.handle || null,
+ pattern_shopify_url: productUrl || null,
room_label: r?.label || null,
};
@@ -856,6 +863,11 @@ async function submitLead(e) {
if (d.ok) {
$('#shop-form-wrap').style.display = 'none';
$('#lead-success').style.display = 'block';
+ // Show direct product link after capture
+ const linkEl = $('#lead-success-product-link');
+ if (linkEl && productUrl) {
+ linkEl.innerHTML = `<a href="${esc(productUrl)}" target="_blank" rel="noopener noreferrer" class="btn-primary" style="display:inline-block;text-decoration:none;margin-bottom:8px;">View This Pattern on Designer Wallcoverings →</a><br><small style="color:var(--muted);font-size:11px;">Links to the live Designer Wallcoverings product page.</small>`;
+ }
} else {
btn.disabled = false;
btn.textContent = 'Send My Look →';
← f3bc6c5 Step 2: server.js — load products from shopify-catalog.json
·
back to Reno Visualizer
·
Step 4: admin.html — show Shopify product link on lead cards e416e7d →