Pre-checkout popup-ът на Изпрати БГ използва готов дизайн, но може да бъде доближен до цветовете, шрифтовете и разстоянията на Shopify темата чрез CSS. Най-практично е стиловете да се добавят в блок Custom liquid, без да се редактират файловете на приложението.
Важно: променяйте само външния вид. Не скривайте задължителни полета, грешки при валидация, методи за доставка или бутона за продължаване.
Къде се добавя CSS #
- Отворете Shopify Admin → Online Store → Themes → Customize.
- Добавете блок Custom liquid в глобална секция на темата, например header или footer.
- Поставете CSS между тагове
<style>и</style>. - Натиснете Save и тествайте popup-а на cart страницата и в cart drawer-а.
Алтернатива за разработчици е кодът да бъде добавен в CSS asset на темата. При смяна или обновяване на темата проверете дали персонализацията е запазена.
Основен пример за Custom liquid #
Следният пример променя основния цвят, заоблянето, полетата и бутона за продължаване. Заменете цветовете със стойностите от своята тема.
<style>
/* Фон и ширина на popup-а */
.octava-checkout-modal .octava-checkout-modal-content {
background: #ffffff !important;
}
.octava-checkout-modal .octava-checkout-header-inner,
.octava-checkout-modal .octava-checkout-body {
max-width: 1200px !important;
}
/* Полета */
.octava-checkout-modal .octava-field input,
.octava-checkout-modal .octava-field select,
.octava-checkout-modal .octava-field textarea,
.octava-checkout-modal .octava-pickup-search {
border-color: #d6d6d6 !important;
border-radius: 8px !important;
background: #ffffff !important;
}
.octava-checkout-modal .octava-field input:focus,
.octava-checkout-modal .octava-field select:focus,
.octava-checkout-modal .octava-field textarea:focus,
.octava-checkout-modal .octava-pickup-search:focus {
border-color: #111111 !important;
box-shadow: 0 0 0 1px #111111 !important;
}
/* Основен бутон */
.octava-checkout-modal .octava-continue-btn {
background: #111111 !important;
border-color: #111111 !important;
border-radius: 8px !important;
color: #ffffff !important;
}
.octava-checkout-modal .octava-continue-btn:hover {
background: #333333 !important;
border-color: #333333 !important;
}
</style>Разстояния и padding #
За по-компактен изглед може да намалите вътрешните разстояния. Променяйте стойностите постепенно и проверявайте desktop и mobile изгледа.
<style>
.octava-checkout-modal .octava-checkout-header-inner,
.octava-checkout-modal .octava-checkout-body {
padding-left: 16px !important;
padding-right: 16px !important;
}
.octava-checkout-modal .octava-checkout-left,
.octava-checkout-modal .octava-checkout-right {
padding: 16px !important;
}
.octava-checkout-modal .octava-form-section {
margin-bottom: 18px !important;
}
.octava-checkout-modal .octava-fields-grid {
gap: 10px !important;
}
</style>Полета и бутон „Близо до мен“ с еднаква височина #
Ако Shopify темата задава различна височина на input и button елементите, използвайте обща фиксирана височина само за реда за търсене на офис или автомат.
<style>
.octava-checkout-modal .octava-sp-search-wrapper {
align-items: stretch !important;
}
.octava-checkout-modal .octava-sp-search-wrapper .octava-pickup-search,
.octava-checkout-modal .octava-sp-search-wrapper .octava-near-me-button {
height: 48px !important;
min-height: 48px !important;
box-sizing: border-box !important;
}
</style>Методи за доставка и активен избор #
Бутоните за офис, автомат и адрес могат да следват основния цвят на магазина. Класът .is-active обозначава избрания метод.
<style>
.octava-checkout-modal .octava-delivery-methods {
border-radius: 8px !important;
background: #f5f5f5 !important;
}
.octava-checkout-modal .octava-delivery-method-btn {
color: #222222 !important;
}
.octava-checkout-modal .octava-delivery-method-btn.is-active {
background: #111111 !important;
color: #ffffff !important;
}
.octava-checkout-modal .octava-pickup-point.is-selected,
.octava-checkout-modal .octava-service-point-item.is-selected {
border-color: #111111 !important;
}
</style>Размер на popup-а и mobile настройки #
Настройката Popup size в App Embed определя дали контейнерът е Full или Compact. Използвайте CSS само за фина настройка. Не задавайте фиксирана ширина, по-голяма от екрана.
<style>
@media (max-width: 749px) {
.octava-checkout-modal .octava-checkout-header-inner,
.octava-checkout-modal .octava-checkout-body {
padding-left: 12px !important;
padding-right: 12px !important;
}
.octava-checkout-modal .octava-fields-grid {
grid-template-columns: 1fr !important;
}
.octava-checkout-modal .octava-near-me-button {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
</style>Лого в pre-checkout popup-а #
Popup-ът автоматично използва видимото лого от header-а на магазина. Не е нужна отделна настройка.
Override е необходим само ако popup-ът трябва да използва различен вариант заради контраст, например бяло лого върху тъмен фон. Качете изображението в Shopify Admin → Content → Files, копирайте неговия URL и добавете следния маркер в същия Custom liquid блок:
<span
hidden
data-octava-checkout-logo-override
data-logo-url="https://cdn.shopify.com/s/files/.../popup-logo.svg"
></span>Използвайте пълен https:// URL. Маркерът остава скрит и не променя дизайна на магазина. Ако го премахнете, popup-ът отново ще използва автоматично откритото лого.
Как да тествате безопасно #
- Запазете копие на Custom liquid кода преди промяна.
- Отворете cart страницата и cart drawer-а на desktop и mobile.
- Проверете трите типа доставка, търсенето на офис/автомат, съобщенията за грешка и бутона за продължаване.
- Проверете контраста на текст, активни бутони и focus състояния.
- След обновяване на темата или приложението повторете краткия визуален тест.
За връщане към стандартния дизайн премахнете добавения <style> блок. Персоналният CSS не променя цените, куриерските услуги или логиката за избор на офис.
