Reach Globe — Animated Global Shipping Map Section for Shopify
A drop-in Shopify Online Store 2.0 section: a rotating globe built entirely in CSS 3D transforms, with pulsing pins for every city you ship to. No app, no map API key, no WebGL, no build step.Desig...
About This Product
A drop-in Shopify Online Store 2.0 section: a rotating globe built entirely in CSS 3D transforms, with pulsing pins for every city you ship to. No app, no map API key, no WebGL, no build step.
Design Pattern: A shaded sphere backdrop paired with real 3D-positioned pins (transform-style: preserve-3d + backface-visibility: hidden) that orbit correctly and hide themselves on the far side as the globe turns — echoing the browser-based interactive-globe visualizations that have been trending hard in the open-source dev community this week, reimplemented here from scratch as a lightweight, dependency-free storefront section instead of a WebGL data viz.
Conversion Intent: Turn "we ship worldwide" from a throwaway line into something shoppers actually watch — a visual, current-feeling proof of reach that works above the fold or right before checkout.
Emotional Outcome: Global, active, alive — this isn't a static badge, it's a store that's clearly shipping somewhere right now.
Features:
- Pure CSS 3D globe — no WebGL, no map library, no external requests
- Up to 12 merchant-editable location pins (city label, latitude, longitude, optional note) added as theme-editor blocks, no code required
- Pins correctly hide on the far side of the globe as it rotates (real 3D transforms, not a flat illusion)
- Hover/focus/tap tooltip shows the city + note, rendered as a flat 2D element so the text always stays upright and legible
- Optional animated stat counter (e.g. "42 countries shipped to this year")
- Globe only starts spinning once scrolled into view, and pauses on hover/focus so shoppers can read a pin without it drifting away
- Dark/light color modes, adjustable accent color and rotation speed
- Fully responsive, and fully respects prefers-reduced-motion
- 2-minute install: copy one .liquid file into Sections, one .css + one .js file into Assets
Download the section files (.zip) — includes the Liquid section, CSS, JS, and a full install README.
Delivered as a single self-contained Shopify section (Liquid + CSS + JS + install README). Single-site commercial license.
What's Included
- Complete files ready to use
- Documentation and setup guide
- Free updates
- Commercial license
- Email support
Product Details
Benefits
Real data and metrics that show the value of investing in quality tools.
What Students Achieve
Skill Development Progress
Key Features
Ready to Use
Download and start using immediately. No complex setup required.
Fully Tested
Extensively tested to ensure reliability and performance.
Team Friendly
Works great for individuals and teams of any size.
Time Saver
Save hours of work with pre-built solutions.
Free Updates
Get access to all future updates at no extra cost.
Premium Quality
Built with best practices by industry experts.
Frequently Asked Questions
You'll receive instant access to download the Course. All files are provided in standard formats that work with the relevant platforms.
Yes! We offer a 14-day money-back guarantee. If you're not satisfied with your purchase, contact us for a full refund.
Absolutely! Your purchase includes a commercial license that allows you to use this product for unlimited personal and client projects.
No special software is required. We provide detailed setup instructions with your purchase.
Yes, we provide email support for all purchases. Premium members also get access to our private Discord community for faster help.
Get Unlimited Access
Join our membership and get this product plus 100+ more for one monthly price. Download everything, cancel anytime.