Дизайн на собствен уиджет
Персонализираният дизайнер на уиджети ви позволява сами да пишете HTML и CSS на уиджета си за абонаменти, на опциите си за пакети и на рамката около тях, така че уиджетът да изглежда точно като останалата част от страницата на продукта. Той е в бета версия: поискайте от нас в чата да го включим за магазина ви.
Отваряне на дизайнера
- Отидете на Supr Bundles & Subscriptions > Дизайн.
- Кликнете дизайна Персонализиран (Liquid). При първото отваряне се показва дизайнерът, за да направите своя дизайн.
Кликнете Запазване, за да запазите промените си. Всяка запазена промяна се пази под Версии, така че винаги можете да се върнете назад.
Използване на дизайна във вашия магазин
След като дизайнът ви е запазен, Персонализиран (Liquid) може да се избира на страницата Дизайн като всеки друг дизайн, за уиджета за абонаменти, за уиджета за пакети или за двата. Изберете го и запазете страницата Дизайн. Оттам нататък всяко запазване в дизайнера е веднага на живо в уиджетите, които го използват.
Трите раздела
- Уиджет за абонаменти: опциите за абонамент и редът за еднократна покупка.
- Опции за пакети: лентата за пакети и всяка нейна опция, включително кутия по избор, фиксирани пакети, добавки и безплатни подаръци.
- Оформление: всичко, което блокът на приложението показва, в една рамка: заглавието на офертата, уиджетът за абонаменти, опциите за пакети и собствен бутон за добавяне в количката и количество.
Разделът Оформление има един превключвател, Използване на това оформление: когато е включен, вашето оформление поставя заглавието на офертата, двата уиджета и собствения ви бутон за добавяне в количката на всяка страница на продукт. Другите два раздела следват страницата Дизайн, както е описано по-горе.
Всеки раздел има списък Започнете от шаблон. Шаблонът заменя само маркировката и стиловете на този раздел, така че можете да започнете опциите си за пакети от един шаблон, а уиджета си за абонаменти от друг.
Импортиране на дизайн от нашия екип за поддръжка
Когато нашият екип изгради дизайн за вас, той ви го изпраща като един блок текст.
- Отворете дизайнера и кликнете Импортиране на дизайн.
- Поставете целия блок и кликнете Импортиране. Той заменя всеки шаблон, стилове и етикет във всичките три раздела.
- Проверете визуализацията, след което кликнете Запазване.
- Ако магазинът ви още не използва дизайна, изберете Персонализиран (Liquid) за уиджета на страницата Дизайн.
Дизайнът може също да пренесе цвета на вашата марка, заобляне на ъглите и разстояния от страницата Дизайн. Дизайнерът ги изброява в банер преди запазване, а запазването ги пази заедно с дизайна. Те променят стила и на другите ви уиджети; кликнете Запазване на страницата Дизайн както е, за да запазите дизайна без тях.
Как работи шаблонът
Шаблонът е обикновен HTML с Liquid низове в двойни скоби, като {{ selling_plan.name }} или {{ tier.price | money }}. Въведете {{ в редактора, за да видите всеки низ, който приема частта, която редактирате, и какво отпечатва; разделът Справка също ги изброява. Всичко друго в двойни скоби и всеки Liquid таг освен коментар се отказва с реда, на който се намира.
Няма условия. За да скриете нещо, което няма стойност, използвайте CSS: празна цена или бадж не печата нищо, така че :empty скрива елемента му. Избраната опция за абонамент има отметнато радио (.sss-liquid-row:has(> input:checked)), а избраната опция за пакет има класа .sss-bundle-block__tier--selected.
Приложението запазва частите, които магазинът ви изисква, за да работи: радиата, изборите на вариант, бутоните за количество и данните, които витрината чете, за да поддържа цените актуални и да добавя правилните артикули в количката. Вашата маркировка се слага около тях и вътре в тях.
Уиджет за абонаменти
- Обвивка: всичко около опциите, например заглавие или ред за доверие. Поставете опциите с
{{ sss.options }}. Можете да поставите също{{ sss.one_time }},{{ sss.add_to_cart }}и{{ sss.quantity }}. - Група на офертата: изобразява се веднъж за всяка оферта. Показвайте нейните опции като редове с
{{sss.group.options }}или направете цялата оферта една карта със списък за избор ({{ sss.plan_picker }}) или бутони ({{ sss.plan_picker_pills }}). - Опция за абонамент и Еднократна покупка: по един ред всяка.
- Ред с предимство, Безплатен подарък и Награда за лоялност: как изглежда едно предимство, подарък или награда, поставени в опция с
{{ sss.benefits }},{{ sss.gifts }}и{{ sss.rewards }}.
Цените включват спестявания, цена на ден, на порция и на единица, цена след първите поръчки и реда за таксуване. За да покажете цена на порция, добавете полето Порции под Полета на продукта и го попълнете за всеки вариант.
Опции за пакети
- Лента за пакети: всичко около опциите. Поставете ги с
{{ sss.tiers }}. - Опция за пакет: една опция, например размер на опаковка. Може да показва заглавието, баджа, цената, пълната цена, цената на единица и спестяванията на опцията. Поставете конструктора, продуктите на фиксиран пакет, добавките, подаръците и изборите на вариант където искате с
{{ sss.tier.builder }},{{ sss.tier.products }},{{ sss.tier.addons }},{{ sss.tier.gifts }}и{{ sss.tier.variant_pickers }}. Всичко, което пропуснете, следва вашата маркировка. - Продукт в пакет: как изглежда един продукт във фиксиран пакет, в опция за кутия по избор и в добавките: неговото изображение, заглавие, цена, производител и стикер.
За да покажете стикер като „Най-продаван“ върху продукт, добавете полето Стикер за пакет под Полета на продукта, след което го попълнете за продукта. Преведете го с Translate & Adapt на Shopify. Стикерите се показват за първите 20 продукта в пакети на страница.
Включете Показване на конструктора по една група, за да показвате групите на опция за кутия по избор като раздели, с отворена по една група. Всеки раздел показва името и подзаглавието на групата, които задавате за групата в Оферти.
Етикети и преводи
Вашите собствени думи се намират под Етикети и печатате един с {{ sss.labels.name }}. Етикет, използван в опция за абонамент, може да включва стойностите на тази опция, като Billed {price} {billing_frequency}, така че цялото изречение остава един етикет на всеки език. Преведете етикетите си под Настройки > Преводи > Уиджети.
Етикетите на шаблона започват на езика на вашия магазин. Когато запазвате, всеки етикет, който не сте преформулирали, се превежда и на другите езици на магазина ви, освен ако вече не сте го превели сами. Етикетите, които пишете сами, са ваши за превеждане.
Стилове
Всеки раздел има собствен стил. При запазване всяко правило се ограничава до частта, която стилизира, така че вашият CSS не може да променя останалата част от темата ви. Стилът не може да зарежда скриптове или да достига извън уиджета.
Визуализация
Визуализацията до редактора изобразява вашия дизайн така, както ще го покаже витрината. Изберете един от примерните продукти или кликнете Визуализация на продукт от магазина ви, за да го видите върху някой ваш. Шрифтовете и стиловете на вашата тема се показват само във вашия магазин. Визуализацията не изпълнява вашия JavaScript.
JavaScript
Полето JavaScript в долната част на дизайнера съдържа скрипт за вашия дизайн. Той се изпълнява веднъж на всяка страница, където дизайнът ви изобразява уиджета за абонаменти или опциите за пакети, след като са изобразени. Една страница може да показва повече от един уиджет, затова намерете всички с document.querySelectorAll.
Какво дизайнерът не прави
- Шаблон не може да използва собствените имена на класове или атрибутите за данни на приложението (като
purchase-option-*илиdata-tier-total); редакторът ви казва кой, когато откаже. - Поддържаме самия дизайнер. Изграждането и поддръжката на маркировката и CSS на вашия дизайн е ваша работа или на вашия разработчик.
Обновено на: 24/10/2026
Благодарим ви!