Поиск неисправностей в теме интернет-магазина

Изображения могут отображаться не так, как вы ожидаете, но это может быть связано с тем, что само изображение несовместимо с тем, как оно используется в вашей теме. Убедитесь, что у используемого изображения правильные размеры. Ознакомьтесь со следующим списком распространённых проблем с отображением, которые могут возникнуть при загрузке несовместимого изображения:

• Если шапка отображается больше, а изображение логотипа — меньше, чем вы ожидаете, это может быть связано с пустым пространством в файле изображения логотипа. Из-за него логотип может казаться меньше, а шапка — больше. Отредактируйте файл изображения, чтобы убедиться, что оно обрезано по контуру логотипа и не содержит пустого пространства.
• Если изображение в слайд-шоу обрезается, то это сделано намеренно, чтобы изображения одинаково отображались на мобильных устройствах и на компьютерах. Поскольку на экране мобильного устройства контент выглядит гораздо меньше, при его сжатии может быть потеряно много деталей. Вместо этого контент обрезается, чтобы детали не терялись. Портретное изображение (которое выше, чем шире) также может занимать много места на экране компьютера. Поэтому у изображений в слайд-шоу есть максимальная высота. Вы можете добавить фокусную точку к изображениям в слайд-шоу, чтобы фокусная точка всегда находилась в центре изображения.

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

• Если GIF-изображение отображается некорректно и было добавлено на витрину с помощью редактора форматированного текста (например, в описание товара или в запись в блоге), проблема может быть в размере изображения. Чтобы это исправить, нажмите на GIF в редакторе форматированного текста, а затем — «Редактировать изображение». В выпадающем меню «Размер изображения» выберите «Оригинал». Затем вы можете изменить размер GIF-изображения, потянув за его углы внутрь, чтобы уменьшить, или наружу, чтобы увеличить.
• Если цвета ваших изображений на витрине значительно отличаются от исходных, возможно, они не используют стандартный цветовой профиль sRGB (Red Green Blue). Чтобы это исправить, сохраните файл в фоторедакторе с профилем sRGB. Распространённые названия для этой операции: «Оптимизировать для веба», «Настроить изображение для веба» или «Сохранить для веба». Подробнее о цветовых профилях.
• Если изображения товаров на страницах коллекций не выровнены, возможно, вам нужно изменить соотношение сторон в файлах изображений товаров, чтобы у них было одинаковое соотношение высоты и ширины, а затем снова загрузить изображения. Вы также можете использовать приложение для редактирования изображений из Shopify App Store.

Ознакомьтесь со следующими проблемами и шагами по их устранению:

• Отсутствуют товары: если товары отсутствуют на витрине, проверьте статус и каналы продаж в разделе «Публикация» для вашего товара в панели администратора Shopify. Убедитесь, что статус товара — «Активный» и что товар доступен для интернет-магазина.
• Отсутствуют коллекции: если коллекции отсутствуют на витрине, проверьте каналы продаж в разделе «Публикация» для коллекции в панели администратора Shopify. Убедитесь, что коллекция доступна для интернет-магазина и добавлена в меню.
• Коллекции отображаются, но товары отсутствуют: если коллекции отображаются, но в них нет товаров, возможно, вам нужно проверить фильтры по тегам для коллекции в настройках меню. Убедитесь, что в поле «Фильтровать коллекцию по тегам» нет тегов, из-за которых товары могут не отображаться.
• Неправильная валюта: если валюта для товаров или в коллекциях отображается неправильно, проверьте параметр «Отображение валюты» в разделе «Настройки магазина по умолчанию» в меню «Настройки» > «Общие», чтобы убедиться в отсутствии дополнительного кода. Подробнее о форматировании отображения валюты для клиентов.
• Некоторые товары отображаются по-разному: если некоторые товары или коллекции отображаются иначе, чем другие, проверьте шаблон темы, назначенный этим товарам или коллекциям в панели администратора Shopify.
• Невозможно редактировать шаблоны товаров или коллекций: если стандартные шаблоны товаров или коллекций выделены серым цветом и недоступны для выбора в редакторе тем, вам необходимо сделать как минимум 1 товар или коллекцию доступными для канала продаж «Интернет-магазин». Вы не можете редактировать эти стандартные шаблоны, если нет товаров или коллекций, доступных для предварительного просмотра изменений. Подробнее об изменении доступности коллекции и настройке доступности товаров в каналах продаж.

