Как добавить Virtual Try-On на Squarespace

Squarespace никогда не создавался как открытая платформа электронной коммерции — она жертвует расширяемостью ради совершенства дизайна, что именно объясняет, почему добавление Virtual Try-On требует иной стратегии, чем на Shopify. Продавцы, которые ошибаются на этом этапе, в итоге получают виджет, который загружается на главной странице, но никогда не достигает страницы продукта, где ему действительно нужно находиться. Чтобы все сделать правильно, нужно понять модель внедрения кода Squarespace, прежде чем писать первую строчку кода.

Почему Squarespace Делает Это Сложнее, Чем Кажется

Squarespace не предоставляет нативную экосистему приложений, как это делает Shopify. Здесь нет эквивалента App Store Shopify, где инструмент Try-On устанавливается в тему, интегрируется с корзиной и автоматически читает варианты продуктов. Вместо этого Squarespace предлагает Внедрение Кода — панель параметров, где вы можете вставить пользовательский HTML, CSS и JavaScript в заголовок, подвал или отдельные разделы страниц сайта.

Это различие важно. На Squarespace вы не устанавливаете приложение; вы вручную размещаете тег сценария и указываете ему, страница за страницей, где отображать содержимое. Commerce (встроенная система магазина Squarespace) также ограничивает глубину взаимодействия стороннего кода с данными продукта — нет открытого API продуктов для клиентских сценариев, как это делают шаблоны Liquid Shopify с product.variants. Любая интеграция должна обойти это, либо прочитав то, что видно в DOM, либо сопоставив идентификаторы продуктов, которые вы предоставляете вручную.

Где Находится Внедрение Кода

Внедрение кода на Squarespace имеет три уровня, и выбор правильного уровня определяет, будет ли кнопка Try-On отображаться везде или нигде.

Схема, которая работает надежно: загрузите скрипт виджета YourSizer глобально во встроенный подвал сайта (Параметры → Дополнительно → Внедрение Кода), затем поместите небольшой фрагмент встраивания — <div> с идентификатором продукта — в описание отдельного продукта или блок кода на этой странице. Это гарантирует, что тяжелый скрипт загружается один раз за визит на сайт, а не один раз за страницу продукта, что важно для скорости страницы на уже насыщенных JavaScript-ом шаблонах Squarespace.

Работа в Рамках Структуры Страницы Продукта Commerce

Страницы продуктов Squarespace построены из фиксированных блоков контента, и Commerce (тарифы Basic или Advanced) ограничивает возможности их переупорядочивания. Обычно нельзя напрямую внедрить сценарий в область кнопки "Add to Cart" без использования блока кода, который Squarespace рассматривает как элемент контента, а не как функциональный элемент.

Практическое решение — добавить блок кода непосредственно над или под кнопкой Add to Cart в редакторе контента страницы продукта, а затем этот блок отображает кнопку "Try It On", которая открывает виджет в модальном окне или боковой панели. Поскольку шаблоны продуктов Squarespace различаются (версии Standard, Modern и старые версии отличаются), протестируйте это размещение как минимум на двух типах продуктов, прежде чем предполагать, что оно будет отображаться последовательно во всем каталоге — блок, который хорошо позиционируется под "Add to Cart" в одном шаблоне, может оказаться ниже раздела отзывов в другом.

Сопоставление Продуктов Без API Продуктов

Поскольку Squarespace по умолчанию не предоставляет доступный для клиента feed продуктов, сопоставление виджета Try-On с правильным изображением продукта и таблицей размеров требует явной передачи идентификаторов, а не полагаться на автоматическое обнаружение. На практике это означает использование SKU продукта или ID продукта, сгенерированного Squarespace, как атрибута данных на встроенном <div>, чтобы виджет знал, какой предмет одежды и данные размеров загружать, не анализируя страницу.

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

Тестирование Интеграции Перед Запуском

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

Краткий контрольный список, который поймает большинство проблем перед запуском:

