Ecommerce website design in CloudCart: themes, widgets and editor

In short: ecommerce website design in CloudCart starts from a ready-made theme with a live preview. You switch themes in Design → Themes without losing products or orders, set 80 to 130 colors and about 88 fonts in Design → Colors and typography, and build the homepage from drag-and-drop blocks. Themes are included in every plan.

This guide is for merchants who want the store to look like their brand without an agency or code, whether you sell in Bulgaria, from Bulgaria or across the EU. Menu names are the ones you see in the CloudCart admin in English. If you are still weighing an agency against a platform, prices and timelines are compared in the guide to building a business website.

What a store theme is and what you can change

A theme (or template) is the ready-made look of the store: page layout, widgets, default colors and fonts. Every CloudCart store has exactly one active theme, and it decides how the homepage, categories, product pages, cart and blog look. Products, customers and orders live separately and do not depend on it.

On top of the theme there are four more layers, each with its own screen in the Design menu:

Layer	Where in the admin	What you change	Code?
Theme	Design → Themes	The whole look: layout, widgets, page blocks	No
Colors and fonts	Design → Colors and typography	Usually 80 to 130 colors, font, size and weight, product image shape	No
Widgets	Design → Widgets	Banners, sliders, product showcases, header and footer	No
Builder pages	Design → Homepage, Landing Pages, Thank You Page, Error 404	Page content, block by block, with drag and drop	No
Custom CSS/JS	Design → Custom CSS/JS	Any detail the theme does not offer as a setting	Yes

For a storefront that looks like no theme at all, the route is Nitrogen, CloudCart's headless technology, covered in When a theme is not enough. Building one with an AI agent is in the guide to vibe coding for an online store.

Who ready-made themes are for

A ready-made theme helps most when you want to sell from day one. The pricing page describes Baby Pack as a store you "launch in less than a day with a ready-made theme", so your time goes into products and photos.

• A new store. Pick a theme for your industry, upload the logo, change the colors.
• A store moving platforms. Products come from the old site (migration from WooCommerce, Shopify, OpenCart and other platforms), and the theme gives a new look without a design project.
• A seasonal refresh. For Black Friday or Christmas you change banners and the homepage, not the theme.
• A team. Access is granted screen by screen, so one person can edit only the menu and another only the widgets.

How to choose a theme for your online store

Choose by industry and by how your product looks on a phone. The color of the preview matters least, because colors and fonts change in minutes while layout and widgets come with the theme. The Design page shows 8 industry themes with a live preview (Flair, Fashionista, Beauty treats, Interiors, Hardware, Lifestyle, Motivation, Celebrations), and the admin catalog holds more, both included in the plan and paid.

1. Product page. Room for several photos, variants (size, color) and a long description.
2. Category page. Products per row, and filters that suit your catalog size.
3. Homepage. Which widgets it has: slider, banners, showcases, blog, reviews.
4. Menu. A mega menu, if you have many categories.
5. Phone. Open the preview on your own phone and walk from the homepage to the cart.

Each live preview opens in a new tab with sample products. You see your own products only after installing the theme.

How much an online store theme costs

Ready-made themes are included in every CloudCart plan, from Baby Pack at €14/month billed annually. A paid theme is its own subscription: the price is on its buy button, the purchase page shows it with VAT, and the theme installs itself after payment. For comparison, paid themes on the first page of the Shopify Theme Store cost $170 to $500 each, on top of the Shopify subscription. CloudCart's transaction fee on your sales is 0%.

Option	Price	Ready
Ready-made theme in CloudCart	In the plan: €14 to €249/month billed annually, €1/month for the first 3 months	The day you sign up
Paid theme in CloudCart	Separate subscription, price on the theme card	Right after payment
Paid theme in Shopify	$170 to $500, plus the subscription	After purchase and setup
Custom storefront (Nitrogen)	Depends on the project	After a design project

Important: if you pick a paid theme at sign-up and do not pay for it, the admin locks to themes, checkout and billing until you pay or switch to a theme included in the plan. Products and orders are kept.

