Вивчайте Базова кастомізація CSS | Налаштування Сторінок і Контенту

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

Кроки

Створення нового CSS-файлу: перейдіть до Онлайн-магазин > Теми > Редагувати код і відкрийте папку Assets. Натисніть Додати новий ресурс, оберіть Створити порожній файл і назвіть його custom.css;
Додавання 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;
}

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

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

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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 6.25

Свайпніть щоб показати меню

Кроки

Створення нового CSS-файлу: перейдіть до Онлайн-магазин > Теми > Редагувати код і відкрийте папку Assets. Натисніть Додати новий ресурс, оберіть Створити порожній файл і назвіть його custom.css;
Додавання 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;
}

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

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

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

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3

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

Кроки

1. Де у Shopify створюється новий CSS-файл?

2. Що змінює наданий CSS-код?

3. Як імпортувати власний CSS-файл у вашу тему Shopify?

4. Чому корисно вносити власні зміни до CSS?

5. Яка мета імпорту шрифту `Poppins` у наведеному прикладі?

Awesome!

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

Кроки

1. Де у Shopify створюється новий CSS-файл?

2. Що змінює наданий CSS-код?

3. Як імпортувати власний CSS-файл у вашу тему Shopify?

4. Чому корисно вносити власні зміни до CSS?

5. Яка мета імпорту шрифту `Poppins` у наведеному прикладі?

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

Кроки

1. Де у Shopify створюється новий CSS-файл?

2. Що змінює наданий CSS-код?

3. Як імпортувати власний CSS-файл у вашу тему Shopify?

4. Чому корисно вносити власні зміни до CSS?

5. Яка мета імпорту шрифту Poppins у наведеному прикладі?

Awesome!

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

Кроки

1. Де у Shopify створюється новий CSS-файл?

2. Що змінює наданий CSS-код?

3. Як імпортувати власний CSS-файл у вашу тему Shopify?

4. Чому корисно вносити власні зміни до CSS?

5. Яка мета імпорту шрифту Poppins у наведеному прикладі?

5. Яка мета імпорту шрифту `Poppins` у наведеному прикладі?

5. Яка мета імпорту шрифту `Poppins` у наведеному прикладі?