Design it once, place it everywhere
Select a frame, press Cmd Alt K and it becomes a component, shown in purple. Give it properties and variants, drop it on any page, and every placement follows the main one when you publish.
Handwoven dhaka shawl · Rs 4,850
Order nowProperty · Price, text
Property · Badge, on/off
In short
A component is a frame you turn into a reusable part with Create component (Cmd Alt K). It can have properties such as text, image, link, colour, on/off and a choice, plus variants and hover and pressed states; every linked placement updates when the main component is published.
The problem it solves
Copying the same product card or button onto ten pages means fixing it ten times, and the copies drift apart the first time someone is in a hurry.
How it works
4 steps, start to finish
-
1
Make the component
Select a frame and choose Create component, or press Cmd Alt K. It turns purple in Layers.
-
2
Expose properties
Choose which texts, images, links, colours, toggles and choices each placement may change.
-
3
Add variants
Double click the component to open its canvas, then Add variant. Each variant overrides only what differs from Primary.
-
4
Place it and publish
Insert it from the Components tab. Edit the main one later and every placement follows on publish.
In detail
What components & variants does for you
-
Purple means component
Components and their variants are always shown in purple, so you know when you are editing a shared part.
-
Properties
Text, image, link, colour, boolean and choice properties, set per placement.
-
Variants
Named variants layered on Primary, with Reset to Primary on any changed row.
-
Hover and pressed
Each variant can have its own hover and pressed look, with duration, easing or spring.
-
Linked placements
Placements stay linked to the main component; Detach turns one back into an ordinary frame.
-
Safe to delete
A component in use is not deleted by accident: you are told where it is placed first.
-
A saved section is inserted as a copy. A component is inserted linked, so changing the main one changes every placement.
-
Yes. Pick a variant for that placement and fill its properties, such as the price text or the badge toggle.
-
The builder refuses and lists the pages that place it, unless you choose to detach every placement first.
-
Yes. Detach turns that placement into an ordinary frame that looks exactly as it did.
Components & variants · Free to start
Try components & variants on your own business
Set up in a couple of minutes. Your catalogue, orders and books stay yours to export.
- Live in 2 minutes
- Free to start
- No credit card
