Дизайн на онлайн магазин в CloudCart: теми, модули и редактор

Накратко: дизайнът на онлайн магазин в CloudCart започва от готовите теми (шаблони за сайт) с живо демо. Темата се сменя с един клик в Дизайн → Избери дизайн, без да се губят продукти и поръчки. В Дизайн → Цветове и шрифтове настройвате 80–130 цвята и около 88 шрифта, а началната страница подреждате с блокове. Темите са включени във всеки план.

Това ръководство е за търговеца, който иска магазинът да изглежда като неговата марка, без агенция и без код. Ще намерите кои са петте нива на дизайна, как се сменя темата стъпка по стъпка и какво се пази при смяната, как се редактират цветовете, началната страница, менюто и логото, как да проверите магазина на телефон и кога темата вече не стига. Фактите за CloudCart, българската платформа за онлайн магазини, са проверени на 05.11.2026 в документацията на платформата и на страниците Дизайн и Цени.

Какво е тема на онлайн магазин и какво можете да промените

Темата (шаблон за сайт, template) е готовият външен вид на онлайн магазина: подредбата на страниците, модулите, цветовете и шрифтовете по подразбиране. В CloudCart всеки магазин има точно една активна тема и тя определя как изглеждат началната страница, категориите, продуктът, количката и блогът. Темата управлява само вида. Продуктите, клиентите и поръчките са отделно и не зависят от нея.

Над темата има още четири нива, с които я правите своя. Всяко ниво има свой екран в менюто Дизайн:

Ниво	Къде е в админа	Какво променяте	Нужен ли е код
Тема	Дизайн → Избери дизайн	Целия вид на магазина: подредба, модули, блокове за страниците	Не
Цветове и шрифтове	Дизайн → Цветове и шрифтове	Обикновено 80–130 цвята, шрифт, размер и дебелина на текста, формата на продуктовите снимки	Не
Модули	Дизайн → Модули	Банери, слайдери, витрини с продукти, текстове, хедър и футър	Не
Страници с конструктор	Дизайн → Начална, Целеви страници, Успешна поръчка, Грешка 404	Съдържанието на страницата, блок по блок, с плъзгане	Не
Собствен CSS/JS	Дизайн → Добавяне на CSS/JS	Всеки детайл, който темата не дава като настройка	Да

Ако искате витрина, която не прилича на нито една тема, пътят е Nitrogen, headless технологията на CloudCart. За нея пишем по-долу в раздела Когато темата не стига.

За кого са готовите теми и кога помагат

Готовата тема помага най-много на нов магазин, който иска да продава от първия ден. Планът Baby Pack на страницата Цени е описан като магазин, с който „тръгвате за по-малко от ден с готова тема“. Времето отива за продуктите и снимките, а витрината е готова.

• Нов магазин. Избирате тема по бранша, качвате лого и сменяте цветовете. Магазинът изглежда завършен още преди първата поръчка.
• Магазин, който мигрира. Продуктите идват от стария сайт (миграция от WooCommerce, Shopify, OpenCart и други платформи), а темата дава нов вид без отделен проект за дизайн.
• Сезонна смяна. За Черния петък или Коледа сменяте банерите и началната страница, без да пипате темата.
• Магазин с екип. Достъпът се дава по екрани: един служител може да има право само на менюто или само на модулите.

Как да изберете тема за онлайн магазина

Изберете темата по бранша и по това как изглежда продуктът ви на телефон. Цветът на демото е най-малкият критерий: цветовете и шрифтовете се сменят за минути, а подредбата и модулите идват с темата. Темите в CloudCart са по браншове: на страницата Дизайн са показани 8 с живо демо (Flair, Fashionista, Beauty treats, Interiors, Hardware, Lifestyle, Motivation, Celebrations), а каталогът в админа има още теми, включени в плана и платени.

Преди да изберете, проверете в демото на темата:

1. Продуктовата страница. Има ли място за няколко снимки, варианти (размер, цвят) и дълго описание, ако го ползвате.
2. Категорията. Колко продукта се виждат на ред и дали филтрите са удобни при вашия брой продукти.
3. Началната страница. Кои модули има: слайдер, банери, витрини с продукти, блог, отзиви.
4. Менюто. Дали има мега меню, ако имате много категории.
5. Телефона. Отворете демото на телефона си и минете пътя от началната страница до количката.

