CSS

Как редактировать CSS магазина

Редактирование CSS позволяет точечно изменить внешний вид витрины магазина: цвета, отступы, размеры блоков, баннеры, карточки товаров, кнопки и другие элементы интерфейса.

CSS редактируется в разделе Настройка шаблонов → Редактирование темы → Кастомизация → Custom CSS/JS.

---

Где редактировать CSS

Чтобы открыть редактор CSS:

1. Перейдите в раздел Настройка шаблонов.
2. Выберите активную тему.
3. Откройте редактирование темы.
4. Перейдите во вкладку Кастомизация.
5. Найдите блок Custom CSS/JS.
6. Вставьте CSS-код в поле CSS.
7. Сохраните изменения.
8. Проверьте результат на сайте магазина.

---

Как безопасно подбирать CSS через браузер

Перед тем как вставлять CSS в панель магазина, лучше сначала проверить изменения через инструменты разработчика в браузере.

Так вы сможете увидеть результат сразу, не ломая внешний вид сайта для пользователей.

Как открыть инструменты разработчика

В большинстве браузеров:

1. Откройте сайт магазина.
2. Нажмите правой кнопкой мыши по нужному элементу.
3. Выберите Просмотреть код или Исследовать элемент.
4. Откроется панель разработчика.
5. Вкладка Elements / Элементы покажет HTML-структуру страницы.
6. Вкладка Styles / Стили покажет CSS, который применяется к выбранному элементу.
7. Вкладка Computed / Вычисленные покажет итоговые стили элемента.

Также можно открыть инструменты разработчика горячей клавишей:

F12

или:

Ctrl + Shift + I

---

Как узнать размер изображения

Иногда нужно понять, какой размер у баннера, логотипа, изображения товара или другого элемента на сайте.

Это можно сделать через инструменты разработчика.

Способ 1. Через наведение на элемент

1. Откройте сайт магазина.
2. Нажмите правой кнопкой мыши по изображению.
3. Выберите Просмотреть код.
4. Наведите курсор на выбранный HTML-элемент в панели разработчика.
5. Браузер покажет подсказку с размером элемента на странице.

Обычно размер отображается в формате:

400 × 200

Это текущий размер изображения на сайте, с учётом CSS и адаптивной вёрстки.

---

Способ 2. Через вкладку Computed

1. Выберите изображение или блок с изображением.
2. Откройте вкладку Computed / Вычисленные.
3. Найдите параметры:

width
height

Так можно понять, какую ширину и высоту элемент занимает на странице.

---

Способ 3. Через консоль браузера

Если выбран нужный элемент в панели Elements, его можно проверить через консоль.

1. Выберите элемент изображения в Elements.
2. Перейдите во вкладку Console.
3. Введите команду:

$0.getBoundingClientRect()

Она покажет фактический размер элемента на странице.

Если выбран именно тег img, можно узнать оригинальный размер изображения:

$0.naturalWidth

$0.naturalHeight

Где:

• naturalWidth — оригинальная ширина изображения;
• naturalHeight — оригинальная высота изображения;
• getBoundingClientRect() — текущий размер элемента на сайте.

---

Как найти цвета на сайте

Чтобы изменить цвет кнопки, текста, фона или рамки, сначала нужно понять, какой стиль сейчас применяется к элементу.

Как найти цвет элемента

1. Откройте сайт магазина.
2. Нажмите правой кнопкой мыши по нужному элементу.
3. Выберите Просмотреть код.
4. В панели разработчика откройте вкладку Styles или Computed.
5. Найдите CSS-свойства, связанные с цветом.

Чаще всего используются:

color

background

background-color

border-color

box-shadow

---

Что означают основные свойства

color

Отвечает за цвет текста.

background-color

Отвечает за цвет фона элемента.

border-color

Отвечает за цвет рамки.

box-shadow

Отвечает за тень или свечение элемента.

Пример:

.example-button {
    color: #ffffff;
    background-color: #0066ff;
    border-color: #0066ff;
}

---

Как временно изменить стиль в браузере

В инструментах разработчика можно временно изменить CSS и сразу увидеть результат.

1. Выберите нужный элемент.
2. В правой части панели найдите блок Styles.
3. Измените нужное значение.
4. Например, поменяйте цвет:

background-color: #01d5cc;

5. Посмотрите, как элемент выглядит на сайте.
6. Если результат подходит, скопируйте CSS в редактор Custom CSS.

---

Как правильно писать CSS

CSS должен быть аккуратным и точечным.

Лучше менять конкретный элемент, а не весь сайт сразу.

Плохой пример:

* {

    color: red;
}

Такой код применится ко всем элементам сайта и может сломать внешний вид.

Хороший пример:

.product-card {
    border-radius: 16px;
}

Такой код меняет только карточки товаров.

---

Частые CSS-свойства

Цвет фона

body {
    background: #10141B;
}

Цвет текста

.product-card {
    color: #ffffff;
}

Скругление блока

.product-card {
    border-radius: 18px;
}

Рамка

.product-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
}

Тень

