Меню

Html как сделать каталог товаров самому

Создать электронный каталог по продуктам компании можно из простой PowerPoint-презентации. У ваших продавцов всегда будет под рукой приложение, в котором они быстро найдут нужную информацию по товару и расскажут о нем клиенту в деталях. Как создать такой каталог, расскажет руководитель проекта дистанционного обучения международной компании MW-Light Лана Виноградова.

Лана Виноградова,
руководитель проекта дистанционного обучения MW-LIGHT

Знаете, чем отличается плафоны с непрозрачным стеклом от обычных, прозрачных? Например, тем, что дают более мягкий свет. А еще бывает стекло с хрустальной крошкой, гальванизированное стекло, стекло с кракелированием. Сотрудники ритейлера MW-Light, специализирующегося на продаже декоративных светильников, обязаны знать все нюансы о каждом виде стекла, о каждой люстре и лампе.

В ассортименте у компании 300 коллекций, в каждой — от 10 до 100 светильников. Причем за год линейка может обновиться на 35%. Запомнить все модели нереально. Поэтому для сотрудников мы разработали электронный каталог со всеми видами продуктов. Продавцы открывают его на телефоне или планшете, вводят нужный артикул в поисковой строке, читают информацию о люстре, показывают ее фото клиентам.

Чтобы создать такой материал, не обязательно быть дизайнером или программистом. Я сделала курс из обычной PowerPoint-презентации при помощи бесплатной версии конструктора iSpring Suite. Хотите сделать такой же? Расскажу как.

В нашей компании отдел маркетинга создает каталоги по продукции в формате PDF и PowerPoint-презентации. По факту, это обычная брошюра — на каждой странице фото отдельной модели светильника и его подробные характеристики.

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

Для дальнейше работы вам понадобится конструктор курсов iSpring Suite. Скачайте пробную версию на официальном сайте компании. На 14 дней вы получаете программу с полным набором функций. Этого времени хватит, чтобы сконвертировать в электронный каталог с десяток презентаций.

Сперва нужно переименовать слайды презентации, чтобы по названию их было легко найти в поисковой строке будущего каталога. Я вывела правило: один слайд — одна модель продукции. В моем случае — один светильник. Тогда в заголовке слайда можно поставить его название или артикул.

Чтобы переименовать слайд, откройте в PowerPoint вкладку iSpring Suite и нажмите Свойства слайдов. В появившемся окне вы видите список всех слайдов.

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

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

Чтобы у каталога появилась удобная строка поиска, нажмите кнопку Плеер на панеле инструментов iSpring Suite.

Перед вами появится панель инструментов плеера. Выберите на панеле раздел Шаблоны и в появившемся списке нажмите на Фирменный курс.

В презентации появился плеер с поисковой строкой и списком слайдов. Также вы можете брендировать электронный каталог, вставив логотип компании.

Видеоинструкция по настройке плеера электронного каталога

В iSpring Suite есть несколько вариантов публикации электронного каталога. Два самых популярных:

  • Сайт или блог. Программа сконвертирует каталог в формат HTML5. Готовый файл вы можете загрузить в интернет, к примеру, на корпоративный сайт компании.
  • СДО. Конструктор упакует курс в SCORM-пакет, который вы сможете отправить в систему дистанционного обучения. Я использую этот вариант.

Еще один простой способ поделиться каталогом с сотрудниками — загрузить в «облачный» сервис iSpring Cloud. По сути, это файлообменник для презентаций, электронных курсов и тестов. Загружаете сюда каталог, открываете доступ по ссылке и отправляете ссылку сотрудникам по email, в социальных сетях или СМС. Продавцы смогут открыть каталог с любого гаджета, нужен лишь доступ в интернет.

Простой Google Drive или «Яндекс. Диск» здесь не подойдет, потому что эти файлообменники не поддерживают HTML-формат, в котором публикуется электронный каталог.

Видеоинструкция, как работать с iSpring Cloud

В iSpring Cloud можно смотреть статистику по материалам: кто открывал, сколько слайдов просмотрел, сколько в среднем ротратил времени на изучение.

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

источник

21 ноября 2015 | Опубликовано в css | 2 Комментариев »

