Статии за: Уиджети

Абонаментният уиджет

За да стигнете до тази страница, отидете на Supr Bundles & Subscriptions > Дизайн


Страницата Дизайн е мястото, където управлявате как изглеждат вашите абонаментни и пакетни уиджети на страниците на продуктите: дизайна, цветовете, ъглите и разстоянията, кои части се показват, текста, който клиентите четат, и вашия собствен CSS. И двата уиджета се оформят заедно на тази страница, така че си пасват помежду си и с вашата тема. Това е единното изживяване на уиджетите: един набор от контроли, и двата уиджета, всеки дизайн.


Ако страницата показва Уиджетите ви още не са активни, първо кликнете върху Активиране на уиджета. Вижте Как да активирате абонаментния уиджет в онлайн магазина.


Съдържание



Какво е абонаментният уиджет?


Абонаментният уиджет стои над бутона за добавяне в количката и показва начините, по които може да се купи един продукт: еднократната покупка и вашите опции за абонамент. Клиентите избират честотата на доставка, виждат отстъпката и добавят продукта в количката си. Ако офертата ви има и опции за пакет, уиджетът за пакети се показва заедно с него на същата страница на продукта.


Какво предлагат уиджетите, кои опции, кои отстъпки и дали редът за еднократна покупка се показва, се задава във всяка оферта в Оферти. Как изглеждат уиджетите и общият текст, който показват, се задава на тази страница.


Как е подредена страницата


  • Визуализацията отляво, която ви следва, докато превъртате.
  • Една карта с настройки отдясно, със секции в този ред: Дизайн, Цветове, Форма, Разстояния, Шрифт, Елементи и Персонализиран CSS.
  • Етикети, отделна карта под картата с настройки, за текста, който четат вашите клиенти.
  • Настройки на добавките под двете, за допълненията около уиджета, като значката до цената на продукта, текста на бутона за добавяне в количката и избора на дата за доставка. Вижте Добавки на страницата на продукта.
  • Възстановяване на предишния дизайн, само при магазини, които са оформяли уиджетите си, преди да съществува тази страница.
  • Искате ли помощ да го напасвате към вашата марка?, с бутон Чат с експерт, който отваря чат с нашия екип.


Визуализацията


Визуализацията е до контролите и ви следва, докато превъртате, така че виждате какво променяте, докато го променяте. Показва страницата на вашия продукт така, както я вижда купувачът, с пакетния и абонаментния уиджет, наредени в реалния ред на показване, а под тях полето за дата на доставка, ако го използвате.


Използвайте Визуализация на продукт над нея, за да видите опциите и цените на реален продукт вместо примерни данни, и Визуализация на вариант, за да проверите продукт, чиито варианти имат различни цени.


Всяка промяна се появява във визуализацията, преди да я запазите, така че можете да опитате няколко неща и да ги отхвърлите. На настолен екран визуализацията никога не става по-висока от прозореца: заглавието и долният ѝ край остават на място, а уиджетите се превъртат между тях.


Цветовете и разстоянията в реалната ви тема може все пак да се различават леко, защото визуализацията работи в администрацията на Shopify, а не във вашия магазин. Отворете страница на продукт във вашия магазин, за да видите крайния резултат.


Дизайн


Тази секция показва абонаментния дизайн и пакетното оформление, които са активни в момента, и двете с миниатюра.


  1. Кликнете върху Промяна, за да отворите Избор на дизайн.
  2. Използвайте превключвателя най-отгоре, за да изберете Абонаментен уиджет или Пакетен уиджет. Можете да пишете в Търсене на дизайни или да филтрирате по категория.
  3. Кликнете върху дизайна, който искате. Галерията се затваря и визуализацията го показва.
  4. Запазете с лентата за запазване в горната част на страницата. Нищо не се променя във вашия магазин, докато не запазите.


Абонаментни дизайни по категориите на галерията:


  • Конверсия
    • Checkbox: една отметка за превключване между еднократна покупка и абонамент.
    • Aurora: плавни градиентни рамки с блестящ ефект. С него започва всеки нов магазин.
    • Lure: водещият дизайн, с подчертани предимства и банер за отстъпка.
  • Класически
    • Classic+: подробно оформление с място за предплатени опции и няколко избора. Цената е най-горе и следва опцията, избрана от клиента, а всяка опция запазва собствена цена с таг за отстъпка до нея.
    • Dropdown+: цялата подробност в компактен падащ списък. Цената е най-горе и следва опцията, избрана от клиента, така че редовете в падащия списък остават обикновен списък с честоти.
    • Panel+: оформление с раздели и радио бутон на всяка опция.
  • Минималистични
    • Classic: просто оформление за опции с плащане за всяка поръчка, с до три избора.
    • Dropdown: най-компактният начин да покажете опциите си.
    • Panel: чисти и семпли бутони-панели.
  • Естетични
    • Blobs: анимиран стил, който привлича вниманието.


Пакетни оформления:


  • Panels: редове, всеки в собствен панел с рамка. С него започва всеки нов магазин.
  • Cards: хоризонтални карти, подходящи за сравняване на две или три опции една до друга.
  • List: вертикални редове с радио бутон на всяка опция. Най-компактното.


Всеки дизайн се оформя от тази страница, в секциите по-долу, така че няма какво да отваряте и нищо не се задава два пъти. Във вашия магазин е активен само един абонаментен дизайн и едно пакетно оформление наведнъж и всяка оферта ги използва. Настройките на останалите се запазват, така че превключването напред и назад не ви струва нищо.