.product-card {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

Отступы

.product-card {
    padding: 20px;
    margin-bottom: 16px;
}

Размер изображения

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

object-fit: cover; помогает изображению красиво заполнять блок, не растягиваясь непропорционально.

---

Как подбирать селектор

Чтобы CSS применился к нужному элементу, нужно правильно выбрать селектор.

Селектор — это указание, к какому элементу применять стиль.

Примеры селекторов:

body

Применяется ко всей странице.

.product-card

Применяется к элементам с классом product-card.

.product-card img

Применяется к изображениям внутри карточки товара.

.product-card:hover

Применяется к карточке товара при наведении мыши.

---

Как получить селектор элемента

1. Нажмите правой кнопкой мыши по нужному элементу.
2. Выберите Просмотреть код.
3. В панели Elements найдите выделенный элемент.
4. Посмотрите его class.

Пример:

<div class="product-card">

В CSS такой элемент можно выбрать так:

.product-card {
    border-radius: 18px;
}

Если класс длинный или выглядит автоматически сгенерированным, лучше проверить, не изменяется ли он после обновления сайта.

---

Как работать с ИИ при редактировании CSS

ИИ может помочь написать CSS, но важно правильно объяснить задачу.

Главная ошибка — просить ИИ “переделать сайт”, не объяснив, что у вас SaaS-конструктор и нет доступа к HTML-коду проекта.

ИИ должен понимать, что вы можете вставить только CSS в специальное поле конструктора.

---

Что нужно сообщить ИИ

В промпте обязательно укажите:

1. Что сайт создан на SaaS-конструкторе.
2. Что у вас нет доступа к HTML и исходному коду.
3. Что вы можете редактировать только Custom CSS.
4. Какой элемент нужно изменить.
5. Как он выглядит сейчас.
6. Какой результат нужен.
7. Желательно приложить скриншот.
8. Желательно приложить HTML-фрагмент или class элемента из DevTools.

---

Хороший промпт для ИИ

У меня сайт магазина на SaaS-конструкторе AutoDonate / MagicByte.

Я не могу редактировать HTML и исходный код сайта. У меня есть только поле Custom CSS, куда можно вставить CSS-код.

Мне нужно изменить внешний вид карточек товаров:

- сделать больше скругление;
- добавить лёгкую тень;
- изменить фон карточки;
- при наведении немного поднимать карточку вверх.

Я приложил скриншот и HTML/class элемента из DevTools.

Дай мне готовый CSS-код, который можно сразу вставить в Custom CSS.
Не предлагай изменять HTML, React, Vue или файлы проекта.

---

Промпт для изменения цветов

У меня SaaS-конструктор магазина AutoDonate / MagicByte.

Я могу редактировать только Custom CSS.

Нужно изменить цвета сайта под стиль проекта:

- основной цвет: #01d5cc;
- фон: #10141B;
- карточки: #151A24;
- текст: белый;
- вторичный текст: #8F9BB3.

Сделай CSS для кнопок, карточек товаров, рамок и hover-эффектов.
Код должен быть готов для вставки в Custom CSS.

---

Промпт для изменения баннера

У меня сайт на SaaS-конструкторе AutoDonate / MagicByte.

Я могу менять только CSS через Custom CSS.

Нужно настроить отображение главного баннера:

- высота на ПК: 260px;
- высота на телефоне: 160px;
- изображение должно заполнять блок без искажения;
- углы должны быть скруглены;
- на мобильной версии баннер не должен обрезать важный текст.

Дай готовый CSS. Если нужны разные стили для ПК и телефона, используй media queries.

---

Промпт для адаптации под мобильные устройства

У меня SaaS-конструктор AutoDonate / MagicByte.

Я могу вставлять только CSS в Custom CSS.

Нужно улучшить мобильную версию магазина:

- карточки товаров должны идти в одну колонку;
- баннер должен быть ниже по высоте;
- текст не должен вылезать за пределы карточек;
- кнопки должны быть удобными для нажатия.

Дай готовый CSS с media queries для мобильной версии.
Не предлагай менять HTML.

---

Что прикладывать к промпту для ИИ

Чтобы ИИ дал точный CSS, лучше приложить:

1. Скриншот элемента

   Показывает, что именно нужно изменить.

2. Скриншот DevTools

   Помогает увидеть классы и текущие стили.

3. HTML-фрагмент элемента

   Его можно скопировать из вкладки Elements.

4. Текущий CSS, если он уже есть

   Чтобы ИИ не написал конфликтующие стили.

5. Описание желаемого результата

   Например: “сделать как на старом дизайне”, “уменьшить баннер”, “добавить зелёный акцент”.

---

Как проверять CSS от ИИ

После получения CSS от ИИ:

1. Сначала вставьте код в DevTools и проверьте результат временно.
2. Проверьте главную страницу магазина.
3. Откройте карточку товара.
4. Проверьте корзину.
5. Проверьте личный кабинет.
6. Проверьте страницу на мобильном размере экрана.
7. Только после этого вставляйте CSS в редактор Custom CSS.

---

Как проверить мобильную версию через браузер

1. Откройте инструменты разработчика.
2. Нажмите на иконку устройства в верхней части панели.
3. Выберите мобильное разрешение.
4. Проверьте, как отображаются баннеры, карточки, меню и кнопки.
5. При необходимости добавьте CSS через media queries.

Пример media query:

@media (max-width: 768px) {
    .product-card {
        width: 100%;
    }

    .main-banner {
        height: 160px;
    }
}

Этот код применится только на экранах шириной до 768px.

---

Рекомендации

1. Меняйте стили постепенно.
2. Не вставляйте слишком много CSS за один раз.
3. После каждого изменения проверяйте сайт.
4. Сохраняйте старую версию CSS перед правками.
5. Не используйте непонятный код из случайных источников.
6. Для сложных изменений сначала тестируйте код через DevTools.
7. Проверяйте сайт на ПК и телефоне.