{"product_id":"reach-globe-animated-global-shipping-map-section-for-shopify","title":"Reach Globe — Animated Global Shipping Map Section for Shopify","description":"\u003cp\u003eA 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.\u003c\/p\u003e\u003cp\u003eDesign Pattern: A shaded sphere backdrop paired with real 3D-positioned pins (\u003ccode\u003etransform-style: preserve-3d\u003c\/code\u003e + \u003ccode\u003ebackface-visibility: hidden\u003c\/code\u003e) 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.\u003cbr\u003eConversion 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.\u003cbr\u003eEmotional Outcome: Global, active, alive — this isn't a static badge, it's a store that's clearly shipping somewhere right now.\u003c\/p\u003e\u003cp\u003eFeatures:\u003cbr\u003e- Pure CSS 3D globe — no WebGL, no map library, no external requests\u003cbr\u003e- Up to 12 merchant-editable location pins (city label, latitude, longitude, optional note) added as theme-editor blocks, no code required\u003cbr\u003e- Pins correctly hide on the far side of the globe as it rotates (real 3D transforms, not a flat illusion)\u003cbr\u003e- Hover\/focus\/tap tooltip shows the city + note, rendered as a flat 2D element so the text always stays upright and legible\u003cbr\u003e- Optional animated stat counter (e.g. \"42 countries shipped to this year\")\u003cbr\u003e- Globe only starts spinning once scrolled into view, and pauses on hover\/focus so shoppers can read a pin without it drifting away\u003cbr\u003e- Dark\/light color modes, adjustable accent color and rotation speed\u003cbr\u003e- Fully responsive, and fully respects \u003ccode\u003eprefers-reduced-motion\u003c\/code\u003e\u003cbr\u003e- 2-minute install: copy one .liquid file into Sections, one .css + one .js file into Assets\u003c\/p\u003e\u003cp\u003e\u003ca href=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0617\/7207\/0996\/files\/ukiyo-reach-globe-section.zip?v=1787973162\"\u003eDownload the section files (.zip)\u003c\/a\u003e — includes the Liquid section, CSS, JS, and a full install README.\u003c\/p\u003e\u003cp\u003eDelivered as a single self-contained Shopify section (Liquid + CSS + JS + install README). Single-site commercial license.\u003c\/p\u003e","brand":"Ukiyo Productions","offers":[{"title":"Default Title","offer_id":47598767767636,"sku":"UKIYO-REACHGLOBE","price":25.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0617\/7207\/0996\/files\/reach-globe-cover.png?v=1787973162","url":"https:\/\/ukiyoprod.com\/products\/reach-globe-animated-global-shipping-map-section-for-shopify","provider":"Ukiyo","version":"1.0","type":"link"}