Руководство по дизайну Everything для магазинов Shopify

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

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

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

В этой статье:
Shopify Темы
Фотографии продукта
Настройка темы
Структура меню
Заголовок главной страницы
3 совета на вынос
Нужна помощь?

Shopify Темы

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

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

Чувствуете себя подавленным? Используйте фильтры Shopify, чтобы сузить свой выбор:

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

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

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

Фотографии продукта

Хотя мы большие поклонники надежного рынка тем Shopify, есть один риск: иметь магазин, который выглядит так же, как и все остальные, даже если вы учитываете настройку. Одно быстрое решение? Уникальные фотографии товара.

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

Не бойтесь повеселиться и быть немного смелее с фотографиями ваших продуктов:

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

Дополнительные советы по созданию удивительных изображений продуктов и образа жизни можно найти в этом руководстве «Сделай сам».

Настройка темы

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

Благодаря удобству, которое предлагает Shopify, настройка не требует никакого кодирования с вашей стороны. Вместо этого просто нажмите «Настройки темы», и вы найдете несколько способов настроить визуальный стиль вашего магазина.

Цвета

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

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

Типография

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

Фавикон

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

• Есть соответствующий образ? После загрузки Shopify автоматически изменит его размер до 32 x 32 пикселей.
• У вас его нет? В Shopify есть множество бесплатных изображений, которые вы можете использовать.

Элементы оформления заказа

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

Чтобы максимально упростить оформление заказа, вы можете настроить:

• Цвета акцентов, кнопок и ошибок
• Типографика для оформления заказа
• Фоновый рисунок, цвет или изображение для страниц оформления заказа и сводки заказа.

Структура меню

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

Панель навигации

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

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

Панель объявлений

Распродажа с ограниченным сроком действия? Задержки доставки? Новый график работы магазина? Когда вам нужно продвигать важную информацию, которую должны знать все покупатели, вам подойдет панель объявлений (также известная как глобальный заголовок).

Большинство тем Shopify поставляются с панелями объявлений — вам просто нужно настроить их и включить с помощью редактора тем Shopify.

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

Нижние колонтитулы

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

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

Советы профессионалов:

• Нижний колонтитул не должен быть просто повторением той же самой информации на панели навигации. Вместо этого добавьте важные ссылки на страницы о доставке, возврате и обмене, конфиденциальности сайта, вакансиях и многом другом.
• Используйте значки социальных сетей в качестве кнопок — это уменьшит количество слов в нижнем колонтитуле.
• Разрешить покупателям подписываться на обновления по электронной почте или SMS.
• Предоставьте быстрые ссылки на обслуживание клиентов, такие как горячие линии, «начать чат в реальном времени» или помощь по электронной почте.

Заголовок главной страницы

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

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

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

3 совета на вынос

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

1. Функция важнее формы, всегда

У вас может быть красивый сайт, но если он не работает интуитивно и не предлагает фантастического пути клиента, вы увидите стагнацию продаж. Мы рекомендуем:

• Сосредоточьтесь на том, чего вы хотите достичь с помощью своего сайта, прежде чем приступить к процессу проектирования. Это поможет сузить круг инструментов или виджетов, которые вам нужны, и предотвратить паралич выбора, который, вероятно, произойдет при первом посещении Shopify App Store.
• Внедрение полезных функций, таких как рекомендации и надежные фильтры , позволяющие покупателям быстро сузить круг поиска товаров.
• Приоритет скорости сайта. Хотя заманчиво добавить массу крутых анимаций, крутых приложений и изображений в высоком разрешении, чем больше элементов вы включите, тем дольше будет время загрузки вашего сайта. Исследования показали, что каждая дополнительная секунда, затрачиваемая на загрузку вашей страницы, может снизить конверсию на целых 7%, а количество просмотров страницы — на 11%. С другой стороны, более быстрые сайты получают более высокий рейтинг в Google.
• Сжатие изображений. Бесплатные инструменты, такие как Compressor.io, могут помочь вам сохранить четкие высококачественные изображения продуктов при уменьшении размера файла.
• Выбор тем в магазине тем Shopify вместо тем со сторонних веб-сайтов. Поскольку сторонние темы не проходят процесс оценки Shopify, некоторые из них могут иметь неожиданные дополнения в серверной части, которые могут увеличить время загрузки.

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

Совет для профессионалов: не знаете, как обстоят дела у вашего сайта с точки зрения скорости? Воспользуйтесь инструментом Google PageSpeed ​​Insights — просто введите свой URL-адрес, и он предоставит вам информацию и рекомендации по повышению скорости сайта.

2. Сделайте свой сайт простым

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

3. Тестируйте все

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

Вот где вступает в действие A/B-тестирование — процесс, который имеет решающее значение для определения того, что работает лучше всего. (Для начинающих маркетологов вот руководство по всем аспектам A/B-тестирования.) Вместо того, чтобы руководствоваться одним лишь инстинктом, вам следует провести A/B-тестирование следующих элементов дизайна магазина:

• Цвета разных кнопок
• Расположение CTA, виджетов и изображений
• Панели навигации
• Дизайн иконок социальных сетей
• Стиль изображения — например, изображение продукта или образ жизни.
• Фоновые изображения или текстуры

Нужна помощь?

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

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

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