<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Yassine</title>
    <description>The latest articles on DEV Community by Yassine (@ybouane).</description>
    <link>https://dev.to/ybouane</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2984415%2F94f9f3d2-dfd6-4d55-a1b2-899c3346e087.jpeg</url>
      <title>DEV Community: Yassine</title>
      <link>https://dev.to/ybouane</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ybouane"/>
    <language>en</language>
    <item>
      <title>A Lightweight Smoke Test for Shopify Size-Chart Rules</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Sat, 31 Oct 2026 10:31:14 +0000</pubDate>
      <link>https://dev.to/ybouane/a-lightweight-smoke-test-for-shopify-size-chart-rules-1290</link>
      <guid>https://dev.to/ybouane/a-lightweight-smoke-test-for-shopify-size-chart-rules-1290</guid>
      <description>&lt;h1&gt;
  
  
  A Lightweight Smoke Test for Shopify Size-Chart Rules
&lt;/h1&gt;

&lt;p&gt;I was about to add one more collection rule to a Shopify size-chart setup when I noticed the uncomfortable bit: I could explain the rule in the admin, but I had not proved what a shopper would see. A lightweight smoke test fixes that. Before publishing, pick a small set of representative products, predict the chart each should receive, then check the rendered product pages—including one deliberate exception.&lt;/p&gt;

&lt;p&gt;This is not a substitute for fit research or customer testing. It is a fast way to catch a chart silently landing on the wrong product because a collection, tag, or product type was broader than I remembered. For stores using &lt;a href="https://supra-size-chart.sktch.io/" rel="noopener noreferrer"&gt;Supra Size Chart&lt;/a&gt;, the useful ingredients are already there: central charts, rules by product, collection, type, vendor, or tag, and a theme app block that renders on the product page.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem: a rule can look right and still cover the wrong products
&lt;/h2&gt;

&lt;p&gt;A rule engine is a great way to avoid pasting tables into every description. But catalog data is messy: a seasonal hoodie can inherit a &lt;code&gt;tops&lt;/code&gt; collection; a product type can be renamed; a bundle can have its own fit. The more convenient the matching rule, the more important the exception check becomes.&lt;/p&gt;

&lt;p&gt;I treat the smoke test as a tiny contract between the catalog and the storefront. Shopify describes &lt;a href="https://shopify.dev/docs/apps/build/metaobjects" rel="noopener noreferrer"&gt;metaobjects as reusable structured data&lt;/a&gt;, which is the right mental model here: the chart can be one reusable object, while the assignment still needs evidence that it belongs on each product family.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpwq4k6mkp0tdb3wnpo07.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpwq4k6mkp0tdb3wnpo07.png" alt="Rule audit flow: products resolve through rules to a size chart" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Build a five-product fixture, not a full-catalog spreadsheet
&lt;/h2&gt;

&lt;p&gt;I start with five products. The exact count is not sacred; the goal is to represent the boundaries of the rule. For a &lt;code&gt;Tops&lt;/code&gt; collection rule, my fixture might be:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Product&lt;/th&gt;
&lt;th&gt;Why it is in the fixture&lt;/th&gt;
&lt;th&gt;Expected result&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Core tee&lt;/td&gt;
&lt;td&gt;Normal member of the collection&lt;/td&gt;
&lt;td&gt;Adult tops chart&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Oversized hoodie&lt;/td&gt;
&lt;td&gt;Same collection, different fit&lt;/td&gt;
&lt;td&gt;Adult tops chart plus a visible fit note, if that is the store policy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Kids tee&lt;/td&gt;
&lt;td&gt;Similar name but separate audience&lt;/td&gt;
&lt;td&gt;Kids chart or no match&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gift bundle&lt;/td&gt;
&lt;td&gt;Can inherit collection membership unexpectedly&lt;/td&gt;
&lt;td&gt;Its own chart or no match&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Archived sample&lt;/td&gt;
&lt;td&gt;Edge case that should never render publicly&lt;/td&gt;
&lt;td&gt;Not tested on the live storefront&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The key is writing the expected result &lt;strong&gt;before&lt;/strong&gt; opening the product pages. If I decide what looks acceptable after I see it, the test becomes a tour rather than a check.&lt;/p&gt;

&lt;p&gt;For a more general pattern, I use the same small-fixture approach when planning a broad catalog change; I wrote about it in &lt;a href="https://dev.to/ybouane/i-planned-a-safe-etsy-bulk-edit-before-touching-a-listing-512o"&gt;my Etsy bulk-edit planning workflow&lt;/a&gt;. Different platform, same discipline: define the intended change and the awkward cases first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check the three layers that actually affect the shopper
&lt;/h2&gt;

&lt;p&gt;My smoke test has three passes. They are intentionally boring. Boring checks catch expensive surprises.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Data:&lt;/strong&gt; open the chosen chart. Confirm its columns, units, notes, and measurement guide match the fit family. A chart with &lt;code&gt;Chest&lt;/code&gt; and &lt;code&gt;Length&lt;/code&gt; is not automatically useful for every product called a top.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Match:&lt;/strong&gt; inspect why each fixture product matches. Is it the collection, a product-specific override, a product type, a vendor, or a tag? If two rules can apply, confirm the intended precedence rather than guessing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Render:&lt;/strong&gt; use a storefront preview or a safe test product to verify that the block appears where shoppers need it, the selected display mode is understandable, and the measurement guide is available with the numbers.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffed2onzn66xa73pg3hyh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffed2onzn66xa73pg3hyh.png" alt="A scanner checking product cards for size-chart coverage" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The last pass matters because an assignment can be technically correct but useless in context. A modal trigger hidden below a long product description is different from an inline chart near the size selector. Supra Size Chart supports inline, accordion, and modal treatments; choose the display pattern that matches the product page, then test that actual page rather than trusting the editor. The &lt;a href="https://apps.shopify.com/supra-size-chart" rel="noopener noreferrer"&gt;Shopify App Store listing&lt;/a&gt; documents those rule and display options.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make failures actionable
&lt;/h2&gt;

&lt;p&gt;When one fixture fails, I do not immediately patch the chart. I classify the failure first:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Wrong chart, right visibility:&lt;/strong&gt; narrow the assignment rule or add a more specific one.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Right chart, wrong measurement vocabulary:&lt;/strong&gt; split the fit family; a relaxed hoodie and a fitted tee may need separate guidance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Right match, no storefront block:&lt;/strong&gt; check the theme app block placement on the relevant product template.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Right chart but confusing choice:&lt;/strong&gt; add a short fit note or measurement-guide label; do not pretend a numerical table answers an ambiguous fit question.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That classification prevents an easy-looking fix from becoming catalog debt. It also gives the next person a clear reason for the rule, which is valuable when a new collection arrives months later.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj49lvs7roqeaj8ydev3t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj49lvs7roqeaj8ydev3t.png" alt="Three-stage deployment checklist for data, rules, and storefront rendering" width="800" height="1200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Turn the smoke test into a release habit
&lt;/h2&gt;

&lt;p&gt;My release note is only four lines: rule changed, fixture products, expected outcomes, and actual outcomes. I rerun it when I add a collection, rename a product type, change a theme template, or import sizing data. CSV and JSON export are useful escape hatches, but they do not prove the customer-facing match; the storefront pass does.&lt;/p&gt;

&lt;p&gt;This is the same lesson behind &lt;a href="https://dev.to/ybouane/i-added-a-tiny-smoke-test-after-every-static-site-export-157f"&gt;the static-export smoke test I added to another publishing pipeline&lt;/a&gt;: the smallest realistic check is usually more useful than a giant plan that nobody reruns.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;A Shopify size-chart rule deserves a five-product smoke test before it reaches a collection launch. Predict the match, include an exception, verify data → rule → storefront, and write down failures by type. You will not prove garment fit with this process, but you will catch the avoidable problem of showing the wrong guide to the wrong shopper.&lt;/p&gt;

&lt;p&gt;If you are setting up a rule-based sizing system, install &lt;a href="https://apps.shopify.com/supra-size-chart" rel="noopener noreferrer"&gt;Supra Size Chart&lt;/a&gt;, start with one fit family, and make the fixture list part of the launch checklist. What is the strangest product that has slipped through one of your catalog rules?&lt;/p&gt;

</description>
      <category>shopify</category>
      <category>ecommerce</category>
      <category>testing</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Made a Static Framer Snapshot Before Launch Day</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Sat, 24 Oct 2026 14:25:51 +0000</pubDate>
      <link>https://dev.to/ybouane/i-made-a-static-framer-snapshot-before-launch-day-5c04</link>
      <guid>https://dev.to/ybouane/i-made-a-static-framer-snapshot-before-launch-day-5c04</guid>
      <description>&lt;p&gt;I was two hours from launching a Framer campaign page when I noticed the uncomfortable part of a hosted-only launch: I had no deployable copy of the exact version we had approved. If an embed, domain change, or last-minute edit went sideways, our rollback plan was basically "open Framer and hope."&lt;/p&gt;

&lt;p&gt;So I made a static snapshot before touching the launch controls. It was not a migration away from Framer. It was a portable, testable checkpoint that gave the team another way to preview, deploy, and recover the page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzuvvzbu569t9esrscmi2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzuvvzbu569t9esrscmi2.png" alt="Framer page assets pass through an export check" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is the workflow I now use.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I wanted a snapshot instead of a screenshot
&lt;/h2&gt;

&lt;p&gt;A screenshot tells me whether the hero looked right at one viewport. A static snapshot has the files that make the page work: HTML, CSS, JavaScript, fonts, images, and media. That distinction matters for animated landing pages.&lt;/p&gt;

&lt;p&gt;I wanted to answer a few boring but launch-saving questions before traffic arrived:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Can the page render outside its usual host?&lt;/li&gt;
&lt;li&gt;Do navigation, CTA links, fonts, and responsive sections still work?&lt;/li&gt;
&lt;li&gt;Is there a deployable artifact I can hand to another developer?&lt;/li&gt;
&lt;li&gt;Can I test an alternate static host without rebuilding the page by hand?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is a different job from moving a domain. If domain cutover is the immediate concern, this earlier write-up on &lt;a href="https://the-lean-ecommerce.gitlab.io/2026/10/21/i-mapped-my-framer-domain-cutover-before-i-moved-it/" rel="noopener noreferrer"&gt;mapping a Framer domain cutover&lt;/a&gt; is a useful companion. My goal here was narrower: capture a known-good release before launch day.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Freeze the version I am exporting
&lt;/h2&gt;