How to change your store theme, step by step

The whole store moves to the new theme within a few seconds of confirming.

1. Open Design → Themes. The active theme shows in desktop and mobile view, the catalog below.
2. Check the live preview. Go through a product, a category and the cart.
3. Click Install and confirm. For a paid theme, the button leads to payment first.
4. Adjust three screens. Colors and typography, Widgets and Navigation, plus the new homepage.
5. Wait if you see the old look. Visitors may see cached pages for up to about 20 minutes. The admin has no cache button; an AI assistant connected with a PAT token clears it through the API.

Data	After the switch
Products, categories, customers, orders, blog posts	Unchanged
Colors, fonts, custom CSS/JS of the old theme	Saved for that theme and restored if you reinstall it
Menu, pages, widgets	Kept, but the new theme may place them elsewhere or have no slot for some
Homepage, Thank You Page, Error 404	The new theme sets its own; the old homepage stays in the list

Important: there is no undo. To go back, install the old theme again. Its colors return, but you set the homepage again yourself.

How to change colors and fonts

Design → Colors and typography is a full-screen editor with your live store on the right. Colors are grouped in sections (Main, Promo Bar, Header, Footer and more), and fonts come from about 88 Google Fonts with style, weight and size.

1. Start with the button color. It carries the action you want the customer to take.
2. Pick two fonts. One for headings, one for text. If you also sell to Bulgarian shoppers, check both support Cyrillic.
3. Set the image shape. Portrait, landscape, square or custom, if the theme allows it. Match how your products are shot.
4. Save. The preview is the live store, and changes appear only after saving.
5. Check three views. Phone (about 375 px), tablet (about 768 px) and desktop, below the preview.

Reset returns every color and font to the theme defaults at once; one color cannot be reset alone. A font outside Google Fonts goes in through Custom CSS/JS.

How to edit the homepage

Design → Homepage opens the page builder, where you arrange rows and columns of blocks with drag and drop. The same builder makes landing pages, the Thank You Page and Error 404.

1. Add blocks. Product, "Add to cart" button, bundle, heading, button, video, divider, blog posts, form, reviews, code.
2. Set and arrange them. Each block has its own fields; drag blocks up, down or side by side.
3. Publish. Autosaves are drafts until you publish.
4. Roll back if needed. History shows the last 50 of up to 500 saved versions.

Some blocks need their app: the form needs Subscribers, the store map needs Store Locations, reviews need Product Review. Landing pages have a limit per plan:

Plan (billed annually, excl. VAT)	Landing pages with the visual builder
Baby Pack, €14/month	5
Starter Pack, €33/month	10
CC Pro, €83/month	100
CC Master, €249/month	250

A landing page works best as the target of an ad or email: someone who clicks a Christmas ad sees only the Christmas products and one button, and the page's sales show up separately in reports. Running campaigns to it is covered in Meta ads for an online store and Google Ads for an online store.

Widgets: banners, sliders and product showcases

Widgets are the theme's ready parts: slider, banners, text, product showcases, recently viewed, related products, newsletter, map, promo bar, search, header and footer. In Design → Widgets you click a widget card and edit text, images, products and links in the side panel, or switch it off. The list comes from the active theme, so you cannot add new widget types. Product and category descriptions for the showcases can be written by Aura Studio, the AI assistant in the admin (AURA).

Store navigation: how to build the menu

Design → Navigation shows two trees side by side: the header menu and the footer menu. An item links to a product, category, brand, blog category, post, page, store section, Smart Collection or external address, or it can be a group without a link.

• The menu has at most 4 levels.
• Items are reordered by dragging; deleting an item deletes its sub-menus.
• The menu type (dropdown, vertical, mega menu) and the mobile menu type (side panel or dropdown) are set in the header widget.

Aim for 5 to 7 main categories named with the words customers search for. On the Bulgarian version of the store, name them in Bulgarian. How category names affect SEO is in the guide to SEO for an online store.

