---
title: "15.15.95. Стилизиране на pre-checkout popup с CSS и Liquid"
description: "Pre-checkout popup-ът на Изпрати БГ използва готов дизайн, но може да бъде доближен до цветовете, шрифтовете и разстоянията на Shopify темата чрез CSS. Най-практично е стиловете да се добавят в блок **Custom liquid**, без да се редактират файловете на приложението.…"
url: "https://izprati.bg/docs/pre-checkout-popup-css-liquid/"
updated: "2026-08-20"
category: Интеграции / Shopify
---

# 15.15.95. Стилизиране на pre-checkout popup с CSS и Liquid

Pre-checkout popup-ът на Изпрати БГ използва готов дизайн, но може да бъде доближен до цветовете, шрифтовете и разстоянията на Shopify темата чрез CSS. Най-практично е стиловете да се добавят в блок **Custom liquid**, без да се редактират файловете на приложението.

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

## Къде се добавя CSS

1. Отворете **Shopify Admin → Online Store → Themes → Customize**.
2. Добавете блок **Custom liquid** в глобална секция на темата, например header или footer.
3. Поставете CSS между тагове `<style>` и `</style>`.
4. Натиснете **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-ът отново ще използва автоматично откритото лого.

## Как да тествате безопасно

1. Запазете копие на Custom liquid кода преди промяна.
2. Отворете cart страницата и cart drawer-а на desktop и mobile.
3. Проверете трите типа доставка, търсенето на офис/автомат, съобщенията за грешка и бутона за продължаване.
4. Проверете контраста на текст, активни бутони и focus състояния.
5. След обновяване на темата или приложението повторете краткия визуален тест.

За връщане към стандартния дизайн премахнете добавения `<style>` блок. Персоналният CSS не променя цените, куриерските услуги или логиката за избор на офис.