Смяната на дизайна никога не засяга вашите оферти, цени или абонати.


Neon и дизайните Custom вече не се предлагат в галерията. Магазин, който вече използва такъв, го запазва и все още вижда картата му. Дизайнът Custom е написан на HTML и CSS, а не съставен от настройки, затова има връзка Персонализиране, която отваря кода, написан за вас от нашия екип. Вижте Какво се случи с редактора на уиджета.


След като запазите промени на тази страница, в тази секция се появява бутон Връщане към стандартните. Той връща цветовете, формата, разстоянията, шрифта, елементите, етикетите и персонализирания CSS към това, с което приложението се доставя, за всеки дизайн, и запазва дизайна и пакетното оформление, които сте публикували. Както всичко тук, влиза в сила само когато запазите.


Цветове


Едно решение, записано във всички дизайни наведнъж, така че ако по-късно смените дизайна, магазинът ви запазва облика си. Всеки вид отговор стои на собствен ред под малко заглавие:


  • От вашата тема, първо: пунктираната мостра Наследяване от вашата тема взема всичко от темата ви, следвана от собствените цветови схеми на темата, показани като мостри в собствените им цветове. Изборът на схема взема нейния фон и текст. Този ред се появява само ако темата ви публикува цветови схеми.
  • Основен цвят и Фон, при теми, които публикуват цветова палитра вместо цветови схеми, като Horizon. Вижте по-долу.
  • Един цвят и всичко го следва: обикновените цветове, подредени по цветния кръг от синьо до розово и червено, с неутралните накрая и вашите собствени в края. Изборът на един задава основния ви цвят и всичко, което уиджетите рисуват, го следва: избраната от клиента опция, рамките, радио бутоните и значките за спестяване. Текстът върху значката се избира автоматично, така че да остане четлив при всеки цвят. За повечето магазини това е цялата работа.
  • Градиент: тринадесет готови преливания, всяко начертано в собствените си цветове, започващи с Aurora и завършващи с единственото неутрално, Ink & silver. Между тях са Midnight, Blossom, Rose, Sunset, Sand, Ember, Mint, Forest, Ocean, Lagoon и Amethyst. Изберете едно и трите му спирки се появяват под него, Основа, Втора и Трета, за да можете да ги коригирате. Този ред се появява само докато е публикуван дизайн, който може да рисува градиент; при останалите няма да има какво да прави.


Ако темата ви публикува цветова палитра вместо цветови схеми, няма двойка за наследяване, така че избирате сами от два реда, начертани в собствените цветове на темата:


  • Основен цвят е цветът, в който са начертани вашите уиджети: избраната от клиента опция, рамките, радио бутоните и значките. Текстът ви го следва, така че няма какво допълнително да задавате.
  • Фон е картата зад него.


Един цвят не може да бъде и двете, затова изборът на цвят, който другият ред вече използва, разменя двата. Обръщането на светла на тъмна двойка е едно кликване вместо три.


Те са алтернативи, а не пластове, защото отговарят на един и същ въпрос. Градиентът е цвят като всеки друг: неговата спирка Основа е това, което взема останалата част от уиджета, така че избраната опция, рамките и значките я следват. Ако изберете обикновен цвят вместо това, тези дизайни се чертаят плоски, а изборът на схема на темата взема двойката на тази схема и извежда цвета от нейния текст.


Градиентът достига всичко в уиджета, което е предназначено да привлича окото, а не само контура му. На избраната от клиента опция той оцветява името на опцията и цената. На всяка опция, избрана или не, оцветява значките, чиповете за спестяване и редовете за безплатен подарък и безплатна доставка. Редовете за подарък и безплатна доставка се движат бавно, което привлича окото, без да го отклонява от цената. Вашата значка за отстъпка взема преливането във всеки дизайн, защото значката на опция за абонамент и значката на опция за пакет са един и същ обект; дайте на значката собствен цвят на нейния ред в Елементи и тя го запазва.


Ред за безплатен подарък или безплатна доставка е очертан във вашия цвят, докато опцията му не е избрана, и се запълва с него, щом клиентът избере тази опция. Това важи както за обикновен цвят, така и за градиент, така че редът от опции показва един плътен цветен блок върху опцията, която купувачът действително е избрал, а останалите се четат като оферти, които чакат да бъдат приети.


Върху каквото и преливане да попаднете, текстът, отпечатан върху него, се избира така, че да остане четлив. Единичната опция остава извън него: тя е обикновеният ред с покупка на пълна цена, а не оферта, затова запазва обикновен контур и цената си във вашия обичаен цвят.


Задайте това първо, а после използвайте Елементи по-долу само за частите, които искате да се различават от него.


Изключване на блясъка на Aurora. Aurora се анимира само докато има преливане за чертане. Изберете обикновен цвят под Един цвят и всичко го следва и Aurora се чертае плоска, без блясък. За да запазите градиента, но без движението, изберете друг дизайн или ни попитайте в чата.


Много светъл цвят обръща уиджета. Кремав, бледосив или почти бял цвят не се вижда върху бялата карта, с която се доставят дизайните. Затова картата потъмнява вместо това, до наситен нюанс на вашия цвят, а рамките, радио бутоните и текстът запазват цвета с пълна сила върху нея. Изберете собствен Фон и той се използва вместо това, а връщането към обикновен цвят връща бялата карта.


Основният ви цвят очертава избраната от клиента опция, вместо да я залива. При дизайна Checkbox по-специално отметнатата опция запазва собствения си фон и взема цвета на рамката и на отметката си, защото тази опция е целият уиджет, а не един ред в списък.