В этом уроке мы расскажем о шаблоне интернет-магазина. Он создан с помощью HTML5 и CSS3 в приятной светло-серой гамме. Надеемся, Вам понравится эта страница и Вы откроете для себя новые приемы верстки. Давайте начнем пошаговый урок по созданию верстки на HTML5 и CSS3.

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

    Папка под названием css, в которой будут находиться файлы стилей, т. е. snivo-sl >

Теперь рассмотрим код HTML раздела head:

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

Вот разметка HTML для этого раздела:

После шапки страницы идут следующие два раздела: прокручивающаяся галерея изображения nivoSlider и основной раздел содержимого.

Стили для прокручивающейся галереи изображений nivoSlider находятся в отдельном файле css/nivo-slider.css, который есть в архиве с исходным кодом.

И, наконец, вот раздел подвала страницы:

Вот все необходимые скрипты JavaScript: js/html5.js, js/jquery.js и js/jquery.nivo.slider.pack.js. Все эти библиотеки находятся в архиве с исходным кодом.

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

Поздравляем, верстка интернет-магазина полностью готова. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Andrew Prikaznov

источник

От автора: приветствую вас, друзья. В этой статье мы попытаемся в общих чертах ответить на вопрос, как верстать каталог товаров. Для этого мы ответим на вопрос, что такое каталог товаров, что должно присутствовать в каталоге товаров и в чем отличие сайта с каталогом товаров от интернет-магазина. Начнем?.

Итак, начнем с определения того, что же такое каталог товаров. Думаю, ответить на этот вопрос сможет практически любой. Каталог — это, по сути, интернет-магазин без возможности купить, т.е. интернет-магазин без корзины. Посетитель такого сайта может смотреть товары, сравнивать их цены, но лишен возможности купить эти самые товары. Вот и вся разница.

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

Ну что же, давайте попробуем сверстать прототип каталога товаров. Обращаю ваше внимание на то, что у меня нет дизайна и моя задача не сделать красивую готовую верстку. Нет, моя задача просто набросать верстку каталога, не более.

Итак, наш сайт, пусть это будет каталог одежды, должен предполагать категории и товары. Категории я вынесу в сайдбар, ну а товары будут занимать основное место сайта — область контента. Также категории нередко можно видеть и в виде меню между шапкой и контентом. Чтобы не писать много стилей, я использую CSS фреймворк Bootstrap, который и подключу к нашей странице.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

источник

Из этой статьи вы узнаете:

  • Как правильно оформлять каталог товаров
  • Нужны ли печатные каталоги товаров современным компаниям
  • Каким должен быть макет каталога товаров для печати
  • Как грамотно сделать электронный каталог товаров
  • Как продавать товары в группах «ВКонтакте»
  • Какие плагины помогут сделать каталог товаров на WordPress

Удобный и стильный каталог товаров – надежный инструмент для привлечения потенциальных покупателей. Несмотря на бурное развитие Интернета и приложений для смартфонов, печатный буклет не устаревает и остается эффективным каналом рекламы. Фирменные буклеты-каталоги выпускаются даже крупными корпорациями. Но как же сделать сайт-каталог товаров привлекательным для целевой аудитории и каким вообще должен быть каталог продукции (печатный или электронный)?

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

Оформление товарных каталогов – одна из важнейших задач маркетолога. От того, насколько понятен и презентабелен этот документ (как печатный, так и онлайн), будет зависеть первое впечатление потенциального покупателя и его готовность совершать покупки у вас.

Есть несколько базовых принципов оформления каталогов товаров.

Перед началом проектирования каталога убедитесь, что собрали все необходимые сведения и материалы для него. Чтобы сделать каталог товаров (в PDF или ином формате), подготовьте: фотографии товаров, их общий список, описания каждой позиции. Будет полезна и другая информация: краткие сведения о компании, отзывы покупателей, сертификаты и все, что может подтолкнуть потребителя к решению о покупке у вас.

Сделайте изображения продуктов визуально привлекательными

Изображения товаров – одна из первых вещей, на которую падает взгляд потенциального покупателя. Поэтому образ продукта должен быть привлекательным, стимулирующим приобрести вещь как можно скорее!

Можно, конечно, попытаться отснять товарную номенклатуру своими силами, но, если ваши навыки фотографа оставляют желать лучшего, обратитесь к профессионалу.

