How to make a cosmetics website that sells your range

TL;DR: How to make a cosmetics website

This guide covers an independent beauty brand putting its range online: the domain, a starting template, and the pages a shopper opens first, which are Shop, Shades and Ingredients. Yola website builder gives you ready-made Galleries and Pricing blocks, so a swatch grid and a row of discovery sets are sections you fill in rather than pages you design. It also covers how to photograph swatches on more than one skin tone, and how to write an INCI list, an allergen note and a period-after-opening figure so nobody has to message you to ask.

The second half is about the orders and the inquiries. Yola has an online store for the products themselves, and a separate customizable form handles the wholesale and stockist requests, the shade-match questions and the press inquiries. After that come the certifications you actually hold, a launch and restock page you edit by hand, and local search split between "[brand] cosmetics" and "buy [product type] online". Work through the ten steps and a shopper who found you on social can pick a shade and order without waiting for a reply.

What to include

Top features of a cosmetics website

How to make a cosmetics
website in 10 steps

Your domain goes on the label, on the outer carton, on the insert in the parcel and on the profile people tap through from. Use the brand name exactly as it is printed on the tube, and take the .com if it is free, because that is still what somebody types when they half remember a name off a friend's makeup bag. If you also sell under a shortened version of the name, register that as well and point it at the same site.

Leave out hyphens and numbers. A name repeated out loud in a shop or in a voice note loses both of them, and the person ends up somewhere else entirely. Check the domain against the handle you post from, since a stockist who reads your handle on a sample box should land on the right site without guessing at it.

Yola website builder lets you search for a domain and register it in the same flow you build the site in, and annual plans include a free domain for the first year. Whatever you register, use the same wording on your Google Business Profile and on your wholesale paperwork, so the name on an invoice matches the name on the site a buyer is looking at.

None of this needs code. With Yola you edit the text, swap the photos and move sections around yourself, which matters more for a beauty brand than for most businesses, because adding a shade or flagging one as sold out is something you will do between production runs rather than once a year.

Answer a few questions about the brand and Yola's AI Website Builder gives you a first draft to work from. The full AI tools are on the paid plans and the free plan has basic AI, so treat what comes back as a starting point and check every ingredient line and every claim against your own product documentation before it goes live. Hosting, an automatic SSL certificate and automatic backups come with the site, so there is nothing to set up separately. Starting from a template that already carries a product grid, a gallery and a contact form saves you the whole layout job.

Start from a template

Cosmetics website templates

Six pages do almost all of the selling. Keep the set small to begin with, because every extra page is one more place a discontinued shade or an old ingredient list can sit quietly being wrong.

The split worth getting right is between Shop and Shades. Shop is the transaction: what a product is, what it costs, what size it comes in and how it ships. Shades is the reference page somebody sends to a friend, where the whole range sits in one view with swatches, undertones and the closest neighbours to each color. A shopper who arrived from a video about one lipstick usually wants the second page before the first.

Ingredients earns its own page for the same reason. Every product page carries its own INCI list, and the Ingredients page explains the things a list cannot: what you leave out and why, where the actives come from, which products carry a known fragrance allergen, and how to patch test. That page answers the message you would otherwise reply to by hand every week.

Your stockists sit on the Contact page at first, or on a seventh page once there are enough of them to be worth scrolling. Build these six, then add the rest once the essentials are live:

Name each range the way you say it on the label, not the way a category page on a retailer's site says it. Somebody hunting a cream blush will not read "color edit" as one, and a buyer skimming for skincare will not work out that your "rituals" are serums. Ranges, sets, refills and wholesale each want a line of their own with a figure or a starting figure beside it.

Yola's ready-made Services and Pricing blocks lay this out, with a name, a short description and a price sitting together, editable the morning a supplier cost moves. Yola also has an online store, which is what takes the actual order for a lipstick or a discovery set. Keep that separate in your head from the contact form in the next step: the store sells products, and the form handles the questions and the trade requests that need a person to answer.

Two things are worth spelling out here because they cause most of the messages. Say what a sample or discovery set contains and whether its cost comes off a full-size order, since that is usually the deciding factor. And where refills or a repeat order are part of how you sell, say plainly how somebody reorders and how often people tend to need one, rather than implying anything is charged automatically. Where a range carries real search demand of its own, and a hero product often does, give it a page rather than a row in a list.

Photography is the product page for a beauty brand. A shopper is deciding on color, finish and how thick a texture looks, from a screen about the size of a postcard, and every doubt you leave in that image comes back to you as a message or a return.

Shoot four things for each product. The product itself, straight on against a plain background in daylight, with the packaging clean and the label readable. A swatch, and this is the one to get right: the same shade drawn on more than one skin tone, in the same light, in the same size stripe, so the grid is genuinely comparable rather than flattering. A texture shot, a smear or a drop close enough to show whether something is sheer or opaque and how thickly it sits. And a wear shot on a real face, ideally more than one, because a lipstick reads differently on lips than it does on an arm.

Keep the light and the background identical across the whole range, and resist retouching the color. A swatch edited to look prettier than the product is the single most expensive photo on a cosmetics site, since it sells once and then comes back. If you shoot a wear test in the morning and again at the end of the day, those are simply two photos in the gallery, captioned with the hours between them.

