Start
In the docs

The basics

Components

A component is something you make once and use in many places: a header, a product card, a note about returns. Each place gets a linked copy, and changing the original changes every copy.

Change the original
Free returns
Thirty days, no questions.
Made to last
Linen that softens with every wash.
Real people
Write to us, and a person replies within a day.
Three linked copies of one component. Each says its own words; the look comes from the original, so changing it changes all three.

How to make one

  1. Build it on the page first, out of boxes, text and images.
  2. Select the box that holds it all, and choose ⋯ › Make component.
  3. What you selected becomes the first linked copy, and the component appears under My components in the Library.

Using it again

  1. Open the Library on the left.
  2. Drag the component onto the page, or select a box and click + to put a copy inside it.

The Library also has VendBender's own components, ready to use: a header, a hero, a product card, a cart drawer and a footer.

Changing the original

Double-click any copy, or choose ⋯ › Edit the original. The canvas opens the component on its own. Change anything, and every copy follows. Press Esc to go back to the page.

Changing one copy

Select a copy. Its Design tab lets that copy differ from the original, without breaking the link:

This copy says
Its own words, photos and links, part by part. A dot marks what you changed.
Style of this copy
Its own colours, corners or spacing.
Reset this copy
In the ⋯ menu: back to exactly the original.
Detach into plain boxes
In the ⋯ menu: no longer a copy. It stops following the original.

Good to know

  • A product card is a component. A list of products repeats it once for each product, and each copy shows that product's photo, name and price.
  • Components can hold other components: a header can hold your cart drawer.
  • The Library shows how many places use each component, so you know what a change will reach.

Recipes that use it