Где находятся эти настройки
Брендинг настраивается для каждого рынка, а внутри рынка влияет сразу на все страницы. Откройте конструктор, выберите рынок с помощью кнопки рынков (флаг страны) вверху левой боковой панели, затем откройте вкладку Settings (иконка шестеренки). В Settings есть свои подвкладки в таком порядке: Branding, Colors, Fonts, Layout, Animations, Automations, Inputs, Icons, Prohibitions, Checkout, Checkout form, Maintenance page, Custom CSS и Custom Javascript. Изменения применяются к выбранному рынку и вступают в силу, когда вы нажимаете Publish. Переключение рынков перезагружает собственные цвета, шрифты и макет этого рынка.
Цветовые схемы
Вкладка Colors содержит до 9 цветовых схем. Как только вы достигаете лимита, карточка добавления превращается в неактивный значок-счетчик вида 9/9. Каждая секция, блок и компонент ссылается на одну схему по ее номеру, поэтому изменение цветов схемы мгновенно меняет оформление каждой секции, которая ее использует, на всех страницах. Щелкните правой кнопкой по карточке схемы, чтобы дублировать или удалить ее.
Роли цветов в каждой схеме
Каждая схема задает эти роли, все в виде hex-значений:
- Background: основной фон секции.
- Inner Background: тонированный фон для карточек и вложенного контента внутри секции.
- Heading: цвет текста заголовков.
- Text: цвет абзацев и основного текста.
- Important text: выделенный текст, например цены и подчеркнутые значения.
- Links и Hover links: цвет ссылки в обычном состоянии и при наведении.
- Border: рамки элементов и линии-разделители.
- Outline: контуры фокуса и акцентные контуры, которые должны выделяться сильнее рамок.
- Shadow: цвет тени блока (обычно полупрозрачный).
- Primary button: фон, текст и рамка, у каждого свой отдельный цвет при наведении (всего 6 значений).
- Secondary button: фон, текст и рамка, у каждого свой отдельный цвет при наведении (всего 6 значений).
- Input фон, текст, рамка и подпись: оформление полей формы.
- Input hover background: фон поля ввода, когда покупатель наводит на него курсор.
Советы для сильных схем
- Держите нейтральный светлый Background на большинстве секций и приберегите смелые цвета для одной акцентной схемы на секциях-героях и призывах к действию.
- Сделайте Primary Button Background явно отличным от Background секции, чтобы кнопка выделялась.
- Задайте Inner Background как легкий оттенок основного Background, чтобы карточки читались как отдельные без резкости.
- Стремитесь к контрасту не менее 4.5:1 между текстом и его фоном.
Шрифты
Вкладка Fonts сопоставляет четыре роли с семейством шрифтов каждая:
- Body: текст абзацев и описания.
- Heading: все заголовки по всему магазину.
- Subheading: вторичные заголовки и подзаголовки секций.
- Accent: стилистический шрифт для цен, значков и декоративного акцента.
Доступные шрифты: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface и Acme. Для магазинов с арабским контентом каждый шрифт автоматически сочетается с подходящим арабским аналогом, поэтому отдельно арабский шрифт выбирать не нужно.
Ширина страницы
Во вкладке Layout есть ползунок Page width, который задает максимальную ширину основной контентной сетки, от 900 до 1400 px с шагом 100 (то есть 900, 1000, 1100, 1200, 1300 или 1400; по умолчанию 1200). Секции с шириной Page ограничены этим значением; секции с шириной Full всегда занимают всю область просмотра независимо от него. На областях просмотра уже выбранной ширины секции сжимаются, заполняя 100% экрана.
Логотип
Логотип задается в двух местах: блок Logo внутри секции Header и блок About Us в подвале. Нажмите на блок, затем используйте его выбор изображения Logo, чтобы выбрать картинку из медиабиблиотеки или загрузить новую. После выбора задайте отображаемые Width и Height (каждый от 20 до 300 px); другое измерение масштабируется автоматически для сохранения пропорций. Логотип в шапке по умолчанию 120 px в ширину и 50 px в высоту, и вы можете задать его горизонтальное положение (слева, по центру или справа) и отступы. По умолчанию логотип шапки ведет на главную страницу; вы можете сделать его чисто декоративным, выключив переключатель Logo redirects to home в группе Header вкладки Prohibitions.
Фавикон
Задайте фавикон во вкладке Branding. Нажмите Select favicon и выберите изображение PNG, JPEG, WEBP или ICO (рекомендуемый размер 32x32 или 16x16 px). Он появляется во вкладках браузера и закладках.
Фоновое изображение страницы
Также во вкладке Branding вы можете при желании задать Body image за всем магазином (PNG, JPEG или WEBP). Как только изображение выбрано, появляются два элемента управления: Size (Cover заполняет область просмотра, обрезая при необходимости; Contain вмещает все изображение) и Repeat (когда включено, изображение замощается и прокручивается вместе со страницей; когда выключено, одно изображение остается зафиксированным в области просмотра, пока контент прокручивается поверх него). Используйте сильно сжатое изображение, чтобы не замедлять загрузку страницы.
Пользовательские CSS и JavaScript
Для изменений, которые стандартные настройки сделать не могут, вкладка Custom CSS и вкладка Custom Javascript каждая принимает до 1,000 символов, которые внедряются и выполняются на каждой странице магазина. Используйте их экономно. Для стилизации в рамках одной секции у каждой секции также есть собственная вкладка Custom CSS в ее панели управления, что безопаснее общесайтового поля.