Убрать артикул в карточке товара Тильда: 3 рабочих способа

Артикул в карточке товара Тильда зашит в шаблон блока «Магазин» и в карточку страницы товара без переключателя «показывать/скрывать» в редакторе. Поле остаётся видимым, даже если его не заполнять, и тянет за собой ещё несколько технических полей: единицу измерения, остаток на складе, подпись «вы сэкономили» при нулевой скидке. В практике кастомных доработок на Тильде запрос убрать артикул в карточке товара Тильда прилетает почти на каждом втором магазине, где карточку собирали через конструктор, а не переписывали с нуля. Дальше - рабочие способы: через CSS, через JS-скрипт с обработкой AJAX-попапа и разбор, какие поля вообще можно чистить без риска сломать данные для 1С или фида.

Зачем убирать артикул и лишние поля в карточке товара

Артикул нужен для выгрузки в 1С, для CRM и для сверки остатков, но покупателю на витрине он не даёт ничего, кроме ощущения, что карточку собирали на скорую руку. На практике из карточки чаще всего убирают:

• артикул (SKU), если он не используется клиентом как код для звонка в поддержку;
• единицу измерения, если товар продаётся поштучно и подпись «шт.» рядом с ценой не несёт смысла;
• блок «вы сэкономили», когда старая цена не указана, а Тильда всё равно резервирует место под текст;
• остаток на складе, если склад один и остатки не синхронизированы в реальном времени - иначе фраза «осталось 3 шт.» просто врёт покупателю.

Каждое из этих полей само по себе не критично, но вместе они превращают карточку в техническую распечатку склада, а не в витрину.

Где Тильда хранит поле «Артикул» и почему его нельзя выключить в редакторе

Поле «Артикул» задаётся в редакторе на вкладке товара - это обычное текстовое поле, которое Тильда использует при выгрузке каталога в XLS и YML и при синхронизации с 1С или МойСклад. Переключателя «не показывать на сайте» у него нет: если поле заполнено, оно попадает в HTML карточки автоматически. Если очистить поле совсем, часть шаблонов (старые версии блока «Магазин», TS001-TS005) всё равно оставляют подпись «Артикул:» с пустым значением - встречал это на трёх разных сайтах, собранных на блоках 2019-2020 года.

За вывод артикула отвечают два разных куска вёрстки, и перед правкой стоит понять, какой из них используется на конкретном сайте:

• .t-store__prod-popup__sku-wrapper - в попапе карточки, который открывается по клику на товар в каталоге;
• .t-product__sku-wrapper - на отдельной странице товара, если магазин настроен на переход по прямой ссылке, а не на попап.

Проверяется это через DevTools: открыл карточку, кликнул правой кнопкой по надписи «Артикул», «Просмотреть код» - и сразу видно, какой класс держит блок на конкретном сайте, потому что у части магазинов работают оба варианта одновременно.

Убрать артикул в карточке товара Тильда через CSS

Самый быстрый способ убрать артикул в карточке товара Тильда, если задача чисто визуальная и на выгрузку в 1С поле не влияет - CSS-правило:

.t-store__prod-popup__sku-wrapper,
.t-product__sku-wrapper {
  display: none !important;
}

Код вставляется в настройках сайта, вкладка «Ещё», раздел «Вставка кода», поле HEAD - тогда правило применится ко всем страницам сайта разом, включая мобильную версию. Если нужно скрыть поле только на одной странице (например, у отдельной категории собственный шаблон карточки), тот же код можно добавить локально через HTML-блок Т123 прямо на этой странице.

Скрываем остальные лишние поля: единицу измерения, остаток, «вы сэкономили»

Артикул редко просят убрать в одиночку - вместе с ним обычно чистят ещё три-четыре поля. Вот селекторы, которые реально работают в блоках «Магазин» актуальных версий:

Все пять правил можно объединить в один блок кода и вставить туда же, в HEAD, вместо точечных правок под каждое поле.

JS-скрипт для полного удаления полей из DOM