Однако, если вы умеете фотографировать и располагаете нужным оборудованием (цифровой фотокамерой, объективом для предметной съемки, подсветкой), то вы можете сделать фотографии товаров для своего каталога самостоятельно. Разрешение готовых фото должно быть не менее 300 dpi (иначе они будут плохо смотреться). Снимать изделия целой группой на белом фоне нежелательно, лучше сфотографировать каждое из них по отдельности, добавив тени.

До начала работы над созданием каталога соберите все основные данные по товарам – прежде всего их технические спецификации. То есть нужно сделать каталог товаров в Excel. Сведите в общую таблицу все товарные позиции с их номерами и ценами (включая начальные цены и цены со скидками).

Если есть возможность, напишите небольшие тексты о преимуществах каждого продукта. Отбирайте только те сведения, которые склонят симпатии клиента в сторону приобретения товара у вас. Вся подряд информация не нужна, она будет только отвлекать внимание.

Тех, кто захочет ознакомиться с характеристиками товара более подробно, отправляйте на ваш сайт.

Составьте описание продуктов

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

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

Указание стоимости в зависимости от веса или размера тоже подталкивает клиентов к покупке.

Напишите дополнительную информацию

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

Читайте также:  Как сделать смывку цвета в домашних условиях цвет черный

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

Помимо сведений о товарах, можно добавить в каталог и информацию о фирме (продавце или производителе): ее историю в сжатом виде, например. Это усиливает доверие потенциальных клиентов, которые просматривают ваш каталог, ища нужный продукт.

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

Упорядочите содержание

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

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

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

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

Дизайн формы заказа

Разработка формы заказа – трудоемкая и непростая задача. Если форму сделать слишком длинной и запутанной, потребитель просто покинет сайт, не совершив покупку. Поэтому желательно указать телефон магазина или горячей линии на случай, если у клиента возникнут проблемы при оформлении заказа.

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

Чем так хороши бумажные каталоги по сравнению с другими типами рекламной полиграфии? Своей информационной насыщенностью: каталог – это максимум сведений о продуктах, услугах и самом предприятии. В каталоге исчерпывающе описаны все достоинства, плюсы, уникальные свойства товаров.

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

Рекомендуемые статьи по данной теме:

Сделав качественный, красочный и информативный каталог товаров, вы поможете продавцам, работающим непосредственно в торговых точках. Предположим, человек не нашел интересующее его устройство в магазине бытовой техники и обратился к консультанту за помощью. Консультант дает ему полный каталог и предлагает поискать товар там (чтобы сразу же заказать его и через несколько дней получить прямо на дом). Это отличное решение: в противном случае покупатель ушел бы с пустыми руками или же персоналу пришлось бы искать нужный товар на складах, звонить в другие торговые точки и т. п.

Самый первый каталог товаров был сделан очень давно – еще в 1872 г. в США Аароном Монтгомери, бывшим коммивояжером.

Рождение товарного каталога как жанра полиграфической продукции – довольно забавная история. В то время Монтгомери руководил подразделением крупной торговой фирмы и ломал голову над тем, как сбыть залежалый сезонный товар, на который не было спроса. Огромные скидки и старания выездных торговцев не давали эффекта. Поэтому Монтгомери решил отказаться от зазывания клиентов в магазин (который мог располагаться в соседнем городке или отдаленном районе, а транспорт был развит довольно слабо).

Зато американская почта работала замечательно, и Монтгомери решил этим воспользоваться. Напечатав перечень товаров и способы заказа на листах бумаги (примерно соответствующих формату А4), он разослал этот прообраз каталога, больше похожий на листовку, потенциальным покупателям. И это сработало: несезонные товары были буквально сметены с полок.

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

  1. Имиджевые: презентуют саму компанию, ее историю и достижения. Сведения о товарах второстепенны и не занимают много места. Основные способы распространения таких печатных изданий – почтовая рассылка либо первичный продукт, необходимый для знакомства с деятельностью компании.
  2. Рекламные: фокусируют все внимание читателя на товарном ассортименте, ценах, акциях и скидках. Могут содержать полный прайс-лист на все, что продает компания, или на какие-то отдельные продуктовые линейки. Такие каталоги выпускают перед особыми событиями или для информирования о спецпредложениях, а распространяют в местах продаж либо по почте.
  3. Периодические: выходят регулярно, раз в промежуток времени, содержат новости, актуальный перечень услуг или товаров с ценами, текущие акции.

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

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

  • Вырабатываем концепцию и отрисовываем дизайн-макет.

