Built with Framer
The product page, built for the phone.
ARVEN makes two backpacks for people who live between the city and the mountains. Trail 45L is for the week. Expedition 55L is for long trips and serious terrain. This is the store for the launch: four pages designed for the phone first and built in Framer, with products in a CMS mapped to Shopify fields.
The store on a laptop and a phone.
The Setup
Two packs, a new brand and a store that had to sell before any review existed. The store has four pages, home, collection, product and about, and the product page carries the sale.
The Tension
On a phone, a buyer gives a product page a few seconds. If the price, the choice of pack and the button are not on the first screen, many leave without scrolling.
The Decision
I designed the phone version first and fitted the desktop around it. On the product page, the pack selector, the price and Notify me sit above the fold, and the rest follows in the order people ask: what it is, what is on it, how it fits. Products live in a CMS mapped to Shopify fields, so the team edits them without code and the store can move to Shopify without a redesign.
Four pages designed for the phone first.
The Product Page
The product page reuses the marketplace images, so the pack looks the same on Amazon and in the store. A selector at the top switches between the two packs without leaving the page.
The product page on desktop and on the phone.
Home, collection and about pages on desktop.
What's in the box
Every number here is a finished file in the project folder.
Every deliverable, counted.
The Takeaway
On a phone, the first screen is the whole page for most people. Put the decision there.
Two packs on the stone, one brand.
0 likes · 0 views · Nov 11, 2026
A four-page store designed for the phone first and built in Framer, with a CMS mapped to Shopify, for a backpack brand with two packs.
