Как встроить флипбук в магазин Shopify

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

В этом руководстве мы разберём весь процесс встраивания флипбука FlipLink в Shopify: от получения кода встраивания до размещения на страницах товаров и отдельных лендингах.

Зачем использовать флипбуки в Shopify

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

• Каталоги товаров — позвольте покупателям листать полный каталог с анимацией переворота страниц вместо прокрутки статичных сеток
• Лукбуки — бренды в сфере моды, мебели и стиля жизни могут представлять сезонные коллекции как захватывающие цифровые лукбуки
• Таблицы размеров — замените громоздкие PDF-загрузки встроенной интерактивной таблицей размеров, которую покупатели могут листать прямо на странице товара
• Брендовые журналы — делитесь историями бренда, закулисным контентом или редакционными материалами непосредственно в своём магазине
• Прайс-листы для оптовиков — предоставьте B2B-покупателям элегантный способ просматривать цены без отдельного портала

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

Шаг 1: Создайте флипбук

Прежде чем что-то встраивать, нужен флипбук. Если вы ещё не создавали его:

1. Зарегистрируйтесь на go.fliplink.me
2. Загрузите PDF — каталог товаров, лукбук или любой многостраничный документ
3. FlipLink автоматически конвертирует его в интерактивный флипбук с реалистичной 3D-анимацией переворота страниц
4. Настройте внешний вид, добавьте CTA-кнопки со ссылками на товары в Shopify и настройте параметры распространения

После публикации флипбука вы готовы получить код встраивания.

Шаг 2: Получите код встраивания

FlipLink предоставляет стандартный iframe-код для каждого опубликованного флипбука:

1. Откройте флипбук в панели управления FlipLink
2. Нажмите кнопку Поделиться
3. Выберите вкладку Встроить
4. Скопируйте iframe-код

Код встраивания выглядит примерно так:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Значение height можно скорректировать в зависимости от макета вашей темы Shopify. Для большинства тем высота от 500 до 700 пикселей работает хорошо.

Подробнее об опциях встраивания через iframe читайте в нашем руководстве как встроить флипбук с помощью iframe.

Шаг 3: Встройте на страницу товара Shopify

Добавление флипбука на конкретную страницу товара — отличный способ заменить или дополнить статичную таблицу размеров или спецификацию товара.

Через редактор темы Shopify

1. Перейдите в Интернет-магазин → Темы в панели администратора Shopify
2. Нажмите Настроить на активной теме
3. Перейдите к шаблону страницы товара
4. Добавьте новый раздел — выберите Custom Liquid (или Custom HTML в зависимости от темы)
5. Вставьте iframe-код встраивания в поле кода
6. Разместите раздел там, где должен появиться флипбук (ниже описания товара — распространённый выбор)
7. Нажмите Сохранить

Через метаполя для динамического встраивания

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

1. Создайте метаполе товара flipbook_url (тип: URL)
2. Для каждого товара вставьте URL встраивания флипбука в метаполе
3. В разделе Custom Liquid используйте:

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

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

Шаг 4: Встройте на отдельную страницу Shopify

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

1. Перейдите в Интернет-магазин → Страницы в панели администратора Shopify
2. Создайте новую страницу или откройте существующую
3. В редакторе страницы нажмите кнопку Показать HTML (значок <>)
4. Вставьте iframe-код встраивания прямо в HTML
5. Вернитесь в визуальный редактор, чтобы убедиться, что всё выглядит правильно
6. Сохраните страницу

Также можно использовать редактор темы, чтобы добавить раздел Custom Liquid к любому шаблону страницы, — это даёт больше контроля над расположением и стилизацией.

Шаг 5: Сделайте встраивание адаптивным

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

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

padding-bottom: 75% создаёт контейнер с соотношением сторон 4:3. Скорректируйте это значение в соответствии с размерами страниц вашего флипбука:

• Соотношение 4:3 (альбомная): padding-bottom: 75%
• Соотношение 16:9 (широкоформатная): padding-bottom: 56.25%
• Соотношение 3:4 (портретная): padding-bottom: 133%

Это гарантирует корректное масштабирование флипбука на любых экранах без неудобных полос прокрутки или обрезанного контента.

Шаг 6: Добавьте CTA-кнопки со ссылками на товары

Одна из самых мощных функций для магазинов Shopify — добавление CTA-кнопок внутри флипбука с прямыми ссылками на страницы товаров. Это превращает каталог из пассивного просмотра в активный инструмент продаж.

В редакторе FlipLink:

1. Откройте флипбук для редактирования
2. Выберите страницу, на которую хотите добавить призыв к действию
3. Добавьте CTA-кнопку с текстом вроде «Купить» или «Посмотреть товар»
4. Укажите ссылку на страницу товара Shopify (например, https://yourstore.myshopify.com/products/product-handle)
5. Повторите для каждого товара, представленного в каталоге

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

Шаг 7: Настройте белый список доменов

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

1. В панели управления FlipLink откройте настройки флипбука
2. Перейдите в раздел белого списка доменов
3. Добавьте свой домен Shopify (например, yourstore.com и yourstore.myshopify.com)
4. Сохраните настройки

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

Советы для успешного использования флипбуков в Shopify

Оптимизируйте PDF перед загрузкой. Сожмите изображения в исходном PDF, чтобы уменьшить размер файла. Более лёгкие флипбуки загружаются быстрее, что важно для мобильных покупателей на медленных соединениях.

Используйте информативные заголовки страниц. Оглавление FlipLink формируется на основе структуры вашего PDF. Хорошо организованные разделы помогают покупателям быстро переходить к нужным категориям товаров.

Тестируйте на разных устройствах. Просмотрите встроенный флипбук на десктопе, планшете и мобильном устройстве перед публикацией. Адаптивные темы Shopify справляются с большинством случаев, но убедитесь, что адаптивная обёртка работает с вашей конкретной темой.

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

Обновляйте контент регулярно. Обновляйте флипбук при добавлении новых товаров или запуске сезонных акций. Код встраивания остаётся прежним — просто обновите флипбук в панели управления FlipLink, и изменения мгновенно появятся в вашем магазине Shopify. Код темы трогать не нужно.

Ссылайтесь на флипбуки из email-рассылок. Помимо встраивания в магазин, делитесь прямыми ссылками на каталоги флипбуков в маркетинговых письмах и публикациях в социальных сетях. Функции распространения FlipLink упрощают привлечение трафика из нескольких каналов обратно в ваш магазин Shopify.

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

Начните встраивать флипбуки в ваш магазин Shopify

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

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