Для начала определитесь с назначением бумажного каталога, его тематикой, целевой аудиторией, форматом, объемом, способами распространения. Затем соберите все необходимые фотоматериалы и подготовьте текстовый контент. Лишь после этого можно приступать к созданию макета.

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

Лучше обратиться к профессиональному дизайнеру полиграфии (например, заказав разработку каталога в типографии). Этот специалист обладает всеми профильными навыками, разбирается в композиции и колористике, понимает, что такое фирменный стиль. Вы можете рассчитывать на качественный результат.

  • Допечатная подготовка макета.

Когда оригинал-макет создан и утвержден, пора подумать о технических параметрах печати. Они зависят от того, по какой технологии и на каком оборудовании будет печататься ваш каталог товаров. У всех типографий – свои требования к макетам, поэтому обращение к дизайнеру той фирмы, где вы планируете печатать издание, – наиболее целесообразный вариант: этот специалист сразу сделает все как надо, и не придется переделывать макет по многу раз.

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

  • Печать издания.

Сегодня печать полиграфической продукции осуществляется при помощи различных технологий. В зависимости от тиража и требований к качеству издания вы можете выбрать:

  1. Цифровую печать, если вам нужен небольшой тираж каталога как можно скорее.
  2. Офсет, если вы стремитесь сэкономить деньги, хотите использовать краски Pantone и напечатать большой тираж.
  3. Ризографию (метод создания многочисленных копий с исходного файла), если вам нужен небольшой бюджетный двухцветный буклет.

Необходима для того, чтобы сделать готовый каталог товаров еще более привлекательным и необычным, а также защитить бумажное издание от повреждений. Постпечатная обработка – это целый набор различных технологий: резка, ламинация, биговка, высечка, фальцовка, брошюровка, тиснение, УФ-лакирование.

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

Концепция отвечает на основные вопросы об издании: его функциях, ЦА, содержании. Замысел отражает концепцию. Например, для каталога промышленного оборудования будет неуместен растительный декор и яркая цветовая гамма: такой каталог будут просматривать деловые люди – инженеры, руководители бизнеса и т. п. – поэтому рекомендуется оформлять его строго, сдержанно и без лишних украшательств.

Ясная и логичная структура.

Непродуманная организация контента каталога – беда для читателя: ему придется прочесывать каждую страницу ради нужной информации, напрягаясь и раздражаясь. Такое издание не захочется просматривать во второй раз.

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

Не перегружайте каждую полосу.

К сожалению, каталоги товаров, перегруженные информацией – когда продукты буквально впихнуты на полосу по принципу «чем больше, тем лучше» ради экономии места, – не редкость. Обычно такие каталоги в виде газет выпускаются крупными торговыми сетями, которые торгуют широким ассортиментом недорогой продукции и рекламируют, прежде всего, свои скидки. Печать дорогих красивых каталогов с достаточным количеством «воздуха» не окупится, так как их товары приносят невысокую прибыль. Впрочем, это все равно не повод для того, чтобы нагромождать информацию, цены и картинки как попало, не заботясь о восприятии издания читателем.

Качество иллюстраций (прежде всего, фото товаров) очень существенно влияет на продающие свойства каталога. Если вы ходите сделать по-настоящему качественный каталог товаров, еще до разработки дизайна придется озаботиться предметной съемкой продукции, ретушью фотографий, а то и созданием трехмерных моделей (которые особенно необходимы для каталогов недвижимости, оборудования и т. п.).

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

Поэтому качественное издание, которое будет продавать ваши товары и приносить вам доход, – это сумма всех четырех факторов: само изображение, бумага, метод печати, последующая обработка.

Оригинал-макеты продуктовых каталогов отправляют в типографию в форматах EPS, PSD, TIFF или PDF. Для разработки макетов используют такие популярные графические редакторы, как Photoshop и Illustrator от компании Adobe или же CorelDraw.

Габариты страницы должны, во-первых, соответствовать обрезному формату полиграфического изделия, во-вторых, быть снабжены вылетами под обрез (по 2–7 мм).

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

Топ-5 статей, которые будут полезны каждому руководителю:

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

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

Продуктовый каталог является основой любого онлайн-магазина. Сделав сайт с каталогом товаров (грамотно и логично организованным), вы решаете сразу две задачи:

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

  • Создайте структуру на основе поисковых запросов

