Користувацький CSS-стиль блогу Shopify: перевизначення існуючих типів тем

Magefan Додаток для блогу Shopify має власні стилі за замовчуванням, які успадковують дизайн вашого веб-сайту. Однак ви можете змінити їх, якщо деякі кольори, шрифти чи інтервали не ідеально відповідають темі вашого магазину або вам просто потрібно змінити дизайн.

Гарна новина: вам не потрібно редагувати файли теми чи наймати розробника для налаштування дизайну блогу. Наш додаток для блогу надає поле Власний CSS , де ви можете безпосередньо змінити будь-який стиль.

Отже, в цьому посібнику ви дізнаєтеся, як додати власний CSS до блогу Shopify з панелі адміністратора, використовуючи два різні підходи.

Де додати власний CSS у блозі Shopify?

Щоб додати власний CSS до блогу Shopify:

1. Перейдіть до розділу Програми > Блог Magefan > Конфігурація > Дизайн та знайдіть розділ Власний CSS .

2. Увімкніть опцію користувацького CSS та вставте туди ваш Власний CSS .

Примітка: будь-який CSS, який ви тут напишете, буде застосовано до всіх сторінок блогу: публікацій, категорій, списків публікацій, авторів, тегів тощо.

налаштування користувацького CSS блогу Shopify

Ми змінимо колір заголовка публікації в блозі як приклад, але ви можете змінити все, що завгодно, додавши кілька стилів у розділі Власний CSS . Ми обговоримо це детальніше пізніше в цьому посібнику.

заголовок публікації в блозі Shopify

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

зміна стилів заголовків дописів у блозі Shopify

У нашому випадку колір заголовка допису в блозі змінився на синій. Однак ви можете змінити стільки деталей, скільки забажаєте, щоб ваш блог відповідав стилю вашого бренду. Крім того, ви можете налаштувати Дизайн блогу Shopify та встановити кілька шаблонів блогу.

Підходи до налаштування дизайну блогу Shopify

Існує два способи налаштування дизайну блогу Shopify за допомогою власного CSS:

  • Перевизначення змінних CSS — найшвидший і найчистіший спосіб синхронізації кольорів, шрифтів та інтервалів між вашим блогом і темою.
  • Написання власних правил CSS — для точного контролю над певними елементами, коли змінних недостатньо.

В обох випадках ви вставляєте CSS у розділ «Власний CSS» у  Програми > Блог Magefan > Конфігурація > Дизайн.

Підхід 1: Перевизначення змінних CSS

Блог Magefan Shopify використовує користувацькі властивості (змінні) CSS для керування зовнішнім виглядом. Перевизначивши ці змінні у вашому полі Власний CSS , ви можете синхронізувати "зовнішній вигляд" блогу з вашою темою.

Крок 1: Знайдіть змінні вашої теми

Кожна тема Shopify надає власні змінні CSS. Ось як знайти їх за допомогою Chrome DevTools:

  • Відкрийте свій магазин у браузері
  • Клацніть правою кнопкою миші будь-де на сторінці та виберіть опцію Перевірити .
  • Перейдіть на вкладку Елементи та натисніть тег <html> або <body> у коді.
  • Знайдіть :root { } i на панелі Стилі праворуч. Тут визначено змінні теми.

інструменти розробника елементи

Ви знайдете такі змінні для теми Dawn:

:root {
  --color-background: 255, 255, 255;
  --color-foreground: 18, 18, 18;
  --color-button: 18, 18, 18;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 18, 18, 18;
  --color-link: 18, 18, 18;

  --font-body-family: 'Assistant', sans-serif;
  --font-heading-family: 'Assistant', sans-serif;

  --page-width: 120rem;
  --page-width-margin: 20px;

  --buttons-border-width: 1px;
}

Примітка: Тема Dawn зберігає кольори як триплети RGB (наприклад, 18, 18, 18), а не як шістнадцяткові значення. Щоб використовувати їх правильно, оберніть їх у rgb(): rgb(var(--color-foreground)).

Крок 2: Зіставте змінні теми зі змінними блогу

Відкрийте Програми > Блог Magefan > Конфігурація > Дизайн > Користувацький CSS та вставте туди наступний шаблон. Замініть значення праворуч на фактичні змінні або значення вашої теми:

