RAKKA CHOCOLATE

/ Shopify / By

Home Page

Product Detail Page
(PDP)

RAAKA CHOCOLATE

I built Raaka Chocolate’s Shopify homepage as a fully custom, editable, and responsive storefront. From hero to footer, every section was designed to tell the brand story, highlight products, and drive conversions — all powered by Shopify Liquid for speed, flexibility, and ease of use.

Footer+Accessibility to products

Product Detail Page
(PDP)

Subscription & Gift Highlights

Home page

RAAKA CHOCOLATE

I built Raaka Chocolate’s custom Shopify homepage to tell the brand story and drive conversions.

Home page

PDP

Subs.  view

 Footer

Homepage Hero & Navigation

Hero + Sticky Navigation

  • Full-width hero section featuring seasonal promotions (e.g., Waffle Cone Summer)

  • Transparent sticky header with smooth scroll and brand-aligned font

  • Custom mega menu:

    • Linked to curated collections
    • Submenu icons and hover transitions

    • Editable via Shopify admin without code

  • All styled responsively using custom Liquid + CSS, no app dependencies

Featured Collections & Best Sellers

  • Two clear, customizable plans:

    • Two-Bar Subscription

    • Three-Bar Subscription

  • Integrated pricing and call-to-action using Shopify Liquid schema for each plan

  • Built with dynamic collection integration so plans are managed in Shopify admin without code

Subscription + Gift Sections

  • Dedicated chocolate subscription block

    • Monthly curated boxes with editable benefits list

    • Animated CTA buttons using CSS hover transitions

  • Gift callouts:

    • Tied to real Shopify products

    • Quick-buy buttons with optimized mobile spacing

  • All layout and logic crafted directly via Liquid sections, no external builder

Classes & Events

  • Custom-designed block promoting chocolate-making workshops

  • Uses conditional Liquid logic to:

    • Show events only when available

    • Hide the block when no slots exist

  • Fully editable image, text, and links from the backend

“Our Process” Journey

  • Visually engaging bean-to-bar journey: Fermentation → Drying → Tempering → Wrapping

  • Each step features:

    • Custom icons (SVG)

    • Section-by-section animation (optional via CSS)

  • Built with flexbox grid for perfect alignment across devices

Click To View large

Product Detail Page (PDP)

Hero Image & Product Title

  • Large product gallery with crisp imagery and optimized loading (lazy loading & responsive size presets)

  • Prominent product title and price, styled with clear typography

  • Visible product badges: e.g. Gluten Free, Vegan, Organic, Kosher — styled as custom SVG icons

Product Description, Variants & Quantity Selector

  • Custom-rich product description editable via Shopify admin

  • Variants (like flavor or size) displayed with clear dropdowns or radio buttons, styled for consistency

    ✅ Custom-designed quantity selector:

    • Fully styled input box with plus/minus buttons

    • Built using Liquid + JavaScript without any third-party app

    • Mobile-friendly layout with responsive sizing

    • Automatically linked to cart logic for smooth quantity updates

Add to Cart, Subscription & Checkout Flow

  • Clean “Add to Cart” and “Buy Now” buttons with micro-interactions

  • Integrated Subscribe & Save block:

    • Option to toggle subscription directly on PDP

    • Tied into Shopify’s subscription APIs

  • Note under button (e.g. Ships with Ice!) placed strategically to build trust

Ingredient Transparency & Brand Ethos

  • Dedicated blocks for Raaka’s process and values:

    • “Unroasted,” “Transparent Trade,” and “Organic” highlighted

  • Designed as expandable accordion content (perfect for mobile)

FAQs & Smart Info Sections

  • Context-aware FAQ shown conditionally based on product type

  • Managed via Shopify schema editor for easy backend updates

  • Fully styled for visual consistency and responsive design

Click To View large

Subscription / “First Nibs”
Page

Hero Subscription Block

  • Prominent subscription hero section with clear headline and vibrant imagery

  • Simple choice: “Subscribe Now” or “Gift a Subscription”

  • Mobile-optimized layout and flexibility via Shopify’s section settings

Subscription Plan Options

  • Two clear, customizable plans:

    • Two-Bar Subscription

    • Three-Bar Subscription

  • Integrated pricing and call-to-action using Shopify Liquid schema for each plan

  • Built with dynamic collection integration so plans are managed in Shopify admin without code

Subscription Manager / SMS Logic

  • Integration of subscription management via SMS (skip, swap, update shipping, etc.)

  • Display logic personalized depending on user status or login state

  • Built via custom Liquid and optional JS, ensuring seamless management without external app dependencies

Seamless Integration with Shopify Checkout

  • Fully integrated with Shopify’s native checkout for a frictionless purchase

  • Conditional logic for:

    • Shipping notice (“Ships with Ice!”)

    • Optional gift notes or add-ons

  • Cart logic built using JavaScript and Liquid

Click To View large