В каталога темите са в два раздела. Темите в първия се инсталират веднага. Платената тема се купува отделно, като абонамент, и после се инсталира като всяка друга. Демото на всяка тема се отваря в нов раздел на браузъра, с демо продукти. Магазина си със собствените продукти виждате едва след инсталирането.

Колко струва тема за онлайн магазин

Готовите теми в CloudCart са включени във всеки план, от Baby Pack за €14 на месец при годишно плащане, а платената тема се плаща отделно, като собствен абонамент. Цената на платената тема е на бутона за покупка в каталога, страницата за покупка я показва с ДДС, а след плащането темата се инсталира сама. За сравнение, платените теми в Shopify Theme Store са на цени от $170 до $500 (извадка от първата страница на каталога на 05.11.2026), отделно от абонамента на Shopify. Към цената на плана в CloudCart не се добавя процент от оборота: комисионната върху продажбите е 0%.

Вариант	Цена	Кога е готов	Подходящ за
Готова тема в CloudCart	Включена в плана: от €14 до €249 на месец при годишно плащане, първите 3 месеца по €1	В деня на регистрацията	Нов магазин и магазин, който иска да продава веднага
Платена тема в CloudCart	Отделен абонамент, цената е на картата на темата	Веднага след плащането	Бранш, за който искате по-специфична витрина
Платена тема в Shopify	$170–$500 на 05.11.2026, плюс абонамента	След покупката и настройката	Магазин, който вече е в Shopify
Витрина по проект (Nitrogen)	Според проекта	След проект за дизайн	Марка, която иска витрина, различна от всяка тема

Важно: ако изберете платена тема при регистрацията и не я платите, админът се заключва. Отварят се само темите, плащането и сметките, докато не платите темата или не я смените с тема, включена в плана. Продуктите и поръчките ви не се губят, но са недостъпни дотогава.

Как сменям темата: стъпка по стъпка

Темата се сменя от Дизайн → Избери дизайн с бутона за инсталиране и потвърждение. Целият магазин минава на новата тема за няколко секунди, колкото е нужно за новите стилове и преводи.

1. Отворете Дизайн → Избери дизайн. Горе виждате активната тема в изглед за компютър и за телефон, а отдолу е каталогът.
2. Отворете демото. Демото на всяка тема се отваря в нов раздел на браузъра. Минете продукт, категория и количка.
3. Натиснете инсталиране на избраната тема. При платена тема бутонът води първо към плащането.
4. Потвърдете. Системата пита дали сте сигурни, че сменяте текущата тема. След потвърждението се показва съобщение, че темата е сменена.
5. Проверете началната страница. Новата тема слага своя начална страница (виж по-долу какво се пази).
6. Минете през цветовете, модулите и менюто. Това са трите екрана, които настройвате след всяка смяна.
7. Изчакайте, ако виждате стария вид. Посетителите може да виждат кешираните страници до около 20 минути. В админа няма бутон за изчистване на кеша; AI асистент, свързан с PAT токен, го изчиства през API веднага.

Какво се пази и какво проверявате след смяна на темата:

Данни	След смяната
Продукти, категории, клиенти, поръчки, статии в блога	Остават без промяна
Цветове, шрифтове и собствен CSS/JS на старата тема	Пазят се за старата тема и се връщат, ако я инсталирате отново
Меню, страници и модули	Записите остават, но новата тема може да ги показва другаде или да няма място за някои от тях
Модули, които новата тема няма	Не се показват, докато не добавите подобен модул в новата тема
Началната страница, Успешна поръчка, Грешка 404	Новата тема слага своите страници; старата начална страница остава в списъка, но вече не е начална

Важно: смяната на тема няма бутон „отмени“. За да се върнете, инсталирате старата тема отново. Цветовете и шрифтовете ѝ се връщат, но началната страница трябва да зададете наново като начална.

Как се сменят цветовете и шрифтовете

Цветовете и шрифтовете се сменят в Дизайн → Цветове и шрифтове, на цял екран, с живия магазин отдясно. Темата обикновено дава между 80 и 130 цвята, подредени по групи (основни, промо лента, хедър, футър и други), и около 88 шрифта от Google Fonts с избор на стил, дебелина и размер.