&lt;p&gt;First I write down the published URL, the intended campaign path, and the time of the snapshot. Then I stop changing copy long enough to make the export meaningful.&lt;/p&gt;

&lt;p&gt;That sounds fussy, but it stops a common failure mode: testing a static copy of yesterday's design while production contains a new form, script, or pricing card. For a campaign page, I also list third-party dependencies separately: analytics, forms, scheduling widgets, cookie tools, and video embeds. Those are usually the things that cannot be proven just by checking that the HTML loaded.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Export with the platform in mind
&lt;/h2&gt;

&lt;p&gt;I use &lt;a href="https://exflow.site/framer" rel="noopener noreferrer"&gt;ExFlow's Framer exporter&lt;/a&gt; because the target is specifically a published Framer site. It can collect the page output, CSS, JavaScript, fonts, and media into static files, then let me download a ZIP or sync/deploy to Git, S3, FTP, or ExFlow Hosting.&lt;/p&gt;

&lt;p&gt;The practical sequence is simple:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Enter the published Framer URL.&lt;/li&gt;
&lt;li&gt;Run the export.&lt;/li&gt;
&lt;li&gt;Keep the resulting archive as the release snapshot.&lt;/li&gt;
&lt;li&gt;Put a copy on a preview host before treating it as a fallback.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A generic downloader can be fine for a tiny brochure page. I do not rely on one for a launch page with animations, lazy-loaded media, and responsive behavior, because those are the first details likely to become invisible breakage.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Test the artifact where it will actually run
&lt;/h2&gt;

&lt;p&gt;I do not unzip the export, open &lt;code&gt;index.html&lt;/code&gt;, and call it done. Browsers can be more forgiving locally than they are on a real host. Instead, I deploy the output to a preview URL and test it in the same shape as the eventual fallback.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Farh7c1r4eujbau5qvxwh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Farh7c1r4eujbau5qvxwh.png" alt="Static site archive deploys to version control cloud and server hosting" width="800" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For a quick local pass, this tiny server is enough to catch obvious relative-path problems:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx serve ./framer-export
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then I use a real preview host. Git is useful when I want a versioned handoff; an S3 bucket or FTP server can fit an existing static-hosting setup; ExFlow Hosting is the shorter route when I do not need to manage another deployment target. The important part is that I can point a browser at the result without relying on the original Framer environment.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Run a launch-oriented smoke test
&lt;/h2&gt;

&lt;p&gt;My checklist is intentionally more specific than "it looks good":&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Visit the homepage and every campaign CTA.&lt;/li&gt;
&lt;li&gt;Test navigation, footer links, and any redirect paths.&lt;/li&gt;
&lt;li&gt;Check mobile and desktop breakpoints.&lt;/li&gt;
&lt;li&gt;Wait for fonts, images, and video/media to finish loading.&lt;/li&gt;
&lt;li&gt;Trigger animations and interactive sections.&lt;/li&gt;
&lt;li&gt;Inspect page title, description, social preview metadata, and canonical URL.&lt;/li&gt;
&lt;li&gt;Submit or deliberately test each form's failure behavior.&lt;/li&gt;
&lt;li&gt;Open DevTools and look for failed network requests.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffvw1gsrwpt2rtgkf14og.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffvw1gsrwpt2rtgkf14og.png" alt="Launch day smoke test verifies an exported site" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Forms deserve a special note. A static export can preserve the form UI while the form's backend requires its own configuration or verification. I test that explicitly rather than promising stakeholders that every hosted integration automatically follows the files.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Keep the snapshot useful after launch
&lt;/h2&gt;

&lt;p&gt;The archive only helps if someone can identify it later. I name mine with the campaign and date, store it alongside the preview URL, and record which external services were tested. If I sync to Git, I add a short release note with the original Framer URL and commit hash.&lt;/p&gt;

&lt;p&gt;This also makes handoff less mysterious. The next developer gets a concrete artifact and a list of known external dependencies, rather than an instruction to reverse-engineer a live marketing page. For a more deployment-focused follow-up, I previously documented &lt;a href="https://the-lean-ecommerce.github.io/2026/10/21/i-exported-my-framer-launch-page-to-git-before-my-campaign-went-live/" rel="noopener noreferrer"&gt;exporting a Framer launch page to Git before a campaign&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;ExFlow also has dedicated exporters for &lt;a href="https://exflow.site/webflow" rel="noopener noreferrer"&gt;Webflow&lt;/a&gt; and &lt;a href="https://exflow.site/squarespace" rel="noopener noreferrer"&gt;Squarespace&lt;/a&gt;, but I prefer starting with the platform-specific workflow rather than pretending every site builder fails in the same way.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;Before a Framer launch, I now create a static snapshot, deploy it somewhere testable, and smoke-test the real launch paths. It is not a substitute for a thoughtful domain plan or integration tests. It is a practical rollback and handoff artifact that removes one more unknown from launch day.&lt;/p&gt;

&lt;p&gt;If you have used a static export as a launch fallback, what was the first thing that broke outside the original host?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>framer</category>
      <category>staticweb</category>
      <category>devops</category>
    </item>
    <item>
      <title>I Planned a Safe Etsy Bulk Edit Before Touching a Listing</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Wed, 21 Oct 2026 16:33:39 +0000</pubDate>
      <link>https://dev.to/ybouane/i-planned-a-safe-etsy-bulk-edit-before-touching-a-listing-512o</link>
      <guid>https://dev.to/ybouane/i-planned-a-safe-etsy-bulk-edit-before-touching-a-listing-512o</guid>
      <description>&lt;p&gt;I was staring at 186 Etsy listings that all needed the same seasonal cleanup. My first impulse was to select everything, change a few titles and tags, and call it a productive afternoon.&lt;/p&gt;

&lt;p&gt;Then I remembered the last time a supposedly small catalog update leaked into listings with odd variation structures. The edit was technically successful. The cleanup afterward was not.&lt;/p&gt;

&lt;p&gt;So I stopped treating bulk edits as a button and started treating them as a tiny deployment: define the change, make the target set explainable, test it on representative records, then verify the buyer-facing result. This is the workflow I use with &lt;a href="https://bulk-listing-editor.webyze.com/" rel="noopener noreferrer"&gt;Bulk Listing Editor for Etsy&lt;/a&gt;, which keeps the mechanics simple: search, select listings or variations, specify the modification, then run the bulk edit.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuipjh8rxr0ha96v0qhcf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuipjh8rxr0ha96v0qhcf.png" alt="A safe filter, selection, and single-change workflow for Etsy listings" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The rule that saved me: write one change sentence
&lt;/h2&gt;

&lt;p&gt;Before I open a bulk-edit screen, I write the operation as one plain sentence. For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Add the material "linen" to all summer napkin listings in collection X.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Or:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Increase the price of the large variation by $2 for this product family.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If I cannot write that sentence without using &lt;em&gt;and&lt;/em&gt;, I have more than one operation. Titles, tags, prices, photos, SKUs, inventory, descriptions, personalization settings, and variations are all valid candidates for batch work, but bundling unrelated modifications makes failures hard to locate.&lt;/p&gt;

&lt;p&gt;That sentence also answers an important question: is this a listing edit or a variation edit? Whole-product fields belong to the listing; option-specific values such as a size, color, SKU, price, or quantity belong to a variation. I keep &lt;a href="https://the-lean-ecommerce.github.io/2026/09/16/how-to-decide-whether-an-etsy-change-belongs-in-listings-or-variations/" rel="noopener noreferrer"&gt;this listing-versus-variation decision guide&lt;/a&gt; nearby because choosing the wrong level is how a narrow change becomes a catalog-wide surprise.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build a target set I can defend
&lt;/h2&gt;

&lt;p&gt;A count is not a selection rule. “186 matches” may feel reassuring, but it tells me nothing about whether the &lt;em&gt;right&lt;/em&gt; 186 records are included.&lt;/p&gt;

&lt;p&gt;I start with the smallest filter that describes the intended set, then inspect enough results to find awkward cases: an old listing with a legacy title pattern, a product with more variations than usual, an item that is out of stock, and one with customized media. For a seasonal tag change, I am looking for listings that should not carry the tag; for a price update, I am looking for special cases that should not inherit the rule.&lt;/p&gt;

&lt;p&gt;My stop condition is simple: I should be able to explain why any selected item is present and why a nearby item is absent. If that explanation turns into a story, the filter needs work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Test the rule on a deliberately weird sample
&lt;/h2&gt;

&lt;p&gt;I do not test on five ordinary listings. I want a sample that tries to break my assumption: one normal record, one variation-heavy record, one listing with a special price, one with a legacy SKU or title, and one item whose images are arranged differently.&lt;/p&gt;

&lt;p&gt;That sample gives me a fast answer to questions the bulk UI cannot infer for me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does the title replacement damage a word in the middle of a phrase?&lt;/li&gt;
&lt;li&gt;Did a tag get added twice, or did an old tag remain?&lt;/li&gt;
&lt;li&gt;Does a variation-level price change stay limited to the intended option?&lt;/li&gt;
&lt;li&gt;Are inventory, images, and personalization settings still sensible on the storefront?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a more formal five-record pass, &lt;a href="https://tools-and-how-tos.github.io/2026/09/16/how-to-test-an-etsy-bulk-edit-before-updating-your-catalog/" rel="noopener noreferrer"&gt;this Etsy bulk-edit test workflow&lt;/a&gt; is the same idea expressed as a repeatable checklist. The point is not process theater. It is avoiding an edit that is too broad to understand after it runs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9jksetnr5y0cypgh6835.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9jksetnr5y0cypgh6835.png" alt="A controlled audit separates Etsy variation edits from the wider catalog" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Separate listing work from variation work
&lt;/h2&gt;

&lt;p&gt;Bulk Listing Editor has distinct Listings and Variations modes, and I use that separation as a safety boundary. In Listings mode, I use changes that apply to the product as a whole: titles, descriptions, tags, materials, images, or personalization settings. In Variations mode, I work on option-specific fields: sizes, colors, SKUs, prices, and inventory.&lt;/p&gt;

