1. Центр поддержки
  2. База Знаний
  3. Дизайн
  4. Изменения дизайна c помощью CSS
База знаний
Советы продавцам
Академия
Обучающие видео
Попробовать поиск по:
Просмотренные статьи:

Содержание

Чтобы закрыть, нажмите Esc

Сборник CSS кодов

Вы можете легко настроить внешний вид вашего магазина с помощью CSS. Поменять шрифты, изменить цвет кнопок, добавить значок «Избранное» в верхнюю часть сайта — вот только малая часть того, что вы можете сделать.

В статье мы собрали коды CSS, которые помогут сделать магазин на Эквиде таким, каким вы хотите. Сборник не является исчерпывающим. Меняя HTML-шаблоны и таблицу стилей CSS, количество улучшений, которые вы можете сделать, ограничено только вашим воображением.

Если вы новичок в CSS, ознакомьтесь со следующими уроками, чтобы научиться быстрее:

  • Знакомство с CSS – курс CSS для начинающих даcт вам достаточно, чтобы начать.
  • Примеры CSS познакомят вас с практическими примерами, которые вы можете применить для себя.
Если вам нужна помощь с CSS-кодами, воспользуйтесь сервисом разработки индивидуальных решений Эквида.

Коллекция CSS кодов (индекс)

Этот сборник поделен на разделы, посвященные разным элементам Эквида. Каждый раздел содержит CSS-коды, которые вы можете использовать как есть, отредактировать или изменить.

В этой статье подробная инструкция, как добавить CSS-коды в ваш магазин →

Если вы пользуетесь новой версией Стартового сайта Эквида, то коды для витрины магазина, – где покупатели непосредственно выбирают и покупают товары, – не применятся к структурным блокам магазина на главной странице сайта. Если вы хотите внести изменения во внешний вид блоков магазина, вы можете сделать это отдельно (например, с помощью возможностей Редактора сайта). 

Кнопки

Шрифты

Сетка товаров (Главная страница магазина)

Страница категории

Страница товара

Корзина

Строка поиска

Оформление заказа

Кнопки

В вашем магазине много больших и маленьких кнопок, таких как «Добавить в корзину» или «Продолжить». Вы можете изменить их все сразу или по отдельности.

Изменение цвета всех больших кнопок одновременно

Большие кнопки в вашем магазине включают Купить, Добавить в корзину на странице товара, Продолжить, Оформить заказ. Используйте следующий код CSS, чтобы обновить все большие кнопки одновременно. Измените «# F0F8FF» и «black» в примере на любой понравившийся вам цвет:

/*Цвет кнопки*/
.ec-size .ec-store .form-control--primary .form-control__button {
background-color: red;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

/*Цвет текста*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}

/*Цвет текста при наведении*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Здесь вы можете просмотреть различные комбинации цветов и оттенков и выбрать любой цвет и его шестнадцатеричное число: CSS Colors.

Изменение цвета кнопки «Добавить в корзину»

Замените # FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

/*Цвет текста*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}

/*Цвет текста при наведении*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}

Изменение цвета кнопки «Купить»

Кнопка «Купить» отображается на страницах категорий. Замените #FFFAFA (белоснежный) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.ec-size .ec-store .form-control--small .form-control__button {
background: #FFFAFA;
}

/*Цвет текста*/
.ec-size .ec-store .form-control--small .form-control__button {
color: #000000;
}

Если вы отдельно добавили кнопку «Купить» на сайт или в блог, то можете изменить ее цвет с помощью другого кода (замените коды цветов на те, которые нужны вам):

.ecsp .ecwid-btn--primary,
.ecwid .ecwid-btn--primary {background-color:#2A54D8;}
.ecsp .ecwid-btn--primary:hover,
.ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}

Изменение цвета кнопки «Оформить заказ»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
background-color: #FFFFFF;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Цвет текста*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Цвет текста при наведении*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}

Изменение цвета кнопки «Продолжить»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
    background-color: #FFFFFF;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
    background: #FFFFFF;
}

/*Цвет текста*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
    color: #000000
}

/*Цвет текста при наведении*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
    color: #000000
}

Изменение цвета кнопки «Разместить заказ»

Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.


/*Цвет кнопки*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
    background-color: #FFFFFF;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
    background: #FFFFFF;
}

/*Цвет текста*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
    color: #000000
}

/*Цвет текста при наведении*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
    color: #000000
}

Изменение цвета всех маленьких кнопок одновременно

Вы также можете изменить маленькие кнопки, такие как Добавить еще, Перейти к оформлению заказа, Продолжить покупки на странице корзины. Вот коды для изменения этих кнопок. Замените #FFFFFF (белый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

Чтобы поменять цвет кнопок Добавить еще и Перейти к оформлению:

/* Цвет кнопки */
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
background-color: #FFFFFF;
}

