5.0 (24 reviews)

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...

global-shipping
hero-section
individual-section
shopify-section
trust-badges
ukiyo-section
$25.00
Instant Download
14-Day Guarantee
Lifetime Access
800+
Downloads
15,000+ downloads this month

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

CategoryShopify Section
Version1.0
Last UpdatedFeb 2026
LicenseCommercial

Get Unlimited Access

Join our membership and get this product plus 100+ more for one monthly price. Download everything, cancel anytime.