&lt;p&gt;The tricky cases are mixed catalogs. A collection can contain a listing with “Blue / Small” and another with “Ocean / Mini.” They may mean similar things to a shopper, but a bulk rule should not pretend those are the same data model. I normalize or isolate inconsistent records before I include them.&lt;/p&gt;

&lt;p&gt;This is also where I resist the urge to clean everything in one pass. If I need to rename an option, adjust its SKUs, and change its price, I make three small runs. That makes each result easier to verify and gives me a clear answer when someone asks what changed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Run the real edit once, then inspect the storefront
&lt;/h2&gt;

&lt;p&gt;Once the test batch passes, I repeat the same search criteria, expand the selection, and run the one planned modification. I record the date, the exact change sentence, the affected count, and a handful of listing URLs. That is enough of an audit trail for a small shop without inventing a new operations system.&lt;/p&gt;

&lt;p&gt;Afterward, I open representative listings as a buyer would. I check:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the visible title and description&lt;/li&gt;
&lt;li&gt;the selected variation and its price&lt;/li&gt;
&lt;li&gt;stock and SKU behavior where it matters&lt;/li&gt;
&lt;li&gt;image order and the first gallery image&lt;/li&gt;
&lt;li&gt;tags, materials, and personalization options&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwaj7ulw1hec2ct3apw03.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwaj7ulw1hec2ct3apw03.png" alt="Before-and-after checks validate a bulk listing update" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The storefront check matters because a batch editor can confirm that it applied a request; it cannot tell me whether the resulting page still communicates the right thing to a person shopping.&lt;/p&gt;

&lt;h2&gt;
  
  
  The trade-off: slower starts, much faster recovery
&lt;/h2&gt;

&lt;p&gt;This workflow adds perhaps ten minutes before a large edit. It is not ideal when I genuinely need an emergency catalog correction. But most “urgent” bulk updates become expensive because the selection rule or scope was unclear, not because the button took too long to click.&lt;/p&gt;

&lt;p&gt;Bulk Listing Editor is especially useful when the same cleanup pattern repeats across listings or variations. It has a &lt;a href="https://bulk-listing-editor.webyze.com/" rel="noopener noreferrer"&gt;seven-day free trial and an $8/month subscription&lt;/a&gt;, so I would use the trial to run one real, tightly-scoped catalog task—not a random mass edit—to see whether the three-step workflow fits the shop’s data.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;I plan a safe Etsy bulk edit by writing one precise change sentence, choosing the correct listing or variation level, testing the rule on awkward records, then checking the buyer-facing result after the full run.&lt;/p&gt;

&lt;p&gt;My next action is to pick one repetitive catalog chore and run a five-listing test before touching the rest. What is the one Etsy change you keep postponing because doing it manually feels safer?&lt;/p&gt;

</description>
      <category>etsy</category>
      <category>ecommerce</category>
      <category>productivity</category>
      <category>workflow</category>
    </item>
    <item>
      <title>I Turned Shopify Objections Into Video Briefs With a Tiny YAML Schema</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Mon, 19 Oct 2026 02:28:13 +0000</pubDate>
      <link>https://dev.to/ybouane/i-turned-shopify-objections-into-video-briefs-with-a-tiny-yaml-schema-593</link>
      <guid>https://dev.to/ybouane/i-turned-shopify-objections-into-video-briefs-with-a-tiny-yaml-schema-593</guid>
      <description>&lt;p&gt;I was trying to make a short product video for a Shopify store whose customers kept asking one question: &lt;em&gt;Will this actually work for my use case?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;My first instinct was to write a clever hook and generate a few AI UGC variations. That produced videos, but not necessarily answers. The problem was upstream: the customer objection was sitting in a support inbox, while the video prompt was a vague paragraph in another tab.&lt;/p&gt;

&lt;p&gt;I fixed that by treating each objection as input data. A tiny YAML schema now turns a customer question into a reviewable video brief before I open the generator. It is deliberately small enough to edit by hand, but structured enough to stop the usual \"make it engaging\" drift.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://supra-ugc-maker.sktch.io/" rel="noopener noreferrer"&gt;Supra UGC Maker&lt;/a&gt; is a useful fit for this workflow because its projects let me combine an avatar, scene, product reference, script, voice/tone, and reusable clips. The schema is not tied to one tool, though; it is the boundary between a customer problem and any video-production system.&lt;/p&gt;

&lt;h2&gt;
  
  
  The brief is the interface
&lt;/h2&gt;

&lt;p&gt;Here is the format I started with:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;yaml\nproduct: insulated travel mug\naudience: commuter who wants coffee to stay hot\nobjection: \"I do not want another mug that leaks in my bag.\"\nvideo_job: product-page explainer\nhook: \"My laptop bag survived this commute.\"\nproof:\n  - show closed lid beside a backpack\n  - show lock mechanism close-up\n  - state the real cleaning limitation honestly\nscene: bright kitchen counter\navatar_tone: calm, specific, not overhyped\ncta: check the lid details before choosing a size\nreview_checks:\n  - product is shown accurately\n  - claim is supported by the product information\n  - hook and proof address the same objection\n&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;This is not a prompt replacement. It is a contract. The &lt;code&gt;objection&lt;/code&gt;, &lt;code&gt;hook&lt;/code&gt;, and &lt;code&gt;proof&lt;/code&gt; fields must agree, or I do not generate the clip. The explicit &lt;code&gt;video_job&lt;/code&gt; also prevents an ad-style opening from accidentally becoming the only thing on a product page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuk0olte3pymqbo9q6cm3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fuk0olte3pymqbo9q6cm3.png" alt="Customer objection transformed into a structured video brief" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the fields are boring on purpose
&lt;/h2&gt;

&lt;p&gt;The schema has a few rules that sound almost annoyingly obvious:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One objection per brief. \"People may not trust the price, fit, material, or shipping\" is four briefs pretending to be one.&lt;/li&gt;
&lt;li&gt;One observable proof. If I cannot name the shot, demo, or supported explanation that earns the claim, it is marketing fog.&lt;/li&gt;
&lt;li&gt;One job. An ad can earn a click; a product-page explainer can reduce uncertainty. Asking fifteen seconds to do both usually weakens both.&lt;/li&gt;
&lt;li&gt;A stated limitation. I do not want an AI avatar inventing certainty. A real constraint in the brief gives the reviewer something concrete to protect.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I had already learned the value of structured inputs when I &lt;a href="https://dev.to/ybouane/i-replaced-my-ad-video-spreadsheet-with-a-tiny-json-contract-1jim"&gt;replaced an ad-video spreadsheet with a tiny JSON contract&lt;/a&gt;. YAML is more convenient for this particular stage because a marketer can change a sentence without fighting JSON punctuation. When the brief becomes application data, I can validate it or convert it later.&lt;/p&gt;

&lt;h2&gt;
  
  
  Compile the brief into variants, not random options
&lt;/h2&gt;

&lt;p&gt;Once a brief passes review, I create variations by changing one variable at a time. For example, the same leak objection can have a commuter kitchen scene, a train-platform scene, or a close-up product demo. The proof remains the lock mechanism.&lt;/p&gt;

&lt;p&gt;That distinction matters. Changing avatar, scene, hook, proof, and CTA in every generation gives me four different videos but almost no learning. I prefer a compact matrix:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Variant&lt;/th&gt;
&lt;th&gt;Change&lt;/th&gt;
&lt;th&gt;Constant&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;A&lt;/td&gt;
&lt;td&gt;avatar&lt;/td&gt;
&lt;td&gt;objection and proof&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;B&lt;/td&gt;
&lt;td&gt;opening hook&lt;/td&gt;
&lt;td&gt;product demo and CTA&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;C&lt;/td&gt;
&lt;td&gt;scene&lt;/td&gt;
&lt;td&gt;script claim and proof&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;D&lt;/td&gt;
&lt;td&gt;CTA&lt;/td&gt;
&lt;td&gt;hook and proof&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F25926z1lrwfbxttd1abx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F25926z1lrwfbxttd1abx.png" alt="Four-card UGC creative review matrix" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is a narrower version of the test harness I described in &lt;a href="https://dev.to/ybouane/i-turned-shopify-ugc-creative-into-a-small-test-harness-4cjf"&gt;I Turned Shopify UGC Creative Into a Small Test Harness&lt;/a&gt;. The important change is that the customer objection is now a required field, not just a note in the campaign.&lt;/p&gt;

&lt;h2&gt;
  
  
  Feed it into the video project
&lt;/h2&gt;

&lt;p&gt;In Supra UGC Maker, my handoff is straightforward:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Pick the Shopify product or add its reference.&lt;/li&gt;
&lt;li&gt;Choose an avatar and scene that make the proof easy to see.&lt;/li&gt;
&lt;li&gt;Turn &lt;code&gt;hook&lt;/code&gt;, &lt;code&gt;proof&lt;/code&gt;, and &lt;code&gt;cta&lt;/code&gt; into a short script.&lt;/li&gt;
&lt;li&gt;Set the voice/tone from the brief rather than improvising a personality.&lt;/li&gt;
&lt;li&gt;Preview the scene, generate a segment, then reorder, trim, update, or regenerate inside the project.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The tool can save reusable scenes and projects, which is especially helpful once the schema starts producing consistent briefs. I can reuse a product-demo scene without reusing the same unsupported sales claim.&lt;/p&gt;

&lt;h2&gt;
  
  
  Put a human gate after generation
&lt;/h2&gt;

&lt;p&gt;The failure mode here is not that the model produces a bad video. It is that a smooth video makes a weak claim feel finished. I review each export against the source brief:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;text\n[ ] Is the product behavior shown or accurately explained?\n[ ] Does the spoken claim match the approved proof?\n[ ] Could a shopper mistake a styled scene for product evidence?\n[ ] Does the CTA fit the video job?\n[ ] Did we preserve the stated limitation?\n&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ff42cmog2qtt1b8jdk2ri.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ff42cmog2qtt1b8jdk2ri.png" alt="A release gate between video brief and final creative" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Real creators are still the better choice when community trust, a genuine testimonial, or a personal creator relationship is the actual asset. AI UGC-style video is most useful to me for scalable creative testing, explainers, and fast first passes—not for impersonating lived experience.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;A customer objection is a much better starting point than \"make a UGC ad.\" Capture one objection, one product-specific proof, one video job, and one reviewable CTA in a tiny YAML file. Then use an AI UGC video generator to create controlled variations, not an untraceable pile of clips.&lt;/p&gt;