Logo, favicon and sharing image

Design → Logo holds the logo, the favicon (the icon in the browser tab) and the image shown when the store is shared on social media. Upload the logo on a transparent background and check it on light and dark backgrounds. The favicon is square and must read at 16 px, so use an initial or the symbol. Creating the logo itself is covered in the guide to ecommerce branding.

Custom CSS and JS: when you need it

Design → Custom CSS/JS adds code to the head of every store page: a custom font, a bigger button, a hidden element, an external service.

Important: the code goes in as pasted, without validation, and broken code breaks every page at once. Keep a copy of the working version. Code is stored per theme. For Meta Pixel, TikTok Pixel and Google Analytics, use the ready integrations instead.

How the store looks on a phone

A mobile version is included in every plan. It matters: about 63% of website visits in Bulgaria come from phones in the latest monthly data from StatCounter, and Google ranks sites by their mobile version (Google Search Central). Retail conversion is around 2% on mobile against 3.7% on desktop (Contentsquare), usually because of a banner that pushes products down, a small button or a slow image.

• Design → Themes shows the active theme in phone view.
• Design → Colors and typography switches the preview between phone, tablet and desktop.
• The header widget sets a separate menu style for phones.

The surest check: order one product on your own phone, start to payment. The full 12-point list is in the guide to the mobile version of an online store.

Design with an AI assistant: colors and pages in one sentence

Claude Code, ChatGPT Codex, Gemini CLI or Cursor, connected to the store with a PAT token, can change the theme's colors and fonts through the CloudCart API. The assistant changes only the colors you name, recompiles the styles like the Save button and clears the cache. Example: "Show me the theme's button colors and change them to dark green, but first show me what you will change." Since store changes have no undo, always ask for that preview first.

When a theme is not enough: Nitrogen and a custom storefront

Theme templates cannot be edited and you cannot upload your own theme, so a design of your own is built on Nitrogen: a headless storefront made to your design, while catalog, orders and payments stay in the same admin.

	Ready-made theme	Nitrogen
Launch	The day you sign up	After a design project
Who builds it	You, in the Design menu	Your developer, an AI assistant, or the CloudCart team
What changes	Colors, fonts, widgets, pages, CSS/JS	The whole storefront
Admin and orders	CloudCart	The same CloudCart

Both routes are on the Design page, and the path from sign-up to first order is in how to create an online store. Design questions: support@cloudcart.com.

How to tell whether the new design sells more

Compare three numbers before and after: conversion rate, phone conversion and average order value. In CloudCart, conversion is orders divided by sessions, and the Analytics funnel shows cart → checkout started → order for phone and desktop separately.

1. Record the baseline. The last 14 days from Analytics.
2. Switch on a quiet week. No campaign or sale, or you will not know what caused the change.
3. Wait 14 days and compare. If only phone conversion drops, look at the mobile menu, banner or cart button.
4. Let an AI agent count. With a Read Only PAT key, it compares orders, revenue and average order value for both periods from one sentence; sessions stay in Analytics or Google Analytics 4.

7 ecommerce website design best practices

1. One action color. "Add to cart" uses a color found nowhere else on the page.
2. Products near the top. One low slider, so phones see products without scrolling far.
3. One image shape. A tidy grid that does not jump.
4. Two fonts. Each extra font adds page weight.
5. The customer's words in the menu. "Men's running shoes", not "Run collection".
6. Banners that end with the campaign. Never promise an expired discount.
7. A phone order after each big change. You catch errors before customers do.

Mistakes to avoid

• Switching themes at peak season. The new homepage and hidden widgets need checking on a quiet day.
• Judging a theme by its preview photos. Check it with your photos and your number of products.
• Resetting to fix one color. Reset clears every color; note the default and type it in instead.
• Heavy banners. Multi-megabyte images slow the top of the page on phones.
• A forgotten mobile menu. It is set separately in the header widget.

Frequently asked questions

No store yet? Pick a theme and try it with your own products: Create a store for €1/month for the first 3 months.