Я внёс изменения в CSS тему, но они не отображаются

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

 

 

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

 

  • Вы используете CSS код, который составлен не верно. Убедитесь, что в нём нет синтаксических ошибок;
  • Вы не активировали новую CSS тему. Проверьте, что CSS тема активна и вы сохранили изменения;
  • Ваш браузер сохранил в кэше предыдущю версию CSS темы. Очистите кэш браузера и посмотрите  на витрину ещё раз. Проверьте, появились ли изменения в другом браузере;
  • Неправильно создана CSS тема. Вы дублировали стандартную CSS тему целиком вместо того, чтобы добавлять только те правила, которые вы переписали.

 

CSS тема Эквида работает так: сначала выполняются правила стандартной темы, а затем - правила вашей темы.

Правила вашей темы выполняются после правил стандартной темы, и могут переписать их. Так что ваша CSS тема должна содержать только те правила, которые переписывают правила стандартной темы.

Например, у нас есть элемент с классом “example”. В стандартной теме такой код:

div.example {
  color:black;
} 

 

Мы хотим сделать цвет элемента белым. Так что добавляем следующий код: 

div.example {
  color:white;
}


И в итоге правила будут выполняться так:

 div.example {
  color:black;
}
div.example {
  color:white;
} 

Поскольку правило для белого цвета идёт последним, применится именно оно.

 

Если вы просто скопируете базовую CSS тему в свою тему и удалите/измените некоторые правила, базовая тема будет иметь необходимые правила, а ваша - нет. В результате изменения не применятся.

Так что если вы скопируете правило из нашего примера и удалите color:black, вывод будет выглядеть так:

div.example {
  color:black;
}
div.example {
}

И цвет элемента останется чёрным.

 

Поэтому нужно добавлять только те CSS правила, которые вы хотите изменить.

 

Изменения видны в одном браузере, но не отображаются в другом

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

 

Обычно это означает, что с вашей темой всё в порядке, поэтому ни одно из вышеописанных решений не работает. Причина, по которой Эквид может отображаться без изменений в CSS, в исходном коде страницы с магазином.

 

Загрузка CSS темы вашего магазина начинается после того, выполняется этот код:

 <script type="text/javascript" src="http://app.ecwid.com/script.js?STORE_ID"></script>

В идеале этот скрипт должен встречаться в исходном коде страницы только один раз (это ускоряет загрузку Эквида). Если вы установили несколько виджетов Эквида на одну страницу, то в коде этой страницы может появиться несколько таких строчек.

 

Ситуация, когда CSS тема магазина отображается в одном браузере, но не отображается в другом, вызвана как раз тем фактом, что в исходном коде страницы с магазином несколько раз встречается app.ecwid.com/script.js и ID магазинов в этих скриптах не совпадают. CSS тема каждого магазина загружается заново с каждой такой строчкой. В некоторых браузерах тема, которая загрузилась позже, может переписывать ту, которая загрузилась раньше. А в некоторых браузерах этого не происходит.

 

Чаще всего пользователи Эквида вставляют лишние строчки

<script type="text/javascript" src="http://app.ecwid.com/script.js?1003"></script>

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

 

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

  • Либо оставьте только одну строчку вида <script type="text/javascript" src="http://app.ecwid.com/script.js?1003"></script> с ID вашего магазина
  • Либо проверьте все строчки вида app.ecwid.com/script.js в исходном коде страницы и убедитесь, что каждая содержит один и тот же ID.

Примените любое из этих решений и магазин будет отображаться с вашей собственной CSS темой.

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

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

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

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

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

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