Изменение шрифтов в Эквид-магазине

Дата последнего изменения:

Многие пользователи могут захотеть изменить размер и цвет шрифтов в магазине. Мы подготовили CSS-коды, с которыми можно это сделать.

Посмотрите нашу статью Как добавить CSS код в Эквиде.

В этой статье:

Изменение всех шрифтов в Эквид-магазине

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

Ниже приведен CSS-код, который изменит цвет всех шрифтов на красный (red). Вы можете заменить его на на любой другой.


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
color: red !important;
}

Для изменения типа шрифта во всем магазине тоже можно использовать CSS-код. Вместо NAME_OF_FONT в коде нужно указать название шрифта:


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: NAME_OF_FONT !important;
}

Пример:


.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: verdana, arial, sans-serif !important;
}

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

Мы подготовили CSS-коды изменения названия и цены товаров на странице категорий. В нем можете изменить цвет "blue" и размер "20px" на ваше усмотрение.


/*назваание товара на странице категории*/

/*изменить цвет шрифта*/
.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-коды для названия и цены на детальной странице товара. Цвет "blue" и размер "20px" в коде можно изменить на необходимые значения.


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

div.ecwid-productBrowser-head {
color: blue;
}

/*цена товара*/
div.ecwid-productBrowser-price {
color: blue;
}

div.ecwid-productBrowser-price { 
font-size: 20px !important; 
}

/*артикул товара*/
div.ecwid-productBrowser-sku {
color: blue;
}

/*количество товаров*/
div.ecwid-productBrowser-details-qtyLabel {
color: blue;
} 

Посмотрите, как выглядит страница товара с применением всех CSS-кодов:

страница товара Эквид

Для новой страницы товара CSS-коды будут такими.


/*Название товара*/
.product-details__product-title {
        color: blue;
}

/*цена товара*/
.ec-size .ec-store .product-details__product-price {
    color:blue;
}

.ec-size .ec-store .product-details__product-price {
    font-size:20px;
}

/*артикул товара*/
.ec-size .ec-store .product-details__product-sku {
    color:blue;
} 

/*количество товаров в корзине*/
.product-details-module__title.details-product-purchase__place {
    color:blue;
}

Страница товара с применением CSS-кодов:

новая страница товара Эквид

Измените цвет кнопок магазина по нашей инструкции: Изменение кнопок в Эквид-магазине
К началу
Статья ответила на ваш вопрос?

Замечательно! Спасибо за ответ!

Пожалуйста, пришлите нам этот вопрос. Мы будем рады ответить по почте.

Отправить вопрос