Built a user-friendly Bundle Section for Shopify! This section clearly showcases what’s included ...

Built a user-friendly Bundle Section for Shopify! This section clearly showcases what’s included ...Built a user-friendly Bundle Section for Shopify! This section clearly showcases what’s included ...

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

Aman Batra

• Jun 24

Built a user-friendly Bundle Section for Shopify!

This section clearly showcases what’s included in each bundle, including products, equipment, pricing, and other important details. Users can easily click the CTA buttons to navigate directly to the bundle page or individual product pages for more information.

✅ Desktop: Designed with a clean 3-card layout for easy comparison and browsing. ✅ Mobile: Converted into a smooth slider to reduce excessive scrolling and improve the user experience. ✅ Conversion-Focused: Helps customers quickly understand bundle value and navigate effortlessly. ✅ Responsive & User-Friendly: Optimized for seamless browsing across all devices.

#Shopify #ShopifyDeveloper #ShopifyDesign #ShopifyStore #Ecommerce #ConversionRateOptimization #CRO #ShopifyPlus #WebDesign #UIDesign #UXDesign #Replo #LandingPageDesign #DTCBrand #EcommerceDesign

Shopify Design Web Design Web Development JavaScript Liquid Shopify

Asmar Hasan

• Jun 25

Really like the 3-card to mobile slider move, that cuts the scroll fatigue that kills bundle conversions. On these I always reserve image height so the cards do not shift while loading, since CLS on a bundle view quietly hurts add-to-cart. Did you build this in Liquid sections or Replo? How did PageSpeed hold up?

Aman Batra

• Jun 26

Thanks! Glad you liked it.

This one was built using Shopify Liquid sections. I reserved the image space to prevent layout shifts during loading and keep CLS under control. I also optimized the code to minimize its impact on PageSpeed, so the overall performance remains solid.

Shahriar Jubayer Eshat

• Jun 25

Cool

Aman Batra

• Jun 26

Thankyou

Natalia | RabenRifaie

pro

• Sep 14

Engaging website for a New York–based architecture and construction studio, balancing bold typography, immersive imagery and a minimal editorial layout.

Check it out

Adobe After Effects Figma Framer

Alaa

• Sep 14

The dark framing on the edges is such a clever visual trick! It actually fools the eye and makes the whole presentation look like a 3D physical object. Brilliant depth!

Yurii Tarasov

• Sep 14

Custom liquid interaction built in Framer. Turning a static hero into a responsive visual surface through cursor-driven distortion.

Completed work

Framer React Web Design Interactive Design Motion Design WebGL

Mykola Malyhin

pro

• Sep 18

How do you adapt the cursor-driven effect for touch screens?

Serge Herasymchuk

max

• Sep 14

Where should the photo live - behind the words or beside them?

Same pilates studio, same headline.

01 - Photo as the background. Full-bleed atmosphere: the room wraps around the words. Immersive and cinematic, but the text only survives thanks to a darkening overlay laid over the image.

02 - Photo beside the text. A clean split: words on calm ground, the room in its own column. Everything readable at a glance, the trade is a little less drama.

One sells the feeling. The other sells the clarity. Which hero would make you book the class?