• Загрузите опубликованную страницу (не предпросмотр редактора) как на рабочем столе, так и на реальном мобильном устройстве — внедренные сценарии иногда молча отказывают в режиме предпросмотра.
• Подтвердите, что кнопка Try-On появляется на каждом релевантном шаблоне продукта, а не только на том, который вы сначала тестировали.
• Проверьте, что модальное окно или панель не будут обрезаны липким заголовком Squarespace или полосой объявлений.
• Убедитесь, что виджет продолжает загружаться после обновления шаблона или плана Commerce Squarespace, так как внедренный код может быть сброшен во время крупных обновлений сайта.

Учитывая, что одежда и обувь уже имеют рейтинг возврата намного выше, чем другие категории розничной торговли — обувь, в частности, находится рядом с вершиной — виджет Try-On, который молча выходит из строя на мобильных устройствах, является реальной стоимостью, а не косметическим дефектом.

Где Находится YourSizer

Виджет YourSizer построен для встраивания именно такого типа ручного внедрения, что делает его жизнеспособным для ограничений Squarespace. Основной скрипт загружается один раз по всему сайту, а отдельные встраивания продуктов — это легкие фрагменты, которые ссылаются на ID продукта, а не зависят от живого API продуктов — соответствуя тому, как Squarespace Commerce фактически предоставляет данные.

Для продавцов, использующих Squarespace вместо Shopify или настройки headless, это означает, что работа по настройке в основном касается размещения (правильное позиционирование блока кода для каждого шаблона) и сопоставления продуктов (связывание SKU с данными размера и соответствия), а не пользовательской разработки. Компромисс заключается в том, что текущие изменения каталога требуют повторной проверки размещения после обновлений шаблона, что является специфичным для Squarespace шагом обслуживания, достойным планирования в бюджет. Если вы решаете, лучше ли Virtual Try-On или более простой поток рекомендации размеров подходит для вашего каталога, стоит прочитать, как Virtual Try-On сравнивается с рекомендацией размеров, прежде чем полностью встраивать решение.

Часто задаваемые вопросы

Могу ли я добавить Virtual Try-On на Squarespace без разработчика?

Для одного продукта или небольшого каталога — да. Внедрение кода требует только вставки сценария в панель "Дополнительные Параметры" и добавления блока кода на каждую страницу продукта, что большинство владельцев магазинов могут сделать без пользовательской разработки. Более крупные каталоги выигрывают от помощи разработчика в основном на этапе сопоставления ID продукта, поскольку ручное маркирование десятков или сотен SKU утомительно, даже если каждый отдельный шаг прост.

Поддерживает ли Squarespace Commerce приложения Try-On третьих сторон изначально?

Нет. В отличие от Shopify, Squarespace не имеет торговой площадки приложений, которая напрямую устанавливает инструменты Try-On на страницы продуктов. Все работает через внедрение кода и блоки кода, что означает, что интеграция ближе к ручному встраиванию, чем к установке приложения, и ее нужно повторно проверять каждый раз, когда Squarespace выпускает обновление шаблона.

Замедлит ли добавление виджета Try-On мой сайт Squarespace?

Это может произойти, если сценарий загружается на каждой странице, вместо того чтобы отложить его для страниц продуктов, где он фактически используется. Загрузка основного скрипта один раз во встроенный подвал сайта и сохранение встраиваний, специфичных для продукта, в легком формате ограничивает влияние на производительность, но стоит проверить скорость страницы до и после, используя такой инструмент, как Google PageSpeed Insights или собственную аналитику Squarespace.

В чем разница между внедрением кода и встраиванием страницы продукта?

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

Заключение

Отсутствие нативной экосистемы приложений Squarespace делает Virtual Try-On скорее ручной сборкой, чем установкой в один клик, но базовая механика — внедрение кода, встраивание на уровне продукта и тщательное тестирование шаблона — вполне достижима для большинства владельцев магазинов. Дополнительное время настройки в начале, как правило, окупается меньшим количеством возвратов, связанных с размером, как только виджет запущен и проверен во всех шаблонах, что оправдывает внимательный, страница за страницей подход, который требует Squarespace.