Phoenix - Your AI AssistantShopify Developer – Custom Variant Picker
- Posted:
- Proposals: 27
- Remote
- #4441309
- Open for Proposals
Karachi 
Description
Experience Level: Expert
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
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
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Can you confirm the variant schema for your eSIM products — do they use a single option (e.g., “Plan”) or multiple options (e.g., “Data” and “Duration”), and can you share 2–3 live product URLs as examples?
-
I’m curious—referring to the card-based grid I proposed for the variant picker, for the Unlimited eSIM products, would you like the daily allowance (e.g., 500MB/Day) displayed exactly as it is, or would you be open to a more user-friendly format that’s easier to scan at a glance? This will help me ensure the grid is both visually clean and intuitive, so users immediately understand their options and the snippet works seamlessly with the sticky Add-to-Cart functionality