Инструкция по созданию карточек товаров и пополнению каталога.


Для того, чтобы начать работать с тильдой, нам нужно зайти в наш аккаунт.

Переходим по ссылке https://tilda.cc/login/ и заполняем данные, которые вводили при регистрации (почту и пароль).

После мы автоматически переходим на модуль «мои сайты», чтобы работать с каталогом и создавать товары нам нужно нажать на сайт «Lova Jewelry».

Далее мы видим, какие страницы сайта и папки создавали ранее.

Папки нам нужны для удобства работы, в каждую папку мы сортируем страницы с карточками товаров, так их в дальнейшем проще найти.

Добавляем товар в каталог

Для того, чтобы создать товар, мы должны сделать работу в модуле «товары» и поработать со страницами товара, которые сами создадим.

Для начала добавим украшение в каталог.

Какие строки нам необходимо заполнить:


Заголовок – уникальное название товара, оно должно быть не длинным, но понятным пользователю.

Описание – при заполнении данной строки информация о товаре будет высвечиваться на странице сайта в общем каталоге под фотографией.

Текст – информация о товаре, которая находится в карточке товара. Подробное и интересное описание может зацепить пользователя.

Изображение – фотографии, которые видны в карточке товара, где 1 фотография будет обложкой в карточке товара и в каталоге. Для лучшей работы сайта необходимо загружать изображения менее 3 мб за фото.

Цена – актуальная стоимость товара.

Старая цена – если проходит акция можно написать прежнюю стоимость и показать выгоду.

Количество – можно настроить количество товаров в наличии и при покупке украшений число товаров будет уменьшаться. Это обезопасит нас от продажи товара, который уже закончился.

Строка «вариант товара» – это товары с определенным набором свойств. Чаще всего мы используем такие свойства, как «цвет» и «материал». Создавая новый вариант товара, можно менять цену, количество товара, доступное для продажи и фотографии.

Для чего нужны дополнительные опции, характеристики и чем они отличаются от вариантов товара?


Варианты товара - это уникальные наборы свойств товара, которые отличаются друг от друга. Чтобы сделать уникальный Вариант, нужно добавить свойства (например, цвет, размер и тд) и создать вариант, указав ему конкретный цвет, размер, цену и любое другое свойство.

Дополнительные опции – это параметры, которые являются общими для всех вариантов товара. Например, каждому варианту можно добавить подарочную упаковку или открытку.

Каждое значение опции нужно ввести с новой строки, если опция платная, то ее нужно указать в формате:
Подарочная упаковка =+100, где 100- это цена опции, на которую увеличится итоговая цена.

Характеристики – это общие параметры для всего товара и его вариантов, но не влияют на его цену. Например, это может быть страна-производитель товара, материал.

Строка «Разделы каталога» – каждый товар может принадлежать одному или нескольким разделам.

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

Назначить раздел можно в каталоге в карточке отдельного товара.

Строка «SEO»

SEO — важный инструмент, чтобы ваш сайт заметили поисковики и пользователи.

Во вкладке SEO можно добавить SEO-заголовок, описание и ключевые слова через запятую, которые описывают товар и помогут людям найти ваше предложение в поисковых системах.

Если товара нет в наличии, то мы можем в строке «видимость» и выбрать «черновик» , тогда товар не будут видеть пользователи в каталоге.

Также, добавить товар в черновик можно в каталоге и в столбце «видимость» отключить бегунок.

Есть возможность переместить товар в начало или конец каталога, измененные данные будут видны на сайте, на странице каталога с товарами.

Три точки слева в строчке товара тоже позволяют перетащить товар.

Строка «ссылка на страницу с описанием товара»

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

Если ссылку страницы мы не добавляем, то в общем каталоге на сайте при нажатии на товар будет высвечиваться карточка товара со стандартными блоками.

СОЗДАНИЕ СТРАНИЦЫ С КАРТОЧКОЙ ТОВАРА


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

Например, у нас появилось кольцо из коллекции «Sun & MOON». Если кольцо без коллекции, то просто добавляем украшение в папку «кольцо».

Переходя в папку, мы можем заметить страницы украшений, которые создавали ранее.