Докато уиджетите ви следват собствените цветове на темата, опция, която клиентът не е избрал, е очертана с това мастило в по-бледа стъпка, а избраната е единственият плътен контур в списъка. Lure чертае банера си за отстъпка като лента от същото по-бледо мастило, а не като плътна плоча.


Името и цената на избраната опция не са боядисани във вашия цвят. Те се избират така, че да се четат върху това, с което е запълнена опцията. Задайте ги сами в редовете Име на офертата, Име на опцията и Цена, ако искате нещо друго.


Ако цветовете на темата ви не се показват така, както очаквате, изберете цвят сами под Един цвят и всичко го следва, вместо да наследявате от темата. Някои теми не предават цветовете си на приложенията.


Ако сте оформяли дизайн елемент по елемент, преди да съществува тази страница, запазването тук замества тези цветове, по същия начин, по който замества зададените от вас разстояния и заоблености. Това може да се отмени: Възстановяване на предишния дизайн по-долу обяснява как да върнете това оформление.


Форма


  • Заобленост задава колко са заоблени ъглите.
  • Дебелина на рамката задава ширината на рамките.


При дизайн, който чертае градиентна рамка, дебелината задава и нея, така че градиентът и плоските рамки до него излизат със същата тежест. Избраната от клиента опция и тази под показалеца му се отбелязват с цвета си със същата тежест, а не с по-дебел собствен пръстен. Заоблеността се пренася и във вътрешността на опцията за пакет: редовете за безплатен подарък, безплатна доставка и добавки са заоблени да съвпадат.


Разстояния


Разстоянията имат три части:


  • Вътре във всяка опция: Горен отстъп и Долен отстъп задават пространството над и под съдържанието на всяка опция за абонамент и опция за пакет. Оставите ли долния, той следва горния. Хоризонтален отстъп задава двете страни.
  • Между уиджетите: Разстояние е пространството между пакетния уиджет, абонаментния уиджет и полето за дата на доставка, когато частите са твърде близо или твърде далеч една от друга.
  • Около уиджета: Пространство отгоре и Пространство отдолу на целия уиджет. Използвайте ги, когато темата ви поставя уиджета твърде близо до бутона за добавяне в количката или до цената.


Всичко това се прилага едновременно към вашите абонаментни и пакетни уиджети и към полето за дата на доставка под тях.


Тъй като една контрола задава стойност навсякъде, запазването тук замества разстоянията и заобленостите, които може да сте задали на отделни части от дизайн, преди да съществува тази страница. Това може да се отмени: вижте Възстановяване на предишния дизайн.


Шрифт


Един шрифт за абонаментния ви уиджет и опциите за пакет заедно, включително заглавията:


  • Следва вашата тема, по подразбиране: заглавията използват шрифта за заглавия на темата ви, а всичко останало основния ѝ шрифт, същото разделение, което прави и темата.
  • Основен шрифт на темата или Шрифт за заглавия на темата: целият уиджет в този един шрифт.
  • System, Serif или Monospace: шрифт, който всяко устройство вече има.
  • Персонализиран: въведете името на шрифт, който темата ви вече зарежда, като Futura PT, точно както го нарича темата ви. Можете да изброите няколко, разделени със запетаи, и се използва първият, който браузърът има. Запазват се само букви, цифри, интервали, запетаи и тирета. Ако браузърът го няма, уиджетът се връща към основния шрифт на темата ви.


Приложението никога само не зарежда шрифт, затова персонализираният шрифт се показва само ако вашата тема (или друго приложение) вече го зарежда на страницата на продукта. Размерите и тежестите остават във всеки ред в Елементи.


Визуализацията в администрацията не може да зареди шрифтовете на вашия магазин, затова шрифтовете на темата и персонализираният шрифт се показват там с шрифта на самата администрация. Отворете страница на продукт във вашия магазин, за да видите истинския резултат.


Елементи


Тази секция е по един ред за всяка част от уиджета, наредени в реда, в който четете страницата на продукта. Редът се прилага към всеки дизайн, който има тази част, така че скриването на заглавието го скрива във всички, а ред, който публикуваният ви дизайн не може да изпълни, изобщо не се показва.


  • И двата уиджета: Заглавие на офертата, Показване на вариантите като мостри, Значка за отстъпка, Значка за отстъпка на всяка опция (само при Classic+) и Значка със съобщение.
  • Опции за абонамент: Заглавие, после повърхността (Фон, Рамка, Радио бутон), после текстът върху нея: Име на офертата, Заглавие на секция, Име на опцията, Описание, Честота на доставка, Цена, Зачеркната цена, Цена за единица, Предимства, Икона на предимство, Заглавие на предимствата и Информационна подсказка.
  • Опции за пакет: Заглавие, Фон, Рамка, Радио бутон, Заглавие, Цена, Зачеркната цена и Цена за единица.
  • Дата на доставка: Заглавие, Поле и Рамка, оформлението на полето за дата под уиджетите. Тази секция се появява само след като Избор на дата е включен в Настройки на добавките. Вижте Добавки на страницата на продукта.
  • Оформление на страницата: Пакетът отгоре, дали пакетният уиджет е над абонаментния, и Синхронизиране на цените на пакетите, дали цените на пакетите следват цената за доставка на избрания абонамент. И двете са включени по подразбиране.


