SkinLab Storefront UAT

Observed

The homepage CTA “Not Sure Which Facial Is Right For You? Take the Quiz” opens a Recommenda quiz titled “skincare quiz” whose intro reads “answer a few quick questions and discover the fragrance that fits your vibe”, illustrated with a “QUIZ PERFUME” bottle. Clicking start did not advance in the session.

Fix

Build the real quiz in the Recommenda app (Apps → quiz 5555) or remove the CTA section until it exists.

Review

Client review: the perfume imagery is placeholder and expected at this stage. What remains a defect is the wiring — the button still opens the quiz app’s own demo questionnaire, so the quiz is unusable regardless of art. Kept as a finding for the wiring only.

Homepage (Take A Quiz block) ↗

Observed

All 12 products, including the three facials, have requires_shipping = true. A cart containing only Bojin Bliss Facial reaches a checkout that asks for a delivery address and “Enter your shipping address to view available shipping methods”; there is no outlet or appointment step. On the product page, “book an appointment” goes to the generic Contact Us enquiry form and “schedule a consultation” links to “#”.

Cause

Treatment products were created like retail items; no booking mechanism (form, app or booking product with prefilled checkout) has been chosen yet.

Fix

Minimum ask: mark the treatment products as not requiring shipping (uncheck “This is a physical product” on the variant) so Shopify skips the delivery step and the shipping-address form. Leave the rest of the purchase flow as built.

Review

Client decision: selling treatments as shippable goods is expected — that is how the catalogue is modelled for now, and a booking path is out of scope for this build. Downgraded from High to Low, and the ask to Verz is narrowed to one thing: remove the delivery / shipping-address step from checkout so a customer buying a facial is not asked where to post it.

Bojin Bliss Facial ↗Treatments ↗

Observed

Header “Customer Stories” (desktop and drawer) links to “#” although /pages/customer-stories exists. Homepage concern slider: four “learn more” links to “#”; the About block “read more” is “#”; every Signature Facials card links to “#”. Footer Payment, Shipping and Return / Exchange are “#”, and /policies/refund-policy, /policies/terms-of-service and /policies/shipping-policy return 404 (only Privacy exists).

Fix

Create the refund, shipping and terms policies in Settings → Policies and wire the footer to them; set the menu and section link fields; link the facial cards to their product pages.

refund-policy (404) ↗customer-stories (exists) ↗

Observed

Our Story, Press & Media and Corporate Social Responsibility each render only the title and “Coming Soon...”, with “Coming Soon...” as their meta description.

Fix

Unlink or unpublish until written.

Our Story ↗Press & Media ↗

Observed

The featured card repeats in the list below it and again on page 2, so “Chemical Peels vs Hydrating” and the LDM piece each appear two or three times across a four-article blog. Two live copies of the LDM article exist (Aug 05, 3.2k chars; Aug 10, 8.6k chars) with identical titles. The excerpts of “Chemical Peels vs Hydrating” and “Acne Scar Treatments” are the LDM table of contents their bodies are the LDM article’s too — see F16. Typo “oftn” in the LDM body.

Fix

Exclude the featured article from the list; delete the short LDM copy; write excerpts per article.

Blog index ↗LDM (older copy) ↗

Observed

The awards strip lists “Her World Hair Treatment Award 2024” twice on a skin brand. Signature Facials chips label LDM Triple, IYASHI Exosome Nano Needling and Stellar M22 as “Sensitive Skin”. “Why choose us” item 03 “Manage Customer's Expectations Better” repeats item 02's body word for word. The concern slider shows “Explore sensitive skin treatments” twice out of four. The stats block reads “100K+ Satisfied Customers · 5.0 · 100k+ Reviews” while About says “over 100,000 patients”. 20 of 22 press-marquee logos have empty alt text.

Fix

Correct the award list, chips and copy in the homepage sections; state the real review count and source; add alt text to logos.

Homepage ↗

