FITGUN

/ Shopify / By

Home Page

Product Detail Page
(PDP)

FITGUN

FitGun is a Shopify-based wellness brand offering smart recovery tools through a clean, customizable, and conversion-focused website that blends modern design with a strong focus on performance and user experience.

FAQ + Footer

Cart  Drawer

FITGUN

FitGun is a Shopify wellness brand selling smart recovery tools through a sleek, performance-driven site.

Home page

PDP

Cart Drawer

FAQ + Footer

Home Page Breakdown

Hero Section

  • Full-width video background with crisp product focus

  • Clear, high-contrast headline and CTA button

  • Custom overlay and video optimization for fast loading

Product Showcase Strip

  • Horizontally scrollable product slider

  • Hover effects and price reveal interactions

  • Designed with dynamic data and Shopify product blocks

Benefits Section

  • Three-card horizontal layout emphasizing key recovery benefits:
    ✅ Muscle Tension Relief
    ✅ Boosted Circulation
    ✅ Faster Recovery

  • Icon + heading + text format

  • Hover animation applied for interactive feedback

  • Created as a reusable custom section

Quiz CTA Banner

  • Engaging call to action: “Take the Quiz”

  • Scroll-stopping design with custom background

  • Link to interactive quiz for personalized product suggestions

Reviews Carousel

  • Auto-scrolling testimonials with user photos

  • Custom styled via third-party review app or Shopify metafields

  • Eye-catching layout with star ratings and scroll controls

Subscription

  • Feature section promoting subscription savings or kits

  • Clear pricing, benefits, and CTA with customizable layout

  • Designed with flexibility to update content per campaign

Click To View large

Product Detail Page (PDP) Overview

Product Image Gallery

  • High-resolution hero image with gallery thumbnails below

  • Zoom-on-hover effect enabled for detailed viewing

  • Includes product-in-use images and lifestyle visuals

  • Custom-coded for responsiveness across devices

Title, Price & Badges

  • Product title placed prominently

  • Price clearly displayed, with sale logic if applicable

  • “Best Seller” or “Free Shipping” badges shown dynamically

  • Uses Shopify metafields + tag-based logic

Quantity Selector + Add to Cart

  • Custom quantity selector box (distinct from default Shopify input)
    ✅ Plus & minus buttons
    ✅ Real-time price update if needed

  • Sticky Add to Cart button appears on scroll — improves mobile UX

  • Direct cart drawer integration (AJAX-powered)

Key Benefits Icons Section

  • Just below the main add-to-cart area

  • Icons with short benefit blurbs like:
    ✅ Lightweight & Portable
    ✅ Long Battery Life
    ✅ Quiet Operation

  • Created using custom block with SVG support

Product Description & Details Tabs

  • Tabbed interface:

    • Description

    • Technical Specs

    • How to Use

  • Smooth tab switching without page reload

  • Easy to manage via Shopify metafields or custom HTML block

Customer Reviews Section

  • Integrated app section (like Judge.me, Yotpo, etc.)

  • Includes:

    • Star ratings

    • Review text

    • Optional photo uploads

  • Auto-syncs with product metafields for dynamic display

Mobile UX Enhancements

  • Sticky CTA bar on scroll

  • Accordion for long sections (FAQ, details, etc.)

  • Optimized touch targets and font sizes

  • Designed for fast loading and low bounce

Click To View large

Cart Drawer & Checkout
Add-Ons Breakdown

Slide-In Cart Drawer

  • Activated via cart icon (top right) without reloading the page

  • AJAX-enabled drawer shows real-time cart contents

  • Elements included:

    • Product name & thumbnail
    • Quantity selector (with + / – controls)
    • Dynamic price updates
    • “Remove” link/icon

✅ Custom Features You Implemented:

  • Responsive layout for mobile/tablet

  • Lightweight JavaScript logic for smoother updates

  • Custom styles to match FitGun’s minimalist brand design

  • No third-party cart drawer app – fully Shopify native

Auto Price & Quantity Logic

  • Quantity update triggers real-time subtotal adjustment

  • Zero-lag UX using AJAX + Shopify sections rendering

  • Custom message: “You’re X away from free shipping”

  • May include logic for automatic bundle discounts or gifts

Upsell / Add-On Products in Drawer

  • Mini block below cart items suggests:

    • Complementary accessories
    • Bundles

    • Subscription upgrades

  • Includes:

    • Thumbnail
    • Short name
    • “Add” button with instant feedback (no redirect)

✅ Built Using:

  • Dynamic block using product handles or Shopify recommendation API

  • Custom Liquid logic to avoid third-party upsell tools

  • Optional tagging logic (e.g., show “Air” add-on if “Go” in cart)

Discount or Coupon Section

  • Field for promo code input

  • Validates in real-time (or sends to checkout)

  • Custom error handling or success messaging

Cart Summary & Checkout Button

  • Line-item display:

    • Product total
    • Estimated shipping

    • Tax (if applicable)

  • Prominent “Checkout” CTA button

  • Directs user to Shopify’s native checkout with cart state intact

✅ UX Tweaks:

  • Button becomes sticky at bottom on mobile

  • Accent color matches brand palette

  • Optional loader icon when transitioning

Checkout Page Add-Ons (Native or Scripted)

Although Shopify restricts direct checkout customization (except via Shopify Plus), the pre-checkout add-ons include:

  • Auto-added items with logic (e.g., buy 2, get 1 free)

  • Optional checkboxes for:

    • Extended warranty
    • Gift wrap

    • Donation to cause

  • May use Shopify Scripts (Plus) or dynamic cart logic

Click To View large