/* Цвет кнопки  при наведении */
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
background-color: #FFFFFF;
}

/* Цвет текста */
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
color: #000000;
}

/* Цвет текста при наведении */
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
color: #000000;
}

Чтобы поменять цвет кнопки Продолжить покупки:

/* Цвет кнопки */
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}

/* Цвет кнопки при наведении */
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}

/* Цвет текста */
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}

/* Цвет текста при наведении */
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}

Изменение цвета кнопки «Добавить еще»

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
background-color: #FFA500;
}

/*Цвет кнопки при наведении*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

/*Цвет текста*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
color: #000000;
}

/*Цвет текста при наведении*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
color: #000000;
}

Изменение цвет кнопки «Перейти к оформлению заказа»

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}

/*Цвет кнопки при наведении*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Цвет текста*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Цвет текста при наведении*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}

Изменение цвета кнопки «Продолжить покупки» на странице корзины

Замените #FFA500 (оранжевый) и # 000000 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/* Цвет кнопки */
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}

/* Цвет кнопки при наведении */
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}

/* Цвет текста */
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}

/* Цвет текста при наведении */
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}

Размещение кнопки «Купить» на одном уровне

Если названия товаров имеют разную длину, кнопки «Купить» могут быть не выровнены на странице магазина. Чтобы выровнять кнопки по сетке, используйте следующий код:

.grid-product__wrap {
  display: flex;
}

.grid-product__price {
    flex: 1 0 auto;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

Скрыть кнопку «Добавить в корзину» на всех страницах товара

Вы можете скрыть кнопку «Добавить в корзину» на всех страницах товара, используя код CSS ниже:

.details-product-purchase__controls {
display: none;
}
Обратите внимание, что когда вы скрываете кнопки Купить и Добавить в корзину, ваши клиенты не смогут купать товары. Подробнее об использовании Эквид в качестве онлайн-каталога →

Шрифты

Вы можете установить шрифт и его цвет по умолчанию для всего магазина.

Изменение всех шрифтов

Для изменения шрифта во всем магазине замените NAME_OF_FONT в коде на нужное название шрифта:

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
font-family: NAME_OF_FONT !important;
}
Узнайте больше о часто используемых комбинациях шрифтов.

Изменение цвета шрифта

Для изменения цвета всех шрифтов одновременно используйте следующий код. Замените # 262626 (очень темно-серый) в примере на любой понравившийся вам цвет:

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
color: #262626 !important;
}
Здесь вы можете просмотреть различные комбинации цветов и оттенков и выбрать любой цвет и его шестнадцатеричное число: CSS Colors.

Сетка товаров (Главная страница магазина)

Сетка товаров - это макет, содержащий несколько товаров, который можно найти в следующих местах:

  • Страницы категории.
  • Раздел Коллекция рекомендуемых товаров на главной странице.
  • Сетка сопутствующих товаров под основным на странице товара.

Изменение цвета и размера шрифта в сетке товара

Измените цвет или размер шрифта цены в сетке товара. Измените «blue» и «20 px» на любой цвет и размер шрифта, который вы хотите.

/*Названия товаров на странице каталога*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}

/*Цена товара на странице каталога*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}

/*Размер шрифта*/
.ec-size .ec-store .grid-product__price-value.ec-price-item { 
font-size: 20px !important; 
}

Отключение эффекта масштабирования для миниатюр товаров

Когда вы помещаете курсор мыши на миниатюру товара, вы видите эффект увеличения. Эта функция включена для всех магазинов на Эквиде по умолчанию. Если вы хотите отключить его для своего интернет-магазина, вы можете использовать этот код CSS:

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
    transform: none;
}

Помещение значков «Отслеживание заказов», «Избранное», «Корзина», «Личный кабинет» в верхней части страницы магазина

Кнопки меню нижнего колонтитула Отслеживать заказы, Избранное, Корзина, Личный кабинет по умолчанию расположены в нижней части страницы магазина. Чтобы переместить их в верхнюю часть страницы, вы можете использовать код CSS:

.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
    order: -1;
}

Скрыть изображения товаров

Этот CSS-код скроет фотографии товаров и изображения, которые подставляются автоматически, если к товару не загружена ни одна фотография:

.ec-size .ec-store .grid-product__image 
{
  display: none;
}

