Mobile-First Shopify (Front-End) UI/UX Designer: E-Commerce Layout for Digital Video Products

We are looking for an expert Shopify Designer/Developer to design and layout our storefront navigation, homepage, and product pages. We sell premium, mobile-optimized 3D video invitation templates (digital downloads). Website: www.luminousinvites.com Etsy: https://www.etsy.com/shop/LuminousInvites Shop: https://shop.app/m/luminousinvites EXAMPLES OF WEBSITES I LIKE: https://www.framer.com/ https://hertilityhealth.com/ https://nothing.tech/ https://teenage.engineering/ https://www.casetify.com/ https://www.authentise.com/new-home EXAMPLES OF TOP COMPETITORS (ALL REALLY BAD) https://motionstamp.com/en-gb https://www.flexclip.com/ https://www.flexclip.com/ https://www.videozas.com/zas/en/home https://www.magnific.com/free-photos-vectors/video-invitation https://seemymarriage.com/housewarming-party-invitations-griha-pravesh-cards-printable-e-cards-videos-gifs/ Our database, collections, and high-quality square mockup media assets are already 100% complete and structured in the backend. We now need a professional to execute an elite front-end user experience. We are looking for an expert Shopify developer to build a premium, highly interactive e-commerce store for Luminous Invites (dynamic, premium digital video templates). You will be handed a complete, high-status Figma blueprint (Desktop + Mobile) designed with strict visual hierarchy, custom curved containers, and unified border-radius logic. Your role is pure, high-performance technical implementation. You will translate these layouts into clean, modular Liquid/CSS code, build custom collection filters, and optimize vertical video loops for flawless mobile performance. Project Type: One-time project (could be Figma to Shopify implementation) Start Date: June 1st, 2026 Budget: $450 Fixed (design scope may be locked; with design assets and exact wireframes provided) Experience Level: Expert Frontend Engineer 📐 LAYOUT AND REQUIREMENTS 1. Navigation & Liquid Architecture ✦ Header Setup: Minimalist sticky header featuring an integrated predictive search bar, shopping cart icon, and clean logo scaling. ✦ Mega Menu (Desktop) & Accordion (Mobile): Scalable Liquid architecture to segment a growing collection hierarchy cleanly without layout maintenance issues. ✦ Visual Search Integration: AJAX-based predictive search displaying live thumbnail preview images of the video templates as the user types. 2. Homepage UX Layout (Product-Education & Comparison Focused) The homepage must move users from discovery to product education instantly. You will implement the following structured custom sections based on the Figma layouts. 📍----- Section 1: The Cinematic Hero ----------- Visual Asset: A centered, premium 3D iPhone container with subtle depth and shadow mapping, housing an integrated, high-definition autoplaying loop of a top video invitation template. Headline: Edit & Send 3D Invitations Instantly. ----------- Sub-headline: Cinema-grade video invites you can share via WhatsApp in a single tap. ----------- CTA Button: Browse Collections (Styled with signature soft, rounded corners) 📍----- Section 2: The Shift (The Pattern Break) ----------- Visual Asset: Vast open whitespace. Zero graphics or background elements. Just heavy, quiet, high-contrast typography that stops the scroll. ----------- Core Statement: Memorable events don't start with flat paper. ----------- The Pivot: They start with something special… 📍----- Section 3: The 1:1 Responsive Category Grid ----------- Visual Asset: A fluid, responsive grid utilizing custom 1:1 square collection blocks. Each card features distinct rounded corner borders with minimalist, clean typography labels layered neatly over high-quality, curated cover imagery. ----------- Grid Categories: 1. Weddings 2. Birthdays 3. Babyshower 📍----- Section 4: The 3-Step Flow (Scroll-Triggered Entry) ----------- Visual Asset: Three minimalist symbols, line-art graphics, or icons positioned side-by-side. The sections must gracefully animate into place from left to right as the user scrolls. ----------- Step 1: Purchase — Download your access file immediately. ----------- Step 2: Personalize — Customize in Canva in under 60 seconds. ----------- Step 3: Deploy — Send via WhatsApp and track RSVPs instantly. 📍----- Section 5: The Contrast Matrix (Objection Handler) ----------- Visual Asset: A high-contrast, modern visual table comparing outdated physical print against our digital ecosystem. The "Paper" column is dark, dry, and muted. The "Luminous" column is bright, glowing, and high-status. ----------- Row 1: Paper: Delivery delays. | Luminous: Instant delivery. ----------- Row 2: Paper: High postage. | Luminous: No Shipping Fee. ----------- Row 3: Paper: Static print. | Luminous: Cinema-grade motion. 📍----- Section 6: The Guest Experience Mockup Simulator (Depth Stack) ----------- Visual Asset: Three clean smartphone mockups stacked vertically, subtly overlapping each other along the Z-axis to build clear layout depth. Every screen card features crisp, rounded corners. -------------- Card 1: The Delivery * Visual: A phone screen displaying a clean WhatsApp chat thread with an elegant, custom invite link preview block. -------------- Text Label: Send via text or WhatsApp. -------------- Card 2: The Experience * Visual: A phone screen layered directly below card one, displaying the 3D video invitation playing crystal-clear in full screen. -------------- Text Label: Impress your friends. -------------- Card 3: The Response * Visual: The final phone screen in the stack, displaying the integrated Google RSVP dashboard form with intuitive, clean input blocks. -------------- Text Label: One click handles the RSVPs. 📍----- Section 7: Social Proof (The Reaction Phase) -------------- Visual Asset: Wide open whitespace that dynamically populates with high-contrast, emerging chat bubble notification graphics that slide or fade smoothly into view as the user tracks down the page. -------------- Main Copy: Expect your group chats to blow up. 📍----- Section 8: The "60-Second Customization" Proof Engine -------------- Visual Asset: A sleek tablet or desktop browser mockup with smooth rounded edges. Inside the frame sits a high-speed, crisp looping video or GIF demonstrating a rapid "speedrun" of the Canva personalization process: the virtual frame smoothly zooms into a text layer as a name is typed over placeholder text, swoops across to adjust a date, and glides up to instantly click "Download." -------------- Core Headline: No design skills required. -------------- Sub-headline / Copy: If you can type a text message, you can edit our templates. 📍----- Section 9: The Closing Visual CTA -------------- Visual Asset: A sleek, minimal, high-end closing section framed by an immersive, dark or premium branded background. -------------- CTA Button Copy: Set the Tone For Your Event 3. Product/Listing Pages ✦ Above-the-Fold Info: Clean, bold typography hierarchy for Product Title, star rating snippets, and a prominent price tag with a subtle, permanent "Instant Digital Delivery" badge. ✦ The Mobile Conversion Anchor: A full-width, sticky "Add to Cart / Buy Now" CTA button locked strictly to the bottom of the viewport on mobile devices as the user scrolls. ✦ Semantic Description Layout: Flawless rendering of our pre-formatted HTML descriptions, ensuring uniform typography scale, strict letter-spacing, and clear padding for unordered feature lists. 3. Blog Navigation Page 4. Support Page (with FAQ, Video Tutorial and instructions to email at the end) 🛠️ Required Technical Skills ----- Advanced Shopify Architecture: Deep proficiency in Shopify Liquid, HTML5, CSS3, and JavaScript/JSON schema configuration. ----- Theme Engineering: Proven expertise custom-modifying Online Store 2.0 themes (e.g., Dawn framework) to break away from rigid, flat, default block styles. ----- Motion & Micro-Interactions: Ability to implement lightweight, scroll-triggered entry animations (staggered fade-ins, slide-ups) and fluid hover transitions without layout shifts or lagging. ----- Performance Optimization: Absolute mastery of mobile page speed tactics—specifically optimizing mobile video containers to maintain elite LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) scores. To Apply: Please submit your portfolio highlighting custom Shopify frontend implementations that demonstrate advanced motion logic, custom collection filtering, or pixel-perfect translations of custom Figma files. Note: The visual layout design, asset curation, and copy are entirely handled by our UI designer. Your core focus is high-performance, clean code implementation.