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

Вы можете менять дизайн отдельных страниц Эквида, например, страницы товара, оформления заказа или страница профиля покупателя в магазине. Эквид поддерживает динамические CSS классы для каждой страницы магазина. Для каждой из этих страниц есть родительские <div> классы в CSS коде витрины. С помощью этих классов можно строить правила оформления для отдельно взятой страницы.

Помочь в розысках этих классов витрины магазина помогут инструменты разработчика того браузера, которым вы пользуетесь, например, инспектор для Chrome, Safari или FireFox.

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

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

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

_______________.png

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

Чтобы изменить дизайн всех страниц товаров, используйте этот 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;
}

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

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

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

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

Простите за это! Что было не так?
Пользователи, считающие этот материал полезным: 32 из 65