Страница категории

Магазины с разнообразными товарами используют категории для организации товаров, что помогает покупателям найти то, что они ищут. Вы можете применить изменения стиля к одной категории и/или ко всем категориям одновременно.

Чтобы применить изменения стиля ко всех категориях вашего магазина, используйте CSS класс:
.ec-store__category-page

Если у вас еще нет категорий, все ваши товары относятся к категории «Главная страница магазина» по умолчанию. Чтобы применить изменения стиля ко всем товарам, относящимся к категории главной страницы Магазина, используйте ec-store__category-page - 0 CSS класс.

Центрирование товаров в категориях

Центрируйте товаров на страницах категорий:


.ec-size .ec-store .grid__products {
    justify-content: center;
}

Изменить цвета цены на странице определенной категории

Чтобы изменить цвет цены на странице определенной категории, замените «4002» на свой уникальный идентификатор категории. Замените # FFA500 (оранжевый) на цветовой код, который вы хотите использовать в своем магазине.

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: #FFA500;
}

Отключить эффект масштабирования для миниатюр категории

Когда вы помещаете курсор мыши на миниатюру категории, вы видите эффект увеличения. Эта функция включена для всех магазинов на Эквиде по умолчанию. Если вы хотите отключить его для своего интернет-магазина, используйте код CSS ниже:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
    transform: none;
}

Отключение эффекта наведения для категории названий

Измените следующий селектор:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
    transform: none;
}

Отображение определенного количества категорий в строке

Вы можете указать, сколько места будут занимать категории от общей ширины страницы. Например, если вы установите ширину для категорий в 20% от 100% пространства страницы, то получите 5 категорий в строке, а если установите ширину в 25% - то 4 категории в строке и так далее. Чтобы отобразить определенное количество категорий в строке:


.ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
    width: 20% !important;
}

Скрыть картинки и названия категорий

Для категорий без изображений Эквид показывает градиент как изображение-заполнитель в витрине магазина. Вы можете добавить свои собственные изображения или полностью скрыть изображения и названия категорий в магазине:

.ec-size .ec-store .grid__categories {
display: none;
}

Скрыть картинки категорий

Для отображения только названий категорий без изображений в магазине:

.ec-size .ec-store .grid__categories--appearance-below .grid-category__image {
display: none;
}

.ec-size .ec-store .grid-category__image,
.ec-size .ec-store .grid-category__spacer {
display: none;
}

Скрыть карточки категории на главной странице

Если вы хотите иметь более компактный вид для своей главной страницы магазина (например, чтобы отображать там только горизонтальное меню и рекомендуемые товары), вы можете скрыть карточки категорий на главной странице магазина. В то же время вы можете хранить карточки категорий на страницах своих категорий, чтобы клиенты могли видеть там подкатегории, если вы их добавили.

.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
display: none;
}

Страница товара

На странице товара отображается изображение, название, цена, описание и тд. Вы можете изменить внешний вид содержимого, а также скрыть некоторые компоненты.

Чтобы применить изменения стиля ко всем товарам, принадлежащим к определенной категории, используйте CSS класс изменив «12345» на свой уникальный идентификатор категории:
.ec-store__product-page - c12345.

Изменение цвета и размера шрифта

Измените цвет и размер шрифта на странице товара. Измените # FFA500 (оранжевый) и "20px" на любой цвет и размер шрифта, который вы пожелаете.

Цвет заголовков:


/ * Названия товара на странице товара * /.ec-size .ec-store .product-details .product-details__product-title {
    color: #FFA500;
}

Шрифт, цвет и размер цены:

/ * Цена товара на странице товара * /
.ec-size .ec-store .ec-price-item {
    color: #FFA500;
}
.ec-size .ec-store .ec-price-item {
    font-size: 20px; 
}

Цвет артикула (SKU):

/ * Артикул товара на странице товара * /
.ec-size .ec-store .product-details__product-sku {
    color: #FFA500;
}

Цвет поля "Количество товара в наличии":

/ *Количество товара в наличии на странице товара* /
.ec-size .ec-store .details-product-purchase__place {
    color: #FFA500;
}

Шрифт, цвет и размер цены за единицу измерения товара:

/ *Цена за единицу измерения товара на странице товара* /
.ec-size .ec-store .product-details__price-per-unit-block  {
    font-size: 20px;
    color: #FFA500;
}

Изменение цвета ярлыка «Распродажа»

Измените RED в background-color и border-color на нужный вам цвет:

/ * Изменение цвета лейбла Распродажа * /
.ec-size .ec-store .label--notice { 
background-color: RED; 
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
color: RED; 
}

