Изменение дизайна отдельных страниц
Вы можете менять дизайн отдельных страниц Эквида — например, страницы товара, оформления заказа или страницы профиля покупателя в магазине. Эквид поддерживает динамические CSS-классы, помощью которых можно строить правила оформления для отдельно взятых страниц. После этого вам останется только добавить CSS-код в магазин.
Найти классы витрины магазина можно с помощью инструментов разработчика того браузера, которым вы пользуетесь. Например, инспектора для Chrome, Safari или FireFox.
Дизайн страниц товаров
Страница товара
Обычная страница товара содержит название товара, его изображение, цену, артикул, кнопку «В корзину» и прочие детали:
Изменить дизайн страниц всех товаров
Чтобы изменить дизайн всех страниц товаров, используйте этот 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 страницах.
Страница категории
Обычная страница категории отображает все товары в категории:
Работа с 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;
}
Узнайте больше о том, как изменять дизайн магазина.