Observed

Under Our Sister Brands, “Euphie Skin Solutions (Malaysia)” carries TrichoLab's description (“A scalp and hair specialist that merges medical expertise with botanical science…”). The “Advanced Medi-Facial Technologies” block repeats the “Every treatment starts with clinical thinking” paragraph verbatim.

Fix

Rewrite both blocks.

About Us ↗

Observed

44 collections hold 12 products. /collections/acne, /acne-scars and /eyes are empty yet in the sitemap; /collections/frontpage (“Home page”) is indexed. The Treatments collection facets claim Neck 3, Body & Back 2, Hair Removal 2, Slimming 2, Dark Circles 2 across three facials. The Skincare page's “Recommended Products” lists “Age Shield DNA Repair SPF 43”, which has no product page (404). Only 4 of 12 products have a product type, and Bojin Bliss Facial, Soft Clean and Nano Gold are typed “cleanse”, which shows as a chip on the product image.

Fix

Prune or hide empty collections; review the metafield-driven filter values per product; add the sunscreen product or remove the recommendation; set product types.

Treatments ↗Acne (empty) ↗Skincare ↗

Observed

Typing “peel” in the header search shows four products, but each title wraps one word per line in a column roughly 50px wide. The full results page works (5 results) but has no H1.

Fix

Fix the suggestion list's grid/min-width; add an H1 to the search template.

Search “peel” ↗

Observed

Medical Peel Half Back has a compare-at price of $168 below its $418 price (never rendered, but inverted). Milbon items are priced $45.78 and $58.86, which look GST-derived. Treatments say “NETT” while retail says “inclusive of GST”. The announcement bar reads “Free shipping for orders over $SGD90”.

Fix

Correct the compare-at price, round the Milbon prices, and standardise the price suffix and currency wording.

Medical Peel Half Back ↗

Observed

On the homepage, Customer Reviews and Customer Stories pages the skinlab-reviews element calls layoutDots() in connectedCallback and on resize, but the method is never defined. The carousel still renders and the active dot updates; the resize handler never binds.

Fix

Define or remove the call.

Review

Revision-2 review: layoutDots is not a broken method, it is a missing one — 2 references, 0 definitions anywhere in the theme, so there is nothing to restore and someone has to write it. It is also the root cause of F20 (wrong active dot, dead dots 3 and 4), so this Low understates it: fix the two together.

Customer Reviews ↗

Observed

The blog has four live article URLs. Three of them serve a byte-identical body (8,839 bytes, md5 c330ef6e6b) — the LDM article’s text — even though their titles and H1s are correct and different: /blogs/blogs/chemical-peels-vs-hydrating-facial-treatments-for-dry-skin and /blogs/blogs/the-acne-scar-treatments-that-work-for-deeper-skin-tones both open with “LDM and HIFU both use ultrasound energy…”. The fourth, /blogs/blogs/what-is-ldm-treatment-how-it-works-and-its-benefits-for-skin (no -1 suffix), is a 2,302-character lorem stub. It does not appear on page 1 of the blog index but is linked twice from page 2, and it is live and in sitemap.xml. Verified independently of the theme by hashing Shopify’s own article.content from /blogs/blogs.atom: three articles return md5 e82efad53a at 8,819 bytes and the stub returns 2bb38dad9e at 2,354 bytes — so the identical text is in the article records themselves, not introduced by the template.

Cause

Looks like the real article was pasted into the wrong records, and the duplicate LDM record was left behind as the original stub. It is a content-entry problem, not a template one — the template renders article.content correctly.

Fix

Put the right body in each article, delete or unpublish the lorem duplicate (and redirect its URL), and re-check the blog index. Worth auditing every article rather than just these four, because the same paste error would be invisible from the index — the titles all look right.

chemical peels (shows LDM body) ↗lorem stub duplicate ↗blog index ↗

Observed