Вътре в Опции за абонамент и Опции за пакет малко заглавие Само за този дизайн отбелязва редовете, които принадлежат на публикувания от вас дизайн и на никой друг. Списъкът се променя с публикувания дизайн. Например:


  • Падащ списък за доставка, при дизайните, които показват избор за честотата на доставка (Dropdown, Dropdown+, Lure и Checkbox): неговото запълване, текстът и стрелката в него, както и размерът и тежестта на този текст.
  • Дебел ръб и Скриване на описанието, докато не бъде избрано, при Aurora.
  • Дебел ръб при опциите за пакет, при оформленията, които могат да го чертаят.


Двете секции с уиджети са наредени в реда, в който уиджетите се подреждат на страницата на продукта, така че този, който купувачът вижда първи, е този, до който стигате първи. Превключете Пакетът отгоре и те веднага си разменят местата.


Рамка и Фон носят по два цвята: обикновеният първо, после този за избраната от клиента опция. Оставен по подразбиране, избраният следва основния ви цвят, което повечето магазини искат.


Вторият цвят на реда Заглавие на пакета, този за избрана опция, се появява само там, където има запълнена опция, върху която да стои. Вашите опции за пакет отбелязват избраната с лек подчертаващ ефект, а Panels показва коя опция е избрана със силата на рамката ѝ. Ако предпочитате избраната опция да е напълно запълнена, пишете на поддръжката и ще го направим вместо вас.


Име на офертата и Име на опцията са два реда, а не един. При дизайните, които показват и двете, името на офертата е редът над набор от избори, „Абонирайте се и спестявайте“, а името на опцията е един избор в него, „Доставка всеки месец“. При дизайните, които показват плосък списък с опции, няма име на оферта, така че само редът за името на опцията има ефект.


Предимства е един ред за двата списъка с предимства: отметките под опция за абонамент и отметките под реда за еднократна покупка. Цветът, размерът и тежестта му се прилагат към двата. Редът носи и поле Разстояние за пространството между редовете; оставите ли го, то следва вашия отстъп. Какво казва всяко предимство, се задава там, където сте го написали, в опциите на офертата.


Икона на предимство е отделен ред при двата дизайна, които чертаят отметка, Lure и Checkbox. Първият цвят е отметката и контурът ѝ, вторият е кръгът зад нея, който остава прозрачен, докато не му зададете цвят. Aurora чертае отметката си от собствения градиент на дизайна, така че тя следва Цветове.


Две неща не се задават тук, защото принадлежат на офертата, а не на вашия дизайн. Дали редът за еднократна покупка се показва и коя опция е избрана първа, се задава във всяка оферта: вижте Как да премахнете опцията за еднократна покупка за продукт. А изображението на продукта в опция за пакет е изображението, което качвате към тази опция.


Заглавия и заглавие на офертата


Страницата на продукта може да носи заглавие на оферта и до три заглавия на секции.


Заглавие на офертата е ред в И двата уиджета. Той отпечатва името на вашата оферта веднъж най-отгоре, над опциите за пакет, опциите за абонамент и датата на доставка. Това е Името на офертата, което сте дали на офертата на страницата Оферти, така че преименувайте ли офертата, страницата я следва. То е изключено, докато не го включите, а цветът, размерът и тежестта му се задават на реда.


Показване на вариантите като мостри е ред в И двата уиджета. Когато е включен, всеки избор на вариант и в двата уиджета показва всяка опция като мостри вместо падащ списък: кутии „направи си сам“ и техният списък с продукти, добавки, безплатни подаръци (при опции за пакет и опции за абонамент), продуктите във фиксиран пакет и изборите за всеки артикул при количествени отстъпки и Купете X, вземете Y. Където сте задали цвят или изображение на стойността на опцията в Shopify (например мострата на опцията Цвят), мострата го показва; другите опции, като размерите, показват името си. Изчерпана стойност е зачертана и не може да се избере. Мострите вземат цветовете на вашия уиджет: избраната е начертана във вашия акцентен цвят. Мострите идват от стойностите на опциите на продукта в Shopify: отворете продукта в Shopify и под Варианти свържете опцията му за цвят с метаполето от категория Цвят и изберете мостра за всяка стойност (вижте ръководството на Shopify, Using category metafields). Включена е за нови магазини и изключена за магазини, инсталирали по-рано, докато не я включите.


Всяка секция има собствен ред Заглавие, със собствен превключвател, цвят, размер, тежест и оформление: Опции за абонамент > Заглавие, Опции за пакет > Заглавие и Дата на доставка > Заглавие. Оформленията са:


  • Центрирано с линии, заглавието в средата с линия, излизаща към всяка страна. С него започва всеки нов магазин.
  • Центрирано, заглавието в средата без линии.
  • Просто, заглавието само в началото на реда.


Какво казва всяко заглавие, се задава на различно място:


  • Заглавие на абонамента: полето Заглавие на секция в Етикети. То започва като {{subscription_name}}, което отпечатва Името на абонамента на офертата, името, което сте задали на офертата над нейните опции за абонамент (превежда се заедно с офертата). Напишете вместо това свои думи („Никога не свършвайте!“) или смесете двете („{{subscription_name}}, отказвате се по всяко време“). Оставено празно, полето действа като {{subscription_name}}.
  • Заглавие на пакета: полето Име на пакета в офертата, над нейните опции за пакет. Оставете го празно и заглавието гласи „Bundle & Save“. За да не се показва заглавие на пакет изобщо, изключете Опции за пакет > Заглавие в Елементи.
  • Заглавие на датата на доставка: Заглавие на избора на дата, в Настройки на добавките > Избор на дата.


