Claude/review shopify integration ed gkf#3922
Closed
OsamahSharaf wants to merge 12 commits into
Closed
Conversation
- assets/custom.css: Full dark mode engine — color tokens, typography (Inter + Barlow Condensed), header, buttons, cards, product page, cart drawer, footer, form inputs, badges, animations - sections/cvus-hero.liquid: Full-width custom hero with image/video background, gradient overlay, animated content, dual CTA, scroll indicator, and Shopify section schema (editable via Theme Editor) - layout/theme.liquid: Google Fonts preconnect + custom.css injection Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Age Gate (no app required): - snippets/cvus-age-gate.liquid: Full 21+ DOB modal with brand identity, accessible form (month/day/year), error handling, remember-me checkbox, and legal disclaimer - assets/cvus-age-gate.css: Premium dark modal styling with animated entrance, glassmorphism backdrop, branded inputs - assets/cvus-age-gate.js: Full JS controller — localStorage verification (30-day expiry), exact age calculation, focus trap for a11y, body scroll lock, Escape key disabled by design - layout/theme.liquid: Age gate injected before </body> Product Grid: - sections/cvus-product-grid.liquid: 4-column responsive dark grid — image swap on hover, quick-add overlay, sale/new badges, vendor, star rating, variant count, View All button, full Shopify section schema (editable in Theme Editor) Admin Notifications: - assets/cvus-order-notification-email.html: Branded dark-mode HTML email template for Shopify "New Order" notification with customer info, line items, totals, and fulfillment CTA Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Products CSV (assets/products-import.csv): - Geek Bar Pulse 15,000 — 8 flavors, $19.99, official CDN images - Geek Bar Pulse X 25,000 — 8 flavors, $24.99, official CDN images - Lost Mary MT35000 Turbo — 8 flavors, $24.99 - All with SKUs, inventory tracking, HTML descriptions, spec tables Product page (sections/cvus-product-main.liquid): - Full image gallery with thumbnail strip + main image switcher - Flavor/variant picker with live selection feedback - Quantity stepper with +/- controls - AJAX add-to-cart with success/error states - Spec table styled with dark theme + FDA warning block - Trust badges: Authorized Retailer, Adult Signature, 21+ Verified - Fully accessible (aria-labels, aria-pressed, keyboard nav) - Mobile responsive Template: templates/product.cvus.json (assign in Shopify Admin) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previous CSV caused import error due to: - Missing required columns (Gift Card, Variant Barcode, Variant Weight Unit, SEO Title, SEO Description, all Google Shopping columns) - Em-dash characters causing UTF-8 parse failures - Complex HTML body with nested quotes breaking CSV field boundaries Fix: rewrote using Python csv.DictWriter with QUOTE_ALL mode - All 44 Shopify-required columns present in exact order - Proper UTF-8 encoding, no special characters in titles - HTML body uses inline styles (no class attributes) to avoid quote conflicts - 3 products x 8 flavors = 24 variant rows, all validated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Complete color system overhaul from full dark to light/hybrid: Light theme (body & cards): - Page background: #f5f5f7 (Apple light gray) - Cards & panels: #ffffff (pure white) with soft drop shadows - Text: #111116 near-black for maximum readability - Borders: rgba(0,0,0,0.08) — subtle, clean Dark elements preserved (like geekbar.com): - Header: #0e0e12 dark with light nav text - Footer: #111116 dark - Hero section: dark background for image contrast Accent unchanged: - Red #e63946 on buttons, prices, badges, hover states - Red glow on CTA buttons Cards redesigned: - White background with shadow-sm at rest - shadow-xl + lift on hover - Red border tint on hover - Zebra-stripe spec table (alternating white/gray rows) All sections updated for light theme: - cvus-product-main.liquid: white image panel with shadow - cvus-product-grid.liquid: white cards, light hover shadows - cvus-age-gate.css: backdrop adjusted for light theme Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
settings_data.json — all schemes now use brand colors: - scheme-1 (main light): white bg + red buttons - scheme-2 (alt light): #f5f5f7 bg + red buttons - scheme-3 (dark): #0e0e12 bg — header/footer/hero - scheme-4 (accent red): #e63946 bg — promo/sale banners - scheme-5 (dark card): #18181f bg — dark section cards UI refinements: - buttons_radius: 8px (rounded) - card_corner_radius: 14px + shadow enabled - media_radius: 12px - inputs_radius: 8px - cart_type: drawer - page_width: 1280px - spacing_sections: 36px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Fix hero section: self-host product images in /assets/ to bypass geekbar.com CDN hotlink protection (cvus-hero-pulse.png, etc.) - Redesign to warm light-mode premium aesthetic (geekbar.com DNA): cream white base #F8F7F4, rose accents, Bebas Neue + DM Sans type - Add FDA warning bar to theme.liquid (dark #111116, 21+ badge, two-column layout, mobile-stacked) - Add features strip: 4-column trust signals with icon + text layout - Rebuild product grid: white cards, warm image zones, red price accent, quick-add hover, second-image swap on hover - Add Brand Showcase section: 5 brand cards on rose-tinted strip - Add Category Cards section: 4 flavor-tinted cards (rose/mint/peach/lavender) - Add Editorial "Why Us" section: split image + 3 promise points - Add Newsletter Capture section: Shopify native form, 10% off incentive, 21+ legal microcopy - Wire templates/index.json: 7-section homepage order, collection: "all" on product grid, all new sections with preset content Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add dark "scheme-6" (cyan neon) and "scheme-7" (lime accent) color schemes - Switch global card defaults to scheme-7 and sale badge to scheme-6 - Add top-utility-bar section (tagline left, link list center, 21+ badge right) - Configure header-group.json with 3-zone layout: utility bar -> announcement bar -> header - Default header to mega menu, sticky on scroll up, dark scheme - Seed announcement bar with 3 rotating PACT/age/shipping messages - Add neon hover, shop-all CTA, and shadow polish to mega menu - Locale strings for shop-all CTA and utility bar
Replaced min-width: 100% with width/max-width: 100% + min-width: 0 so the button can never exceed its parent card width. Adds overflow guards on the .quick-add wrapper to prevent any residual clipping on narrow two-column mobile grids.
# Conflicts: # config/settings_data.json
On <=749px the price row + ADD button shared one flex row inside a card with overflow: hidden. The combined intrinsic width exceeded the 2-column card width, so the ADD button was clipped past the card's right edge. Stack the bottom row vertically on mobile: price-row on top, full-width ADD button below.
![translation-platform[bot]](https://avatars.githubusercontent.com/in/7649?s=60&v=4){kind=small}
| } | ||
| }, | ||
| "top_utility_bar": { | ||
| "nav_label": "Utility links" |
Contributor
There was a problem hiding this comment.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
Utility linksfor keysections.top_utility_bar.nav_labelis very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
Please look out for other instances of this issue in your PR and fix them as well if possible.
Questions about these messages? Hop in the #help-localization Slack channel.
Author
|
Close it |
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.
PR Summary:
Why are these changes introduced?
Fixes #0.
What approach did you take?
Other considerations
Decision log
Visual impact on existing themes
Testing steps/scenarios
Demo links
Checklist