The “Table of Contents” on article pages is not a theme component. It is a plain nested <ul class="non-ul"> typed into the article rich-text body, with no anchors at all, and the body headings carry no id attributes — so there is nothing to link to even if the entries were links. It cannot be collapsed, and on an 18-entry list like the LDM article it pushes the article opening well below the fold.

It also has an SEO consequence that is easy to miss: the TOC is the first text in the body, and no article has an excerpt or a hand-set SEO description (/blogs/blogs.atom returns an empty summary for all four), so Shopify derives each article’s meta description and og:description from the TOC. Every description therefore reads as a table of contents rather than a summary — “Table of Contents LDM Therapy Explained Overview of the LDM Technique…”. All three published articles currently share the same description, but that is F16’s identical bodies, not this defect; fixing F16 alone would leave three distinct but still TOC-shaped descriptions.

Cause

The TOC was authored as content rather than built as a section, so it inherits none of the behaviour a TOC needs and sits inside the text Shopify summarises.

Fix

Build it as a theme block on the article template: slug each h2/h3 into an id, generate the list from those headings, wrap it in <details> (open on desktop, collapsed on mobile), and remove the hand-typed list from the body. That fixes the links, the collapse and the descriptions in one change. Note this differs from the approved Figma prototype — we have not compared the two designs here, only the behaviour.

LDM article ↗Approved Figma prototype ↗

Observed

Each card in the homepage “Our Signature Facials” list is a single anchor wrapping everything: <a class="sl-st__card" href="#"> contains the image, the “Sensitive Skin” tag, the <h3> treatment name and the description. A screen reader announces one link whose name is the image alt plus the tag plus the heading plus the whole paragraph. The heading is also no longer a link target in its own right, so heading-and-link navigation both degrade.

Separately, every one of these cards still points at href="#" — see F5.

Cause

The clickable-card pattern was built by wrapping rather than by overlaying.

Fix

Put the anchor around the h3 text only, give the card position:relative, and stretch the link over the card with a pseudo-element: .sl-st__card-heading a::after { content:""; position:absolute; inset:0; }. The whole card stays clickable, the link name becomes just the treatment name, and the heading stays a heading. Reference: Automatic.css — clickable parent.

homepage — Our Treatments ↗

Observed

In “Skin Science Built By Doctors” the four stats sit in a CSS grid with a 1px border-left as the divider. Between 1210px and 1310px the four columns narrow to 99–111px while “Satisfied Customers” still needs more, so the label overflows its cell and crosses the neighbouring divider — up to +13.9px of overlap at 1210px. Measured every 10px from 1440 down to 1100 with fonts loaded, taking the overlap from text-node bounding boxes: clean at 1330px and above, a 0.1px touch at 1320px, overlapping from 1310px down to 1210px, and clean again at 1200px where the columns widen; the grid drops to two columns at 1190px.

This is the common laptop and tablet-landscape range, so it is not an edge case.

Cause

The four-column track carries on for about 120px below the width its longest label needs: the labels start colliding at 1310px but the 4→2 column switch does not arrive until 1190px.

Fix

Either move the 4→2 column breakpoint up to about 1330px, or let the stat labels wrap/shrink inside the narrow track (min-width:0 plus a smaller label size), or swap the border-left for a grid gap with its own divider element so text can never cross it. Validate across 1190–1330px, not just 1180 and 1440: at 1200px the four columns widen again and the overlap clears on its own, so a spot-check either side of the band will miss it.

homepage at 1280px wide ↗

Observed

At 1440px the reviews carousel renders four dots for four cards, but about two cards are visible at a time, so the track only has two “pages” of travel. Scrolled fully to the end — showing the last two reviews — the second dot is the one marked aria-current="true". Clicking dot 2, dot 3 and dot 4 at that same 1440px width all resolve to the same scrollLeft of 1383 (the maximum), so dots 3 and 4 are visibly dead. The exact numbers move with the viewport — the symptom is that the dot count is fixed at one-per-card while the travel is not, so reproduce it at a width where fewer than four cards are visible, not at whatever width the browser happens to open at.