Всичко това е текст, който купувачът чете, така че всичко се превежда. Имената на оферти, имената на абонаменти и имената на пакети се превеждат в Настройки > Преводи под Оферти; етикетите на уиджета под Уиджети.


Как се чете ред с елемент


Редът е една линия. Името на елемента отляво с превключвателя му до него, после, в колони отдясно:


  • Неговият цвят, като мостра, върху която кликвате, за да отворите избора на цвят.
  • Неговият цвят върху избраната от клиента опция, като втора мостра, при частите, които изглеждат различно, когато са избрани.
  • Неговият размер на текста, в пиксели.
  • Неговата тежест на текста, от тънка до черна.


Какво се различава от ред на ред, е превключвателят: името на опцията, фоновете и рамките не могат да се скрият, така че тези редове нямат превключвател, а фоновете и рамките са само цвят, без текст за оразмеряване.


Две полета не принадлежат на нито една от тези колони, затова стоят на собствен ред под тях: Разстояние, за елемент, съставен от повече от един ред, и Оформление на цената. Списъкът с предимства има първото, а зачерканата цена има и двете.


На тесен екран контролите слизат на собствен ред под името. Оформлението се появява само докато елементът е включен, а промяната се записва във всеки дизайн, който има елемента, така че ако по-късно смените дизайна, оформлението ви се запазва. Задръжте курсора върху името на реда, за да видите какво обхваща.


Значки


Има две значки и те са два реда в И двата уиджета, защото всяка се задава веднъж за двата уиджета:


  • Значката за отстъпка се изчислява от вашата отстъпка и гласи „-20%“ при опция за абонамент и „Спестете 20%“ при опция за пакет.
  • Значката със съобщение е тази, която пишете сами при опция за пакет, в полето ѝ Значка, например „Най-популярен“.


Всяка носи собствена форма, цвят на фона, цвят на текста, размер на текста и тежест на текста. Цветовете на значката за отстъпка започват по подразбиране, което следва основния ви цвят; изберете цвят на реда, за да зададете свой.


Има четири форми:


  • Мехур, закръглена капсула до заглавието.
  • Таг, етикет за багаж с връх на водещия му край.
  • Плаваща, капсулата, вдигната над реда с мека сянка под нея.
  • Лента, лента, залепена на горния ръб на реда. С нея започва значката за отстъпка при всеки нов магазин.


Плаваща и Лента излизат извън реда, затова тези две питат къде по него да стоят: Начало, Център или Край.


Classic+ отпечатва значката за отстъпка два пъти: веднъж в заглавната част над опциите и веднъж на всяка опция под нея. Втората има собствен ред, Значка за отстъпка на всяка опция. Изключете го, за да остане само значката в заглавната част, или му дайте собствени цветове, размер, тежест и форма (Мехур или Таг). Dropdown+ отпечатва само една значка, в заглавната част.


За да скриете значката за отстъпка, изключете нейния ред. Какво казва значката („Спестете 20%“, „20% отстъпка“) се задава в Етикети.


Стандартни и персонализирани цветове


Всеки цвят в ред с елемент започва от стандартния и стандартният означава вашия основен цвят навсякъде, където основният води тази част: рамката, радио бутона, фона при избиране. Задайте го веднъж в Цветове и всички го следват.


Двата вида се различават по мострата. Пунктираният контур означава, че цветът все още следва вашата палитра; плътният означава, че сте го задали сами. Мостра с шахматен модел означава, че текстът няма собствен цвят и взема цвета на текста около него, докато не изберете такъв. Задръжте курсора върху нея, за да видите кой е, и какъв е цветът.


Кликнете върху мострата и изберете цвят и тази една част се отделя, запазвайки вашия цвят, какъвто и да е основният. За да я върнете, кликнете отново върху мострата и изберете Използване на стандартния: частта се връща и взема текущия основен цвят.


Части, които основният цвят не води, като името на опцията или зачерканата цена, четат стандартния като цвета, с който се доставя дизайнът. При дизайн, който чертае градиент, рамката чете стандартния като градиента.


Промяната на цвета ви в Цветове се пренася във всяка част, която все още е на стандартния, включително при дизайни, които в момента не използвате. Връщането към пунктираната мостра Наследяване от вашата тема връща тези части към цветовете, с които се доставя техният дизайн.


Цени


Цените имат собствени редове в Елементи, а двата уиджета са разделени, така че можете да промените единия и да оставите другия както е. За всеки уиджет можете да изключите:


  • Цена, сумата на всяка опция за абонамент или опция за пакет.
  • Зачеркната цена, пълната цена, зачертана до отстъпната.
  • Цена за единица, цената за артикул, като „3,50 $ всеки“. Тя е изключена при абонаментния уиджет и включена при опциите за пакет.


Подкана за по-голям пакет (опции за пакет, изключена, докато не я включите) добавя връзка под количествените отстъпки, като „Добавете още 1, за да спестите 15%“, докато купувачът е избрал по-малък пакет, а по-големият спестява повече. Кликването върху нея избира по-големия пакет. Показва се само при обикновени количествени отстъпки, не при „направи си кутия“, фиксиран пакет, Купете X, вземете Y или опция с безплатен подарък, а текстът ѝ е полето Подкана за по-голям пакет в Етикети.


Обичайната причина да изключите цена е, че темата ви вече я отпечатва над уиджета и предпочитате да не я казвате два пъти. За да покажете само цената за единица, изключете Цена и включете Цена за единица.


И трите носят цвят, размер и тежест. Редът Цена на абонамента носи и втората мостра, за цената на избраната от клиента опция.