Хороший каталог отвечает двум важным требованиям:

  • логичность структуры;
  • соответствие названий товарных групп поисковым запросам вашей тематики.
Читайте также:  Как самому сделать арку для сада

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

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

  • Сделайте шаблон описания и подробно расскажите про товар

Чтобы товар из интернет-магазина легко находился поисковыми системами по ключевым словам, его карточка должна содержать как можно больше информации. При этом огромный «кирпич» текста со множеством подробностей – неудачное решение: контент нужно структурировать так, чтобы все товары были оформлены по единой схеме. Это упростит поиск продукта для пользователя и пополнение товарной базы – для администратора магазина.

Кроме того, сведения о товаре должны быть полезными для читателя. Чтобы этого достичь, проделайте три шага:

  1. Оцените текст в товарной карточке с точки зрения клиента: есть ли там ответы на все его вопросы?
  2. Сравните оформление карточек на вашем ресурсе и на сайтах конкурентов: возможно, пришла пора почерпнуть несколько свежих идей и рабочих приемов?
  3. Пользуйтесь теми сведениями о продукте, которые предоставил вам поставщик.

Собрав все сведения о том или ином товаре, отберите для каталога только те, которые интересны и важны потенциальному покупателю. Какая информация замотивирует его на покупку?

Так, для магазина обуви это – точный размер всех пар, а вот для стандартных товаров единого размера (солнечные очки, часы и т. п.) данный параметр не нужен. У джинсов несколько габаритов: обхват талии, длина внутреннего шва и собственно размер. Если же вы торгуете телевизорами, указывайте разрешение и диагональ каждого изделия в своем интернет-каталоге.

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

Чем более логично и рационально сделан каталог, тем удобнее покупателю. Для магазинов, предлагающих тысячи и десятки тысяч товарных наименований, это особенно актуально. Все продукты должны быть правильно распределены по группам и подгруппам. Например, подразделы «Платья», «Топы», «Юбки» относим к разделу «Женская одежда».

Описывайте однотипные товары по единому шаблону: это ускорит сравнение их между собой и поиск требуемой информации.

Оперативное пополнение товарной базы.

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

Структура каталога, названия категорий и грамотно составленные сопроводительные тексты к товарам принесут вам дополнительный трафик из поисковых систем. Опирайтесь на поисковые запросы, по которым потребитель будет искать ваши товары.

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

Упрощается реклама и продвижение товаров.

Если сделать каталог товаров на сайте в соответствии с запросами клиентов (используя ключевые слова, по которым ищут товары, – по отдельной странице на каждый ключевик), то можно сразу же настроить контекстную рекламу и оптимизировать страницы для SEO.

Если вы планируете сделать сайт – каталог товаров, к вашим услугам множество CMS, среди которых есть как бесплатные, так и платные решения. Можно вообще не связываться с CMS, если перспектива написания кода и ручной расстановки блоков вас не вдохновляет: html-каталог товаров можно сделать и с помощью других, интуитивно понятных каждому пользователю инструментов.

Что касается бесплатных CMS-систем, то лидером среди этих инструментов для создания сайтов является WordPress. Это наиболее популярная CMS для интернет-магазинов, которую можно легко освоить самостоятельно.

Разумеется, сам WordPress необходимо будет для начала установить. О том, как это сделать, рассказывается в других статьях, которые в изобилии имеются в Интернете; мы на этом останавливаться не будем.

Чтобы стильно и качественно оформить продуктовый каталог, следует также установить один из специальных плагинов для WordPress, перечисленных ниже:

CataBlog содержит практически все инструменты, необходимые для отображения на сайте товарной витрины: создания галереи картинок, добавления описаний, названий и всех необходимых ссылок к каждой товарной позиции; настройки категорий и фильтров для сортировки товаров (по имени, дате, в случайном порядке), которые помогут пользователям находить нужные товары.

К особенностям данного плагина относятся:

  • Простой процесс форматирования описаний товаров (редактором WYSIWYG TinyMCE).
  • Наличие виджетов, позволяющих отображать каталоги и товарные группы в сайдбаре.
  • Автоматическая пагинация – разбивка списка товаров на страницы (нужные параметры указываются в шорткоде).
  • Возможность задавать отдельные значения ширины и высоты для миниатюр.
  • Возможность сделать отдельные html-страницы категорий для товаров из каталога.
  • Поддержка плагином нескольких языков: русского, французского, немецкого, испанского, шведского.
  • Различные способы сортировки: по дате, имени, порядку добавления, в случайном порядке.
  • Возможность импортировать и экспортировать каталог (в CSV и XML).
  • Плагин совместим MultiSite.
  • Подгрузка файлов по FTP, автоматический импорт новых.
  • Ясное и простое управление товарным каталогом (с помощью админпанели).