Если переведённый контент отображается некорректно или отсутствует на витрине, возможно, для него используются устаревшие или отсутствуют переводы. Контент также может находиться в специальном шаблоне для определённого рынка. Каждый раз, когда вы добавляете новый контент на языке по умолчанию, не забывайте снова запускать автоматический перевод или добавлять новые переводы вручную.

К переведённому контенту могут применяться следующие статусы:

• Переведено: для контента доступны переводы.
• Устарело: контент на языке по умолчанию был обновлён, но переводы не отражают эти обновления.
• Не переведено: для этого типа контента нет переводов.

При проверке переведённого контента обновите все непереведённые или устаревшие фрагменты. После этого контент должен отображаться корректно.

Подробнее о переводе и локализации вашего магазина.

Если на вашей витрине и в редакторе тем отображается разная информация, проверьте редактируемый шаблон темы. Возможно, для отображения правильной информации вам потребуется внести изменения в шаблоны темы.

Переопределения рынков позволяют создавать разные витрины для разных рынков и отображать переведённый контент. Возможно, при внесении изменений вы случайно работали в рамках определённого рынка или B2B. Найдите нужный контент с помощью выпадающего меню «Рынок» в редакторе тем и убедитесь, что он относится к правильным рынкам.

Подробнее о переопределениях рынков.

Все темы, доступные в магазине тем Shopify, являются адаптивными, то есть они подстраиваются под размер экрана. В редакторе тем можно переключать вид размера экрана во время редактирования, чтобы проверить, правильно ли отображаются страницы и изображения. Подробнее о просмотре разных размеров экрана в редакторе тем.

Многие разделы и блоки имеют настройки для мобильных устройств, которые можно изменять. Например, вы можете задать «Количество столбцов на мобильных устройствах» в разделе «Связанные товары». Чтобы устранить неполадки с отображением на мобильных устройствах, можно проверить настройки раздела для мобильных устройств для каждого шаблона.

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

Если раздел рекомендуемой коллекции или страницы коллекций отображаются в разных размерах или не выровнены при просмотре витрины на мобильном устройстве, это может быть связано с несоответствием соотношения сторон изображений. Сетки изображений, например изображения товаров в коллекции или рекомендуемой коллекции, создаются адаптивными к размеру экрана. Если соотношение сторон изображений в сетке разное, они могут по-разному отображаться в зависимости от размера экрана. Квадратные изображения товаров размером 2048 x 2048 пикселей обычно лучше всего подходят для сеток товаров. Обновите изображения, чтобы они имели одинаковое соотношение сторон для оптимизации на экранах всех размеров. Подробнее о соотношении сторон изображения.

Иногда код HTML, добавленный в редактор форматированного текста, конфликтует с кодом темы. Если проблема возникает на одной странице, например на странице товара, обычной странице или в записи блога, причиной может быть лишний код HTML. Иногда он добавляется при копировании и вставке текста с другого сайта.

Проверьте код HTML

Вы можете проверить код HTML в редакторе форматированного текста.

Порядок действий:

1. Перейдите на нужную страницу в панели администратора.
2. Нажмите кнопку «Показать HTML», чтобы просмотреть код HTML.
3. Найдите и удалите код HTML, который может вызывать проблемы с отображением.
4. Нажмите «Сохранить».

Очистите форматирование

Вы можете выделить часть текста и очистить форматирование HTML.

Порядок действий:

1. Перейдите на нужную страницу в панели администратора.
2. Выделите текст с проблемами форматирования.
3. Нажмите кнопку 🚫.
4. Нажмите «Сохранить».

Подробнее о редакторе форматированного текста.

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

Например, такой тип перенаправления может быть добавлен на витрину, чтобы направлять клиентов в разные магазины Shopify в зависимости от их местоположения. Подобный код перенаправления может находиться как в вашей теме, так и в установленном вами приложении.

Чтобы убедиться, что перенаправление не мешает работе редактора, используйте в JavaScript ссылку на переменную window.Shopify.designMode для отключения перенаправления при посещении редактора тем. Эта переменная имеет значение true, когда витрина загружена в редакторе, и false — в противном случае.

Если у вас есть сворачиваемые или другие блоки темы, в которых на всех страницах товаров отображается один и тот же контент, вам необходимо настроить динамические источники с помощью метаполей. Такое часто случается, когда продавцы добавляют к одному товару специфическую информацию, например состав или инструкции по уходу, а она отображается для всех товаров.

В сворачиваемых блоках на всех товарах отображается один и тот же текст