Редът Зачеркната цена на абонамента носи още две полета, на ред под размера и тежестта му:


  • Оформление на цената: Една до друга държи двете цени на един ред. Една над друга поставя зачерканата цена на собствен ред над текущата.
  • Разстояние, пространството между двете цени, в пиксели.


Всеки дизайн запазва собствените си отговори, така че задаването им за публикувания дизайн оставя останалите както са били.


Classic+ и Dropdown+ отпечатват една цена най-горе в уиджета и тя следва избраната от клиента опция. Изключването на цената скрива и нея.


Цената за единица се предлага само при дизайни, които я отпечатват. Текстът около нея, „/ всеки“ или „{{unit_price}} / {{unit_name}}“, се задава в Етикети. Единичната цена, която темата ви показва под цената на продукта (за 100 г и т.н.), е отделна добавка, Подробности за цената на абонамента, в Добавки на страницата на продукта.


Редът, в който се показват нещата


  • Кой уиджет е първи: Елементи > Оформление на страницата > Пакетът отгоре. Включено по подразбиране; изключете го, за да поставите абонаментния уиджет над опциите за пакет.
  • Редът на опциите за абонамент: отворете офертата в Оферти и плъзнете опциите за тяхната дръжка в Опции за абонамент, после запазете офертата. Магазинът ги показва в този ред.
  • Редът за еднократна покупка: в офертата използвайте стрелките нагоре и надолу на реда Еднократна покупка, за да го поставите най-отгоре или най-отдолу в списъка.
  • Редът на опциите за пакет: плъзнете ги в Опции за пакет в офертата. Редът на единичната опция се премества най-отгоре или най-отдолу по същия начин като реда за еднократна покупка.
  • Коя опция е избрана при зареждане на страницата: кликнете върху Правене по подразбиране на този ред в офертата. Вижте Задаване на опцията по подразбиране.
  • Продукт в повече от една оферта: абонаментът на всяка оферта е собствена група в уиджета. Задайте реда на групите в Настройки на добавките > Ред на групите. Същият ред се използва и при плащане.


Етикети


Тук променяте текста, който четат вашите клиенти, на основния език на магазина ви. Намира се под картата с настройки, в отделна карта. Всяко поле се прилага към всеки дизайн на този уиджет, така че текстът ви се пренася, когато опитате друг дизайн, а картата изброява само полетата, които публикуваният ви дизайн действително отпечатва.


  • Абонаментен уиджет: Заглавие на секция (приема {{subscription_name}} за Името на абонамента на офертата), Ред за еднократна покупка, Значка за отстъпка, процент, Значка за отстъпка, сума, Значка за отстъпка, фиксирана цена, Заглавие на опциите за абонамент, Ред за предплатено, Банер за отстъпка, Заглавие на информационната подсказка, Ред на опция (редът, отпечатан за всяка честота в списъка), Цена за единица и наставките за честота от Всеки ден до Всеки N години („/ месец“, „/ {{n}} седмици“).
  • Пакетен уиджет: Чип за спестяване, процент, Чип за спестяване, кутия с нива, Чип за спестяване, сума, Наставка за единица („/всеки“), Ред за безплатна доставка, Единична опция, Ред за безплатен подарък и Подкана за по-голям пакет („Добавете още {remaining}, за да спестите {value}%“).
  • Направи си кутия: всичко, което опция „направи си кутия“ отпечатва около изборите си, като Заглавие „Включва“, Заглавие на изборите, Подкана за избор, Брояч на избора и Минимумът не е достигнат („Моля, изберете поне {min} артикула“).
  • Награди и безплатни подаръци: заглавията над наградите Купете X, вземете Y и безплатните подаръци, и думата Безплатно, отпечатана като тяхна цена.


Някои полета използват заместители във фигурни скоби и всяко поле ви казва какво означават те. Запазете ги в текста си и ги преместете там, където изречението има нужда. Оставете поле празно, за да се върнете към вградения текст.


Част от текста не е в Етикети, защото принадлежи на една оферта или на добавка:


  • Имена, описания и предимства на опциите за абонамент: във всяка опция за абонамент в Оферти (Име на опцията, Описание, Предимства). Имената на опциите нямат масово редактиране, така че ги променяйте оферта по оферта; общите за магазина текстове, като наставките за честота, се редактират веднъж тук.
  • Името, описанието и предимствата на реда за еднократна покупка: на реда Еднократна покупка в офертата. Оставите ли Име празно, редът използва Ред за еднократна покупка от Етикети.
  • Заглавия, подзаглавия и значки на опциите за пакет и заглавието Име на пакета: в офертата.
  • Текстът на бутона за добавяне в количката, значката до цената на продукта и текстът за датата на доставка: в Настройки на добавките, вижте Добавки на страницата на продукта.


Тези полета задават текста на основния език на магазина ви. За да го преведете на другите си езици, използвайте Настройки > Преводи. Преводът там има предимство пред това, което въвеждате тук за съответния език.


Персонализиран CSS


Последната секция на картата с настройки, под Елементи, за всичко, до което горните контроли не стигат. CSS, написан тук, се прилага към двата уиджета на страницата на продукта ви, а визуализацията показва какво прави, преди да запазите.


Всеки дизайн има собствен персонализиран CSS: този на дизайна на магазина се прилага навсякъде, където се използва дизайнът на магазина, а този на запазен дизайн навсякъде, където се използва този дизайн. Новият дизайн започва с копие на CSS на дизайна, от който е направен, а дизайн, създаден преди дизайните да имат собствен, използва този на дизайна на магазина, докато не го запазите. Преминаването към друго оформление в секцията Дизайн го запазва. Ако сте писали CSS в стария редактор за всеки дизайн, този CSS все още се прилага отгоре.


