|
Description: |
I need a Shopify developer to rebuild our product variant picker for my eSIM website, which runs on the Impact theme.
We currently use a Custom Liquid block that works visually but is unreliable (breaks in sticky ATC, doesn’t always pick the correct variant, etc.). I want this rebuilt properly as a theme snippet with dedicated JS and CSS.
⸻
What’s Needed • Replace Shopify’s dropdown with a grid of selectable cards (3-column responsive layout) • Each card shows: • Data size (e.g. 10GB) • Duration (e.g. 30 Days) • Price pill • “Most popular” badge sits cleanly above the card (no overlap) • Subtle hover/selection animation • Selecting a card updates the correct variant, price, and URL (?variant=)
There are two product types: 1. Standard eSIMs (e.g. 10GB | 30 Days) 2. Unlimited eSIMs (e.g. 500MB/Day / 7) — same layout, just parsed differently. Could be open to feedback as to how to get this to display better
⸻
Technical Requirements • Build as a snippet (not Custom Liquid) • Use Impact’s native product form • Sync with both main and sticky “Add to Cart” forms • Keep the native functional (just hidden) • Clean, well-structured JS (no jQuery)
⸻
Deliverables • Liquid snippet • JS + CSS assets • Simple README with installation instructions |