Мне удалось заставить это работать только на странице подписок, и в основном с правильным форматированием, используя следующее.
Огромное спасибо @pfaffman и @NateDhaliwal за предоставленные подсказки, необходимые для полного решения моей задачи.
Примечание: Это работает для моих нужд, но это довольно хаковое решение.
- Перейдите в раздел «Администрирование»
- Перейдите в раздел «Темы и компоненты»
- Выберите вкладку «Компоненты»
- Выберите «Установить»
- В параметрах выберите «Новый»
- Вставьте CSS-код (ниже)
- Отредактируйте CSS в соответствии с вашими потребностями
- Сохраните
- Включите его (если он еще не включен) и убедитесь, что он активен для вашей конкретной темы (или тем) («включить этот компонент в этих темах»).
Совет: Нужна помощь в тонкой настройке CSS? Обратитесь к ИИ-модели, такой как Gemini, Claude… передайте ей CSS-код и расскажите, что вы хотите сделать.
/* ЧАСТЬ 1: Заголовок (стилизованный как нативный H1) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "Это заголовок";
display: block;
/* Стилизация под заголовки 'title-wrapper' */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* Отступ между этим заголовком и текстом ниже */
margin-bottom: 8px;
}
/* ЧАСТЬ 2: Основной текст (с отступом снизу) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "Это обычный текст, который идет под заголовком. \A Здесь можно использовать обратный слэш-A для новых строк.";
display: block;
/* Стилизация под стандартный основной текст */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* Это создает пустое пространство (перенос строки) под вашим текстом */
margin-bottom: 40px;
}