Оставете това празно, освен ако не знаете селекторите, които търсите. CSS, написан тук, не се проверява, така че развалено правило може да скрие част от вашия уиджет на страниците на продуктите ви. Ако искате промяна, която контролите не покриват, като центриране на уиджета, попитайте ни в чата и ще я напишем вместо вас.


Уиджетите не могат да приемат собствен HTML. Оформлението идва от публикувания от вас дизайн, а всичко, което можете да промените, е на тази страница.


Дизайн за всяка оферта


Всяка оферта използва дизайна на магазина, освен ако не ѝ дадете собствен дизайн, така че една оферта може да изглежда различно от останалите: например премиум клуб за презареждане в тъмните цветове на вашата марка до обичайното ви „Абонирайте се и спестявайте“.


Дайте на оферта собствен дизайн


  1. Отидете на Supr Bundles & Subscriptions > Оферти и отворете офертата.
  2. Във визуализацията, в реда Дизайн под избора на продукт, кликнете върху Нов дизайн. Офертата получава дизайн, кръстен на нея (оферта на име Coffee Club получава Coffee Club Design), започващ като копие на дизайна на магазина, и редакторът на дизайн се отваря върху него в прозорец на цял екран над офертата.
  3. Визуализацията в прозореца е собствената визуализация на офертата: същият продукт и вариант, които сте разглеждали в офертата, и опциите, опциите за пакет, подаръците и текстът на офертата такива, каквито са в нея в момента, включително незапазените промени. Там можете да превключите към друг от продуктите на офертата.
  4. Променете нейния дизайн, пакетно оформление, цветове, форма, разстояния и елементи. И двете визуализации следват всяка промяна, докато я правите. За да я преименувате, въведете новото име в Име на дизайна най-отгоре на картата Дизайн.
  5. Затворете прозореца и запазете офертата. Дизайнът се запазва заедно с офертата, така че в прозореца няма Запазване: Отхвърляне в офертата отменя дизайна и промените му, и нищо не се запазва, докато не запазите.


След като офертата има собствен дизайн, падащият списък на реда показва нейното име, а Редактиране на дизайна заема мястото на Нов дизайн. Редактиране на дизайна отваря същия прозорец отново, а промените му се запазват с офертата по същия начин. Падащият списък Дизайн превключва офертата между Дизайн на магазина, собствения ѝ дизайн и всеки друг запазен дизайн, запазено с офертата; превключването встрани запазва дизайна, така че можете да го изберете отново. За да изтриете собствения дизайн на офертата, кликнете върху кошчето до Име на дизайна в прозореца му, после запазете офертата.


Оферта, която вече е използвала дизайн, споделен с други оферти, го запазва. Тогава редът казва колко други оферти го използват, защото промяната там променя и тези оферти. Споделеният дизайн, като всеки дизайн, отворен от страницата Дизайн, има собствено Запазване в заглавната лента на прозореца и това запазване се прилага към всяка оферта, която го използва.


На страницата Дизайн. Най-горе на картата Дизайн са изброени дизайнът на магазина и всеки запазен дизайн. Изберете един в списъка, за да го редактирате, кликнете върху Нов дизайн, за да започнете друг като копие на отворения, и използвайте иконите на молив (преименуване) и кошче (изтриване) до него, за да преименувате или изтриете отворения дизайн. Всяка оферта може да има собствен дизайн, а магазинът може да държи тук до 50 допълнителни.


Какво обхваща един дизайн. Дизайнът и пакетното оформление, цветовете, формата, разстоянията, елементите, Разположението и Персонализираният CSS. Етикетите и настройките на добавките се споделят от всеки дизайн. Етикетите се редактират в дизайна на магазина: докато е отворен запазен дизайн, бележката под неговите настройки има бутон Редактиране на дизайна на магазина, който ви води там. Картата Настройки на добавките остава на страницата и докато е отворен запазен дизайн, отбелязана като споделена, а промяна там се прилага към дизайна на магазина и към всеки запазен дизайн. Преводите следват оформлението на дизайна, както при дизайна на магазина.


На страницата на продукта. Абонаментният уиджет на продукта използва дизайна на първата оферта, която показва. Коя оферта е първа, се задава в Настройки на добавките > Ред на офертите на тази страница. Когато оферти са насочени към различни варианти на един и същ продукт, всеки вариант използва дизайна на първата оферта, която има, и уиджетът променя дизайна, докато клиентът избира вариант: вариант „Стъклена бутилка“, продаван чрез вашия премиум клуб, може да изглежда като клуба, докато „Кутията“ до него запазва вашия обичаен дизайн. Всяка опция за пакет следва дизайна на собствената си оферта. Изтриването на дизайн връща офертите му към дизайна на магазина.


Запазване на промените


Нищо на тази страница не се запазва в движение. Променете колкото искате, наблюдавайте всичко във визуализацията, после използвайте лентата за запазване в горната част на страницата, за да запазите всичко наведнъж или да го отхвърлите и да започнете отначало. След запазване презаредете страница на продукт във вашия магазин, за да видите резултата.


Тази страница записва една стойност във всеки дизайн наведнъж. Ако сте оформяли уиджетите си в стария редактор за всеки дизайн, първото ви запазване тук е моментът, в който магазинът ви преминава към единното изживяване на уиджетите: съобщението Уиджетите ви се подобряват пита преди това първо запазване и ние правим копие на това как са изглеждали уиджетите ви преди това.


