Advertisement
  1. Code
  2. WordPress Plugins

Создайте свой собственный магазин футболок с плагином WordPress Spreadshirt

Scroll to top
Read Time: 8 min

Russian (Pусский) translation by Elen (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Продажа собственних футболок

В начале этого года у меня возникла идея продавать футболки, которые противостоят нашему все более антисоциально-ориентированному обществу в отношении технологий. Я придумал концепцию бренда Sociables и быстро отложил идею в папку, которую Jadah Sellner описал на World Domination Summit (WDS) как содержащую все те домены, которые у вас есть для бизнес-идей, и которые вы никогда не выполняете.

Затем я нашел бесплатный плагин WordPress для Spreadshirt.com и решил написать эту статью, чтобы провести вас через процес запуска вашего собственного магазина футболок на основе WordPress.

Другой участник WDS, Benny Hsu, недавно написал о создании своего бизнеса по продаже футболок, Get Busy Living, чтобы заработать 100 000 долларов меньше, чем за шесть месяцев. Мой интерес, вероятно, был скорее ради пропаганды идеи Sociables в сообществе, все более ориентированном на экраны, чем ради прибыли и мирового господства:

Every Once in a While You Gotta Look Up From Your Phone - SociablesEvery Once in a While You Gotta Look Up From Your Phone - SociablesEvery Once in a While You Gotta Look Up From Your Phone - Sociables

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

CafePress предлагает API, но доступные плагины WordPress (MoneyPress) выглядят не достаточно хорошо. Потому я хотел начать с Spreadshirt и плагина Spreadshirt, собственником которого является инди-разработчик Thimo Grauerholz.

Spreadplugin the Spreadshirt plugin for WordPressSpreadplugin the Spreadshirt plugin for WordPressSpreadplugin the Spreadshirt plugin for WordPress

В этой статье я проведу вас через все шаги, которые я делал сам, чтобы создать свой магазин Spreadshirt и запустить сайт WordPress для магазина Sociables.

Выбор бренда

В Интернете есть миллионы концепций футболок. Я не могу помочь вам в вопросах вашего вкуса, но если ви определились на определенном направлении, вам понадобится домен и аккаунт в Twitter, Pinterest и Instagram. Я отказался от Facebook (благодаря тому, что на Facebook сложно достичь ваших поклонников без оплаты), но Hsu активно использует целевую рекламу Facebook для стимулирования продаж.

Я использую Domainr для поиска доступных доменных имен для моей бизнес-идей. Sociables.com был уже занят, но Sociables.io - доступен. Domainr также имеет приложение iOS. Gandi.net оказался наиболее экономичным и функциональным регистратором домена .io. @Sociables было занято на Twitter, поэтому я использовал @SociablesIo.

Выбор темы WordPress

Я искал в Google и просматривал на ThemeForest дизайны магазинов футболок, и в конечном итоге выбрал Armonico за 58 долларов. Хотя я не буду использовать функции WooCommerce (потому что я хочу, чтобы Spreadshirt осуществлял наполнение товарами), мне понравился дизайн, его отшлифованность, которые предлагал Armonico. Также мне быстро ответили на мои запросы на предварительную поддержку и предложили 30-дневную гарантию возврата денег.

Armonico Theme for WordPress on Theme ForestArmonico Theme for WordPress on Theme ForestArmonico Theme for WordPress on Theme Forest

Наем дизайнера

Я не графический дизайнер, поэтому я обратился к человеку, с которым я работал в прошлом, и который находился по месту, в северо-западном тихоокеанском регионе. Он называет себя Pope и он одним из тех, кто тратит целый месяц на Burning Man. Он также работает быстро и эффективно, имеет опыт в WordPress, и, кстати, также ведет свой собственный магазин футболок. Он взял несколько моих идей и помог воплотить их в реальность:

Looking for me on Tinder t-shirt concept for SociablesLooking for me on Tinder t-shirt concept for SociablesLooking for me on Tinder t-shirt concept for Sociables

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

Зарегистрируйтесь в Spreadshirt

Во-первых вам нужно зарегистрироваться на Spreadshirt.com:

Register at SpreadshirtRegister at SpreadshirtRegister at Spreadshirt

Затем зайдите в мастер создания магазина:

Create a shop at SpreadshirtCreate a shop at SpreadshirtCreate a shop at Spreadshirt

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

Choose Color and Layout of Shop at SpreadshirtChoose Color and Layout of Shop at SpreadshirtChoose Color and Layout of Shop at Spreadshirt

Назовите и опишите свой магазин:

Set Name Language and Currency at SpreadshirtSet Name Language and Currency at SpreadshirtSet Name Language and Currency at Spreadshirt
Вам потребуется создать образец товара. Я просто создал временный плейсхолдер дизайна:
Create Design Sample at SpreadshirtCreate Design Sample at SpreadshirtCreate Design Sample at Spreadshirt

Когда закончите, вы должны увидеть что-то в этом роде:

Create a Shop at Spreadshirt FinishedCreate a Shop at Spreadshirt FinishedCreate a Shop at Spreadshirt Finished

Spreadshirt также имеет API, к которому вам понадобится доступ для плагина. Зарегистрируйтесь с их блога:

Spreadshirt API KeysSpreadshirt API KeysSpreadshirt API Keys

Запомните/запишите свои ключи API, которые позднее вы будете использовать для настройки плагина:

Get Your API Keys - SpreadshirtGet Your API Keys - SpreadshirtGet Your API Keys - Spreadshirt

Настройка хостинга

Я запустил Sociables на Digital Ocean, потому что он недорогой и предлагает для хостинга быстрые диски SSD.  Вы можете найти мое наглядное пособие по WordPress на Digital Ocean здесь. Подойдет любая стандартная установка WordPress. Хотя ви можете интегрировать на ваш существующий сайт WordPress WP-Spreadplugin, в этой статье я фокусировался на построении автономного магазина футболок на базе WordPress с нуля.

Установка темы

Во-первых вам понадобится тема. Я решил приобрести Armonico на ThemeForest за $58:

Install the Armonico ThemeInstall the Armonico ThemeInstall the Armonico Theme

В рамках установки темы Armonico она попросит вас установить еще несколько плагинов: MP Isotopes и MP Core. Она предоставляет вам ссылки на них на панели администратора. Я также обнаружил, что столкнулся с несколькими ошибками, пока не установил WooCommerce. Однако мне не нужно было использовать какие-либо функции WooCommerce.

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

Затем я установил другие плагины, которые я обычно рекомендую: Yoast SEO, Google Analytics, Contact Form 7, и Mailgun. Два последних я использую для контактных форм электронной почты - об этом есть моя статья на Tuts+, потому перейдите на мою страницу, статья должна появится 16 декабря 2014 г. 

Добавьте в WordPress плагин Spreadshirt

Теперь мы установим плагин Spreadshirt для WordPress. Он был разработан Thimo Grauerholz. Он управляет сайтом футболок, используя пользовательскую версию этого плагина на Lovetee. Thimo очень быстро и с добротой отреагировал на мой запрос по электронной почте.

Lovette - Sample Spreadshirt ShopLovette - Sample Spreadshirt ShopLovette - Sample Spreadshirt Shop

На панели инструментов добавьте новый плагин и выполните поиск WP-Spreadplugin:

Install the Spreadplugin for SpreadshirtInstall the Spreadplugin for SpreadshirtInstall the Spreadplugin for Spreadshirt

Нажмите Install Now и активируйте его:

Activate the Spreadplugin for SpreadshirtActivate the Spreadplugin for SpreadshirtActivate the Spreadplugin for Spreadshirt

Загрузка ваших дизайнов в Spreadshirt

Прежде чем мы сможем использовать Spreadplugin, мы должны загрузить наши проекты дизайна в Spreadshirt и создать продукты:

Upload art for your design at SpreadshirtUpload art for your design at SpreadshirtUpload art for your design at Spreadshirt

Выберите дизайн, который вы бы хотели загрузить:

Confirm trademark at SpreadshirtConfirm trademark at SpreadshirtConfirm trademark at Spreadshirt

Назовите дизайн и укажите соответствующие для него теги:

Describe the design for SpreadshirtDescribe the design for SpreadshirtDescribe the design for Spreadshirt

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

Design complete at SpreadshirtDesign complete at SpreadshirtDesign complete at Spreadshirt

Создание категории

Также нам нужно создать категории в Spreadshirt. Я создал категорию для каждого дизайна, так что, когда люди переходят с домашней страницы Sociables, они будут видеть мужские и женские футболки для дизайна, например, категории tinder, talks to strangers и т. д.

Create Categories at SpreadshirtCreate Categories at SpreadshirtCreate Categories at Spreadshirt

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

Создание продуктов внутри Spreadshirt

Далее создадим продукты: один раз для мужчин и один раз для женщин. Выберите тип рубашки, пол и цвет в дизайнере продукта Spreadshirt:

Create more Products at SpreadshirtCreate more Products at SpreadshirtCreate more Products at Spreadshirt

Переместите пары продукции со страницы Products в Spreadshirt в соответствующую категорию. Например, для «Looking for Me on Tinder» я переместил мужские и женские товары в созданную мною категорию tinder.

Add Your Products to CategoriesAdd Your Products to CategoriesAdd Your Products to Categories

Построение вашего магазина с помощью Armonico на WordPress

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

Создание категории для ваших товаров

Прежде всего я создал категорию товара:

Add a category to WordPressAdd a category to WordPressAdd a category to WordPress

Создание страниц продукта

Затем я создал посты для каждого из моих дизайнов. Я поместил их в категорию продуктов. Также я поместил шорткод Spreadplugin, указав ID категории из моего магазина Spreadshirt.com, о котором мы упоминали выше:

Create Product Pages in WordPressCreate Product Pages in WordPressCreate Product Pages in WordPress

Вот шорткод:

1
[spreadplugin shop_category="yourid"]

Существует больше документации для WP-SpreadPlugin, ви найдете ее здесь.

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

Set the Featured Image for Your PostSet the Featured Image for Your PostSet the Featured Image for Your Post

И наконец, вам нужно вернуться на страницу Spreadplugin Options и перестроить кэш. Вы также можете сделать это позже, когда все посты продуктов будут заполнены. Этот процесс немного медленный - я расскажу о производительности Spreadshirt.com немного позже.

Rebuild the Cache for the Spreadshirt PluginRebuild the Cache for the Spreadshirt PluginRebuild the Cache for the Spreadshirt Plugin

Настройка слайдера

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

Set the Slider to Point to the Category of PostsSet the Slider to Point to the Category of PostsSet the Slider to Point to the Category of Posts

Вот как выглядит мой слайдер:

The Armonico Home Page SliderThe Armonico Home Page SliderThe Armonico Home Page Slider

Чтобы настроить виджеты Armonico помимо слайдера, перейдите в меню Appearance > Widgets. Выберите Action Boxes > Sidebar > Add Widget.

Configure the Action Boxes Configure the Action Boxes Configure the Action Boxes

Определите ссылки, изображения и текст для каждой области действия.

Settings for Action BoxesSettings for Action BoxesSettings for Action Boxes

Вот так выглядят мои области действия после настройки:

Home Page Action Boxes in Armonico ThemeHome Page Action Boxes in Armonico ThemeHome Page Action Boxes in Armonico Theme

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

Запуск вашего сайта

Наконец вы можете запустить свой сайт. Вы можете посмотреть, как выглядит мой магазин на Sociables.io:

The Completed Armonico ShopThe Completed Armonico ShopThe Completed Armonico Shop

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

Когда вы будете готовы более широко распространять информацию о магазине, подумайте об использовании рекламы Facebook и Twitter. Узнать больше информации вы можете прочитав Benny Hsu's advertising approaches (Подходы к рекламе Benny Hsu). Он использует в рекламе метод проб и ошибок, чтобы узнать, что на самом деле работает.

Эксперименты с другими поставщиками

Hsu также использует Teespring, простую в использовании компанию drop-shipping.  Здесь вы можете узнать больше о методах развития Teespring

Огромное преимущество Teespring - это то, что они предлагают намного лучшую структуру комиссии, чем CafePress и Spreadshirt. Одно из ограничений лимитированных по времени страниц Teespring это то, что если ваш минимальный заказ не выполняется, никакие продукты не продаются.

Pope направил меня на TeeChip, у которого нет этого ограничения, но который функционирует почти точно так, как Teespring.

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

TeeChip Design WizardTeeChip Design WizardTeeChip Design Wizard

Вы сами устанавливаете цену и целевую прибыль:

Teechip PricingTeechip PricingTeechip Pricing

Вот страница, которую увидят посетители:

Teechip PreviewTeechip PreviewTeechip Preview

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

Размышления о Spreadshirt

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

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

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

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

Несомненно, есть множество способов построения сайте на  WordPress; пожалуйста, напишите в комментариях любые коррективы или дополнительные идеи. Мне бы хотелось услышать о вашем опыте.

Вы также можете просмотреть мои другие обучающие статьи на Tuts+ на моей странице учителя, или следуйте за мной на Twitter @reifman.

Упомянутые в статье ссылки

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.