При добавлении контента непосредственно в сворачиваемый блок в редакторе тем этот контент отображается на всех страницах товаров. Чтобы отображать контент, специфичный для конкретного товара, необходимо использовать динамические источники с метаполями:

1. В панели администратора Shopify перейдите в раздел «Настройки» > «Метаполя» > «Товары».
2. Нажмите «Добавить определение».
3. Введите название для своего метаполя, затем нажмите «Выбрать тип контента».
4. Выберите «Текст» и «Многострочный текст».
5. Нажмите «Сохранить».
6. Перейдите на страницу товара в панели администратора и прокрутите вниз до раздела метаполей.
7. Добавьте контент для конкретного товара в созданное вами метаполе.
8. В редакторе тем перейдите к шаблону товара и найдите раздел «Сворачиваемая строка».
9. В настройке «Содержимое строки» нажмите кнопку .
10. Выберите своё метаполе из доступных вариантов.
11. Сохраните изменения.

Теперь для каждого товара будет отображаться собственный контент, если метаполе заполнено, и не будет отображаться ничего, если метаполе для этого товара пусто.

Подробнее об отображении метаполей в интернет-магазине и использовании метаполей и метаобъектов с динамическими источниками.

Если в коде темы есть синтаксическая ошибка, то в редакторе тем появится предупреждение «Обнаружена ошибка HTML» или «Ошибка темы». В сообщении об ошибке будет указан файл Liquid, который её содержит.

Предупреждение «Тема, которую вы ищете, не найдена» может появиться при наличии некорректного HTML-кода. Страница может не загружаться в редакторе тем по многим причинам, в том числе по следующим:

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

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

Порядок действий:

1. Нажмите на файл раздела .liquid, указанный в сообщении об ошибке, или проверьте файлы на наличие недавних изменений. Вы перейдёте на страницу «Редактировать HTML/CSS», и файл откроется в редакторе кода.
2. Просмотрите код в файле и попытайтесь найти неверный код HTML или Liquid. Редактор кода выделяет потенциальные синтаксические ошибки красным цветом. К распространённым проблемам относятся следующие:
   • Лишние закрывающие HTML-теги, например закрывающий тег </div> без открывающего тега <div>
   • Лишние незакрытые HTML-теги, например открывающий тег <div> без закрывающего тега </div>
   • Неправильно сформированные HTML-теги, например <div class="my-class" без >
   • Неправильно сформированный код Liquid
   • HTML-код с ошибками во включённом файле фрагмента темы
3. Найдя проблему, исправьте код в файле темы. Если вы используете режим Временная шкала в редакторе кода, чтобы выбрать предыдущую версию и пункт Восстановить содержимое, будет заменено все содержимое файла. Сначала скопируйте текущее содержимое файла в надежное место, если вы хотите сохранить какие-либо изменения.
4. Нажмите «Сохранить».
5. Нажмите «Редактировать тему», чтобы вернуться в редактор тем, и убедитесь, что сообщение об ошибке исчезло.
6. Перейдите на витрину магазина и убедитесь, что она отображается правильно.

Ошибка «Exceeded maximum number of unique handles»

Если на вашей главной странице отображается ошибка Liquid, например «Exceeded maximum number of unique handles for all_products», то это обычно означает, что вы добавили на главную страницу слишком много разделов «Рекомендуемый товар» (как правило, более 20 в большинстве тем).

Чтобы решить эту проблему:

1. В панели администратора Shopify перейдите в раздел «Интернет-магазин» > «Темы».
2. Найдите свою текущую тему и нажмите «Редактировать тему».
3. Перейдите на главную страницу.
4. Удалите несколько разделов «Рекомендуемый товар», чтобы не превышать лимиты темы.
5. Вместо этого рассмотрите возможность использования разделов «Рекомендуемая коллекция», которые позволяют более эффективно отображать несколько товаров и повысить производительность вашего магазина.

В большинстве тем значки способов оплаты по умолчанию добавлены в футер, чтобы показывать клиентам, какие способы оплаты вы принимаете. Если в футере вашей темы они не отображаются, проверьте следующее:

1. В редакторе тем перейдите в раздел «Футер» и убедитесь, что настройка «Показывать значки способов оплаты» активирована.
2. В панели администратора Shopify перейдите в раздел «Настройки» > «Платежи» и убедитесь, что у вас есть хотя бы один активный способ оплаты. Для некоторых способов оплаты может потребоваться завершение настройки аккаунта, прежде чем их значки будут отображаться.
3. Если вы используете сторонний платежный шлюз, значки оплаты могут не отображаться из-за ограничений платформы.

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