# Добавьте торговлю на уже существующий сайт.

> Один асинхронный тег script превращает любой сайт в магазин. Работает на WordPress, Webflow, Ghost, Carrd, Framer, статичном HTML, React / Next.js / Vue. Без пересборки, плагина и смены темы.

Один асинхронный тег script, пара HTML-контейнеров, и ваш сайт становится магазином. Работает на WordPress, Webflow, Ghost, Carrd, Framer, обычном HTML или в любой CMS, где можно вставить теги script. Без пересборки. Без плагина. Без смены темы.

[Начать бесплатный период](https://app-v3.shoprocket.io/signup?lang=ru)[Посмотреть код](#the-snippet)

14 дней бесплатно

Без банковской карты

Комиссия платформы 0%

Работает на любом тарифе

1

Строка для встраивания

Любой

Сайт

Полный

Корзина и оформление заказа

0%

Комиссии платформы

● Проблема

## У вас есть сайт. Вы хотите продавать на нём. А не перестраивать его.

Большинство торговых платформ хотят, чтобы вы заменили свой сайт на их. WordPress просит WooCommerce. Wix хочет Wix Stores. Squarespace хочет Squarespace Commerce. Shopify хочет всё на своём стеке. Вам нужен был магазин, а не проект по миграции.

01

### Ваш сайт уже работает.

Ваш бренд, контент, блог, анимации, SEO. Работа, которую вы уже сделали. Ничего из этого не должно меняться ради добавления кассы.

02

### Дело не в вашей CMS.

WordPress хорош. Webflow прекрасен. Ghost идеален для контента. Carrd быстр. Никто из них не должен заставлять вас уходить из-за того, что они не умеют торговать из коробки.

03

### Магазин должен жить внутри вашего сайта.

Не на отдельном поддомене и не перенаправлением на размещённую корзину. Страница товара ваша, оформление заказа происходит внутри неё, и клиент никуда не уходит.

● Как это работает

## Три строки HTML. Четыре типа виджетов.

Вставьте загрузочный скрипт один раз. Разместите HTML-контейнеры там, где нужна торговля. Виджет автоматически подключается к каждому найденному при отрисовке.

Установка

### Один тег script. Асинхронный. Неблокирующий.

Тег script размещается в head сайта, перед закрывающим тегом body или в шаблоне заголовка вашей CMS. Он загружается асинхронно, поэтому никогда не блокирует отрисовку страницы. При загрузке он ищет на странице любой HTML-элемент с атрибутом data-shoprocket и подключает на его месте нужный виджет. Если виджетов на странице нет, он всё равно запускает плавающую корзину, чтобы кнопки магазина в других местах сайта продолжали работать.

- ✓ Асинхронная загрузка, без влияния на LCP и CLS
- ✓ Автоматически подключается к каждому элементу data-shoprocket на странице
- ✓ Плавающая корзина запускается по всему сайту, даже на страницах без виджетов

● Типы виджетов

## Четыре формы, все на одной странице.

Выбирайте нужный там, где он нужен. На главной может быть виджет избранного товара, на странице магазина - полный каталог, а в статье - встроенный виджет одного товара. Всё на одном сайте и из одного магазина.

01

### Каталог.

Полная сетка товаров с фильтрами, категориями и поиском. Разместите её на странице /shop, и клиенты смогут просматривать весь магазин.

02

### Товар.

Одна карточка товара с ценой, вариантами и кнопкой добавления в корзину. Разместите её внутри статьи или на посадочной странице рядом с описанием предложения.

03

### Корзина.

Сама корзина как виджет страницы. Или пусть плавающая корзина работает по всему сайту: скрипт запускает её автоматически.

04

### Оформление заказа.

Корзина, адреса, доставка и сводка заказа внутри вашей страницы. Последний шаг оплаты перенаправляет на процессор для соблюдения PCI и возвращает клиента на ваш сайт.

● Работает там, где вы живёте

## Если разрешён тег script, Shoprocket встраивается.

Специально протестировано и описано для конструкторов ниже. На практике работает везде, где можно вставить HTML.

01

### WordPress.

Собственный хостинг или WordPress.com. Любая тема, любой конструктор страниц (Elementor, Gutenberg, Divi и т. д.). WooCommerce не нужен. Плагин поддерживать не нужно.

02

### Webflow.

Используйте элемент Embed там, где нужен магазин. Оставайтесь на своём тарифе Webflow CMS, обновление до Ecommerce не нужно.

03

### Ghost.

HTML-карточка в любом посте или на странице. Ghost идеален для авторов, которые выпускают контент вместе с товарами.

04

### Carrd, Framer, Notion.

Одностраничные конструкторы и конструкторы с упором на дизайн. Работает со встраиваниями Carrd Pro Standard, кодовыми компонентами Framer и Notion через обёртки Super.so / HeyNotion.

05

### Статичный HTML и JAMstack.

Cloudflare Pages, Netlify, Vercel, обычный статичный HTML, любая сборка Jekyll / Hugo / Astro / 11ty. Вставьте код и работайте.

06

### React, Next.js, Vue, Svelte.

Установите npm-пакет \`@shoprocket/widget\` для тесной интеграции с фреймворком. Импортируйте компонент и подключите там, где нужен магазин.

● Производительность

## Ваши Core Web Vitals остаются в зелёной зоне.

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

В цифрах

### Асинхронный скрипт, кешированная конфигурация, быстрое подключение.

Загрузочный скрипт доставляется асинхронно, поэтому LCP не страдает. Конфигурация магазина берётся из нашего API и кешируется на границе сети (TTL 1 час), поэтому повторные просмотры страниц не вызывают новых запросов. Виджет отрисовывается в зарезервированном контейнере, поэтому нет смещения макета. Сайты, у которых в Lighthouse всё было зелёным до встраивания, остаются зелёными после него.

- ✓ Асинхронный тег script: нулевое влияние на LCP и CLS
- ✓ Конфигурация магазина кешируется на границе сети и отдаётся из CDN при повторных просмотрах
- ✓ Зарезервированные контейнеры подключения означают отсутствие совокупного смещения макета

● Частые вопросы

## Ответы на вопросы о встраивании.

О чём спрашивают перед тем, как вставить код.

Где на самом деле работают корзина и оформление заказа? +

Корзина, адреса и выбор доставки работают внутри встраивания на вашей странице, никто не уходит с вашего сайта во время просмотра и выбора. Последний шаг оплаты перенаправляет на подключённый платёжный процессор (Stripe, PayPal) для соблюдения PCI и возвращает клиента на ваш сайт для подтверждения заказа. Так работает любой современный платёжный процесс; делать вид, что это не так, было бы нечестно.

Можно ли разместить несколько виджетов на одной странице? +

Да. Загрузчик ищет на странице каждый элемент с атрибутом data-shoprocket и подключает каждый из них. На одной странице могут быть карусель избранных товаров, сетка каталога под ней и встроенное оформление заказа где-то ещё. Всё из одного магазина.

Замедляет ли это мой сайт? +

Значимого влияния нет. Загрузочный скрипт асинхронный, поэтому не блокирует отрисовку страницы. Конфигурация магазина кешируется на границе сети, поэтому повторные посетители не вызывают новых запросов. Виджеты подключаются в зарезервированные контейнеры, поэтому нет совокупного смещения макета. Если ваш сайт проходил Core Web Vitals раньше, он проходит их и после.

А если я использую React / Next.js / Vue? +

Установите npm-пакет \`@shoprocket/widget\` напрямую. Импортируйте компонент, подключите там, где нужен магазин, передайте свойства для настройки. Это даёт детальный контроль, недоступный при встраивании через тег script.

А Wix и Squarespace? +

Squarespace работает без проблем. Используйте элемент Code Block на тарифе Core или выше, вставьте код, готово. Wix изолирует каждое сторонне встраивание в iframe, что ломает оформление заказа, поэтому мы это не рекомендуем; честный ответ для пользователей Wix - размещённая витрина Shoprocket или переход на конструктор, допускающий настоящие встраивания. Смотрите нашу страницу о Wix с тремя путями дальше.

Можно ли использовать собственный домен? +

Да. Виджет работает на том домене, на котором находится страница. Ваши товары, корзина и оформление заказа живут на your-site.com. Без отдельного поддомена Shoprocket и без перенаправлений. Клиенты не замечают, что за торговым слоем стоит сторонний сервис.

Как настроить внешний вид виджета? +

Виджет наследует CSS вашего сайта для контекста макета (ширина контейнеров, базовая типографика). Для самого торгового интерфейса выберите одну из более чем 40 тем, а также светлую / тёмную цветовую схему через атрибуты data на элементе подключения. Для более глубокой настройки задайте CSS-переменные в таблице стилей сайта, и виджет их подхватит.

А если у меня разные конфигурации встраивания для разных страниц? +

Создайте несколько конфигураций встраивания в панели Shoprocket, каждая со своим ID, темой и набором функций. Укажите для каждого HTML-контейнера нужный ID встраивания. На главной может быть компактное встраивание избранных товаров, а на странице магазина - полный каталог, и всё в одном магазине.

Действительно ли комиссия платформы Shoprocket 0%? +

Да. Ваш платёжный процессор (Stripe, PayPal и т. д.) по-прежнему берёт стандартную комиссию за обработку, это цена перевода денег, но Shoprocket ничего не добавляет сверху. Комиссия платформы 0% действует на каждом тарифе, включая любую установку встраивания.

## Ваш сайт. Теперь с торговлей.

14 дней бесплатно. Без банковской карты. Вставьте код, запустите магазин, сохраните сайт.

[Начать бесплатный период](https://app-v3.shoprocket.io/signup?lang=ru)[Свяжитесь с нами](https://v3.shoprocket.io/ru/contact.md)

---

- HTML version: https://v3.shoprocket.io/ru/features/sell-on-any-website
- Language: Русский (ru)
- Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-on-any-website.md)