Custom Product Page Layout
A redesigned product page layout with clearer product information, better visual hierarchy, trust badges, accordions, and related product sections.
Shopify Concept Build
Glow Ritual Skincare Shopify Demo Store
Glow Ritual is a self-initiated Shopify concept store created to demonstrate how a basic Shopify theme can be customized into a cleaner, more conversion-focused shopping experience.
This is a self-initiated demo project, not a client project. It was created to showcase Shopify theme customization, product page UX, cart drawer upgrades, and Figma-to-Shopify development.
Demo store may be password-protected. Use password: demo123. Live store URL can be swapped in when ready.
Add To Cart
Project overview
Project Overview
Glow Ritual was designed as a concept Shopify store for a modern skincare brand. The goal was to create a clean, mobile-first storefront that demonstrates product page customization, cart drawer improvements, bundle offers, and editable Shopify sections.
Project Type
Self-Initiated Shopify Demo
Industry
Beauty / Skincare
Platform
Shopify
Theme Base
Dawn
Tools
Shopify, Liquid, CSS, JavaScript, AJAX, Figma
Focus
Product page UX, cart flow, bundles, mobile design
Goal
The Goal
The goal was to show how a standard Shopify theme can be upgraded with native customizations that improve product discovery, buying flow, trust, and mobile usability without relying on unnecessary third-party apps.
- Create a premium skincare shopping experience
- Improve the product page layout
- Keep the add-to-cart action visible on mobile
- Add bundle and upsell opportunities
- Make product information easier to scan
- Show a Figma-to-Shopify workflow
Build details
Customizations Built
Sticky Add-To-Cart
A persistent add-to-cart bar that keeps the buying action visible while shoppers scroll through product content, especially on mobile.
Slide-Out Cart Drawer
An AJAX cart drawer that allows shoppers to review items, update quantities, and continue checkout without leaving the current page.
Product Bundle Section
A bundle section designed to showcase product routines, add-ons, or frequently bought together items.
Clean Accordions
Collapsible product tabs for shipping, ingredients, care instructions, FAQs, and product details.
Trust Badge Section
A flexible icon or logo area for secure checkout, shipping promises, guarantees, press mentions, or certifications.
Figma-to-Shopify Section
A concept layout designed in Figma and recreated as a responsive Shopify section.
Before and after
Before and After
The original theme structure was used as the base. Custom sections and layout improvements were added to create a more polished and conversion-focused storefront.
Before
- Standard Shopify theme layout
- Basic product information
- Default cart behavior
- Generic product sections
- Limited product storytelling
After
- Custom product page structure
- Sticky add-to-cart
- Slide-out cart drawer
- Bundle section
- Cleaner mobile layout
- Product information accordions
- Trust-building sections
Design Direction
The visual direction uses a clean skincare-inspired style with soft spacing, minimal typography, premium product presentation, and mobile-first layouts. The design was created to feel simple, trustworthy, and easy to shop.
- Clean product-focused layout
- Soft neutral color palette
- Large product imagery
- Rounded cards and sections
- Mobile-first spacing
- Clear call-to-action buttons
Technical Approach
The demo was built using Shopify Dawn as the base theme, with custom Liquid, CSS, JavaScript, AJAX behavior, and Shopify OS 2.0 section patterns where appropriate.
- Duplicate theme development
- Custom Liquid sections
- CSS styling and responsive layout
- JavaScript for interactive behavior
- AJAX cart drawer behavior
- Theme-editor friendly structure
- Mobile and desktop testing
Visual proof
Screenshots and Feature Previews
A visual look at the main pages, custom sections, and Shopify features created for the Glow Ritual concept store.
Homepage desktop
Homepage desktop
Homepage desktop layout for the Glow Ritual concept store.
Homepage mobile
Homepage mobile
Mobile-first homepage layout with product-focused sections.
Product page desktop
Product page desktop
Product page layout with sticky add-to-cart and clean product accordions.
Product page mobile
Product page mobile
Mobile product page flow with a persistent add-to-cart action.
Sticky add-to-cart
Sticky add-to-cart
Sticky purchase bar designed to keep the buying action visible.
Cart drawer
Cart drawer
Cart drawer preview with quantity controls, checkout button, and upsell area.
Bundle section
Bundle section
Bundle section designed to showcase a skincare routine or product set.
Figma mockup comparison
Figma mockup comparison
Comparison area for a Figma concept and Shopify section build.
What it proves
What This Demo Shows
This concept project shows how Shopify customization can improve the shopping experience without turning the store into a stack of unnecessary apps. The same approach can be used for beauty, fashion, lifestyle, wellness, and product-focused brands.
- How custom product pages can improve clarity
- How sticky add-to-cart can support mobile shoppers
- How cart drawers can create a smoother checkout path
- How bundles can increase average order value
- How Shopify sections can make content easier to edit
Want a Shopify Feature Like This?
Send your store URL, Figma design, screenshot, or feature idea. We'll review it and suggest the cleanest way to build it inside Shopify.