Same root cause as F15: the console throws TypeError: this.layoutDots is not a function on every homepage load, so the routine that should recompute the dot count for the current viewport never runs. The neighbouring “Our Expertise” carousel, which does not throw, correctly shows two dots at 1440px and four at 390px — that contrast is the clearest evidence the dot count is meant to be viewport-aware. At 390px the reviews dots are correct (four pages, four dots, last dot active at the end), which is why this reads as desktop-only.

Cause

layoutDots is called twice (from connectedCallback and the resize handler) and defined nowhere in the theme — 2 references, 0 definitions. So dot count and active state stay at their server-rendered one-dot-per-card values, and sync() clamps the active dot to min(pages(), dots.length) = 2, which is exactly why dot 2 lights up at the end.

Fix

Define the missing method — the class already has a pages() method and a comment describing the intended behaviour (one dot per scrollable page, surplus dots hidden rather than removed, recount on resize), so the implementation is specified. Note that deleting the call would silence F15’s console error while leaving the dots exactly as dead, so the two must be fixed together rather than either alone. Fixing F15 should fix this finding; please verify both together.

homepage — Customer Stories ↗

Observed

/pages/customer-reviews is the same placeholder reviews section as the homepage — five “Joe Doe” cards with lorem bodies. There is also a second, near-identical page, /pages/customer-stories, with the same five placeholder entries; both are live (the placeholder state of both pages is also reported in F1; what is new here is the un-migrated incumbent content and the missing redirects).

The incumbent site has exactly three real, named, long-form customer stories, each on its own URL: siu-weis-first-choice-for-acne-scars, lesser-makeup-enhanced-confidence-days-for-melodie and a-severe-hormonal-acne-miracle-for-dini (confirmed against testimonials-sitemap.xml). Nothing on the new store corresponds to them, so at cutover those three URLs lose their content and their inbound links unless they are rebuilt and redirected.

Fix

Decide which page is canonical and delete or redirect the other. Migrate the three stories as individual pages or articles, then add 301s from the three incumbent /testimonials/… URLs to their new homes. If long-form stories are not coming back, the redirects should at least land on the reviews page rather than 404.

new customer reviews page ↗duplicate customer stories page ↗incumbent testimonials ↗

Observed

None of the four homepage carousels — hero, “Our Expertise”, “Real Results” before/after, and reviews — can be dragged along the track with a mouse. Confirmed from the shipped section scripts rather than by feel: no pointerdown, mousedown, mousemove or drag handler exists anywhere in the theme, and cursor is auto on every track and section, so there is no grab affordance either. (The only mouse handlers on these sections are mouseenter/mouseleave autoplay pause on the hero and the concern slider.)

Worth being precise about what does work, because it narrows the fix: touch swipe works everywhere. The three lower carousels are native overflow-x:auto tracks with scroll-snap-type: x mandatory, so a phone swipes them for free; the hero binds touchstart/touchend on its custom element and steps exactly one slide per swipe past a 45px threshold. So the gap is desktop pointer input only — the hero still has its dots and its prev/next arrows, and each before/after comparison already has a mouse-draggable wipe slider (input[type=range]), so this is a convenience gap rather than a loss of control.

Cause

The carousels rely on native scrolling plus dot buttons; pointer-drag was never implemented.

Fix

Add a small pointer-drag handler to the shared carousel script (pointerdown/pointermove/pointerup mapped to scrollLeft, with setPointerCapture and a click-suppression threshold so card links still work), and set cursor:grab/grabbing so it looks draggable. The hero needs the same handler mapped to its transform. On the before/after track, exclude the existing wipe slider from the drag handler (ignore pointerdown originating inside [data-sl-range]), or dragging the reveal handle will scroll the carousel instead. Low severity because dots, arrows and trackpad scrolling all work today.

