Conversation
Replace the starter demo with a brand storefront inspired by
theordinary.com's clinical layout and styled to the Glow Verve
brand guidelines (Alifira-style serif headings, Montserrat body,
cream/tan/black palette, four-circle clover motif).
- New blocks: announcement-bar, hero, product-grid; rebuilt header
(logo, nav, mobile drawer, bag count) and footer (newsletter,
menus, stacked logo, payments)
- New snippets: product-card, price
- Home: hero, shop-by-concern, serum grid, brand story, routine,
AM/PM pairing guide from the audited label directions
- Product: gallery, variant pills, quantity, key facts, description
split into accordions, optional custom.* metafields, related grid
- Restyled collection, search, cart, page, blog, article, 404, password
- Colours and logos are theme settings; two theme styles ship
("Brand guidelines" and "Packaging 2026" yellow) for the upcoming
packaging refresh
- Remove hello-world and liquid-tips starter blocks and assets
- Theme Check: 0 offenses
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Products now carry custom.directions from the audited labels, so the description's own "How to Use" section would repeat it as a second accordion. The product template flags the section to skip and theme.js drops it while splitting the description. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
- cart-drawer block: modal <dialog> bag with quantity steppers, remove, subtotal, and checkout. Add-to-bag forms post to the Ajax cart and open the drawer; contents refresh from the server-rendered cart.drawer fragment template, so Liquid formats all prices - Header search becomes a panel with predictive results fetched from the search.predictive fragment template (debounced, abortable, live region, Esc and outside-click to close) - Sticky add-to-bag bar on mobile product pages once the main button scrolls out of view; both buttons stay in sync with the variant - Mobile header: search icon plus bag icon with a count badge - Fix: open and focus the search input in the same click so the first keystrokes are not dropped - Fix: drawer list padding was overridden by the list reset Everything degrades to normal links and form posts without JS. Theme Check: 0 offenses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Build Glow Verve storefront theme
Shopify's GitHub sync rejected layout/theme.liquid and every template
because the store's parser doesn't support the preview {% block %} tag
(inherited from the Skeleton rc-v2.0.0 port), so the theme couldn't be
published: "Role can't be set to main: missing required file
layout/theme.liquid".
- Convert the announcement-bar, header, footer, cart-drawer and
product-grid blocks to snippets; inline the hero in the home template
- Replace container blocks with <section class="block-container">
- Move block settings into Theme settings (Announcement bar, Header,
Home page, Footer)
- Rewrite AGENTS.md for the standard-Liquid conventions
Markup, CSS and JavaScript output are unchanged. Theme Check: 0 offenses.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Fix theme upload: replace preview {% block %} tag with standard Liquid
- Collection toolbar: Shopify storefront filters (list, boolean, price range) as dropdowns, active-filter chips with clear all, and sort in one GET form; blank fields are left out of the URL - Product cards: second image fades in on hover; AM/PM routine badges from the custom.when_to_use metafield - Product page: one- and two-image galleries stack on desktop; mobile swipe gallery gets a dot indicator - Home: shop-by-concern adds Uneven tone; pairing guide adds Barrier Support and Whitening + Clarifying from their audited labels Verified: Shopify accepted every file in a DEVELOPMENT test theme; Theme Check 0 offenses; filter and gallery behaviour tested in Chromium at 1440px and 390px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Add collection filters, card hover image, routine badges, gallery dots
- Routine builder replaces the static pairing table (kept below as a collapsible reference): pick serums and get AM and PM routines in layering order with cleanse, moisturize and SPF steps. Clashing serums are kept apart: flexible serums take the open slot, two flexible clashing serums split AM/PM, and anything that fits nowhere is listed under "On alternate days". Add the whole routine to the bag, or copy a shareable ?routine= link. - Skin quiz (goal, sensitivity, time of day) recommends up to three non-clashing serums: concern matches first, then fit for the time of day, favouring fragrance-free and avoiding salicylic acid for sensitive skin. - Personalization in localStorage only: "Your routine" for returning visitors, "Your match" badges on product cards, and recently viewed products on the home and product pages. - Product page lists "Don't layer with" from custom.conflicts_with. - snippets/product-catalog-json.liquid renders product routine data and translated strings for assets/routine.js; theme.js exposes GlowVerve.addToBag so several items go through the bag drawer. - [hidden] now always wins over display rules. Verified: Shopify accepted every file in a DEVELOPMENT test theme; Theme Check 0 offenses; builder, quiz, sharing, add-to-bag and return visits tested in Chromium with real catalogue data at 1440px and 390px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Add skin quiz, interactive routine builder, and personalization
Make the home page quiz playful, modelled on the mazenonline magnetic ingredients lab: - Answers are glowing "element" orbs (Hy, Br, Ds, Se, Am, Pm...) that orbit a flask carrying the logo mark and drift toward the pointer - Picking an orb draws a flowing bond to the flask, pours a drop of its colour in, and fills the flask in layers; Lab notes list the formula so far - After the third answer the flask brews, bursts into particles and reveals "Your formula" with a formula code (e.g. Ds-Se-Am), a reason for each serum, and a compatibility check - Tap/click pours an orb straight in; keyboard users move with arrows and confirm with Next; prefers-reduced-motion skips the animation; on phones the orbit becomes a grid under a smaller flask - Picking a different last answer re-brews; return visits restore the full flask and formula - Recommendations now never include a serum that can't be used at the chosen time of day (e.g. Vitamin C for evenings) Verified: Shopify accepted every file in a DEVELOPMENT test theme; Theme Check 0 offenses; pointer, keyboard, back, restart, re-brew and return-visit flows tested in Chromium at 1440px and 390px. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Rebuild the product card around the attached reference, adapted to Glow Verve: - Header strip tinted with the serum's Skin Lab element colour (from its first custom.concerns value), showing the element code and claim or a "% off" badge when on sale, plus sun/moon AM/PM chips - Inset rounded photo; the second image fades in on hover and the "1 / 2" counter follows - Flask toggle on the photo adds the serum to "My routine", shared with the routine builder (localStorage), with a pop animation - Key-ingredient and fragrance-free pills (fragrance-free only when the full INCI list confirms it), large serif title, dashed divider - Large price with struck compare-at price or size, and a black pill "Add to bag" button with a bag icon - Whole card is one link via a stretched title link; mobile stacks the footer and trims the strip Verified: Shopify accepted every file in a DEVELOPMENT test theme; Theme Check 0 offenses; routine toggle, persistence and hover counter tested in Chromium at 1440px and 390px with no horizontal overflow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
The Skin Lab quiz and redesigned product cards
…ome page Remove the routine builder (markup, script, styles and strings). Serums saved with a card's flask button now join quiz matches in "Your routine". Add snippets/product-showcase.liquid: tabs per serum and a large rounded panel tinted with the serum's element colour, with display-type name, giant element code behind the product photo, AM/PM and size pills, and a glassy bar with claim, price, quantity and Add to bag. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Replace routine builder with a colour-panel product showcase
Drop the returning-visitor section (markup, rendering script, styles and its strings). Quiz "Your match" badges on product cards stay, and the Skin Lab result keeps its own retake button. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
Remove the "Your routine" / Retake the quiz section from the home page
Replace templates/index.liquid with templates/index.json and nine sections (hero, shop by concern, product showcase, product grid, Skin Lab quiz, brand story, routine steps, recently viewed, promises). Each has editor settings, blocks where content repeats, a background tone where it makes sense, and a preset so it can be added again. The Home page theme settings group moves into the hero and product sections. Quiz, recently viewed and showcase scripts re-initialise on the theme editor's shopify:section:load event. AGENTS.md documents the home page sections exception. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
aqsm
force-pushed
the
claude/amazing-rubin-aw8qga
branch
from
October 3, 2026 18:03
c2f88c8 to
5316d9f
Compare
Set the "Product image background" colour (product_tile_color) to #FFFFFF in both theme styles and as the schema default, so product cards, mini cards, the product gallery, cart, bag drawer and search results show product photos on white. Search result hover/focus now uses the cream surface colour so it stays visible. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fi9S3B5pNffi5zNZhCs6td
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.