Как изменить стрелки вправо/влево

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

1.Скачайте это изображение: https://sassme.ecwid.com/static/v1/icons/prevnext.png

Это CSS спрайт, поэтому в одной картинке присутствуют сразу четыре картинки одновременно:

  • стрелка влево в обычном состоянии
  • стрелка влево при наведении мышкой
  • стрелка вправо в обычном состоянии
  • стрелка вправо при наведении мышкой

2. Отредактируйте изображение как вам нужно в любом редакторе изображений. 
3. Загрузите изображение на любой хостинг картинок. Важно: картинка должна быть доступна всем, т.е. быть в публичном доступе.
4. Добавьте CSS код в вашу активную CSS тему:
 

a.ecwid-productBrowser-nav-left {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center -22px no-repeat;
}

a.ecwid-productBrowser-nav-right {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center -66px no-repeat;	
}

a.ecwid-productBrowser-nav-left:hover,
a.ecwid-productBrowser-nav-left:active {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center 0 no-repeat;
}

a.ecwid-productBrowser-nav-right:hover,
a.ecwid-productBrowser-nav-right:active {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center -44px no-repeat;
}

5. Замените "http://www.example.com/images/my_custom_prevnext.png" на прямую ссылку на изображение, которое было загружено на 3 шаге.
Готово!

Как указать свой текст вместо иконок влево/вправо

По умолчанию, текстовые метки для стрелок вправо/влево пустые, поэтому вы только видите картинки стрелок на странице деталей продуктов в витрине вашего магазина. Если вы хотите показывать свой текст вместо картинок, то для этого нужно сделать следующее:

1. Добавить код, изменяющий текстовые метки:

<script>
ecwidMessages = {
  "ProductDetails.next_product_text":"Next product",
  "ProductDetails.prev_product_text":"Previous product"
}
</script>

Измените текст Next product(далее) и Previous product(назад) на нужный вам, чтобы текст появился в витрине вашего магазина. Также вы можете изменить другие текстовые метки в магазине, следуя инструкциям тут: http://help.ecwid.com/customer/portal/articles/1165473-localization-translation-faq-and-how-to

2. Добавьте этот код в ваши CSS темы в контрольной панели Эквида, чтобы спрятать картинки стрелочек вправо/влево:

/* Prev/next links in text mode */
a.ecwid-productBrowser-nav-left, 
a.ecwid-productBrowser-nav-right, 
a.ecwid-productBrowser-nav-left:hover, a.ecwid-productBrowser-nav-left:active,
a.ecwid-productBrowser-nav-right:hover, a.ecwid-productBrowser-nav-right:active {
  background: transparent;
  padding: 10px;
  white-space: nowrap; 
}
a.ecwid-productBrowser-nav-right, 
a.ecwid-productBrowser-nav-right:hover, a.ecwid-productBrowser-nav-right:active {
 text-align: right;
}
a.ecwid-productBrowser-nav-left, 
a.ecwid-productBrowser-nav-left:hover, a.ecwid-productBrowser-nav-left:active {
 text-align: left;
}

А из этой статьи вы можете узнать больше о том, как изменить дизайн витрины вашего магазина: https://support.ecwid.com/hc/ru/articles/207807915-Как-изменить-дизайн-в-Эквиде

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

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

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

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

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

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