1. Отворете Дизайн → Цветове и шрифтове. Отляво са настройките, отдясно е магазинът ви.
2. Сменете основните цветове. Започнете от цвета на бутоните: той носи действието, към което водите клиента.
3. Изберете шрифт. Един шрифт за заглавията и един за текста стигат.
4. Задайте формата на снимките. Ако темата го позволява, изберете портрет, пейзаж, квадрат или собствено съотношение. Изберете формата, в която са снимани продуктите ви.
5. Запазете. Промените се виждат в магазина едва след запазване; прегледът отдясно е живият магазин, не чернова.
6. Проверете в трите изгледа. Под прегледа превключвате между телефон (около 375 px), таблет (около 768 px) и компютър.

Настройките се пазят за всяка тема поотделно. Бутонът за нулиране връща всички цветове и шрифтове към стандартните на темата наведнъж; един отделен цвят не се нулира. Собствен шрифт, който го няма в Google Fonts, се добавя през Добавяне на CSS/JS.

Как редактирам началната страница

Началната страница се редактира в Дизайн → Начална, която отваря конструктора на страници: подреждате редове и колони с блокове, с плъзгане. Същият конструктор прави и целевите страници, страницата Успешна поръчка и страницата Грешка 404.

1. Отворете Дизайн → Начална. Конструкторът се отваря на цял екран.
2. Добавете блок. Блоковете са например продукт, бутон „Добави в количката“, пакет продукти, заглавие, бутон, видео, разделител, списък със статии от блога, форма, отзиви и код.
3. Настройте блока. Всеки блок има свои полета. Два еднакви блока на една страница са независими.
4. Подредете блоковете. Влачите ги нагоре и надолу или ги слагате един до друг в ред.
5. Публикувайте. Автоматичните записи са чернови. Магазинът показва страницата след публикуване.
6. Върнете стара версия при нужда. Историята показва последните 50 от до 500 пазени версии на страницата; отваряте версия и я публикувате.

Някои блокове се показват само с приложението си: формата иска приложението за абонати (Subscribers), картата с магазините иска приложението Store Locations, а блоковете за отзиви искат приложението Product Review. Целевите страници с конструктора имат лимит по план:

План (цена при годишно плащане, без ДДС)	Целеви страници с визуален конструктор
Baby Pack, €14 на месец	5
Starter Pack, €33 на месец	10
CC Pro, €83 на месец	100
CC Master, €249 на месец	250

Цените и лимитите са от страницата Цени към ноември 2026. Същото меню Дизайн има и готови видове страници с конструктора: Често задавани въпроси и външна целева страница.

Целевата страница е най-полезна като адрес за реклама и имейл кампания: клиентът, който кликне на обява за Коледа, вижда страница само с коледните продукти и един бутон, вместо цялата начална страница. Една страница на кампания прави и отчета по-ясен, защото продажбите от нея се виждат отделно. Как се пускат кампаниите към такава страница, е в статиите реклама в Meta за онлайн магазин, Google Ads за онлайн магазин и имейл маркетинг за онлайн магазин.

Модулите: банери, слайдер и витрини с продукти

Модулите са готовите части на темата: слайдер, банери, текстове, витрини с продукти, последно разгледани, свързани продукти, бюлетин, контакти, карта, промо лента, търсене, хедър и футър. Те се настройват в Дизайн → Модули: отваряте раздела, натискате картата на модула и в панела отстрани сменяте текст, снимки, продукти и връзки. Всеки модул има и ключ за изключване.

Списъкът с модули идва от активната тема. Нов модул не се добавя от този екран, а изключеният модул просто не се вижда в магазина. Видео слайдерът е модул, който иска отделна функция в плана. Описанията на продуктите и категориите, които витрините показват, може да пише Aura Studio, AI служителят в админа (AURA).

Меню на онлайн магазина: как се подрежда навигацията

Менюто се подрежда в Дизайн → Навигация, където има две дървета едно до друго: главното меню в хедъра и менюто във футъра. Всеки елемент води към продукт, категория, марка, категория на блога, статия, страница, раздел на магазина, Smart Collection или външен адрес. Елементът може да е и група без връзка, форма за бюлетин или собствен код.

• Менюто има най-много 4 нива. Формата и влаченето не позволяват пето ниво.
• Елементите се пренареждат с влачене, а с изтриване на елемент се трият и подменютата му.
• Видът на менюто (падащо, вертикално или мега меню) и видът на мобилното меню (страничен панел или падащо) се избират в модула на хедъра, в Дизайн → Модули.

