Build a Product Catalog
By the end of this you will have a product catalogue in Vivreal: photos, prices, descriptions, and options like size and colour, ready to put on your site.
First, decide which kind you need
This matters more than anything else here, and it is worth thirty seconds before you start.
| What you want | What to do |
|---|---|
| Show your products, with people ringing or emailing to buy | Follow this tutorial |
| Sell them, with a checkout and card payments | Connect Stripe or Square instead |
Connecting a payment provider brings your products across on its own and wires up the checkout. If you build the catalogue by hand and later want to sell, you will have done the work twice.
So: this tutorial is for a showcase. A menu, a lookbook, a price list, a portfolio of what you make.
Before you start
You need a Vivreal account and a group. Nothing else.
1. Create the content type
Tap Content in the navigation, then New Content.
In the dialog that opens, the first section is Details. Name it Products. The name is what you will see everywhere afterwards, so keep it plain.
2. Add your fields
The second section is Fields. Tap Add Field for each one.
Start with these six. You can always add more later.
| Field name | Type | Required |
|---|---|---|
| Name | Short Text | Yes |
| Description | Structured / Long Text | No |
| Price | Decimal Number | Yes |
| Photos | Gallery | No |
| Category | Custom Choices | No |
| In stock | True / False | No |
Options like size and colour are not in this list. They are set up separately, in step 3.
A few notes on the choices:
- Price is a Decimal Number, not a whole number, because 12.50 needs to survive. Whole Number is for counts.
- Photos is a Gallery, which holds several images in one field. Use Image if you only ever want one.
- Category is Custom Choices, where you type your own options once and then pick from them. Fill it with your real categories now, so you are not inventing them item by item later.
- In stock being a True / False switch lets you take something off the site without deleting it.
For the full list of what each type does, see Content fields.
3. Add options like size and colour
Skip this step if your products do not come in variations.
Variants are not a field type, so do not go looking for one in the Add Field list.
Save your fields first, then open your Products page and tap Variants at the top. On a phone it is Manage Variants in the menu.
That is where you set up your options, for example Small, Medium and Large, and choose which of your other fields change with the choice. It is how a large costs more than a small, and how the blue one can be out of stock while the red one is not.
Do not fake variants with separate products
It is tempting to make "T-shirt Small", "T-shirt Medium" and "T-shirt Large" as three products. Resist it. You end up with three of everything to keep in step, three lots of photos, and a site that looks like it sells nine shirts when it sells three.
Save when you are done.
4. Add your first product
Open your new Products type and tap New.
Fill the form in. It is the fields you just defined, in the order you defined them, which is why the order was worth a moment earlier.
Save it, then add two or three more so you can see how the list looks with something in it. A catalogue of one tells you nothing about whether your fields are right.
If you have a lot to add
There is an Import button next to New. If your products already exist in a spreadsheet, that is much faster than typing them in one at a time.
5. Put it on your site
Open Studio, add a section to a page, and point it at your Products type.
The section fills itself from the catalogue. Add a product later and it appears, with no need to touch the page again. That is the whole point of setting the type up properly first.
The preview shows examples before you connect it
Until you point the section at your products, Studio shows sample items so you can see the layout. Your live site shows nothing there instead. Point it at Products and both show your real ones.
What you have now
A catalogue that lives in one place, appears on your site, and can be updated from your phone.
Where to go next
- To start taking payments: connect Stripe or Square. Worth knowing that their products come in separately, so treat this catalogue as the showcase and theirs as the shop.
- To announce a new product: Quick Create posts it to your site and social channels together.
- To keep an eye on limits: how many items you can store depends on your plan. See Plans and limits.
If something is not working
- You cannot find the type you want. There is no Rich Text, Tags or Media type. Use Structured / Long Text, List of Items, and Image or Gallery.
- The New button does nothing. You may be at your plan's item limit. See Plan limits.
- Products do not appear on the site. Check the section in Studio is pointed at the right type, and that you saved.
- You want to change a field after adding products. You can, but changing a field that already holds data is the one edit worth doing carefully. Read Content fields first.