Възстановяване на предишния дизайн


Тази секция е за магазини, които са оформяли уиджетите си в стария редактор за всеки дизайн, преди тази страница да го замени. Ако сте инсталирали Supr Bundles & Subscriptions след това, няма предишен дизайн, към който да се върнете, и няма карта Възстановяване на предишния дизайн на страницата ви.


Преди магазинът ви да премине към единното изживяване на уиджетите, запазваме копие на това как изглеждат уиджетите му. Това копие не изтича, а картата назовава датата, на която е направено.


Оттогава нататък карта Възстановяване на предишния дизайн стои в долната част на тази страница. Използвайте я и уиджетите ви се връщат точно такива, каквито са били непосредствено преди да преминете. Можете да ги оформите отново след това и да възстановите пак.


Възстановяването замества всичко, което сте променили на тази страница, откакто е направено копието. То не засяга вашите оферти, цени или абонати.


Какво се случи с редактора на уиджета обяснява къде е преминала всяка от контролите на стария редактор.


Редът „Powered by Supr“


Някои магазини виждат малък ред Powered by Supr под абонаментния уиджет или в информационната му подсказка. Дали се показва, зависи от вашия план: премахва се автоматично при платените планове и няма превключвател за него на страницата Дизайн. Плановете са изброени на нашата страница с цени и в Таксуване в приложението.


След като смените плана, отворете приложението веднъж и презаредете страницата на продукта и редът изчезва. Ако все още се показва, пишете ни в чата и ще го проверим вместо вас.


Същият ред може да се появи и в долната част на абонаментните имейли, които изпращаме за вас, и следва същото правило.


Помощ с вашия дизайн


Картата Искате ли помощ да го напасвате към вашата марка? най-долу на страницата има бутон Чат с експерт. Нашият екип може да ви помогне да изберете дизайн, да напаснете цветовете и шрифтовете на темата си, да коригирате разстоянията на мобилни устройства или да напишете персонализиран CSS за промяна, която контролите не покриват. Кажете ни как искате да изглежда уиджетът, екранна снимка помага, и ще го настроим заедно с вас.


Съвети и добри практики


  • Задайте първо цвета, формата и разстоянията, после изберете дизайн. Те се пренасят във всеки дизайн, така че опитването на дизайни не ви струва нищо.
  • Оставяйте цветовете на елементите на стандартните, освен ако нямате причина. Колкото по-малко изключения правите, толкова по-добре ще изглежда нов дизайн, когато го опитате.
  • Визуализирайте с реален продукт, за да видите собствените си цени и отстъпки.
  • Ако дизайн показва падащ списък, който не искате, преминаването към Classic или Panel е най-бързият начин да го премахнете.
  • За опции една до друга, а не една над друга, използвайте Panel или Panel+ за абонаменти и пакетното оформление Cards.


Често задавани въпроси


Могат ли две оферти в магазина ми да изглеждат различно?
Да. Направете запазен дизайн и го изберете за една от офертите, вижте Дизайн за всяка оферта.



Как да променя цветовете, за да съвпадат с моята марка?
Изберете вашия цвят в Цветове, после променяйте отделни части в Елементи само там, където трябва да се различават. Запазете с лентата за запазване и презаредете страница на продукт.


Настройка, която промених, не се вижда в магазина ми. Защо?
Проверете дали сте запазили, после презаредете страницата на продукта. Ако все още не се вижда, вероятно собственият CSS на темата ви замества уиджета там. Пишете ни в чата с връзката към продукта и ще го поправим, без да пипаме темата ви.


Могат ли различни оферти да използват различни дизайни?
Не. В магазина е активен един абонаментен дизайн и едно пакетно оформление и всяка оферта ги използва. Оформлението на останалите се запазва, така че превключването не струва нищо.


Как да скрия цената, зачерканата цена или значката за отстъпка?
Изключете Цена, Зачеркната цена или Цена за единица в Елементи, отделно за опциите за абонамент и опциите за пакет. Значката за отстъпка има собствен ред в И двата уиджета.


Как да поставя абонаментния уиджет над опциите за пакет?
Изключете Елементи > Оформление на страницата > Пакетът отгоре и запазете.


Как да променя „Subscribe & Save“, „One-time purchase“, „Save 15%“ или „/each“?
В картата Етикети. Заглавието над опциите за абонамент е Заглавие на секция, което отпечатва Името на абонамента на офертата навсякъде, където пише {{subscription_name}} (началната му стойност), а заглавието на пакета е Името на пакета на офертата. Вижте Как да промените/преведете текстовете на основния език.


Отвореният падащ списък за доставка изглежда различно в Windows и на Mac. Мога ли да го оформя?
Затвореният падащ списък се оформя в Елементи > Падащ списък за доставка. Отвореният списък се чертае от браузъра и операционната система на купувача, така че не може да се преоформи. Изберете Classic или Panel, ако предпочитате да няма падащ списък.


Мога ли да добавя собствен HTML или да копирам дизайн, който видях на друг сайт?
Уиджетите не приемат собствен HTML. Изберете най-близкия дизайн тук и го оформете, после използвайте Чат с експерт и нашият екип ще ви помогне да стигнете възможно най-близо.


Как да премахна реда Powered by Supr?
Премахва се автоматично при платените планове. Вижте Редът „Powered by Supr“.


Свързани ръководства


Обновено на: 24/10/2026

Беше ли ви полезна тази статия?

Споделете отзивите си

Отказ

Благодарим ви!