UI · 페이지

Fold & Fiber

코드 렌더 · 같은 결과

Linen bedding · pick colour and size, add to cart

Fictional washed-linen bedding: one set in 5 colours × 3 sizes

커머스
행동
명료
H7 Offer & Choice

Fold & Fiber는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다.

실제 페이지를 스크롤하며 녹화한 화면입니다(34초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844 에서 검수했습니다.

섹션 화면

Hero · chosen
What's inside
Material facts
Prices

섹션 순서

위에서 아래 순서입니다. 내비게이션과 푸터는 모든 페이지에 들어 있어 뺐습니다.

01
HeroH7 Offer & Choice
Colour + size + add-on pickers with a live price and Add to cart in real DOM; photo changes per colour.
H7 Offer & Choice: a visitor who already wants it chooses and adds to cart in the first view.
02
From box to bed상품·서비스
Scroll-scrubbed 17-frame sequence from the delivered box to the made bed.
Shows what arrives and how it ends up, in one motion.
03
What's inside상품·서비스
Annotated flat-lay, size tabs synced with the hero and an all-sizes table.
Removes sizing doubt — the most common reason to abandon a bedding cart.
04
Material facts후기·근거
Spec sheet, a wash test labelled as sample data and the return policy.
Proof from checkable facts instead of reviews.
05
Prices가격·요금
Sizes × set / sheet / bundle as selectable rows.
Every combination priced in one place; selecting a row updates the cart choice.
06
FAQ자주 묻는 질문
Shipping, returns, care, sizing and demo honesty.
Clears the last practical questions before checkout.
07
CTA행동 유도
"Your set" summary with "Add to cart · $price" and an in-page cart drawer.
One primary action, one label everywhere, with the current choice carried through.

조건별 변형

레시피는 만들기 전에 세 가지를 묻고, 답에 따라 아래 규칙으로 섹션을 바꿉니다.

이럴 때	이렇게 바꾼다
Real cart exists	Keep the drawer UI; replace store.add() with your cart API and the drawer note with a real Checkout button.
In-page cart only	Keep the honest note "Checkout isn't part of this demo".
No cart — orders by request	H7 still applies, but the button becomes "Request this set" and the drawer becomes a request form.
One option axis only / one option total	Drop the other picker; with one option total H7 is not allowed — switch to H4 Product Spotlight.
No test results	Remove the wash-test column (keep spec + returns); unmeasured numbers are labelled "Sample data".
Price varies by colour	Change the "One price per size" title and add a colour column.

스타일

Clarity — orderly 12-col grid, hairline rules, numbered rows, light limestone page, one pine-green accent

다른 페이지