Базова кастомізація CSS

Базові зміни CSS дозволяють налаштовувати зовнішній вигляд і стиль вашого магазину Shopify понад стандартні налаштування теми. У цьому розділі ви дізнаєтеся, як створити та імпортувати новий CSS-файл у вашу тему для внесення змін у стилі.

Кроки

1. Створення нового CSS-файлу: перейдіть до Онлайн-магазин > Теми > Редагувати код і відкрийте папку Assets. Натисніть Додати новий ресурс, оберіть Створити порожній файл і назвіть його custom.css;
2. Додавання CSS-коду: відкрийте ваш файл custom.css і додайте цей код для зміни шрифтів і налаштування стилів заголовків:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 600;
color: #000;
}

3. Підключення вашого CSS-файлу до теми: перейдіть до файлу layout/theme.liquid і додайте наступний рядок перед закриваючим тегом </head>, щоб підключити ваш новий CSS-файл:

{{ 'custom.css' | asset_url | stylesheet_tag }}

4. Перегляд змін: збережіть зміни та перегляньте ваш магазин, щоб побачити, як оновилися шрифти та стилі заголовків.