&lt;p&gt;My next step is to add a &lt;code&gt;source_url&lt;/code&gt; field so every brief points back to the support ticket, review theme, or product documentation that justified it. What field would you add before letting a video brief reach production?&lt;/p&gt;

</description>
      <category>shopify</category>
      <category>ai</category>
      <category>marketing</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Added a Tiny Smoke Test After Every Static Site Export</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Sun, 13 Sep 2026 06:30:54 +0000</pubDate>
      <link>https://dev.to/ybouane/i-added-a-tiny-smoke-test-after-every-static-site-export-157f</link>
      <guid>https://dev.to/ybouane/i-added-a-tiny-smoke-test-after-every-static-site-export-157f</guid>
      <description>&lt;p&gt;I used to think a successful static site export was the finish line. The files appeared, the home page opened, and I moved on. Then I would find out later that a deep link returned a 404, a font was loading from the wrong place, or the archive was only useful on the machine that created it.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqsb65v033rbbi155g0ws.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqsb65v033rbbi155g0ws.png" alt="Synthwave static site export folder, browser test, and verification path" width="800" height="450"&gt;&lt;/a&gt;\n\nThe fix was not a bigger deployment system. I added a tiny smoke test after every export. It takes a few minutes, catches most of the unglamorous failures, and gives me a useful answer when someone asks whether the exported site is actually portable.\n\nI use &lt;a href="https://exflow.site/webflow" rel="noopener noreferrer"&gt;ExFlow&lt;/a&gt; to export published Webflow sites into static HTML, CSS, JavaScript, fonts, and media. The export itself is useful, but the habit that made it trustworthy was treating the result as a build artifact that needed a short acceptance test.\n\n## What the home page check misses\n\nOpening &lt;code&gt;index.html&lt;/code&gt; tells you almost nothing about paths, direct navigation, or deployment behavior. Browsers can be generous when local files are opened directly. A static host is not always so forgiving.\n\nI learned to test four things:\n\n1. The home page loads.\n2. A deep URL loads directly.\n3. The main assets load from their deployed paths.\n4. The primary navigation still reaches the expected pages.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fslu0kyiog969btqjsd4x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fslu0kyiog969btqjsd4x.png" alt="Synthwave published website resolving into a tidy static file tree" width="800" height="533"&gt;&lt;/a&gt;\n\nThat list is intentionally modest. I am not trying to recreate a full end-to-end test suite for an archive. I am checking whether the exported site behaves like a site rather than a folder of files.\n\n## I start a real static server\n\nThe first change was to stop testing exports by double-clicking files. I run a local static server from the exported directory instead. Any server works; the important part is accessing pages through HTTP.\n\n~&lt;del&gt;sh\nnpx serve .\n&lt;/del&gt;~\n\nThen I open the home page and paste a deep path into the address bar. I do not navigate there from the home page first. Direct navigation is the check that reveals whether a path only works because the previous page happened to be open.\n\nFor a production-like check, I deploy the export to a temporary static host or a simple branch preview. That is where relative asset paths, redirects, and host-specific routing rules become visible.\n\n## I keep one page inventory next to the export\n\nBefore I export, I make a small text file with the pages that matter: home page, contact page, main collection or product guide pages, an important campaign page, and one deep article or resource page.\n\nIt is not a sitemap. It is a risk list. These are the pages that would create confusion if they disappeared during a redesign or handoff.\n\nI picked up this idea while creating &lt;a href="https://tools-and-how-tos.github.io/2026/09/08/webflow-redesign-backup-checklist-export-static-pages-before-you-chang/" rel="noopener noreferrer"&gt;a Webflow redesign backup checklist&lt;/a&gt;. The useful part is not collecting every URL. It is making sure the high-value paths have a named place in the verification step.\n\n## The curl check is boring on purpose\n\nOnce the export is on a preview URL, I use a compact status check. It does not replace looking at the page, but it makes obvious failures hard to ignore.\n\n~&lt;del&gt;sh\nfor path in / /guides /contact; do\n  curl -L -s -o /dev/null -w '%{http_code} %{url_effective}\n' &lt;a href="https://preview.example.com$path%5Cndone%5Cn" rel="noopener noreferrer"&gt;https://preview.example.com$path\ndone\n&lt;/a&gt;&lt;/del&gt;~\n\nI expect a success response for each path. If a page returns a redirect, I want to see the final destination. If it returns a 404, I fix the path or hosting rule before I call the archive ready.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7xi66kl7kr134ld4fei7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7xi66kl7kr134ld4fei7.png" alt="Synthwave browser smoke test checking navigation, deep links, assets, and mobile layouts" width="800" height="533"&gt;&lt;/a&gt;\n\nI also open developer tools for one pass and look for missing assets. Fonts and images are the most common quiet failure. A page can look almost right while using a fallback font or missing the one product image that was supposed to carry the page.\n\n## I write down the live dependencies\n\nAn exported static site can preserve the public layout while some features remain connected to live services. Forms, commerce, account pages, analytics, embeds, and search integrations do not automatically become standalone just because their surrounding page exported.\n\nI keep a short &lt;code&gt;README&lt;/code&gt; beside the export with three sections: what was tested, what is static, and what requires a service. This turns a handoff from “here is a ZIP” into something another person can understand without guessing.\n\nFor Squarespace sites, I use the same approach: make the public copy, then document the pieces that need separate handling. That is the practical core of this &lt;a href="https://the-lean-ecommerce.blogspot.com/2026/09/how-to-keep-squarespace-storefront.html" rel="noopener noreferrer"&gt;Squarespace storefront archive workflow&lt;/a&gt;.\n\n## The test I would automate next\n\nIf I had many exports to check, I would put the page inventory in a small JSON file and have a script fetch each URL, assert a success response, and flag missing image or stylesheet requests. I would still keep a visual pass for key pages, because a 200 response cannot tell me whether the wrong font has shifted every headline.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj2h1fyudn3ru9lhrz7m3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fj2h1fyudn3ru9lhrz7m3.png" alt="Synthwave git commit, archive folder, and static host connected by a verification path" width="800" height="533"&gt;&lt;/a&gt;\n\nBut even without automation, this little ritual has changed the quality of my exports. I now know whether a static copy is usable before a redesign makes the old site difficult to inspect.\n\n*&lt;em&gt;TL;DR:&lt;/em&gt;* export the site, serve it over HTTP, test a few direct URLs, check the assets, and record the live dependencies. The result is not just a backup. It is a reference site you can actually hand to someone. What is the one deep link you would hate to discover is missing after a redesign?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>testing</category>
      <category>webflow</category>
    </item>
    <item>
      <title>I Replaced My Ad-Video Spreadsheet With a Tiny JSON Contract</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Fri, 11 Sep 2026 18:32:17 +0000</pubDate>
      <link>https://dev.to/ybouane/i-replaced-my-ad-video-spreadsheet-with-a-tiny-json-contract-1jim</link>
      <guid>https://dev.to/ybouane/i-replaced-my-ad-video-spreadsheet-with-a-tiny-json-contract-1jim</guid>
      <description>&lt;p&gt;Liquid syntax error: 'raw' tag was never closed&lt;/p&gt;
</description>
      <category>javascript</category>
      <category>ecommerce</category>
      <category>automation</category>
      <category>ai</category>
    </item>
    <item>
      <title>I Treat Every Framer Export Like a Deployment Rehearsal</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Sun, 06 Sep 2026 17:33:01 +0000</pubDate>
      <link>https://dev.to/ybouane/i-treat-every-framer-export-like-a-deployment-rehearsal-4106</link>
      <guid>https://dev.to/ybouane/i-treat-every-framer-export-like-a-deployment-rehearsal-4106</guid>
      <description>&lt;p&gt;I was preparing a Framer landing page for a launch where a broken animation or missing font would be painfully visible. The page looked great in Framer, but I did not want the first time I saw its static version to be after DNS had changed.&lt;/p&gt;

&lt;p&gt;So I started treating the export as a deployment rehearsal: capture the published site, put the output somewhere safely separate, test the actual files, and keep a known-good rollback copy. It is not a glamorous extra step. It has saved me from finding the important problems during the least convenient hour.&lt;/p&gt;

&lt;p&gt;For this workflow, &lt;a href="https://exflow.site/framer" rel="noopener noreferrer"&gt;ExFlow's Framer exporter&lt;/a&gt; is the practical bridge. It can collect a published Framer site's HTML, CSS, JavaScript, fonts, and media, then produce a downloadable static site or sync it to Git, S3, FTP, or ExFlow Hosting. The point is not merely getting a ZIP; it is giving the launch a versioned, testable artifact.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnbg5mgpzez8s4z2szx0w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnbg5mgpzez8s4z2szx0w.png" alt="Framer site staged as static files and tested across devices" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I stopped calling this an export
&lt;/h2&gt;

&lt;p&gt;An export sounds final and mechanical. A rehearsal has a question behind it: &lt;strong&gt;would I trust this exact build if it became public right now?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Framer is excellent at making a landing page feel finished quickly. That polish can hide dependencies: font files, image paths, interaction scripts, responsive layout choices, and routes that only reveal themselves once the site lives outside the editor. A generic downloader might make a passable copy of a simple page, but it is a poor place to discover whether your animated hero, nav behavior, or mobile layout survived.&lt;/p&gt;

&lt;p&gt;The static output is also useful before a redesign or client handoff. I used the same Git-first thinking when I &lt;a href="https://the-lean-ecommerce.github.io/2026/09/04/how-i-put-a-webflow-site-in-git-before-a-high-risk-launch/" rel="noopener noreferrer"&gt;put a Webflow site in Git before a high-risk launch&lt;/a&gt;: the version that can be inspected and rolled back is more useful than the version that merely exists in a visual editor.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Framer staging sequence
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Freeze the published URL I actually want to test
&lt;/h3&gt;

