Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress Plugins
Code

Створіть свій власний магазин футболок з плагіном WordPress Spreadshirt

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Final 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 - Sociables

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

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

Spreadplugin the Spreadshirt plugin for WordPress

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

Вибір бренду

В Інтернеті є мільйони концепцій футболок. Я не зможу допомогти вам в питаннях вашого смаку, але якщо ви визначились з певним напрямком, вам знадобиться домен і акаунт Twitter, Pinterest та Instagram. Я здався на Facebook-сторінок (через Facebook, що робить його важко досягти ваших шанувальників без сплати), але Хсу активно використовує цільові Facebook реклами для збільшення обсягу продажів.

Я використовую Domainr для пошуку доступних доменних імен для моїх бізнес-ідей. Sociables.com було зайнято, але Sociables.io - вільним. Domainr також має додаток iOSGandi.net виявився найбільш економічним і функціональним реєстратором домена .io. @Sociables був зайнятим в Twitter, тому я використовував @SociablesIo.

Вибір теми WordPress

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

Armonico Theme for WordPress on Theme Forest

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

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

Looking for me on Tinder t-shirt concept for Sociables

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

Зареєструйтесь в Spreadshirt

По-перше, вам необхідно зареєструватися на Spreadshirt.com:

Register at Spreadshirt

Потім зайдіть в майстер створення магазину:

Create a shop at Spreadshirt

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

Choose Color and Layout of Shop at Spreadshirt

Назвіть та опишіть ваш магазин:

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

Ви повинні побачити щось на зразок цього, коли закінчите:

Create a Shop at Spreadshirt Finished

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

Spreadshirt API Keys

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

Get Your API Keys - Spreadshirt

Налаштування хостингу

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

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

По-перше, вам потрібна буде тема. Я вирішив придбати Armonico на ThemeForest за $58:

Install 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 Shop

З панелі інструментів додайте новий плагін і знайдіть WP-Spreadplugin:

Install the Spreadplugin for Spreadshirt

Натисніть Install Now і активуйте його:

Activate the Spreadplugin for Spreadshirt

Завантаження вашого дизайну на Spreadshirt

Перш, ніж ви зможете використовувати Spreadplugin, ми повинні завантажити наші проекти дизайну на Spreadshirt і створити продукти:

Upload art for your design at Spreadshirt

Виберіть дизайн, який ви хотіли б завантажити:

Confirm trademark at Spreadshirt

Дайте йому ім'я та вкажіть відповідні теги:

Describe the design for Spreadshirt

Ви повинні побачити це після завантаження кожного дизайну.

Design complete at Spreadshirt

Створення категорії

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

Create Categories at Spreadshirt

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

Створення продукції в рамках Spreadshirt

Далі, ми створюємо продукти один раз для чоловіків і один раз для жінок. Виберіть тип футболки, стать і колір в дизайнері продукту Spreadshirt:

Create more Products at Spreadshirt

Перемістіть пари продукції зі сторінки Products в відповідну категорію Spreadshirt. Наприклад, для "Looking for Me on Tinder" я перемістив чоловічі і жіночі товари в створену мною категорію tinder.

Add Your Products to Categories

Створення вашого магазину за допомогою Armonico на WordPress

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

Створіть категорію для ваших продуктів

Перш за все я створив категорію товарів:

Add a category to WordPress

Створення сторінки продукту

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

Create Product Pages in WordPress

Ось шорткод:

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

Вам також необхідно встановити пріоритетне зображення, яке ви б хотіли, щоб відображалося на слайдері домашньої сторінки.

Set the Featured Image for Your Post

І нарешті, вам потрібно повернутися до сторінки Spreadplugin Options і відновити кеш. Ви можете зробити це пізніше, коли всі пости продуктів будуть заповнені. Даний процес дещо повільний - я розповім про продуктивність Spreadshirt.com трохи пізніше.

Rebuild the Cache for the Spreadshirt Plugin

Налаштування слайдера

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

Set the Slider to Point to the Category of Posts

Ось так виглядає мій слайдер:

The Armonico Home Page Slider

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

Configure the Action Boxes

Визначіть посилання, зображення та текст для кожної області дії:

Settings for Action Boxes

Ось так виглядають мої області дій після налаштування:

Home Page Action Boxes in Armonico Theme

Я завантажив Armonico з їх демо для областей дій, оскільки я не міг знайти їх в завантаженій мною темі.

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

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

The Completed Armonico Shop

Я рекомендую почати розповсюджувати інформацію про ваш сайт вашим друзям по електронній пошті та в соцмережах. Збирайте відгуки від людей, оцінюйте їх відповіді. Використовуйте цей зворотний зв'язок для поліпшення дизайну, вибірки товарів і цін, а також і самого сайту.

Коли ви будете готові більш ширше розповсюджувати інформацію про магазин, подумайте про використання реклами Facebook і Twitter. Дізнайтеся більше про підходи в рекламі від Benny Hsu. Він використовує в рекламі метод проб і помилок, щоб дізнатись, що насправді працює.

Експериментуйте з іншими постачальниками

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

Величезна перевага Teespring - це те, що вони пропонують набагато кращу структуру комісії, ніж CafePress і Spreadshirt. Одне з обмежень лімітованих по часу сторінок Teespring: якщо ваше мінімальне замовлення не виконується, ніякі продукти не продаються.

Pope направив мене на TeeChip, який не має цього обмеження, але який функціонує дуже схоже на Teespring.

Ось як виглядає налаштування кампанії ТeeChip. Ви завантажуєте ваш дизайн і вибираєте товар і колір:

TeeChip Design Wizard

Ви самі встановлюєте ціну і цільовий дохід:

Teechip Pricing

Ось сторінка, яку побачать відвідувачі:

Teechip Preview

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

Роздуми про Spreadshirt

Особисто для мене, чим глибше я занурююсь в роботу з Spreadshirt в ході написання цієї статті, тим більше я розчаровуюсь в налаштуваннях продукції і конфігурації магазину. Продуктивність сайту була не дуже хорошою і це робило процес внесення змін ще більш болісним. Мені хотілося б, щоб я просто завантажив дизайн, а покупець обирав сам: чи буде це чоловіча, чи жіноча футболка, яка буде її якість, або це буде зовсім інший товар, проте Spreadshirt хоче, щоб ви самі все це вибрали раніше, ніж треба.

TeeChip здався для мене набагато простішим і він пропонує більш гнучкі варіанти налаштування продукту. Ви також можете заробити значно вищий % прибутку на crowdfunding сайтах.

На даний час для Teespring або TeeChip немає ніяких плагінів WordPress. Цілком можливо, що ви могли використовувати iFrame, але я не пробував працювати з ним. В якості іншого варіанту можна розміщувати на вашому сайті статичну графіку з посиланням на індивідуальні кампанії, але вам доведеться регулярно оновлювати їх після закінчення строку. Сподіваюсь, в майбутньому дані сайти запропонують більше інтеграції в WordPress.

Тому, можливо, я оновлю свій сайт на TeeChip, і відійду від використання Spreadshirt. У вас може бути по-іншому.

Без сумніву, є безліч способів побудови сайту на WordPress; будь ласка, напишіть в коментарях будь-які корективи або додаткові ідеї. Я хотів би почути про ваш досвід.

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

Посилання, які згадувались в статті

Advertisement
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.