Показать галерею изображений в полном размере на мобильных телефонах

Добавьте следующий селектор и свойство:

.ec-size:not(.ec-size--s)  .ec-store .product-details .product-details__gallery {
    width: 100vw;
    margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
}

Удаление название под детализированным изображением в галерее

Удалите текст под детализированным изображением:

div.pswp__caption__center { 
display:none;
}

Открыть раздел «Показать больше» на страницах товара

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

.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;   
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img { 
display: inline;
}

Показать «Сопутствующие товары» в верхней части страницы

Сопутствующие товары по умолчанию отображаются в нижней части страниц товаров. Чтобы переместить их наверх страницы товара:

.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .ec-related-products {
order: -1;
}

Скрыть цену на конкретные товары

Чтобы скрыть цену на странице конкретного товара используйте следующий код изменив «123456» на свой уникальный внутренний идентификатор товара: (Как получить идентификатор товара?)

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Скрыть цены от незарегистрированных пользователей

Вы можете скрыть цены от посетителей, которые не выполнили вход в магазин. Ваш каталог будет доступен всем посетителям, но только зарегистрированные клиенты будут видеть цены и смогут делать покупки. Это особенно полезно, если вы хотите сохранить оптовые цены приватными.

Ниже приведен CSS код для скрытия цен и кнопок «В корзину» и «Купить». В этом случае только зарегистрированные клиенты смогут размещать заказы. Не зарегистрированные покупатели смогут только просматривать ваш каталог.


/*Скрыть цену на странице каталога*/
body.ecwid-customer-loggedOut .grid-product__price { 
     display: none; 
} 

/*Скрыть кнопку «Купить» на странице каталога*/
body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
    display: none;
}

/*Скрыть цену на страницах товаров*/
body.ecwid-customer-loggedOut .details-product-price__value,
body.ecwid-customer-loggedOut .details-product-price-compare__container {
    display: none;
}  

/*Скрыть кнопку «В корзину» на страницах товаров*/ 
body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
    display: none;
}

Если ваш магазин находится в стране, где рядом с ценой отображается текст Цена включает налог, вам также нужно будет использовать следующий CSS код, чтобы скрыть этот текст с витрины:

body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Если вы хотите, чтобы весь каталог могли видеть только зарегистрированные посетители магазина, воспользуйтесь приложением Required Login for Storefront Access.

Корзина

Изменить стиль кнопки "Удалить товар"

Ваши клиенты могут удалить товар из корзины с помощью значка «Закрыть» (х). Он появляется при наведении указателя мыши на товар на странице сумки.

Вы можете настроить высоту и ширину значка, толщину его линий, закругление углов, а также изменить цвет знака, чтобы сделать его более заметным.

Вот код, который нужно добавить в ваш магазин:

.ec-size .ec-store .ec-cart-item__control-inner svg {
    opacity: 1.5;
    color: red;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}
.ec-size .ec-store .ec-cart-item__control-inner svg g {
    stroke-width: 2px;
}

Удалить поле «Количество»

Чтобы скрыть поле «Количество» на странице корзины:

.ec-size .ec-store .ec-cart-item__count {
display: none;
}

Отобразить иконку пустой корзины на Стартовом сайте (старая версия)

По умолчанию иконка корзины есть на Стартовом сайте только в том случае, если в корзину уже добавлен какой-то товар. Но вы можете отображать ее даже если в корзине пока пусто (если хотите).

.float-icons__icon--cart.off:not(.off2) {
    opacity: 1;
    height: 48px;
    padding-top: 12px;
    transform: translateX(-8px);
    pointer-events: auto;
}

@media (min-width: 414px) {
    .float-icons__icon--cart.off:not(.off2) {
        height: 68px;
        padding-top: 16px;
        transform: translateX(-16px);
    }
}

@media (min-width: 768px) {
    .float-icons__icon--cart.off:not(.off2) {
        padding-top: 24px;
        transform: translateX(-24px);
    }
}
Этот код работает только для старой версии Стартового сайта.

Раскрыть поле для промо-кода

Вы можете сразу показывать раскрытым поле для ввода промо-кода (и подарочного сертификата) в корзине:

.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible } 

.ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply { 
display: block; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap { 
display: flex; 
align-items: center; 
height: auto; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text { 
display: none; 
}

Изменить стиль кнопки "Удалить товар"

Покупатели могут удалить товары из корзины с помощью кнопки Удалить (Х), которая показывается справа от товара.

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

Вот какой код вам нужно добавить в магазин:

.ec-size .ec-store .ec-cart-item__control-inner svg {
    opacity: 1.5;
    color: red;
    width: 30px;
    height: 30px;
}

В строке “color”, укажите любой цвет на английском языке. Например, red, blue, green.

Чем больше ширина и высота (width и height), тем больше будет кнопка.

Строка поиска

Поисковый виджет помогает вашим клиентам искать товары в вашем магазине. Вы можете изменить внешний вид самого окна поиска и его расположение.

Изменить дизайн виджета поиска

Добавьте или измените следующий селектор и свойства. Измените размер и замените цветовые коды, такие как # 000000, на цветовой код, который вы хотите отобразить.


/*  Input box styles */
input.ecwid-search-widget__input[type="text"] {
 width: 100px; /* change width as needed*/
 height: 20px; /* change height as needed*/
 border: solid 1px red; /* change border color */
 background-color: #000000; /* change background colour */
 font-size: 12px; /* change font size in search field */
 color: #000000; /* change font color in search field */
}

Изменить стиль кнопки поиска

Добавьте или измените следующий селектор и свойства. Замените image / button_search.png реальным абсолютным путем к фоновому изображению. Например: "http://www.example.com/images/button_bg.png"

/* "Search" button styles */
button.ecwid-search-widget__btn {
 width: 20px; /* change width as needed*/
 height: 10px; /* change height as needed*/
 border: solid 1px #ffffff; /*change border color */  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*add background image*/
}

Переместить поле поиска

В зависимости от того, как вы хотите изменить расположение поля поиска, выберите подходящие вам значения margin-left и margin-top.


/* Расположение поля поиска*/
.ecwid-search-widget {
max-width: 170px; /* укажите нужную ширину */
position:relative;
margin-left: 400px; /* укажите нужный отступ слева */
margin-top: 10px; /* укажите нужный отступ сверху */
}

Изменить окно поиска на Стартовом сайте (старая версия)

Замените # F3F6F9 на цветовой код, который вы хотите отобразить.

.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
border: 1px solid #e6e6e6; 
}

.search-panel .text-field { 
background-color: #F3F6F9; 
border: 2px solid #DC230A; 
}
Этот код работает для старой версии Стартового сайта. Если вы пользуетесь новой версией Стартового сайта Эквида, то изменить внешний вид окна поиска можно с помощью Редактора сайта. 

Оформление заказа

Удалить время доставки из названий способов доставки

Некоторые перевозчики (например, USPS, FedEx и т. Д.) Добавляют время доставки к названиям способов доставки. Если вы используете онлайн-перевозчик в своем магазине Эквид, вы можете увидеть, что способы доставки отображаются как «U.S.P.S. Priority Mail (1-3 дня)» при оформлении заказа. Можно скрыть это время доставки через CSS:


span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
display:none !important;

Добавить логотип для способа оплаты

Логотипы напротив способов оплаты подсказывают покупателям, как именно они смогут оплатить товар или услугу. С помощью CSS-кода вы можете добавить, например, иконки банковских карт, чтобы более наглядно показать клиентам, какие кредитные или дебетовые карты они могут использовать для оплаты заказа.

Используйте этот CSS-код:


/* Спрятать старый логотип для способа оплаты */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
div.ec-cart-accept__icons {
    display: none;
} 

 /* Добавить свой логотип для способа оплаты */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) .ec-radiogroup__info:after {
    content: '';
    background: url('https://example.com/your_image.jpg') no-repeat;
    background-size: contain;
    height: 40px;
    width: 60px; /* Ширина должна быть подобрана под ваш логотип */
    display: block;
}

где вы должны заменить https://example.com/your_image.jpg на URL вашей картинки с логотипами, а X в :nth-child(X) на номер способа оплаты при оформлении заказа. Например, если вы предлагаете 3 способа оплаты и хотите показывать новые логотипы для второго способа, то в коде необходимо вписать "2", например: :nth-child(2).

Вы можете использовать следующие логотипы кредитных карт:

Была ли эта статья полезной?

Приятно! Спасибо за ваш отзыв.

Спасибо за ваш отзыв.

Простите за это! Что было не так?
Пользователи, считающие этот материал полезным: 29 из 44
Статьи в этом разделе
10
Мы используем cookie-файлы и сервисы аналитики, чтобы помнить о ваших предпочтениях, оценивать эффективность наших рекламных кампаний и улучшать работу сайта. Выбирая «Принимаю», вы даёте согласие на использование файлов cookie.
Принимаю Не принимаю