&lt;p&gt;I begin with the published Framer URL, not a half-finished canvas view. That keeps the rehearsal honest: the exporter sees the public page structure and assets that visitors would receive. Before exporting, I make a tiny launch note with the expected routes, the key CTA destinations, and the two or three interactions that would be embarrassing to lose.&lt;/p&gt;

&lt;p&gt;For a typical marketing site, that note includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the home page, pricing page, and one campaign route&lt;/li&gt;
&lt;li&gt;desktop and narrow mobile breakpoints&lt;/li&gt;
&lt;li&gt;the hero motion and any scroll-driven section&lt;/li&gt;
&lt;li&gt;contact or waitlist forms&lt;/li&gt;
&lt;li&gt;canonical tags, social preview metadata, and redirects&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Export into a staging destination, not production
&lt;/h3&gt;

&lt;p&gt;I run the Framer export in ExFlow and send the result to a separate place first: a ZIP for local inspection, a staging bucket, or a dedicated Git branch. The staging destination matters because it lets me test a real static deployment without replacing the live site.&lt;/p&gt;

&lt;p&gt;If I am using Git, I review the file tree before I deploy. I am looking for the boring but essential things: expected pages, CSS and JavaScript bundles, image and media directories, and font files. A sudden absence is often easier to spot in a file list than in a browser tab.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpe6y7v7cqhmqt7svwhls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpe6y7v7cqhmqt7svwhls.png" alt="Animation-preserving static Framer export preview" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Test the behaviors, not just the screenshots
&lt;/h3&gt;

&lt;p&gt;A desktop screenshot can look perfect while the site is still wrong. My staging test has three passes.&lt;/p&gt;

&lt;p&gt;First, I click every navigation item and CTA from a clean browser session. Internal links should stay on the staging host; intentional external links should go where I expect.&lt;/p&gt;

&lt;p&gt;Second, I test the page at a narrow breakpoint and a normal desktop width. I pay special attention to overflow, font fallback, sticky elements, and menu behavior. Those are the spots where a polished layout can become visibly fragile.&lt;/p&gt;

&lt;p&gt;Third, I exercise motion and interactive sections. I do not need every pixel to be identical, but I do need the effect to load, the timing to feel reasonable, and the interaction not to block the rest of the page. If an animation is essential to the message, I record a quick before-and-after screen capture instead of trusting memory.&lt;/p&gt;

&lt;h2&gt;
  
  
  The QA gate I use before promoting staging
&lt;/h2&gt;

&lt;p&gt;This is the short checklist that prevents me from promoting a static copy just because its home page loaded once:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Every expected route returns a page, not a directory listing or fallback error.&lt;/li&gt;
&lt;li&gt;Images, video, and fonts load without console errors.&lt;/li&gt;
&lt;li&gt;Primary CTAs and forms have their intended destination or handling.&lt;/li&gt;
&lt;li&gt;Mobile navigation and key sections work at the smallest supported width.&lt;/li&gt;
&lt;li&gt;Title, description, canonical, and social-preview tags are present.&lt;/li&gt;
&lt;li&gt;Redirects are mapped before any old host is retired.&lt;/li&gt;
&lt;li&gt;The previous working build is still available for rollback.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqbioff734g5jer8j5dfk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqbioff734g5jer8j5dfk.png" alt="Framer static export quality-assurance gate" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The last item changes the feel of a launch. I do not need a heroic fix under pressure if I can restore the known-good static build while I diagnose the new one. That is why I also liked the idea of rehearsing an exit before it is urgent; this &lt;a href="https://productivity-tech-business.sktch.io/home/how-i-rehearse-a-squarespace-exit-before-renewal-day-PSm7+daKgW+Pn_NOYC2DyQ" rel="noopener noreferrer"&gt;Squarespace exit rehearsal&lt;/a&gt; makes the same case from a different platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where ExFlow fits—and where it does not
&lt;/h2&gt;

&lt;p&gt;ExFlow handles the platform-specific capture step for Framer and gives me static files I can inspect or deploy. It is especially useful when the goal is a staging preview, a backup, a client handoff, or hosting independence—not just a one-time scrape. I still own the release work: deciding where to host the files, validating forms or third-party services, and making a rollback plan.&lt;/p&gt;

&lt;p&gt;If your project is on another visual builder, ExFlow also has dedicated workflows for &lt;a href="https://exflow.site/webflow" rel="noopener noreferrer"&gt;Webflow&lt;/a&gt; and &lt;a href="https://exflow.site/squarespace" rel="noopener noreferrer"&gt;Squarespace&lt;/a&gt;. I would keep the platform-specific exporter aligned to the platform in front of you, though; the risks worth testing are different for each one.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;My Framer export workflow is simple: export the published site, stage the static files somewhere safe, test routes/assets/breakpoints/motion, then promote only after the rollback copy is ready. &lt;a href="https://exflow.site/framer" rel="noopener noreferrer"&gt;Try the Framer exporter&lt;/a&gt; on one noncritical page first and use that run to build your own QA gate.&lt;/p&gt;

&lt;p&gt;What is the one Framer behavior you would be least comfortable discovering was missing after launch?&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>framer</category>
      <category>staticweb</category>
      <category>deployment</category>
    </item>
    <item>
      <title>I Turned Shopify UGC Creative Into a Small Test Harness</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Mon, 24 Aug 2026 13:31:53 +0000</pubDate>
      <link>https://dev.to/ybouane/i-turned-shopify-ugc-creative-into-a-small-test-harness-4cjf</link>
      <guid>https://dev.to/ybouane/i-turned-shopify-ugc-creative-into-a-small-test-harness-4cjf</guid>
      <description>&lt;p&gt;I kept making the same mistake with short-form product video: I would ask for &lt;em&gt;more variations&lt;/em&gt; before I had defined what was actually varying. The result was a folder of clips that looked busy, not a set of useful tests.&lt;/p&gt;

&lt;p&gt;What fixed it was treating Shopify UGC creative like a small test harness. Not a giant ad-production system—just a repeatable contract for producing, reviewing, and learning from a handful of AI avatar videos. I use &lt;a href="https://supra-ugc-maker.sktch.io/" rel="noopener noreferrer"&gt;Supra UGC Maker&lt;/a&gt; as the generator because it lets me control the avatar, scene, product reference, script, voice, and clip revisions in one project.&lt;/p&gt;

&lt;p&gt;This is the setup I wish I had started with.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Eight Titles I Considered
&lt;/h2&gt;

&lt;p&gt;Before drafting, I explored these distinct search-intent angles:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;How to Build a Shopify UGC Video Testing Workflow&lt;/li&gt;
&lt;li&gt;I Turned Shopify UGC Creative Into a Small Test Harness&lt;/li&gt;
&lt;li&gt;Five AI Avatar Video Variables Worth Testing for Ecommerce&lt;/li&gt;
&lt;li&gt;A Practical Shopify UGC Video QA Checklist&lt;/li&gt;
&lt;li&gt;How to Reuse One Product Script Across Multiple Video Ads&lt;/li&gt;
&lt;li&gt;AI UGC Videos vs Influencer Shoots: Where Testing Helps&lt;/li&gt;
&lt;li&gt;The Shopify Product Video Experiment I Run Before Launch&lt;/li&gt;
&lt;li&gt;How to Ship Video Ad Variations Without Rebuilding the Brief&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I picked the test-harness angle because it answers a real implementation problem: how to get comparable outputs instead of endlessly changing everything at once.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Harness: Lock Four Things, Change One
&lt;/h2&gt;

&lt;p&gt;My first version was almost embarrassingly small. Every video project gets four fields:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;creativeContract&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;product&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hydration serum&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;audienceProblem&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;skincare routine feels too complicated&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;proof&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;shows the texture and a simple application step&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;cta&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;See how it fits into your routine&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then I choose &lt;strong&gt;one&lt;/strong&gt; variable to test: the opening hook, the avatar, the scene, the voice/tone, or the call to action. The product, core problem, proof, and CTA stay stable until I have a reason to change them.&lt;/p&gt;

&lt;p&gt;That constraint matters. If a clip has a new avatar, a different product framing, a new promise, and a different CTA, a better result tells me nothing useful. It is just a new ad.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5z03y69hz2ffs0e7606g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5z03y69hz2ffs0e7606g.png" alt="A visual test matrix branching one product into distinct video concepts" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For a Shopify product, I usually start with four jobs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Problem-first hook:&lt;/strong&gt; name the frustrating moment a shopper recognizes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Product-demo hook:&lt;/strong&gt; show the product in use as quickly as possible.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Outcome hook:&lt;/strong&gt; lead with the practical result, without inventing a claim.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Objection hook:&lt;/strong&gt; answer the question I expect on a product page or in support.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The important part is that the jobs are specific enough to review. “Make it engaging” is not a test condition. “Show the application step in the first three seconds” is.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Use a Script Contract Instead of Freeform Prompts
&lt;/h2&gt;

&lt;p&gt;Freeform prompting is great for exploration, but it made our video output hard to compare. A reusable project in Supra UGC Maker gives me a better boundary: I can keep the scene and product reference, update the script or voice, preview the change, then reorder, trim, or regenerate only the clip that needs work.&lt;/p&gt;

&lt;p&gt;Here is the script shape I use before I generate anything:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Hook: [one concrete customer moment]
Context: [what makes that moment annoying]
Product role: [what the product helps the shopper do]
Proof to show: [visible action or product detail]
CTA: [one next action]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is deliberately short. I am not trying to make an avatar sound like a customer who used the product for six months. AI UGC-style video is best for scalable creative testing, explainers, launches, and visual variations; real creators are still the better choice when a campaign needs lived experience, community trust, or a genuine testimonial.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq2ohcx6u5qcpr5bccjv1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq2ohcx6u5qcpr5bccjv1.png" alt="A modular script contract flowing into a generated product video" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That distinction stopped me from writing claims the footage could not support. It also makes the handoff cleaner: someone reviewing the project can see what the video is meant to prove, not just what it happens to say.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Review Gate That Prevents “Generated” From Becoming “Published”
&lt;/h2&gt;