CSS прячет элемент визуально, но не убирает его из разметки: код всё равно остаётся в DOM, и его видно через «Просмотр кода страницы» или парсерами конкурентов. Если задача не только эстетическая, а полное удаление, нужен JS. Сложность в том, что попап карточки товара в Тильде рендерится через AJAX уже после загрузки страницы, поэтому обычный document.querySelector на старте ничего не найдёт - на момент выполнения скрипта попапа ещё нет в DOM. Решается через MutationObserver:

document.addEventListener('DOMContentLoaded', function () {
  var removeFields = function () {
    document.querySelectorAll(
      '.t-store__prod-popup__sku-wrapper, .t-product__sku-wrapper, .t-store__prod-popup__uom-wrapper'
    ).forEach(function (el) {
      el.remove();
    });
  };

  removeFields();

  var observer = new MutationObserver(removeFields);
  observer.observe(document.body, { childList: true, subtree: true });
});

Скрипт вставляется в настройках сайта, в поле «Вставка кода перед /body» - так он гарантированно выполнится после того, как Тильда отрисует базовую структуру страницы.

Куда вставлять код и как проверить результат

Порядок действий одинаковый что для CSS, что для JS:

• открыть DevTools и убедиться, что нужный класс действительно есть в разметке конкретного сайта - Тильда меняет вёрстку блоков от версии к версии, и старые примеры из форумов не всегда подходят;
• вставить CSS в HEAD или JS перед /body через настройки сайта;
• сохранить и опубликовать страницу целиком, а не только сохранить черновик - код из настроек сайта применяется после публикации;
• проверить результат в режиме инкогнито: Тильда кеширует опубликованные страницы, и без чистки кеша браузер иногда показывает старую версию до 3-5 минут;
• отдельно проверить мобильную версию на ширине экрана около 375px - у части блоков «Магазин» для узких экранов подключается дополнительная модификация класса.

Частые ошибки при чистке карточки товара

Скрытие пары полей выглядит как мелочь, но на практике на нём спотыкаются одинаково часто:

• берут класс из чужого гайда, не проверив через DevTools, что он совпадает с версией блока на своём сайте - и правило просто ничего не скрывает;
• прячут поле через CSS, когда на самом деле нужно убрать данные из выгрузки в 1С или из YML-фида - CSS ничего не меняет в самом экспорте, для этого поле нужно очищать в карточке товара в редакторе;
• забывают про мобильную версию и потом получают жалобу «на телефоне артикул всё ещё виден»;
• ставят !important на слишком общий класс, который используется не только в карточке товара, но и в других блоках Zero, и получают побочные эффекты в других местах сайта.

Если задача выходит за рамки скрытия пары полей - нужно перекроить структуру карточки, объединить вкладки характеристик или завязать вывод остатков на внешний склад через API - такую переделку разумнее отдать в доработку карточки товара на Тильде под задачу, чем собирать точечными правками в HTML-блоках, которые потом сложно поддерживать при обновлении шаблона.

Частые вопросы

Можно ли убрать артикул только у части товаров, а не у всех сразу

Через CSS и JS правило применяется ко всему магазину сразу, потому что класс общий для всех карточек. Точечно, для одной категории, можно завязать скрытие на дополнительный класс страницы или категории и указать его в селекторе через пробел, но это усложняет поддержку кода при следующих правках каталога.

Повлияет ли скрытие артикула на SEO и микроразметку товара

Поле sku в разметке schema.org Product необязательное, Google и Яндекс не требуют его для валидной карточки товара. Визуальное скрытие через CSS на структурированные данные не влияет вообще, а удаление через JS убирает и текст из DOM - если микроразметка была завязана именно на это поле, стоит проверить её отдельно через инструмент проверки расширенных результатов.

Почему после вставки кода артикул всё ещё виден

Чаще всего дело в неверном классе: у Тильды разная вёрстка карточки в попапе и на отдельной странице товара, и правило, написанное под один вариант, не сработает для другого. Второй частый случай - код сохранён, но страница не опубликована заново, тогда браузер показывает старую версию из кеша.

Ломается ли скрытие после того, как Тильда обновляет вёрстку блока «Магазин»

Да, такое бывает: при обновлении шаблона классы иногда переименовываются или структура вложенности меняется. После крупных обновлений блока «Магазин» стоит раз в несколько месяцев открывать карточку через DevTools и сверять, что нужный класс на месте, особенно если сайт держится на нескольких CSS-правках сразу.