Ознакомимся с блоками, которые находятся на данной странице, всего их 12:


1 блок: фон карточки товара с анимацией для десктопной версии.

2 блок: карточка товара для десктопной версии.

3 блок: фон карточки товара с анимацией для мобильной версии.

4 блок: карточка товара для мобильной версии.

5 и 6 блок: раздел «ответы на вопросы» для десктопной версии.

7 блок: раздел на ответы для мобильной версии

8, 9, 10 блоки: с сопутствующими товарами (для всех версий сайта)

11 и 12 блоки: плагин annexx. Это расширение мы используем для того, чтобы создать анимацию на странице.

Перед тем, как работать с блоками, нужно зайти в «настройки страницы» и внести актуальные данные страницы.

В вкладке «главное» нам нужно ввести заголовок, описание (их можно скопировать с каталога) и ввести адрес страницы например, серьги «Sun» (earrings/sun)- сохранить изменения.

Далее на странице добавлены блоки (№ 2,4) с карточкой товара ST200.

Мы загрузили фотографии, добавили описания, указали цену - товары готовы. Осталось привязать карточку товара к каталогу для синхронизации опций.

Из каталога синхронизируется цена, артикул, количество товара в наличии и его варианты. Остальную информацию необходимо заполнить вручную.

Для того, чтобы привязать товар, нам нужно заполнить ID товара в каталоге, для этого мы в каталоге ищем необходимый товар переходим в редактирование товара и листаем в самый низ, копируем число и вставляем его в блок с карточку товара в строчку ID товара в каталоге.

Если мы меняем информацию, например, о доставке, то это необходимо также сделать на странице карточки товара. Ищем блок «ответы на вопросы» и ищем строчку «доставка и оплата», меняем в тексте информацию о стоимости в блоках для десктопной и мобильной версии.

Для редактирования блока сопутствующих материалов нам необходимо перейти в «контент» блока и внести изменения у каждой карточки товара (изображения, заголовок, текст, старая цена (при необходимости), ссылка на станицу товара для кнопки).

Что такое ANNEXX и для чего он нужен?

Annexx - это плагин, который позволяет творить чудеса на страницах. Этот плагин упрощает работу с блоками и делает наш сайт более уникальным и интересным. Часто этот плагин используется для работы с анимацией.

Перед тем, как начать работу с плагином, нам нужно пройти регистрацию (ввести email, который привязан к аккаунту Тильды) заранее установить расширение. Скачать плагин можно по ссылке: https://annexx.cc.

Когда мы будем создавать новые блоки на странице, плагин annexx будет высвечиваться выше всех блоков.

Данный плагин помогает нам сделать карточку товара более динамичной благодаря анимации.

С помощью него можно привязать фон с элементом (блоки №1,3) к карточке товара (блоки №2,4). Закрепляя элемент к блоку, мы можем создавать анимацию, при скролле элемент будет плавно передвигаться вместе со страницей.

Ищем блок №11, редактируем мы данные также через кнопку «Контент» в блоке.

Во второй строчке мы выбираем графическое изображение на фоне, которое будет в роле анимацией (№1 блок: фон для десктопной версии)

В третьей строчке выбираем блок карточки товара (№2 блок: карточка товара для декстопной версии). ID блока можно найти через «настройки» блока, в самом низу мы найдем номер, например, #rec123456789 ,его и копируем

Тоже самое проделываем с блоками для мобильной версии (№3,4) в блоке №12 с плагином.

Почти все! Теперь опубликуем все изменения на странице обязательно проверим, как работает анимация на разных устройствах. В мобильной версии бывает так, что фон с элементом накладывается на следующий блок или наоборот, пространства перед блоками очень большое.

Через «редактировать блок» в фоне карточки товара (блоки №1,3) мы можем поменять расстояние блока в правой панели строке «GRID CONTAINER HEIGHT, PX»

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

Алгоритм работы с тильдой на телефоне.

На мобильном устройстве мы можем изменить информацию в каталоге, поработать на страницах и настроить кнопки «контент» и «настройки», но работать с Zero-блоками не получится.