&lt;p&gt;I do not let a rendered clip go straight to an ad or product page. The review is small, but it catches the failures that make a fast workflow expensive later:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;review&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;productMatchesReference&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;scriptMakesSupportedClaim&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;firstSecondsShowThePoint&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;sceneFitsTheBrand&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;ctaMatchesDestination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;readyToUse&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;review&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;every&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Boolean&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In practice, the failure mode is usually not the render itself. It is a mismatch: a premium product in a scene that feels off-brand, a voice that changes the intended tone, or a CTA built for an ad attached to a product-page clip. When that happens, I revise the one field that caused the mismatch rather than starting a new project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd8pg3yfrpno51w966db2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fd8pg3yfrpno51w966db2.png" alt="A neon creative QA gate routing approved and revision video concepts" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This has also made reporting more honest. I can label a result by its tested variable—&lt;code&gt;hook/problem-first&lt;/code&gt; or &lt;code&gt;scene/studio&lt;/code&gt;—instead of trying to reconstruct the difference from a vague filename. That is a much better starting point for the next round.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where the Videos Go After Review
&lt;/h2&gt;

&lt;p&gt;The same approved concept can have different jobs across the store. A fast hook-led version can test in paid social; a slower product-demo version can help a Shopify product page; a compact version can become an email thumbnail or launch teaser. I wrote about the placement decision in &lt;a href="https://the-lean-ecommerce.gitlab.io/2026/08/14/i-mapped-one-shopify-product-into-three-ugc-video-jobs/" rel="noopener noreferrer"&gt;this workflow for mapping one Shopify product into three UGC video jobs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I still keep the destination in the contract because it changes what “good” means. A post-purchase video should reduce confusion. An acquisition ad should earn attention. That is why I would not reuse a winning hook blindly across every channel; the post-purchase use case deserves its own script and success criterion, as I found while planning &lt;a href="https://productivity-tech-business.blogspot.com/2026/08/how-to-create-post-purchase-shopify.html" rel="noopener noreferrer"&gt;support-oriented Shopify videos&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Smallest Useful Starting Point
&lt;/h2&gt;

&lt;p&gt;If you want to try this without building a whole creative-ops system, make one Supra UGC Maker project with one product, one customer problem, and four hook variants. Use a preset avatar or a custom AI model, choose a fitting scene, write each short script against the same contract, and preview before generating the final segments.&lt;/p&gt;

&lt;p&gt;Then review the clips with the five checks above. Keep the project and scene reusable, but log the single variable you changed. You will have fewer “random variations,” more usable Shopify UGC videos, and a clearer reason for the next test.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; Lock the product, problem, proof, and CTA. Change one creative variable at a time. Review before distribution. If you need a practical place to start, &lt;a href="https://apps.shopify.com/supra-ugc-maker" rel="noopener noreferrer"&gt;create your first UGC-style product video with Supra UGC Maker&lt;/a&gt; and tell me: which variable would you test first—hook, avatar, scene, voice, or CTA?&lt;/p&gt;

</description>
      <category>shopify</category>
      <category>ecommerce</category>
      <category>marketing</category>
      <category>ai</category>
    </item>
    <item>
      <title>I Turned a Webflow CMS Site Into a Static Deployment Pipeline</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Sun, 16 Aug 2026 05:34:36 +0000</pubDate>
      <link>https://dev.to/ybouane/i-turned-a-webflow-cms-site-into-a-static-deployment-pipeline-5084</link>
      <guid>https://dev.to/ybouane/i-turned-a-webflow-cms-site-into-a-static-deployment-pipeline-5084</guid>
      <description>&lt;p&gt;I was trying to hand off a Webflow marketing site without making its next edit a hostage negotiation. The design was done, the routes looked good, and the content team had finally filled the CMS. But the site still needed a deployment path our developers could own: files in a repository, a predictable preview, and hosting that was not tied to one dashboard.&lt;/p&gt;

&lt;p&gt;The obvious move was a Webflow code export. Then I hit the part that matters: the native export includes HTML, CSS, JavaScript, and uploaded assets, but not CMS content or CMS functionality. A Collection list can become an empty state after export. That is exactly the kind of surprise that slips through when a team only checks the homepage.&lt;/p&gt;

&lt;p&gt;So I treated this as a small deployment pipeline instead of a download button. Here is the workflow I use when I need a Webflow CMS site to become a static site without rebuilding the front end.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4k30yw10ccy2bytxrw68.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4k30yw10ccy2bytxrw68.png" alt="Illustration of a Webflow CMS site becoming static files and a deployed server" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Separate the visual shell from the live behavior
&lt;/h2&gt;

&lt;p&gt;I start by writing down what must survive the move. Static sites are fantastic for landing pages, documentation, portfolios, campaign pages, and other content that can be emitted as files. They are a poor drop-in replacement for everything that depended on runtime services.&lt;/p&gt;

&lt;p&gt;That distinction is not theoretical. A standard code export includes the site shell and assets but not CMS data/functionality, user accounts, ecommerce databases and checkout, site search, password protection, or form processing. If the site needs any of those, I decide up front whether to replace that capability, preserve a hosted route, or change the scope.&lt;/p&gt;

&lt;p&gt;For a content-heavy site, the question becomes: can I get every rendered CMS route and its media into the exported result? That is where &lt;a href="https://exflow.site/" rel="noopener noreferrer"&gt;ExFlow&lt;/a&gt; is useful. It is a Webflow exporter that can download a site from its URL and export all pages, CSS, JavaScript, images, and media; it is specifically useful when the standard code export is not enough for the CMS pages I need to preserve.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Export deliberately, not with every switch on autopilot
&lt;/h2&gt;

&lt;p&gt;In ExFlow, I configure the export around the deploy target: all pages enabled, CSS/JS/media included, and &lt;code&gt;.html&lt;/code&gt; extensions enabled when the destination expects them. If I am handing the result to a developer, I also add the small &lt;code&gt;style.css&lt;/code&gt; or &lt;code&gt;script.js&lt;/code&gt; overrides there rather than burying a last-minute tweak in a hosting control panel.&lt;/p&gt;

&lt;p&gt;I keep sync credentials scoped and out of notes or repositories. ExFlow can sync to Git, S3, or FTP, but those credentials are sensitive deployment credentials—not something I paste into an issue or a shell history.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4vvn3onccdbog63okd6e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4vvn3onccdbog63okd6e.png" alt="Illustrated audit of pages assets and CMS records before static export" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Audit routes like a user, not like a file browser
&lt;/h2&gt;

&lt;p&gt;The export completing is not the definition of success. I look for the routes that prove CMS content survived:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a Collection list with real cards, not its empty state&lt;/li&gt;
&lt;li&gt;two or three individual Collection pages&lt;/li&gt;
&lt;li&gt;a filtered or linked page, if the site has one&lt;/li&gt;
&lt;li&gt;an image-rich article or case study&lt;/li&gt;
&lt;li&gt;a contact or gated page, so I can record any replacement work&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For quick local smoke testing, I use a real web server rather than opening &lt;code&gt;index.html&lt;/code&gt; directly. That catches relative-path mistakes and lets browser-dependent assets load in an environment closer to production. I load a homepage, one CMS-derived route, and a deep asset URL before I spend time on hosting details.&lt;/p&gt;

&lt;p&gt;This is also where I check that internal links do not accidentally point back to a staging domain. If GitHub Pages is the eventual target, my earlier guide on &lt;a href="https://how-to.the-lean-ecommerce.com/2026/08/04/how-to-host-a-webflow-site-on-github-pages-without-rebuilding-it/" rel="noopener noreferrer"&gt;hosting a Webflow site on GitHub Pages without rebuilding it&lt;/a&gt; is a useful next step once the static artifact passes locally.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Choose the deployment path that matches the team
&lt;/h2&gt;

&lt;p&gt;I do not have a universal favorite; I use the path that makes rollback and ownership obvious.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Git sync&lt;/strong&gt; works well when developers already review changes and deploy from a repository.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;S3 sync&lt;/strong&gt; is a good fit for a static asset pipeline and infrastructure-managed hosting.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;FTP sync&lt;/strong&gt; can be the least disruptive bridge for a traditional server.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Managed hosting&lt;/strong&gt; is the simplest option when the team wants the export and host handled in one place.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;ExFlow supports each of those sync options, so I choose one before exporting instead of doing a manual download and an unrelated upload later. Fewer handoffs means fewer chances to omit media or publish an older archive.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ks4ogkdzljp35mo1r6t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ks4ogkdzljp35mo1r6t.png" alt="Technical quality assurance workflow for an exported static site" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Run a boring production checklist
&lt;/h2&gt;

&lt;p&gt;Before changing DNS or treating the new host as final, I check the boring things. They are boring right up until they are expensive:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Home, top navigation, footer, and a deep CMS URL return 200.&lt;/li&gt;
&lt;li&gt;CSS, JavaScript, fonts, and key images load from production.&lt;/li&gt;
&lt;li&gt;Canonical URLs, robots directives, and analytics are intentional.&lt;/li&gt;
&lt;li&gt;Forms, search, authentication, and checkout have an explicit replacement plan.&lt;/li&gt;
&lt;li&gt;A rollback path exists.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That form line deserves extra emphasis. A static copy can look perfect while its contact form silently does nothing. The right answer may be a third-party form endpoint, an embedded service, or keeping that route hosted differently—but it should be a conscious choice.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fch2mnyz1egi05q1m3qm7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fch2mnyz1egi05q1m3qm7.png" alt="Static website deployment paths through Git cloud storage and servers" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What finally made this feel safe
&lt;/h2&gt;

&lt;p&gt;The win was not “I found a Webflow downloader.” The win was turning a one-off export into a repeatable pipeline: capture the rendered content, check the routes that matter, sync to the host the team owns, and test the live result. For a deeper final-pass sequence, this &lt;a href="https://the-lean-ecommerce.github.io/2026/08/11/webflow-static-site-cutover-my-export-deploy-and-qa-runbook/" rel="noopener noreferrer"&gt;Webflow static-site cutover runbook&lt;/a&gt; complements the workflow nicely.&lt;/p&gt;

&lt;p&gt;If you need to take a Webflow site—including CMS-driven pages—into a static hosting workflow, start with &lt;a href="https://exflow.site/" rel="noopener noreferrer"&gt;ExFlow&lt;/a&gt;, choose the export settings for your destination, and make the route audit part of the definition of done.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; Exporting Webflow is easy; proving that the content, media, and runtime expectations survived is the real engineering work. What is the one Webflow feature that has made your team hesitate to self-host?&lt;/p&gt;