2. WP Catalogue

WP Catalogue – еще один простой и удобный плагин для WordPress, дающий возможность самостоятельно и бесплатно сделать онлайн-каталог товаров. К каждой товарной позиции можно подгрузить три изображения. При настройке дизайна под определенную тему WordPress можно менять цвета, количество товаров на странице, размеры картинок, нумерацию страниц; есть несколько макетов сетки каталога на выбор.

Особенности данного плагина следующие:

  • Легкость и простота в использовании.
  • К каждому товару можно добавлять до трех фотографий.
  • Редактирование общих настроек – цвета темы, размеров картинки, числа товарных позиций на странице, макета, пагинации – осуществляется просто и быстро.
  • Дизайн можно полностью настроить на свой вкус посредством CSS.
  • Можно сделать в каталоге товаров кнопки «Предыдущий» и «Следующий».
  • Возможность выводить или не выводить цену товара.
  • Товары добавляются посредством перетаскивания мышью.
  • Поддержка многих популярных браузеров: Firefox, Chrome, Safari, IE (7–9 версии).
  • Вывод на главную делается посредством специального шорткода ([wp-catalogue]).

3. eCommerce Product Catalog

Для сайтов, сделанных с применением системы eCommerce, данный плагин незаменим. При всей его простоте он достаточно мощен и обладает всеми нужными опциями для того, чтобы сделать html-каталог товаров для сайта на WP. Множество настроек позволит оформить витрину в любом стиле.

Преимущества плагина:

  • Количество товаров в каталоге не ограничено.
  • Есть инструменты для SEO-оптимизации товарных карточек.
  • Все настройки интуитивно понятны.
  • Можно задавать продукту определенные свойства на выбор.
  • Три различных шаблона товарных карточек.
  • Два шаблона списков товаров.
  • Форматы цен настраиваются вручную.
  • Доступные категории оформлены в виде виджета.
  • Есть специальный виджет для поиска по каталогу.
  • Дизайн полностью редактируется вручную.
  • Плагин совместим со всеми популярными браузерами: Firefox, Opera, Chrome, Safari, IE (7–9 версии).
  • Можно сделать импорт неограниченного числа продуктов в формате CSV.

4. Ultimate Product Catalogue Plugin

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

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

Характеристики плагина:

  • Наличие трех настраиваемых макетов.
  • Имеются настраиваемые поля.
  • Карточку товара тоже можно кастомизировать.
  • Дизайн меняется – есть возможность редактировать файл стилей CSS.
  • Имеются виджеты сортировки продуктов по разным принципам: списком, последние добавленные, в случайном порядке.
  • Можно сделать как импорт, так и экспорт товаров каталога.
  • Вся верстка адаптивна.

5. WordPress Catalog

Плагин WordPress Catalog – еще одно удобное решение для тех, кто хочет сделать на своем сайте каталог товаров. Каждая товарная позиция принадлежит к своей категории, поэтому поиск на сайте нужного продукта не станет проблемой для посетителя. У категории может быть неограниченное число настраиваемых параметров, позволяющих охарактеризовать товар во всей полноте его свойств и преимуществ.

Вот основные особенности данного плагина:

  • Адаптивная верстка шаблонов.
  • Товары разложены по группам и подгруппам.
  • Возможен импорт и экспорт содержимого каталога.
  • Есть опции поиска по названию товара и категории, описанию, отдельным свойствам.
  • Предлагается несколько вариантов визуального оформления.
  • Товары можно фильтровать.
  • Поддерживается пагинация.

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

В группе вашего интернет-магазина «ВКонтакте» тоже можно сделать каталог товаров. Для этого зайдите во вкладку «Управление», нажав на соответствующую кнопку в правой части страницы (под аватаром группы).

Вы попадете в меню настроек сообщества, где нужно выбрать пункт «Разделы» в правом сайдбаре. Увидев параметр «Отключены» напротив товаров, нажмите на него и выберите настройку «Включены».

