Uyum Yatak: from a Figma design to a Shopify store

• The design was ready in Figma; the home page, catalogue and product page had to be reproduced exactly on Shopify.
• In mattress retail a product cannot be described with a single price: every size has its own list price and campaign price.
• Product groups are interlinked; a customer buying a mattress often buys the base and headboard at the same time.
• Campaign periods change frequently, and the discount and set structure has to appear correctly in the cart too.

• Move the layout, spacing and typography of the Figma file into Shopify templates without loss.
• Make size selection comparable on one screen, with its price.
• Show set-completing products inside the product page.
• Keep the cart and cart drawer consistent with the campaign structure.

• Home page, catalogue and product page templates were built from scratch to the design, with sections editable from the admin.
• Typography, colour and spacing values were taken from the design file as variables and managed from a single source across the theme.
• Home page: a sliding hero, collection links, featured product blocks, a warranty and delivery strip, and newsletter signup.
• Product cards on the catalogue page were built to show a product's key features alongside the price of its starting size.

• Mattress size selection was taken out of the usual dropdown: ten sizes are shown as a grid, each with its own list and campaign price.
• Sizes are grouped into single and double, so the customer looks straight at the right group for their needs.
• As the selection changes, price, discount rate and add-to-cart information update without a page reload.
• Firmness preference was visualised on a 1–7 scale, so the product's comfort position reads at a glance.
• Instalment, warranty, free delivery and trial period information was brought next to the buy button.

• A “Group Products” section was added to set product pages: the headboard and base that complete the mattress are listed on the same screen.
• Each complementary product arrives with its own size and colour options and a visible campaign price.
• The customer can see the set without leaving the page; mattress, base and headboard are considered in the same flow.

• Add to cart works without a page reload; adding a product opens the cart drawer.
• The drawer shows the chosen size, the campaign price and the discount difference together.
• The cart and cart drawer were tied to a shared structure so they display prices by the same rule during campaigns.
• Quantity changes and item removal update without reloading the cart.

Screens that lived in a design file became a manageable Shopify theme. On the product page the customer compares ten sizes with their prices, sees the firmness preference at a glance, and considers the base and headboard that complete the set from the same page; the cart and cart drawer show campaign prices by the same rule.

Mobile interface