Shopify Homepage Hero Redesign for Clearer Mobile ShoppingShopify Homepage Hero Redesign for Clearer Mobile Shopping
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
A self-initiated homepage hero redesign concept for Live Free Tallow, created to demonstrate how stronger visual hierarchy and clearer messaging can improve the mobile shopping experience.
The original hero had a compelling product, but the copy competed with the imagery, the product lacked visual prominence, and the next action wasn’t immediately clear.
For the redesign, I focused on:
• A sharper product-in-use lifestyle visual • A clear, benefit-led headline • Scannable product differentiators • Improved spacing and visual hierarchy • Social proof positioned near the CTA • A prominent, action-focused shopping button • Keeping the product and CTA visible above the fold
The result is a cleaner and more premium hero section that helps visitors quickly understand what the product is, why it is different, and where to go next.
I design and build conversion-focused Shopify landing pages, product pages and homepage sections for DTC brands.
Need help improving your store’s customer journey? Let’s work together.
Post image
VIMAL's avatar
Looks amazing
Olabode 's avatar
Thanks man
TRUEFRAME logo
social proof right next to the cta is the move
Olabode 's avatar
A very big Move. Thanks
Timothy's avatar
Fixing copy that fights the imagery is such an underrated redesign skill, Olabode. Letting the product photo do the emotional work while the words stay tight is exactly how a mobile hero should behave.
Olabode 's avatar
Exactly Timothy. Thanks for Engaging.
Maximiliano's avatar
Putting the proof next to the CTA is the right call on mobile. Did you check how much of the hero fits above the fold on a 390px-wide screen once the browser bar is counted? That's usually where the review stars get pushed out.
Olabode 's avatar
Good point, Maximiliano. I designed the concept at a 390px viewport in Figma, but I haven't tested it on a live page yet. You're right that accounting for the browser UI is important when evaluating what actually stays above the fold on mobile. It's definitely something I'd check during implementation.
Rafee 's avatar
The after version reads much clearer. Stars near the CTA was a good move.
Back to feed
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