Базова кастомізація 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 }}
- Перегляд змін: збережіть зміни та перегляньте ваш магазин, щоб побачити, як оновилися шрифти та стилі заголовків.
1. Де у Shopify створюється новий CSS-файл?
2. Що змінює наданий CSS-код?
3. Як імпортувати власний CSS-файл у вашу тему Shopify?
4. Чому корисно вносити власні зміни до CSS?
5. Яка мета імпорту шрифту Poppins у наведеному прикладі?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain how to use Google Fonts with Shopify in more detail?
What should I do if my custom CSS changes aren't showing up on my store?
How can I customize other elements besides headings and paragraphs?
Awesome!
Completion rate improved to 6.25Базова кастомізація 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 }}
- Перегляд змін: збережіть зміни та перегляньте ваш магазин, щоб побачити, як оновилися шрифти та стилі заголовків.
1. Де у Shopify створюється новий CSS-файл?
2. Що змінює наданий CSS-код?
3. Як імпортувати власний CSS-файл у вашу тему Shopify?
4. Чому корисно вносити власні зміни до CSS?
5. Яка мета імпорту шрифту Poppins у наведеному прикладі?
Дякуємо за ваш відгук!
