База знаний
Советы продавцам
Академия
Обучающие видео
Попробовать поиск по:
Просмотренные статьи:

Содержание

Изменение дизайна отдельных страниц

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

Найти классы витрины магазина можно с помощью инструментов разработчика того браузера, которым вы пользуетесь. Например, инспектора для Chrome, Safari или FireFox.

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

Дизайн страниц товаров

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

Обычная страница товара содержит название товара, его изображение, цену, артикул, кнопку «В корзину» и прочие детали:

pic1.jpg

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

Чтобы изменить дизайн всех страниц товаров, используйте этот CSS-класс:

.ecwid-productBrowser-ProductPage

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

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

.ecwid-productBrowser-ProductPage-123456 .ecwid-productBrowser-sku {
    display: none;
}


где «123456» — это уникальный  ID товара. Как узнать ID товара.

Если вы хотите спрятать артикул у нескольких товаров, то перечислите их ID таким образом:

.ecwid-productBrowser-ProductPage-123456 .ecwid-productBrowser-sku,
.ecwid-productBrowser-ProductPage-121221 .ecwid-productBrowser-sku,
.ecwid-productBrowser-ProductPage-123234 .ecwid-productBrowser-sku {
    display: none;
}


где «123456», «121221», «123234» — это уникальные ID товаров. В результате артикулы будут скрыты только на этих 3 страницах.

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

Обычная страница категории отображает все товары в категории:

__________________.png

Работа с CSS-правилами для категорий строится так же, как и для страниц товаров.

Изменить дизайн страниц у всех категорий

Если вы хотите изменить дизайн всех страниц категорий, то используйте этот CSS-класс:

.ecwid-productBrowser-CategoryPage

Например, чтобы изменить цвет цен на странице с красного на зеленый, используйте этот CSS-код:

.ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value {
    color: green;
}

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

Если вы хотите изменить цвет цен только у одной страницы, то используйте этот код:

.ecwid-productBrowser-CategoryPage-4002 .ecwid-productBrowser-price-value {
    color: green;
}

где «4002» — это уникальный ID категории. Как узнать ID категории?

Чтобы изменить цвет у нескольких страниц, используйте этот код:

.ecwid-productBrowser-CategoryPage-4002 .ecwid-productBrowser-price-value,
.ecwid-productBrowser-CategoryPage-4006 .ecwid-productBrowser-price-value,
.ecwid-productBrowser-CategoryPage-4008 .ecwid-productBrowser-price-value {
    color: green;
}


где «4002», «4006», «4008» — это ID категорий. В результате цена будет зеленой только у этих трех категорий.

Другие страницы

Вы также можете изменить дизайн у этих страниц:

  • корзина
  • шаги оформления заказа
  • настройки профиля покупателя

Страница корзины

Чтобы изменить дизайн только на странице корзины, используйте этот CSS-класс:

.ecwid-productBrowser-CartPage

Страницы шагов оформления заказа

Чтобы изменить дизайн на страницах оформления заказа, используйте эти CSS-классы:

Доставка:

.ecwid-productBrowser-CheckoutShippingAddressPage


Оплата:

.ecwid-productBrowser-CheckoutPaymentDetailsPage


Размещение:

.ecwid-productBrowser-CheckoutPlaceOrderPage


Страница благодарности:

.ecwid-productBrowser-OrderConfirmationPage

Страницы аккаунта покупателя

Чтобы изменить дизайн на страницах покупателя (доступны покупателю после регистрации или входа в магазин), используйте эти CSS-классы:

Настройки аккаунта:

.ecwid-productBrowser-AccountSettingsPage 


История заказов

.ecwid-productBrowser-OrdersPage 


Адресная книга:

.ecwid-productBrowser-AddressBookPage

Дизайн страниц в зависимости от типа покупателя

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

Покупатель не зарегистрирован или еще не вошел в магазин.

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

body.ecwid-customer-loggedOut

Например, для покупателей, которые пришли к вам впервые или еще не вошли в магазин, Эквид должен выглядеть как онлайн-каталог без возможности купить товар, сделать это можно с помощью этого кода, разместите его в активной CSS-теме:

/* прячем артикулы и кнопку Купить от незарегистрированных покупателей */
body.ecwid-customer-loggedOut .ecwid-productBrowser-productsTable-buy,
body.ecwid-customer-loggedOut .ecwid-AddToBagButton,
body.ecwid-customer-loggedOut .ecwid-productBrowser-details-qtyPanel,
body.ecwid-customer-loggedOut .ecwid-productBrowser-price,
body.ecwid-customer-loggedOut .ecwid-BuyNow,
body.ecwid-customer-loggedOut .ecwid-btn--addToBag {
display: none;
}

По тому же принципу вы можете скрыть артикулы магазина для незарегистрированных пользователей:

/* прячем артикулы от незарегистрированных покупателей */
body.ecwid-customer-loggedOut div.ecwid-productBrowser-sku, 
body.ecwid-customer-loggedOut td.ecwid-productBrowser-productsTable-sku,
body.ecwid-customer-loggedOut span.ecwid-Invoice-productDescr-sku,
body.ecwid-customer-loggedOut div.ecwid-OrdersList-OrderBox-sku {
    display: none;
}

Покупатель вошел в магазин

Так же, как и для незарегистрированных покупателей, для зарегистрированных тоже можно обособить оформление магазина с помощью этого CSS-класса:

body.ecwid-customer-loggedIn


Например, чтобы показывать зарегистрированным покупателям цены в зеленом цвете, примените этот код:

body.ecwid-customer-loggedIn .ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value {
    color: green;
}

Для групп покупателей

После регистрации в магазине покупатель присоединяется к общей группе покупателей с ID «0». Если вы хотите применить для покупателей из этой группы специальный дизайн,  используйте этот CSS-код:

body.ecwid-customer-group-0


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

body.ecwid-customer-group-12345


где «12345» — это уникальный ID группы покупателей. Узнать его можно с помощью инспектора элементов вашего браузера при просмотре из аккаунта покупателя находящегося в определенной группе покупателей.

Например, для изменения цвета цены для всех покупателей определенной группы, используйте этот код:

body.ecwid-customer-group-1794001 .ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value {
    color: green;
}

Узнайте больше о том, как изменять дизайн магазина.

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

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

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

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