homepage ↗

Observed

Clicking a dot on the before/after carousel moves the track in a single frame. Sampling scrollLeft every animation frame across the transition: before/after produced 2 distinct values (0 then 1158 — an instant jump), while “Our Expertise” produced 22, reviews 37, and the hero animated over 36 frames on a 0.62s cubic-bezier. So it is the only one of the four that does not animate, which is exactly the inconsistency reported.

The cause is a leaked event argument, not a deliberate instant scroll. The dots are bound as dot.addEventListener('click', this.goTo.bind(this, i)) while the method is declared goTo(i, instant) — so a click calls goTo(i, MouseEvent), the truthy event satisfies instant, and the handler takes the branch that suspends the track’s scroll-behavior: smooth and writes scrollLeft directly. That branch is only meant for the initial goTo(start, true) on first paint.

Fix

Bind the dots to a wrapper that passes only the index (dot.addEventListener('click', function () { this.goTo(i); }.bind(this))), so the smooth scrollTo path the other carousels use is taken. The same bind(this, i) pattern is used elsewhere in the theme — it is only a bug where the method takes a second parameter, so audit for that rather than changing every binding.

homepage — Real Results ↗

Observed

Two pill shapes are in use for the same taxonomy value. On /products/keratosis-pilaris-medical-peel-treatment both appear on one page: the product’s own pill .sl-pd__tag renders border-radius: 0px, while the related-products pill .sl-pr__tag renders border-radius: 20px — both reading “cleanse”. The homepage “Our Signature Facials” pill .sl-st__tag is also 20px.

Fix

Standardise on one shape and set the radius from a shared token rather than per section, so this cannot drift again. Note the product page pill’s 0px is simply an undeclared border-radius rather than a deliberate square treatment, so confirm with design which shape is intended before picking it. Affects .sl-pr__tag (related products, on treatment and product pages) and .sl-st__tag (homepage signature facials).

both pill shapes on one page ↗

Observed

The full nav (Home, About Us, Treatments, Skincare, Customer Reviews, Blogs, Contact Us) is present at 1401px and above. The header CSS carries @media screen and (max-width: 1400px), so at 1400px it collapses to the burger and stays collapsed all the way down. That puts very ordinary desktop widths — a 1366px laptop, or any part-width window on a larger screen — on the mobile menu.

The collapse is a layout switch, not an overflow fallback: .sl-h__inner is a CSS grid that swaps from brand + nav + tools at 1420px to burger + brand + tools below it, and the nav element is removed from the layout rather than merely hidden. So no amount of freed space brings it back on its own — the breakpoint itself has to move.

Measured width budget at 1440px: .sl-h__inner is grid-template-columns: 188px 817px 267px — brand 188px + nav 817px + tools 267px = 1272px of content in 1440px, leaving 40px of column gap and 128px of padding. The tools block is the search field (209px) plus a 14px gap plus the cart icon (44px) — and the collapsed layout already proves a 44px search icon works, because that is exactly what it uses (its tools block measures 88px). Swapping the desktop search for that icon takes content to about 1,107px, so adding back the existing 168px of gap and padding projects a fit at roughly 1275px. That figure is arithmetic, not an observation — the nav is display:none below the breakpoint, so it cannot be measured at that width until the breakpoint moves.

Cause

The nav breakpoint was set to the width the header needs with a 209px search field, so the desktop layout gives up as soon as that field no longer fits — even though the same header has a 44px search icon available.

Fix

Two changes, in this order: make the header search an icon that opens the existing predictive-search overlay at all widths (the mobile layout already has this control — .sl-h__mobile-search), then move the nav breakpoint from 1400px down to about 1280px. 1275px is the arithmetic fitting point, so 1280px leaves a little slack for font loading; please re-measure after the change rather than trusting the arithmetic. If more room is wanted later, the “Outlet Locations” utility link is the next cheapest thing to move into the drawer.

homepage header ↗