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

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

Это вообще законно?

Да. Вы можете менять дизайн отдельных страниц Эквида по своему усмотрению, как хотите и сколько хотите.

Эквид поддерживает динамические CSS классы для каждой страницы магазина. Будь это страницы категории, товара, шаг оформления заказа или страница профиля покупателя. Для каждой из этих страниц есть родительские <div> классы в 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;
}

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

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

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


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

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 8 из 11
Остались вопросы?
Обратитесь за помощью
  • Форум

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

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.