Сборник 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;
}

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

Замените #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 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: #FFFFFF;
}

/*Цвет кнопки при наведении*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: #FFFFFF;
}

/*Цвет текста*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: #000000;
}

/*Цвет текста при наведении*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: #000000;
}

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

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

/*Цвет кнопки*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: #FFFFFF;
}

/*Цвет кнопки при наведении*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: #FFFFFF;
}

/*Цвет текста*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: #000000;
}

/*Цвет текста при наведении*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: #000000;
}

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

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

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

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

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

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

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

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

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

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

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

/*Цвет текста при наведении*/
.ec-size .ec-store .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 (черный) на коды цветов, которые вы хотите использовать в своем магазине.

/*Цвет кнопки*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: #FFA500;
}

/*Цвет кнопки при наведении*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: #FFA500;
}

/*Цвет текста*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: #000000;
}

/*Цвет текста при наведении*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: #000000;
}

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

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

/*Цвет кнопки*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: #FFA500;
}

/*Цвет кнопки при наведении*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: #FFA500;
}

/*Цвет текста*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: #000000;
}

/*Цвет текста при наведении*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag: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 {
font-family: NAME_OF_FONT !important;
}

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

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

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
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 { 
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 {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-grid {
order: 2;
}
.ec-size .ec-store__category-page .ec-pager {
order: 3;
}
.ec-size .ec-store__category-page .ec-footer {
order: 1;
}

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

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


html#ecwid_html body#ecwid_body .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 {
    @for $i from 2 through 10 {
        $k: $i - 1;
        @for $j from 1 through $k {
            &[data-cols="#{$i}"][data-items="#{$j}"] {
                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;
}

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

Вы можете отобразить одинаковое количество категорий в строке:

@mixin grid-category-settings($count-per-row-list, $max-count-per-row: false) {
    $i: 1;
    @each $count-per-row in $count-per-row-list {
        &:nth-child(n+#{$i}) {
            width: 100% / $count-per-row;
            @if ($max-count-per-row) {
                $scale: $max-count-per-row / $count-per-row;
                $w: min(100%, 100% / $scale * 1.2);
                .grid-category__spacer {
                    $d: 16px * ($scale - 1) / $scale;
                    width: calc(#{$w} - #{$d});
                }
                .grid-category__image-spacer {
                    $d: 16px * ($scale - 1) / $scale;
                    width: calc(#{$w} - #{$d});
                }
            }
        }
        $i: $i + $count-per-row;
    }
}
.ec-size .ec-store .ec-grid .grid__categories {
    &[data-cols="1"] {
        .grid-category {
            @include grid-category-settings(2, 2);
        }
    }
    @for $i from 2 through 10 {
        &[data-cols="#{$i}"] .grid-category {
            @include grid-category-settings($i, $i);
        }
    }
    &.grid__categories--large-items {
        &[data-cols="1"] {
            justify-content: center;
            .grid-category {
                max-width: 480px;
                @include grid-category-settings(1, 1);
            }
        }
    }
}
.ec-size .ec-store .ec-grid .grid__categories {
    justify-content: left;
}

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

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

.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" на любой цвет и размер шрифта, который вы пожелаете.

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


/ * Названия товара на странице товара * /

html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details .product-details__product-title {
    color: #FFA500;
}

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

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

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

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

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

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

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

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

/ * Изменение цвета лейбла Распродажа * /

/* change on sale label color */

.ec-size .ec-store .label--notice { 
   background-color: RED; 
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
border-color: RED; 
border-right-color: transparent;
}

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

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


.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
    width: 100vw;
    background-size: contain;
}

Удаление SKU (артикула) товара

SKU товара (артикул) - это идентификационный код товара, который помогает отслеживать товар для инвентаризации. SKU товара отображаются в Эквиде в следующих местах:

  • страница товара
  • страница «Разместить заказ»
  • страница «Спасибо за ваш заказ»
  • страница счета

Скрыть SKU на странице товара:

div.ecwid-productBrowser-details-rightPanel div.ecwid-productBrowser-sku {
display: none;
}

Скрыть SKU на странице заказа:

table.ecwid-Invoice-itemsTable .ecwid-productBrowser-sku {
display: none;
}

Скрыть SKU на странице «Спасибо за Ваш заказ»

div.ecwid-Invoice span.ecwid-Invoice-productDescr-sku {
display: none;
}
Чтобы узнать, как редактировать шаблон счета-фактуры, прочтите Редактирование шаблона счета

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

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

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--xl .ec-store .product-details__product-description::after {
display: none;
}

.ec-size--s.ec-size.ec-size--xl .ec-store .product-details-module__content--collapsed ~ .product-details-module__btn-more {
display: none;
}

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

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

.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}

.ec-size .ec-store__content-wrapper .product-details {
order: 2;
}

.ec-size .ec-store__content-wrapper .ec-footer {
order: 3;
}

.ec-store__content-wrapper .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;
}
Если вы хотите, чтобы весь каталог могли видеть только зарегистрированные посетители магазина, воспользуйтесь приложением Required Login for Storefront Access.

Корзина

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

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

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

div.ec-cart-item__control a.ec-cart-item__control-inner { 
   display: block; 
   background:transparent url(LINK_TO_YOUR_CUSTOM_IMAGE) no-repeat scroll center center; 
   height:40px; 
   width:40px; 
} 

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

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

.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: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; 
}

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

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

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

Добавьте или измените следующий селектор и свойства. Измените размер и замените цветовые коды, такие как # 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*/
}

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

Замените # 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).

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

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

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

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

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