Contact person: Business Client

Phone:Show

Email:Show

Location: Dortmund, Germany

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"✅ PROJECT DESCRIPTION

Hello,
I’m adding a dedicated interactive “world map” section to my Shopify 2.0 theme so shoppers can explore products by fantasy regions instead of a standard product grid.

The map should feel whimsical, cinematic and fantasylike (hand-drawn kingdom borders, soft gradients, subtle lighting, playful icons) – inspired by the Runeterra (League of Legends) world map feeling, but implemented as a clean, lightweight Shopify custom section for eCommerce.

This map will be used as the hero/front section of my homepage.

✅ CORE INTERACTIONS REQUIRED

Smooth pan & drag navigation (mouse + touch)

Zoom with scroll & pinch on mobile

Clickable hotspots for regions

Each hotspot:

Opens the linked product / collection / page in the same tab

No modals required (direct navigation)

Category filters to:

Instantly show/hide hotspot groups

Automatically re-center the map on visible items

Subtle hover effects & smooth transitions

✅ TECHNICAL EXPECTATIONS

Must plug into my Shopify 2.0 theme as a reusable custom section or app embed

NO iframes, NO external embeds

Built with:

Liquid

JSON schema

Vanilla JS / Leaflet / Mapbox or similar lightweight library

SCSS / CSS

All hotspot data, coordinates, categories & product handles must live in a simple editable schema

I must be able to:

Add/edit hotspots

Change links

Manage categories
directly from the Shopify Theme Customizer without touching code

Fully responsive (desktop, tablet, mobile)

✅ DESIGN & ASSETS

I will provide:

A high-resolution fantasy world map (target: 8000 × 8000 px, WebP or SVG)

List of:

Regions

Categories

Product / collection links

Text labels

Map must stay:

Cinematic

Fantasylike

But optimized for fast loading

✅ PERFORMANCE REQUIREMENTS (IMPORTANT)

Smooth pan & zoom at 60 fps

Tested on a modern iPhone & a mid-range laptop

No console errors

≤ 100 KB added JS/CSS after gzip
(Base map image not included in this limit)

✅ DELIVERABLES

Fully commented Shopify custom section
(Liquid, CSS/SCSS, JavaScript)

JSON / settings schema for managing:

Hotspots

Categories

Product links

Optimized fantasy base map

SVG or high-res WebP

Step-by-step installation guide

Short Loom / video walkthrough

Desktop + mobile demo

❌ NOT ACCEPTED

AI-only solutions

External iframe-based maps

Heavy 3D engines ([login to view URL] / WebGL not required)

Non-mobile-optimized builds

✅ BUDGET

$200 – $400 USD (fixed price)

✅ TIMELINE

Delivery within 7–10 days

✅ TO APPLY, PLEASE INCLUDE

Shopify projects you already built

Experience with interactive images, maps, or SVG systems

Links to similar work (if available)

Your final fixed price & delivery time

Developers without real Shopify theme experience will not be considered." (client-provided description)