</description>
      <category>webflow</category>
      <category>webdev</category>
      <category>staticweb</category>
      <category>devops</category>
    </item>
    <item>
      <title>I Built a Shopify UGC Video Test Matrix Without Another Shoot</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Thu, 13 Aug 2026 09:34:25 +0000</pubDate>
      <link>https://dev.to/ybouane/i-built-a-shopify-ugc-video-test-matrix-without-another-shoot-3fma</link>
      <guid>https://dev.to/ybouane/i-built-a-shopify-ugc-video-test-matrix-without-another-shoot-3fma</guid>
      <description>&lt;p&gt;I was trying to answer a deceptively simple question for a Shopify launch: which creative angle should we make next?&lt;/p&gt;

&lt;p&gt;The old answer was expensive. Brief a creator, ship product, wait for footage, get one interpretation of the hook, then repeat. That is still a great route when you need a real creator's credibility or a true customer story. But it is a painfully slow feedback loop when I only need to compare a product demo, an objection-handling script, and three different opening lines.&lt;/p&gt;

&lt;p&gt;So I stopped treating every new video as a mini production. I built a small, review-first test matrix around &lt;a href="https://apps.shopify.com/supra-ugc-maker" rel="noopener noreferrer"&gt;Supra UGC Maker&lt;/a&gt;, a Shopify app that can combine avatars, scenes, product references, scripts, and voice/tone into UGC-style video segments. The goal was not to pretend an AI avatar was a customer testimonial. The goal was to make better creative decisions before I committed to another shoot.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flkuyhby0izmbn681ak1m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flkuyhby0izmbn681ak1m.png" alt="Neon creative testing board for Shopify UGC video variations" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The matrix: change one thing on purpose
&lt;/h2&gt;

&lt;p&gt;My first failed attempt was a pile of prompts with vague names like &lt;code&gt;new-final-v3&lt;/code&gt;. That is not testing; it is just generating. I needed each version to answer one question.&lt;/p&gt;

&lt;p&gt;I now keep four explicit variables: hook, audience objection, scene, and CTA. For an insulated bottle, the matrix might look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"product"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"insulated-bottle"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"audience"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"commuters"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"variants"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hook"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"My coffee is cold by 10am"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"scene"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"morning desk"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"cta"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"See the sizes"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hook"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"One bottle for the whole commute"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"scene"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"train platform"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"cta"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Pick a color"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hook"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"I stopped carrying disposable cups"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"scene"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"cafe"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"cta"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"View the product"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is deliberately boring data. Boring data makes review easier. If a clip underperforms, I can point to the variable that changed instead of guessing whether the problem was the avatar, the script, the scene, or all three.&lt;/p&gt;

&lt;p&gt;Supra UGC Maker gives me the building blocks I need for that experiment: I choose a preset avatar or custom AI model, select a scene, add the Shopify product when it fits, write the script, choose the voice/tone, and preview before generating. It also lets me reorder, trim, update, and regenerate clips inside a reusable project. That last part matters: a test matrix is only useful if I can make a second pass without rebuilding every asset.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with a narrow creative contract
&lt;/h2&gt;

&lt;p&gt;I limit the first batch to three or four versions. Every version shares the same product, offer, and factual claims. I only vary the first two seconds and one supporting proof point.&lt;/p&gt;

&lt;p&gt;That constraint protects me from a common failure mode: producing four clips that are so different that the results teach me nothing. If Version A is a calm desk demo and Version B is a loud sale announcement with a different offer, I have created two campaigns, not a clean test.&lt;/p&gt;

&lt;p&gt;The contract I give myself is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;one product and landing page&lt;/li&gt;
&lt;li&gt;one audience slice&lt;/li&gt;
&lt;li&gt;one claim I can support&lt;/li&gt;
&lt;li&gt;one primary placement&lt;/li&gt;
&lt;li&gt;one changed variable per version&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a product page, the first line can address what the item does. For paid social, it can start with an interruption or a specific pain point. For email, I usually let the video support the message rather than make it carry the entire offer.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqs17xq8hyvpjqcyxxbre.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqs17xq8hyvpjqcyxxbre.png" alt="One ecommerce product becoming multiple short-form UGC video concepts" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Keep the script useful, not overly polished
&lt;/h2&gt;

&lt;p&gt;The best scripts in this workflow are short enough to inspect. I write a hook, one concrete benefit, one proof or use context, and one CTA. Then I read it aloud. If I would not say it in a product demo, I cut it.&lt;/p&gt;

&lt;p&gt;That is especially important with AI UGC-style creative. It can be fast and flexible, but it should not invent customer experience, make unsupported performance claims, or cosplay a real endorsement. I use it for demonstrations, launch angles, feature explanations, and repeatable creative concepts. For hard-earned customer trust and personal testimonials, real creators are still the better tool.&lt;/p&gt;

&lt;p&gt;I also put the source of truth next to the script: product title, approved claims, URL, and any words the narrator must avoid. It feels like a tiny content schema, but it prevents surprisingly expensive cleanup later.&lt;/p&gt;

&lt;h2&gt;
  
  
  Add a human review gate before distribution
&lt;/h2&gt;

&lt;p&gt;Generation is not publishing. My last step is a review queue with three yes/no checks:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Is the product representation accurate?&lt;/li&gt;
&lt;li&gt;Does the script match the approved offer and audience?&lt;/li&gt;
&lt;li&gt;Does this placement need a different crop, CTA, or disclosure?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That queue is why I like treating video variants as artifacts rather than magical outputs. It is the same instinct behind an &lt;a href="https://the-lean-ecommerce.github.io/2026/08/12/how-i-built-an-approval-gated-shopify-catalog-video-queue/" rel="noopener noreferrer"&gt;approval-gated Shopify catalog video queue&lt;/a&gt;: generation creates options; review decides what earns distribution.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5r8xjvhj66yepir88sau.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5r8xjvhj66yepir88sau.png" alt="A product video moving through review gates into marketing channels" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once a version passes, I can download it and place it where it has a job to do: an ad, a product page, a launch email, or a seasonal promotion. I do not assume the winner in one placement will win everywhere. The product-page version may need a slower explanation; the social version may need its payoff immediately.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I measure before making more
&lt;/h2&gt;

&lt;p&gt;I measure the next decision, not a vanity scoreboard. For a short paid test, that could be thumb-stop rate and click-through rate. On a product page, I care about whether shoppers reach the video and whether the page gets clearer, not merely whether the clip played. In email, I look at clicks to the relevant product or collection.&lt;/p&gt;

&lt;p&gt;When a hook works, I keep it and test the next variable. That compounding workflow is how one Shopify product can turn into a week of deliberate experiments instead of a week of random assets. I wrote more about that handoff in &lt;a href="https://the-lean-ecommerce.github.io/2026/08/11/how-i-turn-one-shopify-product-into-a-week-of-ugc-video-tests/" rel="noopener noreferrer"&gt;my one-product UGC testing workflow&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;I use AI UGC video generation to shorten the distance between an idea and a reviewable creative test—not to replace real customer voices. A small matrix, one changed variable, supported claims, and a human approval gate make the output far more useful than a folder full of unnamed videos.&lt;/p&gt;

&lt;p&gt;If you want to try the workflow, start with one product and three hooks on &lt;a href="https://supra-ugc-maker.sktch.io/" rel="noopener noreferrer"&gt;Supra UGC Maker&lt;/a&gt;. What variable would you test first: the hook, the scene, or the CTA?&lt;/p&gt;