Добро меню на онлайн магазин има 5–7 главни категории, наречени с думите, които клиентите търсят в Google. Как името на категорията влияе на SEO, е в статията SEO оптимизация на онлайн магазин.

Лого, favicon и картинка за споделяне

Логото се качва от Дизайн → Лого, където в един панел са логото, favicon (малката иконка в раздела на браузъра) и картинката, която се показва при споделяне на магазина в социалните мрежи. Качете логото на прозрачен фон и проверете, че се чете и на светъл, и на тъмен фон. Favicon е квадратен и трябва да се чете в 16 px: инициал или символ от логото, без надпис.

Собствен CSS и JS: кога ви трябва

Собственият CSS и JS се добавя в Дизайн → Добавяне на CSS/JS и влиза в началото (head) на всяка страница на магазина. Ползвате го за детайла, който темата не дава като настройка: собствен шрифт, по-голям бутон, скрит елемент, код на външна услуга.

Важно: кодът се слага такъв, какъвто го поставите, без проверка и без преглед. Грешен код чупи всички страници веднага. Пазете копие на работещата версия, преди да запазите нова. Кодът се пази за всяка тема поотделно. За Meta Pixel, TikTok Pixel и Google Analytics има готови интеграции (Meta Pixel, Conversions API и TikTok Pixel в CloudCart, Google Tag Manager и GA4), които са по-сигурни от ръчен код.

Как изглежда магазинът на телефон

Мобилната версия е включена във всеки план на CloudCart, а активната тема се вижда в изглед за телефон още в админа. Мобилната версия е важна, защото около 63% от посещенията на сайтове в България през октомври 2026 са от телефон (StatCounter), а Google класира всеки сайт по мобилната му версия (Google Search Central).

Мобилната конверсия в търговията на дребно е около 2% срещу 3,7% на компютър (Contentsquare). Разликата идва най-често от дребни неща в дизайна: банер, който избутва продуктите надолу, бутон, който е твърде малък, или снимка, която се зарежда бавно.

Три места в CloudCart, от които виждате магазина като на телефон:

• Дизайн → Избери дизайн показва активната тема в изглед за компютър и за телефон.
• Дизайн → Цветове и шрифтове има превключвател за телефон, таблет и компютър под прегледа.
• Модулът на хедъра в Дизайн → Модули задава отделен вид на менюто за телефон.

Най-сигурната проверка е с вашия телефон: поръчайте един продукт от началото до плащането. Пълният списък с 12 проверки е в статията Мобилната версия на онлайн магазина, а скоростта на телефон е в PageSpeed Insights и Core Web Vitals: 10 поправки.

Дизайн с AI асистент: цветове и страници с едно изречение

AI асистент като Claude Code, ChatGPT Codex, Gemini CLI или Cursor може да сменя цветовете и шрифтовете на темата, щом го свържете с магазина с PAT токен. През API на CloudCart асистентът променя само цветовете, които сте поискали, прекомпилира стиловете като бутона Запази и изчиства кеша, за да видите промяната веднага.

Примерни изречения към асистента:

• „Покажи ми кои цветове на бутоните има темата и ги смени на тъмнозелено, но първо ми покажи какво ще промениш.“
• „Напиши текстовете за трите банера на началната страница за Черния петък, по един ред и с призив към категорията с намаленията.“
• „Изчисти кеша на витрината, след като смениш цветовете, и ми дай адреса да проверя.“

Промените в магазина нямат бутон „отмени“, затова казвайте на асистента първо да покаже какво ще промени. Как се взима PAT токен и се свързва асистентът, е в статията PAT токен в CloudCart: свържете Claude, ChatGPT и Gemini, а какво още поема агентът в магазина (имейли, реклами, Search Console, отчети) е в AI агент за онлайн магазин: колко часа и пари спестява.

Когато темата не стига: Nitrogen и собствена витрина

Когато искате витрина, която не прилича на нито една тема, CloudCart предлага Nitrogen: headless витрина, направена изцяло по вашия дизайн, докато каталогът, поръчките и плащанията остават в същия админ. Шаблоните на готовите теми не се редактират и собствена тема не се качва, затова собственият дизайн е проект върху Nitrogen.

	Готова тема	Nitrogen