После этого надо указать все параметры, касающиеся товаров:

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

Не забудьте сохранить изменения.

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

В открывшемся окне производим все манипуляции, связанные с добавлением и редактированием товара, а именно:

  1. выбираем категорию, к которой принадлежит товар;
  2. вставляем его описание;
  3. подгружаем фотографии продукта;
  4. указываем его стоимость;
  5. если необходимо, можно сделать товар недоступным.

После этого нажимаем на кнопку «Создать товар», сохраняя таким образом все изменения.

Товар должен появиться на странице группы в соответствующем блоке. Как видите, сделать каталог товаров в группе «Вконтакте» совсем не сложно.

источник

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

Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.

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

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.

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

Читайте также:  Как самому сделать подкормку для фидера

И зададим стили карточек товаров.

Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.

Исправим это с помощью отрицательного значения margin-right у родителя.

Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.

Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.

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

Осталось немного увеличивать фото при наведении.

Как все это работает можно посмотреть на примере демо.

Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .

А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.

Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.

Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.

Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .

Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

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

По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .

Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Я одного не пойму, почему как только нужна группа каких-то однородных элементов, так сразу непременно используется ul и его друзья? В каждой второй верстке обязательно ul. Особенно на плагинах, которые должны выдавать иерархию, будь то меню или дерево — обязательно висит ul. Да в половине сладеров-крутилок — обязательно ul. Сидишь и наблюдаешь, как дерево с точками красиво трансформируется в то что надо.

Почему бы не использовать просто div? И не надо ничего обнулять, ничего не надо очищать, стилизуй сразу как надо, не задумываясь о том, как списки в том или ином браузере отображаются по умолчанию.

Мне кажется, что понятие список настолько растяжимое, что лично я бы не стал в данном случае говорить о семантике. Анонсы статей на сайте — список? Логотипы компаний-рекламодетелей список? Аватары топовых авторов? Номера страниц? Список тегов?

Особенно, я не стал бы говорить про то, как выглядит список. По мне выглядит как список только, собственно, список и все. То есть тот самый, который по умолчанию, нумерованный-ненумерованный с некоторой степенью стилизации. Это и есть список, для которого используются эти теги.

Список товаров так, как он представлен на картинках, это не список.

Мысленно сотрите css, оставив только браузерные стили. Как лучше представить товар?
Правильно, таблицами. Но таблицы в вебе крайне неадекватны.
На втором месте будет список. Визуально отделен для людей, логически является списком для роботов и скриптов.

Никогда не путайте ‘чем является’ и ‘как выглядит’. Меню — всегда список, акцентрирование внимания — strong, и т.д. А то, что визульно я сделал меню в виде бегающих анимированых человечков, а важные элементы обвожу рамочкой — это уже работа по юзабилити и дизайну, что не касается html.

Если вы придумали более удобные универсальные теги — поделитесь. Никто не доволен li, но лучше пока что то не получается. Конкретно Div сливаются с текстом без доп стилей и не несет в себе логическое заключение ‘мой сосед — такой же, как я’. Т.е. допустим плагин на браузер, позволяющий свернуть большие объемы однотипных данных, уже не сработает. А кому то может очень надо. Ну и т.д.

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

Доводы DrMeJI мне не показались убедительными. Например я не считаю,, что меню это список. Это иерархия — да, и списки тоже могут быть иерархическими да, но я не считаю что всю подряд иерархию нужно оформлять списочным тегом.

И я не считаю, что нужно мысленно стирать CSS, зачем? Если у меня должен получится список, я использую списочный тег. Если мое меню должно выглядеть как список, как раньше делали во фреймах, то я использую тег списка. Если у меня есть список категорий, которые должны выглядеть как список, то я использую тег списка. Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

Помогают ли эти теги роботам? Сомневаюсь. Для людей — соглашусь, по тегам сразу видно иерархию и ‘мой сосед — такой же, как я’. Но я тоже самое гораздо внятней увижу по классам.

Ну вот зачем в каждом слайдере-крутилке с плоским набором картинок понатыкан ul+li?

Поэтому мое мнение пока неизменно: списки — для списков. Если список похож на то, что выдают эти теги по умолчанию, используем ul а если нет, то и ну их к бесу.

Но если у меня выпадающее меню в шапке зачем я должен использовать теги списка и мучится с обнулением их свойств? Не понимаю.

