(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(92000560, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(92000560, 'hit', window.location.href);
(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/top.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-top'); if (container) { s.onload = function () { new window['BrandingTop']({ container, content: { theme: 'light', link: 'https://t.me/+pCxxRMMBLiw1MjEy', text: 'Канал «Сомелье маркетинга» - да, тут интересно →', button: 'Читать!', color: '#F1F1F1', textColor: '', img: '', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0);

Разработка интернет-магазина для сохранения природы Камчатки

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

Менеджер проектов разработки WebCanape Виталий Тараканов рассказывает об опыте компании.

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

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

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

К нам обратились создатели проекта «Береги Камчатку» Тарас и Татьяна Шарыга. Он создал этот бренд вместе с женой Татьяной. Если посмотреть на сайт проекта, сразу трудно дать однозначный ответ, чем занимается «Береги Камчатку» — это и фотоблог о красоте природы, непотребительском к ней отношении, и личная история двух нашедших друг друга людей, и собственный бренд одежды с авторскими рисунками.

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

Работая над этим проектом, мы, конечно, поломали голову.

Главная страница сайта mykamchatka.ru

Отправная точка — в магазин за вдохновением

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

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

Страница «Береги Камчатку» в Instagram

Это было интересной задачей — просто по-человечески и с технической точки зрения.

Мы традиционно выбрали для сайта наш движок Canape CMS, а все ключевые вопросы дизайна поручили арт-директору студии.

Дизайн проекта — теплота и свобода

Для многих жителей Центральной России Камчатка ассоциируется с чем-то недостижимо далеким. Разрабатывая сайт, мы хотели сделать её ближе, доступнее для всех. Нетипичное стремление, если ты разрабатываешь интернет-магазин, правда?

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

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

Основные элементы дизайна

  • Огромные фотографии от края до края экрана.
  • Элементы навигации — легкие и контурные, чтобы ничто не отвлекало.
  • Фотографии для каждого блока. Где уместно — сделали отзывчивую анимацию.
  • Большие виджеты соцсетей на главной — «Береги Камчатку» публикует потрясающий контент.

Виджеты соцсетей мы заверстали таким образом, чтобы они гармонировали с дизайном страницы. Для Instagram купили LightWidget и донастроили, а для Facebook взяли стандартный и настроили под адаптивный дизайн.

У «Береги Камчатку» большая лояльная аудитория. Чтобы она расширялась, мы добавили форму подписки на рассылку. Многие захотят оставить свой email, чтобы раньше всех узнавать о новостях проекта, получать оповещения о новых коллекциях и статьях в блоге.

Разработка и интеграции — забота о пользователе

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

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

Модифицировали нашу стандартную панель сортировки.

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

«Умная» таблица размеров и полная информация о товаре

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

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

Кому-то это могло показаться мелочью — махнули бы рукой: «Потом разберёмся, заменим или вернём деньги». Но не в нашем случае. Любое неудобство оставит осадок, и все добрые намерения основателей уйдут на второй план. Мы проявляем заботу о посетителях сайта, даже когда они об этом не подозревают.

Агрегатор доставки

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

Публикация и итоги проекта

Готовый магазин мы опубликовали на собственном хостинге, который адаптирован под работу с Canape CMS и имеет несколько степеней резервного копирования. Подключили SSL-сертификат — так данные, которые посетители указывают на сайте, будут надежно защищены дополнительным шифрованием. К тому же поисковики при ранжировании отдают предпочтение сайтам на HTTPS-протоколе.

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

В команде трудились два project-менеджера, арт-директор, дизайнер интерфейсов, frontend-разработчик, два backend-разработчика, два специалиста по тестированию.

Деньги и трудозатраты:

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

Одна ошибка — и ваш посетитель уйдёт туда, где удобнее, дешевле, шире выбор. Двойная ответственность лежит на основателях «Береги Камчатку». Во-первых, как любой коммерческий проект, он должен приносить прибыль. Во-вторых, основатели взяли на себя обязательство помогать заповеднику, а без продаж на сайте и отчислений в фонд заповедника риск исчезновения сивучей будет только расти.

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

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

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

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

(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/bottom.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-bottom'); if (container) { s.onload = function () { new window['BrandingBottom']({ container, content: { theme: 'light', link: 'https://t.me/+pCxxRMMBLiw1MjEy', text: 'Канал «Сомелье маркетинга» - да, тут интересно →', button: 'Читать!', color: '#F1F1F1', textColor: '', img: '4282ec4d-c624-54ec-99d7-a41c66e07f30', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0);
0
39 комментариев
Написать комментарий...
Ivan B.

То есть вместо жилья для русских семей которые живут в нищенских условиях вы предлагаете обустраивать пляжи для морских котиков? Ясно.

Ответить
Развернуть ветку
Vitaliy Tarakanov

Люди могут о себе позаботиться, а котики - нет

Ответить
Развернуть ветку
Artem Kondratev
жилья для русских семей которые живут в нищенских условиях

В РФ и мире вообще есть огромное количество проблем. Кто-то занимается одними, кто-то другими.

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

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
ivan krapivin

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

Ответить
Развернуть ветку
Иван Иванов

И почему-то у меня не возникает чувства восторга деятельностью героев. Такое чувство, что вещи за 200р продают за 5000р прикрываясь благими намерениями. И я не утверждаю что какая-то часть реально идет на благотворительность. Типа - я купил футболку за 200р, нарисовала фигнюшку оцененную в 2200р, и да, 100р любимой камчатке! Если это так или приблизительно так, то есть если изначальные мысли берут свои корни в этом направлении, то просто нужно быть последним иудой чтобы собственные прихоти прикрывать природой.

Ответить
Развернуть ветку
Татьяна Шарыга

В любом хорошем деле при большом желании можно найти негатив) вы не знаете ни объемов производства, ни себестоимость тканей, ни откуда они привезены. Фигнюшки я не рисую, это моё творчество и хоть какая то помощь месту, которое я очень люблю. Осуждая других, ответьте себе на вопрос «а что я сделал для места, в котором родился?»✌🏽

Ответить
Развернуть ветку
Orbital_Cat

Можно подумать в H&M вам всё по 200р продают.

Ответить
Развернуть ветку
Valentin Dombrovsky

Идея не нова, как говорится:
"Green marketing refers to the process of selling products and/or services based on their environmental benefits".
https://www.thebalancesmb.com/green-marketing-2948347

Ответить
Развернуть ветку
Denis Ponomarev

Прикольный проект, пожалуй куплю что-нибудь. А по поводу статьи, сложилось ощущение, что тут идёт упор на "ненавязчивую" рекламу движка.

Ответить
Развернуть ветку
WebCanape
Автор

Максим, очень рады, что вы оценили проект. Нам очень понравилось работать с этим сайтом.
А насчет рекламы движка – если движок хорош, почему бы о нем не рассказать? Тем более именно благодаря этому проекту он стал еще лучше.

Ответить
Развернуть ветку
Denis Ponomarev

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

Ответить
Развернуть ветку
Yulia Nabokova

КПДВ - death stranding

Ответить
Развернуть ветку
Sam Beckett

Коджимба гений!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Татьяна Шарыга

Компании Патагония больше 50ти лет. Броекту «Береги Камчатку» всего 5. У Патагонии есть возможность закупать сырье большими объемами, у нас - нет задачи делать эти объемы. В нашем производстве одежды всё максимально экологично. Все обрезки ткани используются для пошива матрасиков в приюты для животных; весь мусор от офиса и производства сортируется и сдается в переработку; логистика сведена к минимуму; вся подиграфия напечатана на вторсырье. И мы не претендуем на лучший пример эко-компании) мы делаем добрые дела насколько имеем возможность и желаем всем эти возможности в своей деятельности находить✌🏽

Ответить
Развернуть ветку
Максим Дрейк

А почему МИШКА ВЕГАН? Это убеждения авторов или попытка проехаться на тренде? А почему не Мишка-мясоед или Мишка с бухлишком?

Ответить
Развернуть ветку
Татьяна Шарыга

Убеждения авторов✌🏽

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Arthur Vashurin

Увидел в заголовке слова Интернет-Магазин, Камчатка и классный рюкзак на фото. Пошел на сайт. Там тоже классный рюкзак на фото.

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

Окей, посмотрим в Мужском, может там есть чо. Там какие-то шмотки. Отфильтровать по категориям товаров - нет такой опции.

С недоумением закрываем сайт, отличный интернет-магазин создала компания Webcanape.

Ответить
Развернуть ветку
WebCanape
Автор

Артур, раздел "Магазин" не на главной и не на первом месте в меню, потому что мы изначально хотели сделать акцент на идее сохранения природы Камчатки.
Фильтры, о которых вы говорите, есть в сборке. В качестве примера вот наш сайт, где это реализовано https://www.mebelverona.ru/.

На сайте https://mykamchatka.ru/ таких фильтров нет, потому что сейчас там не так много товаров, чтобы заводить дополнительные критерии фильтрации.

А рюкзак вы в каталоге не нашли, потому что он не из ассортимента "Береги Камчатку". Мы уточним у основателей магазина, где его можно купить.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Sergey Marevskiy

Бред какой-то. Камчадалы сами губят свою природу. Хочешь сохранить ее - борись с браконьерами. А тут песни о 62%, готовых менять... Это вы во время путины местных спросите.
На Камчатке 20000 туристов в год. Против 300000 местного населения. Поэтому, защита природы - вопрос в первую очередь к местным.

Ответить
Развернуть ветку
Татьяна Шарыга

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

Ответить
Развернуть ветку
Sergey Marevskiy

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

Ответить
Развернуть ветку
Татьяна Шарыга

К сожалению🤷🏽‍♀️ Это и поразило, когда переехали туда жить. «Зачем ходить на вулканы? Я их из окна вижу»

Ответить
Развернуть ветку
AtlasOkon

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

Ответить
Развернуть ветку
WebCanape
Автор

Основная идея этого кейса - рассказать об особенностях разработки сайта для социально ответственного бренда. Это интересный проект для нас, и надеемся, кому-то он тоже покажется интересным. Магазин "Береги Камчатку" нельзя назвать традиционным интернет-магазином, построен он не по канонам. И именно об этом мы говорим в этом материале.

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

Ответить
Развернуть ветку
AtlasOkon

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

Ответить
Развернуть ветку
Юля Сергеева

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

Ответить
Развернуть ветку
Valentin Dombrovsky

Что-то ссылки на Canape CMS не кликабельны на айпаде.

Ответить
Развернуть ветку
WebCanape
Автор

Валентин, все про Canape CMS вот здесь https://www.web-canape.ru/canape-cms/

Ответить
Развернуть ветку
Valentin Dombrovsky

Да я уже нашёл - зачем Вы в статье "фальшивые ссылки" сделали, непонятно.

Ответить
Развернуть ветку
Margarita Koktisheva

Свитшот- sweetshot? )

Ответить
Развернуть ветку
Denis Kolesnikov

sweatshirt
потная рубашка:)

Ответить
Развернуть ветку
Margarita Koktisheva

Тогда это свэтшот, а не свитшот

Ответить
Развернуть ветку
Mamontov Igor

А чем не устроила Tilda заказчика? Суде по тому что сделали - там такой функционал присутствует. Основной упор делается на фото, а значит отдельный CMS для этого ну требуется, опять же Tilda вывозит.

Какие плюсы?

Ответить
Развернуть ветку
WebCanape
Автор

Интеграция Тильды с 1С – довольно болезненный процесс. И обойдется дорого, потому что нет нормализованных практик.
Да и eDost не предоставляет готового плагина для интеграции с Тильдой.

Ответить
Развернуть ветку
Mamontov Igor

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

Ответить
Развернуть ветку
Владимир Штерн
Ответить
Развернуть ветку
Читать все 39 комментариев
null