Старт	В деня на регистрацията	След проект за дизайн
Кой я прави	Вие, от менюто Дизайн	Вашият разработчик или AI асистент, или екипът на CloudCart
Какво се променя	Цветове, шрифтове, модули, страници, собствен CSS/JS	Цялата витрина, без граници в дизайна
Админ, каталог, поръчки	CloudCart	Същият CloudCart

Повече за двата пътя има на страницата Дизайн, а целият път от регистрацията до първата поръчка е в статията Как да направите онлайн магазин: 9 стъпки. Въпроси по дизайна пишете на support@cloudcart.com.

Как да разберете дали новият дизайн продава повече

Новият дизайн се проверява с три числа преди и след смяната: конверсия, конверсия на телефон и средна поръчка. В CloudCart конверсията е поръчките в периода, разделени на сесиите, а фунията в Анализи показва пътя количка → започнат checkout → поръчка отделно за телефон и за компютър.

1. Запишете изходните числа. Преди смяната вземете от Анализи конверсията, фунията за телефон и средната поръчка за последните 14 дни.
2. Сменете дизайна в тих ден. Без кампания и без намаления в същата седмица, иначе не знаете кое е дало разликата.
3. Изчакайте поне 14 дни. Сравнявайте равни периоди с еднакъв брой делнични и почивни дни.
4. Сравнете същите числа. Ако конверсията падне само на телефон, търсете проблема в мобилната версия: меню, банер или бутон за количката.
5. Питайте AI агента за поръчките. AI агент като Claude Code или ChatGPT Codex, свързан с PAT ключ само за четене (Read Only), смята поръчките, прихода и средната поръчка за двата периода с едно изречение. Конверсията проверявате в Анализи или в Google Analytics 4, където са сесиите.

Примерно изречение към агента: „Сравни поръчките, прихода и средната поръчка за 14-те дни преди 10.11 и 14-те дни след това, по дни от седмицата, и ми кажи кои продукти продават по-малко.“ Агентът отговаря за минута, вместо да сглобявате отчета на ръка. Кои метрики да следите и как се смятат, е в статията KPI на онлайн магазина: 10 метрики, а 20 промени, които вдигат конверсията, са в Конверсия на онлайн магазин.

7 добри практики за дизайна на онлайн магазина

1. Един цвят за действие. Бутонът „Добави в количката“ е с цвят, който не се ползва другаде на страницата.
2. Продуктите горе. На телефон първите продукти трябва да се виждат без много превъртане, затова слайдерът на началната страница е един и нисък.
3. Снимки в един формат. Задайте формата на снимките в редактора и снимайте всички продукти в него. Решетката изглежда подредена, а страницата не скача.
4. Два шрифта. Един за заглавията и един за текста. Всеки нов шрифт добавя тегло към страницата.
5. Меню с думите на клиента. Категориите се казват така, както ги търсят: „Мъжки маратонки“ вместо „Колекция Run“.
6. Сезонни банери с дата. Сменяйте ги в модулите в деня, в който свършва кампанията, за да не обещават изтекла отстъпка.
7. Тест на телефона след всяка промяна. Една поръчка от телефона ви след всяка голяма промяна хваща грешките, преди да ги хванат клиентите.

Грешки, които да избягвате

• Смяна на тема в пика на продажбите. Новата тема слага своя начална страница и може да скрие модули. Сменяйте я в тих ден и проверете магазина веднага след това.
• Избор на тема по снимките в демото. Демото е с професионални снимки. Проверете как изглежда темата с вашите снимки и броя на вашите продукти.
• Нулиране за един цвят. Нулирането връща всички цветове и шрифтове. Ако искате да върнете само един, запишете стандартната му стойност и я въведете ръчно.
• Код, поставен без копие. Грешка в собствения CSS/JS чупи целия магазин. Пазете работещата версия.
• Тежки банери. Банер от няколко мегабайта бави най-видимата част на страницата на телефон. Качвайте снимките в размера, в който се показват.
• Забравено мобилно меню. Мобилното меню се настройва отделно в модула на хедъра. Проверете го на телефон след всяка промяна в навигацията.

Често задавани въпроси

Ако още нямате магазин, изберете тема и я пробвайте с вашите продукти: Създайте магазин за €1.