Что в правиле list-style: none; такого мучительного?

источник

Хотя, конечно, вернее будет назвать это «система заказа товаров на сайте».
Но, глядя на сайты многочисленных российских фирм, которые работают
именно по такому принципу (www.dostavka.ru, www.depo.ru, www.wstore.ru),
мы тоже с пафосом назовем набор простеньких скриптов «ИНТЕРНЕТ-МАГАЗИН».
Что для этого потребуется: любой web-сервер, поддерживающий работу с cgi.
Вполне подойдет apache, eserv, pws. Установленный php версий 3.0.х — 4.0.х,
установленный сервер баз данных mysql (хотя, не имеет значения какой именно —
но этот пример написан исходя из того, что установлен именно mysql).
Платформа не имеет особого значения. Это будет работать и на win32, и на unix.
Что мы хотим получить: чтобы пользователи, путешествуя по нашему сайту,
могли заказать интересующие их товары, и чтобы этот заказ попал к нам в руки.
А дальше уже начинается обычная работа менеджеров.
Определим задачи:
1) Каждый пользователь при заходе на сайт должен получить уникальный идентификатор.
Мы же должны знать кто именно заказывает товары?
2) Для каждого пользователя у нас должна хранится виртуальная «корзина»,
где будет учитываться что заказано и в каком кол-ве.
3) В конце концов, весь заказ отправляется по e-mail менеждеру (с информацией кто, когда,
что и сколько заказал) и самому пользователю сделавшему заказ.

Делаем таблицы для базы данных товаров. Здесь нужна оговорка — идеальный случай,
если у вас каждый товар имеет свой уникальный код.
По всем правилам именно так и должно быть.
У вас не так? Сделайте поле auto_increment — сильно облегчите жизнь.
Вообщем, будем счиатать что с базой товаров у Вас все ок.
Для определенности, рассмотрим самый простой случай — у вас всего одна таблица с
примерно такой структурой:

Но никакой разницы принципиальной нет, конечно же.
1) Делаем файл, в котором у нас каждому пользователю присваивается идентификатор:

Этим мы устанавливаем файл cookie с именем cookie_tmp, значением $uid
и временем жизни 1 неделя с настоящего момента.
Этот файл вставляем ДО вывода ЛЮБЫХ тэгов html на все (или на какие надо)
страницы нашего сайта:

Если Вас не прельщает использование файлов cookie можно таскать
этот самый $uid по всему сайту через строку запроса или скрытые поля формы…

2) Делаем таблицу для хранения «корзины» заказов:

Поле activated пригодится для проверки когда была добавлена запись в таблицу
и удаления, если, к примеру, это произошло больше недели назад.

2.1) Делаем файл который добавляет в эту нашу таблицу информацию:

2.2) С учетом этого, теперь наш файл который выводит информацию
из базы данных выглядит примерно так:

2.3) Делаем файл basket.php3 — он у нас ответственный за добавление записей
в корзину и просмотр этой корзины:

3) Теперь осталось сформировать текст письма:

4) … и отправить письма (клиенту и менеджеру)
Да, необходимый комментарий. Я на первой странице своего сайта
указывал что это просто СОВЕТЫ, а никак не готовые решения.
И что необходимо почитать кое-что еще прежде чем браться за написание.
В данном случае, я намекаю на статью «приемы безопасного программирования на php».
Вот посмотрите листинг следующего файла и прочитайте то,
о чем я говорю — сразу станет ясно где дыра…

Ну что? Разумеется, опасность в том, что этому скрипту можно подсунуть
ЛЮБЫЕ данные и он их отправит спокойно..
Выход: не пересылать с предыдущей страницы содержимое заказа,
а формировать его непосредственно в этом скрипте.
Вообще, надо стараться таскать за собой как можно меньше данных.
Также, НИКОГДА не повредит проверка того, с какой страницы пришел запрос.
5) Все. Мы получили все что хотели. Теперь осталось только сделать функцию
которая будет чистить таблицу shop_tmp от старых заказов. Но это уже сами.

6) Перед всеми операциями с базой данных вызывается файл
для соединения с базой данных такого вида:

ps. Еще раз повторяю — все что здесь написано я проверил —
ЭТО работает. Если у вас не так — вы просто что-то неправильно сделали…
pps. По просьбам трудящихся, дописан пункт 4.
И немного поправлен пункт три..

источник