</description>
      <category>shopify</category>
      <category>ecommerce</category>
      <category>ai</category>
      <category>marketing</category>
    </item>
    <item>
      <title>I Tested Shopify 3D Product Media Before Touching My Theme</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Fri, 07 Aug 2026 17:32:46 +0000</pubDate>
      <link>https://dev.to/ybouane/i-tested-shopify-3d-product-media-before-touching-my-theme-3jce</link>
      <guid>https://dev.to/ybouane/i-tested-shopify-3d-product-media-before-touching-my-theme-3jce</guid>
      <description>&lt;p&gt;I was about to add a new product-media block to a Shopify theme when I stopped myself. The thing I actually needed to prove first was much smaller: could a shopper rotate the product, understand its shape, and get a useful result on a real product page?\n\nThat distinction saved me from turning a 3D experiment into a theme project. I used &lt;a href="https://supra-3d-capture.sktch.io/" rel="noopener noreferrer"&gt;Supra 3D Capture&lt;/a&gt; to turn a guided set of phone photos into a web-ready GLB, then treated Shopify-native publishing as the last step—not the first. Here is the workflow I now use before I touch Liquid, a theme setting, or an app block.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4ciyyq6vs9om0jw4j7zw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4ciyyq6vs9om0jw4j7zw.png" alt="Supra 3D Capture model validation banner" width="800" height="533"&gt;&lt;/a&gt;\n\n## The test I wanted to pass\n\nI was not looking for a cinematic asset. I wanted a model that made an ordinary product page easier to inspect. For the first test, I choose a compact SKU with clear edges and visible depth: the kind of product where front-and-back photos still leave questions about thickness, curves, or proportions.\n\nThat filter matters. If you are deciding where to start, the product-selection ideas in &lt;a href="https://the-lean-ecommerce.gitlab.io/2026/07/25/which-shopify-products-should-you-turn-into-3d-models-first/" rel="noopener noreferrer"&gt;Which Shopify Products Should You Turn Into 3D Models First?&lt;/a&gt; are a useful sanity check. I avoid reflective, translucent, or fuzzy items for a first capture because they introduce scanning variables before I have learned the publishing path.\n\nMy definition of done was deliberately plain:\n\n- The model rotates smoothly on a phone and desktop.\n- Its silhouette still makes sense at a small size.\n- The texture does not hide important product details.\n- I can attach it to Shopify product media without building a custom viewer.\n\nIf it fails one of those, I go back to capture. I do not try to code around a weak asset.\n\n## Step 1: Make the photo orbit boring\n\nThe capture part is the least glamorous piece, and it has the biggest downstream effect. I put the product in even light, keep the background simple, and slowly move around it while keeping roughly the same distance. Supra 3D Capture guides the session as I collect 10 or more phone photos, then sends the set through its photogrammetry pipeline.\n\nThe useful mental model is not ‘take pretty product photos.’ It is ‘give reconstruction enough overlapping views to understand every surface.’ If a side is underexposed or never appears in the orbit, the model cannot invent the missing geometry reliably.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmhpbqwqg60kpp9ax562j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmhpbqwqg60kpp9ax562j.png" alt="Guided smartphone photo orbit for a Shopify product" width="800" height="1200"&gt;&lt;/a&gt;\n\nI now make a quick capture checklist before uploading:\n\n1. Clean the product and remove loose packaging that can shift between frames.\n2. Use diffuse light, so shadows do not masquerade as edges.\n3. Include the top, sides, and the details a customer would inspect before buying.\n4. Keep the product still; move the phone, not the SKU.\n\nThat is enough process for a first run. Specialist gear and 3D software are not the constraint here; repeatable photos are.\n\n## Step 2: Inspect the GLB like an integration artifact\n\nWhen the model comes back, I do not jump straight to the storefront. I rotate it and look for failure modes a normal gallery can hide: melted-looking seams, a missing underside, noisy texture, or a model that is technically complete but visually ambiguous.\n\nThis is where I treat the GLB like any other generated build artifact. A successful output is not automatically ready to ship. I check the angles that matter to a buyer, whether the scale feels plausible, and whether the model remains clear against the product page background. If the model is weak, recapturing is cheaper than debugging shopper confusion later.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fduxr9ty1on3arf9wpdg0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fduxr9ty1on3arf9wpdg0.png" alt="GLB model inspection before Shopify publishing" width="800" height="1200"&gt;&lt;/a&gt;\n\nFor larger catalogs, I would make that review explicit. A simple scorecard—product shape, surface difficulty, margin, return risk, and image coverage—keeps the team from spending time on impressive but low-impact scans. The companion guide on &lt;a href="https://how-to-blog.gitlab.io/2026/07/30/how-to-build-a-shopify-3d-capture-priority-scorecard/" rel="noopener noreferrer"&gt;building a Shopify 3D capture priority scorecard&lt;/a&gt; is a good framework for that decision.\n\n## Step 3: Publish natively before customizing\n\nOnce the GLB passes inspection, I attach it to the Shopify product as media. That is the first implementation path I test because Shopify’s native 3D viewer already gives shoppers the direct manipulation behavior I care about: drag, rotate, inspect. Supra 3D Capture also supports a dedicated Online Store 2.0 theme app block when I need placement beyond the default gallery.\n\nThere is a small but important trade-off here. Native product media is the lowest-friction validation route; a theme app block gives more layout control. I start native because it answers the product question first. Only after I see that the model helps explain the item do I spend time deciding where it belongs in the page hierarchy.\n\n&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhp0akwkon8eorx20nxpd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fhp0akwkon8eorx20nxpd.png" alt="Interactive 3D product inspection on a Shopify page" width="800" height="1200"&gt;&lt;/a&gt;\n\nI test three things on the storefront:\n\n- Does the model load and rotate where the customer expects it?\n- Does it complement the existing photos instead of replacing useful detail shots?\n- Does the mobile experience make the object easier to understand, not just more novel?\n\nThat last one keeps me honest. A 3D model should close an expectation gap—shape, scale, texture, or construction—not become decoration that competes with the buy button.\n\n## What I would do next\n\nMy next move would be to repeat this on three high-question SKUs, then compare support questions, return reasons, and how often shoppers engage with the media. I would not promise a conversion lift from one test, but I would look for evidence that customers can make a more confident choice.\n\n*&lt;em&gt;TL;DR:&lt;/em&gt;* I learned to validate the capture and the native Shopify experience before I customize a theme. Start with an easy-to-scan product, make a complete phone-photo orbit, inspect the GLB as a real release artifact, then publish with Shopify-native media or an app block. You can start the same small experiment from the &lt;a href="https://apps.shopify.com/supra-3d-capture" rel="noopener noreferrer"&gt;Supra 3D Capture Shopify App Store listing&lt;/a&gt;.\n\nHave you found a product category where interactive 3D explains something photos consistently miss?&lt;/p&gt;

</description>
      <category>shopify</category>
      <category>webdev</category>
      <category>ecommerce</category>
      <category>3d</category>
    </item>
    <item>
      <title>How I Export Webflow Sites to Static HTML Without Losing CMS Content</title>
      <dc:creator>Yassine</dc:creator>
      <pubDate>Fri, 31 Jul 2026 19:34:07 +0000</pubDate>
      <link>https://dev.to/ybouane/how-i-export-webflow-sites-to-static-html-without-losing-cms-content-1pp7</link>
      <guid>https://dev.to/ybouane/how-i-export-webflow-sites-to-static-html-without-losing-cms-content-1pp7</guid>
      <description>&lt;p&gt;I kept running into the same problem: a Webflow build would look finished in the designer, then turn into a project with awkward handoff rules the moment I needed to host it somewhere else.&lt;/p&gt;

&lt;p&gt;That is why I started paying attention to &lt;a href="https://exflow.site" rel="noopener noreferrer"&gt;ExFlow.site&lt;/a&gt;. It is a Webflow exporter that lets me download a site by URL, pull down pages, CSS, JS, images, media, and CMS content, and then decide whether I want to host it myself or sync it to Git, S3, or FTP.&lt;/p&gt;

&lt;p&gt;Webflow itself is still good at what it does. Its &lt;a href="https://webflow.com/updates/export-clean-html5-and-css3" rel="noopener noreferrer"&gt;Export clean HTML5 and CSS3&lt;/a&gt; describes a clean HTML/CSS/JS export, and its &lt;a href="https://webflow.com/pricing" rel="noopener noreferrer"&gt;pricing page&lt;/a&gt; makes the limitation plain: exported code cannot be reimported. That matters if you are trying to treat Webflow like a portable source of truth instead of a one-way publishing layer.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fikf7gysysivaxx28kxnm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fikf7gysysivaxx28kxnm.png" alt="ExFlow export configuration screenshot" width="800" height="1224"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first thing I wanted was not a fancy new design tool. I wanted a predictable export path. In practice, that means knowing whether the site is mostly static pages, whether the asset library is tidy, and whether the content model can survive outside Webflow.&lt;/p&gt;

&lt;p&gt;ExFlow is useful because it stays focused on the part Webflow users actually need when the site has to leave the platform. I can export the URL, choose whether CSS, JS, images, and all pages come along, remove the "Made with Webflow" badge when needed, add custom script.js and style.css files, and push the result to Git, S3, FTP, or ExFlow hosting.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9sk3pb8rtuwnzr2bf5jf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F9sk3pb8rtuwnzr2bf5jf.png" alt="Neon illustration of a Webflow export pipeline" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That is the point where the workflow stops being theoretical. I am no longer debating whether a site is “exportable” in some abstract sense. I am checking whether I can ship the files, keep the layout intact, and hand the result to whichever deployment target makes sense for the project.&lt;/p&gt;

&lt;p&gt;Here is the checklist I use before I export a real site:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;I separate pages that are purely static from pages that depend on changing content.&lt;/li&gt;
&lt;li&gt;I confirm which CMS content needs a separate handoff plan.&lt;/li&gt;
&lt;li&gt;I export with the asset types I actually need instead of assuming every file belongs in the bundle.&lt;/li&gt;
&lt;li&gt;I open the result locally and check that the page structure, media, and links still make sense.&lt;/li&gt;
&lt;li&gt;I decide where the site should live: Git, S3, FTP, or ExFlow hosting.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpc44as1wntw2kt9pyke7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpc44as1wntw2kt9pyke7.png" alt="ExFlow exported files list screenshot" width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That exported-files view is the real sanity check for me. If the file tree looks clean, I know I am closer to a portable site. If it looks messy, I usually stop and fix the source structure before I export again.&lt;/p&gt;

&lt;p&gt;A lot of the value here is not just “download the site.” It is the ability to think in terms of deployment targets. A Git sync makes sense when I want reviewable changes. S3 makes sense when I want cheap static hosting. FTP still matters for some client servers. ExFlow hosting is there when I want the simplest path from export to public site.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgya0yavcbaenaxauj4mn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgya0yavcbaenaxauj4mn.png" alt="Neon illustration of Webflow export destinations" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My rule of thumb is pretty simple. If the project is mostly marketing pages, a landing experience, or a content site that can be flattened without losing its job, exporting Webflow is often the cleaner move. If the project depends on live CMS workflows, ecommerce behavior, or other dynamic platform features, I treat export as one piece of the puzzle instead of the whole answer.&lt;/p&gt;

&lt;p&gt;That is also why I have started thinking of Webflow less like a permanent hosting destination and more like a design system with an exit ramp. Once you think that way, the trade-off becomes clearer: keep the parts that need to stay in Webflow, and export the parts that should be portable.&lt;/p&gt;

&lt;p&gt;If you want the deployment side of this workflow, I wrote a separate walkthrough on &lt;a href="https://the-lean-ecommerce.gitlab.io/2026/07/29/how-to-export-a-webflow-site-to-git-s3-or-ftp-without-rebuilding-it/" rel="noopener noreferrer"&gt;how I exported a Webflow site to Git, S3, or FTP without rebuilding it&lt;/a&gt;. And if your content structure is still changing, my notes on &lt;a href="https://the-lean-ecommerce.github.io/2026/07/26/how-i-build-a-reviewable-notion-to-webflow-publishing-pipeline/" rel="noopener noreferrer"&gt;how I map Notion fields to Webflow CMS without breaking formatting&lt;/a&gt; are the part I wish I had earlier.&lt;/p&gt;

&lt;p&gt;TL;DR: Webflow is great for building, but export is what makes it portable. ExFlow gives me a practical way to download the site, keep the useful assets, and choose the hosting path that fits the project instead of forcing every build to stay locked in one place.&lt;/p&gt;

&lt;p&gt;If you have ever had a Webflow project get awkward the minute someone asked for self-hosting, what was the part that broke first?&lt;/p&gt;

</description>
      <category>webflow</category>
      <category>cms</category>
      <category>hosting</category>
      <category>static</category>
    </item>
  </channel>
</rss>