Yola's ready-made Galleries block holds the grid, and on a paid plan you can build a custom gallery with the Custom code block if you want the swatches laid out your own way. Paid plans also include 10M premium stock images and 1M premium icons, which are handy for a seasonal banner and no use at all for the products themselves. Name every file before you upload it, so "cream-blush-shade-04-swatch.jpg" replaces "IMG_3312.jpg", and put the same words in the alt text. That takes a minute per shoot and it is one of the few things that puts a small brand into image search.

An order goes through the store. The form is for everything that needs you to write back, and for a beauty brand that is mostly three conversations: a shop or a distributor asking about wholesale, a shopper stuck between two shades, and a journalist or a creator asking about a collaboration or a sample.

One form with a dropdown for the subject handles all three, and the fields change with it. A wholesale request wants a business name, a location, a website or a shop address, and which ranges they are asking about. A shade-match question wants a photo and what they currently wear, since that comparison gets you closer than any description of undertone. A press request wants a publication or a handle and a deadline. Yola's contact form is customizable rather than fixed, so you decide what each one asks for, and the Forms block help article covers the mechanics.

Say on the form what a submission is. It is an inquiry rather than an order, and a wholesale inquiry is not an account, so the wording should promise a reply rather than a shipment. Yola sends an automatic confirmation, which is worth setting properly: tell people how long you take to answer and, for wholesale, point them at your minimum order and lead time so the ones who cannot meet it drop out before you spend an hour on a quote.

Then reply quickly, especially to the trade. A buyer writing to you is usually writing to four brands the same afternoon and building a range plan that week. A shade question is worth the same urgency for a different reason, because the person asking it has their card out already.

Cosmetics is a category where anybody can print a nice word on a box, so the brands that do the work should show the paperwork. Put it on the home page and on the product pages, not buried in an About section, and word every line so a reader can go and verify it rather than take it on trust.

Show only what you genuinely hold. A named certifying body and the year it was granted is worth more than a hundred words about values, and an unbadged sentence such as "we never test on animals" is still honest if you say who audits it or admit that nobody does. Where a claim is one you cannot point somebody at, leave it off. The badges below are offers, not a checklist: fill in the ones that are true for your brand and delete the rest.

A beauty brand runs on dates as much as on products. New shade drops, the restock of whatever sold out in a day, a sample sale, a pop-up counter for a weekend, a market stall, the evening a stockist hosts you in store. One page carries all of it, and a shopper who has to message you to ask when a shade is back is somebody you nearly kept.

Each entry needs the date, the time, where it is, what it costs if anything, and what somebody does next, which is either the store or the inquiry form from the last step. Yola has no calendar block and nothing here is ticketed, so this is an ordinary page you edit by hand. That takes about a minute: open the page, change a date, publish. Restock dates are the ones to keep honest, because a date that slips and is left uncorrected does more damage than no date at all.

Leave the past entries up instead of deleting them. A list of pop-ups and sample sales that actually happened tells a new stockist more about the brand than any paragraph you could write, and it gives a shopper a reason to check the page again in a month.

An online-first brand has a split search job, and it helps to name both halves. One is your own brand name, which almost everybody types after seeing you somewhere else, and which you should own outright. The other is the product-type search from people who have never heard of you, and that one is genuinely competitive.

Yola's SEO Optimized Website capability covers the technical side of the pages. The wording, the profile and the stockist addresses are your work, and none of it takes long once the pages exist.

Before you tell anybody the site is live, go through it on a phone the way a customer would. Buy something small from your own store and check the whole path, including shipping cost and the confirmation email. Send yourself a wholesale inquiry and a shade question, and read the automatic confirmation that comes back to see whether it says what you want it to say. Open the shades grid in daylight and again indoors, since a swatch that looks right on your desk can look grey on somebody's commute.

Yola sites are mobile optimized and responsive, so the layout adapts on its own between phone and laptop, and every site gets an automatic SSL certificate and automatic backups. Check page speed on the pages doing the work, which for a beauty brand are the shades grid and the product pages, because those are the image-heavy ones.

After launch the upkeep is mostly accuracy. A supplier changes and the INCI list changes with them. A shade sells out, a batch code rolls over, a certification comes up for renewal, a stockist closes. Give the ingredient lists and the shade grid a review date and a named owner, and make it a rule that a reformulation reaches the website before the new stock reaches the shelf. A site that stays correct holds its search ranking better than one left untouched for a year, and for this category it also keeps you out of an argument.

Common cosmetics website mistakes to avoid

The same handful of mistakes turn up on beauty sites, and each one either loses an order or sends the product straight back to you.

How much does a cosmetics website cost?

On Yola the site starts free, which is enough to get a home page and a contact page up while you shoot the range properly. A paid plan is $9.95/mo when you want your own domain, the pages a full range needs and the complete AI tools, and annual plans include a free domain for the first year. Hosting, the SSL certificate and backups sit inside that figure, so it is the whole software cost of the site.

Paying somebody to build it instead costs considerably more. A freelancer or a small studio building a comparable brand site often runs from a few hundred to a couple of thousand dollars, and the quote usually grows once product photography and a launch refresh are added to it. Ask what happens after launch before you sign anything, because that is where the two routes really separate.

For a beauty brand the build is the cheap part and accuracy is the expensive one. Shades sell out, a supplier substitution changes an INCI list, a certification renews, a hero product gets reformulated. If every one of those is an email to somebody else and a two-day wait, you will start skipping the small corrections, and an ingredient list that is quietly out of date is a problem no design budget fixes. Building it yourself means the shade grid changes while you are labeling the batch.