Live-preview before/after screenshots: compact toolbar on dev theme #144230645811 (CSS-only)

5ca0ebf3a3ec7a152162c7080e53b745c0b0f962 · 2026-07-15 14:23:29 -0700 · Steve Abrams

Files touched

A shots/A-live-full.png
A shots/B-compact-full.png
A shots/shoot.js

Diff

commit 5ca0ebf3a3ec7a152162c7080e53b745c0b0f962
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Jul 15 14:23:29 2026 -0700

    Live-preview before/after screenshots: compact toolbar on dev theme #144230645811 (CSS-only)
---
 shots/A-live-full.png    | Bin 0 -> 120421 bytes
 shots/B-compact-full.png | Bin 0 -> 119981 bytes
 shots/shoot.js           |  23 +++++++++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/shots/A-live-full.png b/shots/A-live-full.png
new file mode 100644
index 0000000..e956f15
Binary files /dev/null and b/shots/A-live-full.png differ
diff --git a/shots/B-compact-full.png b/shots/B-compact-full.png
new file mode 100644
index 0000000..c4093f6
Binary files /dev/null and b/shots/B-compact-full.png differ
diff --git a/shots/shoot.js b/shots/shoot.js
new file mode 100644
index 0000000..4c59add
--- /dev/null
+++ b/shots/shoot.js
@@ -0,0 +1,23 @@
+const { chromium } = require('/Users/macstudio3/.npm-global/lib/node_modules/playwright');
+const OUT = '/Users/macstudio3/Projects/dw-search-toolbar-mockup/shots';
+const BASE = 'https://designer-laboratory-sandbox.myshopify.com/search?q=red';
+const PREVIEW = BASE + '&preview_theme_id=144230645811';
+
+async function shoot(browser, url, name){
+  const ctx = await browser.newContext({ viewport:{width:1440,height:1000}, deviceScaleFactor:2, userAgent:'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)'});
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil:'domcontentloaded', timeout:60000 });
+  // wait for Boost toolbar / product list to build
+  try { await page.waitForSelector('.boost-sd__product-list, .boost-sd__toolbar', { timeout:35000 }); } catch(e){ console.log(name,'no boost selector'); }
+  await page.waitForTimeout(6000); // let JS-injected pills mount + settle
+  await page.screenshot({ path:`${OUT}/${name}-full.png`, clip:{x:0,y:0,width:1440,height:620} });
+  await ctx.close();
+  console.log('shot:', name);
+}
+
+(async () => {
+  const browser = await chromium.launch({ channel:'chrome', headless:true });
+  await shoot(browser, BASE, 'A-live');
+  await shoot(browser, PREVIEW, 'B-compact');
+  await browser.close();
+})().catch(e=>{ console.error('ERR', e.message); process.exit(1); });

← e2a2de7 DW search toolbar — compact redesign mockup (before/after de · back to Dw Search Toolbar Mockup · (newest)