The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
This portfolio project focuses on designing attractive and user-friendly Shopify product pages that present products clearly and help customers make informed purchasing decisions. The design approach emphasizes product imagery, organized descriptions, clear pricing, visible calls to action, and easy-to-understand product options. I aim to create a consistent shopping experience that communicates product value and makes important information easy to find. My goal is to help online stores improve product presentation, maintain brand consistency, and provide a smooth browsing experience across different devices.
Keeping ‘New Collection’ and the navigation as live text would make the layout easier to adapt to mobile than a flattened banner. Are you handing this over as a Shopify theme, or a visual concept?
Thanks for the thoughtful observation! I agree that keeping “New Collection” and the navigation as live text makes the layout more flexible and mobile-friendly. This is a visual concept demonstrating the product-page design direction rather than a fully implemented Shopify...
For a visual concept, keeping the header and navigation as editable Shopify sections will make the handoff easier than rebuilding them from a flattened banner.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
A good product page doesn’t just show the product — it makes the buying decision easier.
I recently worked on this Collagen Peptides eCommerce PDP concept, focusing on the areas that can directly influence conversion:
→ Clear product benefits above the fold
→ 1, 2 & 3-pack options to support higher AOV
→ Subscribe & Save for retention
→ Strong social proof
→ Easy-to-scan product information
→ Shipping, guarantee & secure checkout signals
→ Clear Add to Cart experience
→ Responsive UX across desktop, tablet & mobile
Every section has a job: reduce friction, answer objections, build trust, and move the customer closer to purchase.
This is the kind of thinking I bring to every eCommerce product page I design.
UI/UX + CRO + eCommerce Strategy. 🚀
#eCommerce #CRO #Shopify #ProductPage #UIUX #WebDesign
The pack-size tiers sitting right next to Subscribe & Save is the right order. Anyone already comparing 1, 2 or 3-pack is primed to pick a cadence too, so showing both choices together nudges toward the higher-LTV option without it feeling like an upsell.
Amazing work
CARTELLE: The Society for Speculative Cartography.
"High-Performance Creative Web Exploration"
Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion.
I built this project to test Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of procedural globe under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of procedural globe with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Attractive visual design