:root {
    /* =====================
       Colors
    ===================== */

    /* Main text color */
    --primary-color: rgb(var(--color-foreground));
    --primary-color-alt: rgb(var(--color-foreground));

    /* Accent color (links, hover states) */
    --secondary-color: rgb(var(--color-button));

    /* Body text */
    --text-color: rgb(var(--color-foreground));

    /* Borders */
    --border-color: rgba(var(--color-foreground), 0.1);

    /* =====================
       Post Titles
    ===================== */
    --post-title-color: rgb(var(--color-foreground));
    --post-title-color-hover: rgb(var(--color-button));

    /* =====================
       Icons
    ===================== */
    --color-icon: rgba(var(--color-foreground), 0.5);
    --color-icon-hover: rgb(var(--color-foreground));

    /* =====================
       Layout
    ===================== */
    --container-max-width: var(--page-width);
    --container-gutter: var(--page-width-margin);

    /* =====================
       Buttons
    ===================== */

    /* Primary button */
    --btn-bg-primary-color: rgb(var(--color-button));
    --btn-bg-primary-color-hover: rgba(var(--color-button), 0.85);
    --btn-primary-color: rgb(var(--color-button-text));
    --btn-primary-color-hover: rgb(var(--color-button-text));

    /* Secondary button */
    --btn-bg-secondary-color: rgb(var(--color-secondary-button));
    --btn-bg-secondary-color-hover: rgba(var(--color-foreground), 0.1);
    --btn-secondary-color: rgb(var(--color-secondary-button-text));
    --btn-secondary-color-hover: rgb(var(--color-secondary-button-text));

    /* =====================
       Categories
    ===================== */
    --category-bg-color: rgb(var(--color-button));
    --category-bg-color-hover: rgba(var(--color-button), 0.85);
    --category-color-name: rgb(var(--color-button-text));
}

Після збереження блог автоматично успадкує візуальний стиль вашої теми Dawn.

Підхід 2: Написання власних правил CSS

Іноді вам потрібен точніший контроль над дизайном блогу. Наприклад, зміна розміру шрифту заголовків публікацій, стилізація карток або налаштування інтервалів між публікаціями.

У цих випадках пишіть правила CSS, спрямовані безпосередньо на певні елементи блогу.

Крок 1: Знайдіть потрібний селектор

  • Відкрийте сторінку свого блогу у браузері.
  • Клацніть правою кнопкою миші на елементі, який ви хочете стилізувати, і виберіть Перевірити .
  • Знайдіть назву класу елемента на панелі Елементи .

Клас блогу shopify

Крок 2: Напишіть власний CSS, спрямований на певний клас

Ознайомтеся з основними класами CSS у блозі Magefan .

  • Список блогу
Елемент Клас
Список публікацій .blog-articles
Листівка .blog-articles .blog-article
Назва публікації .blog-articles .blog-article .article-post__title
Зображення публікації .article-post__image-wrapper
Автор .article-post__author
Дата .article-post__data
Кількість коментарів .article-post__count-comments
Категорія .article-post__category-name
Уривок публікації .article-post__content
  • Сторінка публікації
Елемент Клас
Автор .blog-post__author
Дата .blog-post__data
Кількість переглядів .blog-post__count-views
Категорія

.blog-post__category-name
Кількість коментарів .blog-post__count-comments
  • Коментарі
Елемент Клас
Розділ коментарів .c-comments
Один коментар .c-comment
Форма коментаря .c-replyform
Кнопка «Надіслати»

.c-replyform .btn.btn-primary
Кнопка «Скасувати» .c-replyform .btn.btn-secondary
Кнопка відповіді .reply-action

Випадки використання користувацького CSS для блогу

Тепер давайте розглянемо деякі випадки, коли другий підхід до написання користувацького CSS за допомогою класів блогу стає в нагоді.

Налаштування листівок

/* Change post title font size */
.blog-articles .blog-article .article-post__title {
    font-size: 18px;
    font-weight: 700;
}

/* Add shadow to post cards */
.blog-articles .blog-article {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

Налаштування інтервалу між листівками

Інтервал між листівками контролюється змінною --article--gap через CSS-сітку. Селектор залежить від шаблону блогу, який ви використовуєте.

  • Шаблон за замовчуванням:
.shopify-section__blog .blog-articles {
    --article--gap: 24px;
}
  • Шаблон 2-1:
.shopify-section__blog .article-templates-2-1 {
    --article--gap: 32px;
}

Зіставлення кнопок коментарів з темою Dawn

/* Submit button in comment form */
.c-replyform .btn.btn-primary {
    border-radius: 0;
    border-width: var(--buttons-border-width);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 12px;
}

/* Cancel button in comment form */
.c-replyform .btn.btn-secondary {
    border-radius: 0;
    border-width: var(--buttons-border-width);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 12px;
}

Поєднання обох підходів

Для найкращого результату використовуйте обидва підходи разом:

  • Змінні CSS — для синхронізації глобальної колірної палітри, типографіки та інтервалів.
  • Правила користувацького CSS — для точного налаштування, яке не охоплюють змінні.

Крок 1: Перевизначення змінних

:root {
    --primary-color: rgb(var(--color-foreground));
    --secondary-color: rgb(var(--color-button));
    --container-max-width: var(--page-width);
    /* ... */
}

Крок 2: Точне налаштування певних елементів

.blog-articles .blog-article .article-post__title {
    font-size: 18px;
}

.shopify-section__blog .blog-articles {
    --article--gap: 24px;
}

Якщо вам потрібна допомога з налаштуванням CSS блогу Shopify, зверніться до служби підтримки Magefan за порадами та послугами з налаштування.