Доработка сайта на платформе Shopify (конструктор интернет-магазинов)

ТЕХЗАДАНИЕ  НА ДОРАБОТКУ САЙТА

ссылка на сайт

ВСТУПЛЕНИЕ. 

Я решила сделать сайт по продаже различных продуктов ( футболки, постеры на стену, кружки.) на американский рынок.  Бизнес модель - Печать по требованию( Print On Demand - сокращенно POD). Посетители выбирают товар с определенным дизайном и заказ перенаправляется в  POD сервис. Там его печатают и отсылают покупателю. 

Сайт создан на платформе конструкторов интернет-магазинов Shopify. Для улучшения внешнего облика магазина была куплена “тема”- wokee-v-1-8-1. С ее помощью определяются цвета, шрифты, расположения блоков. 

На сайт также я установила два основных приложения: 

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

б)   Loox - Photo Reviews - это приложение позволяет покупателям отправлять отзывы с фото. Покупатель получает уведомление на емэйл с предложением отправить отзыв о товаре. 

Мое техзадание будет связано с корректировкой отображения этих приложений на сайте. 

➤Вот эта основная тема сайта wokee-v-1-8-1 в админке магазина Shopify↓↓↓

➤Вот эти приложения (Teeinblue, Loox - Photo Reviews  в админке магазина Shopify↓↓↓

 1. Teeinblue - персонализатор продуктов

Карточку товара с описанием я создаю в этом приложении. Связываю художественную работу или принт (Artwork) c продуктом ( product base).  Artwork я настраиваю как конструктор, чтобы покупатель выбирал элементы дизайна. Рroduct base подгружаю из связанного с приложением POD сервиса. 

Приложение подгружает на сайт карточку товара с описанием, и свой блок с “Previw” и “Add to Cart”, заменяя блоки, которые предоставляет основная тема сайта ( wokee-v-1-8-1).   Соответственно, в “General settings” приложения Teeinblue я настроила цвета кнопок и прочее, чтобы совпадало с основными цветами сайта, заданными темой wokee-v-1-8-1.

✪ В ЧЕМ ПРОБЛЕМА:  Моя основная тема магазина “wokee-v-1-8-1” дублирует в карточке товара цену, цвет товара, размер товара. Мне удалось отключить описание товара в основной теме, чтобы оно не дублировалось. ( Хотя я и отключила основные галочки, связанные с товаром в wokee-v-1-8-1, но все равно информация задваивается.)  То есть на сайте все отражается в двойном виде.↓↓↓

➤Нужно, чтобы отражалось так ↓↓↓

✔После названия товара должен идти блок со звездочками★★★★★ -это количество отзывов о товаре. Подробнее про то, как я хотела бы поправить встраивание виджета с отзывами, будет рассказано ниже.  Мне очень нравится, как реализована эта идея на сайте: personalfury.com 

✅ ЗАДАНИЕ1: Нужно сделать так, чтобы информация о продукте показывалась только из приложения Teeinblue. И убрать информацию о продукте, которую показывает wokee-v-1-8-1. 

2. Wokee-v-1-8-1 предоставляет возможность размещать “Trust Badje” ( иконки доверия) после блока “ADD TO CART”. Я бы хотела их оставить и не выключать. Но они сильно сползли вниз и сейчас находятся под описанием товара. Если это возможно, нужно поместить Trust Badje между “ADD to CART” чек-боксом  “ □ I supply correct personalization information and I agree with Shop Policies before hitting "Add to Cart” 

✅ ЗАДАНИЕ2: Переместить блок Trust Badje. Должно получиться так↓↓↓

3. Описание продукта у меня будет достаточно большое- так как я буду подробно описывть как заказывать и прочее. (На данных скриншотах у меня маленькое описание, я его просто разместила для примера.)  Я бы хотела, чтобы только часть описания открывалась по умолчанию. Остальная часть открывалась бы, если нажать на надпись “ Learn more about this item”

➤Вот как это должно выглядеть↓↓↓

После того, как описание развернули, его можно свернуть, нажав “Less”

➤Вот как это должно выглядеть↓↓↓

✅ ЗАДАНИЕ3: В Teeinblue усовершенствовать вывод на сайте описание товара, которое является большим по обьему текста. Например: сделать по умочанию вывод 500 символов.

•  ( Какое именно количество символов нужно определить опытным путем- комфортное для восприятия).
•  Остальное описание будет показываться после нажатия Learn more about this item. Цвет Learn more about this item #2879fe Cворачиваться назад описание будет путем нажатия Less- Цвет #2879fe 

✔Подобная идея со сворачиванием-разворачиванием описания реализована на сайте Etsy- ссылка

✎ВОПРОС: не ухудшит ли данное преобразование стабильность приложения? Если есть такой риск, то можно от него отказаться.

4. Далее за описанием должны идти отзывы. Для этого я загрузила приложение Loox - Photo Reviews. На данный момент приложение встраивает свой виджет (блок) куда-то вниз. 

➤Вот как это выглядит сейчас↓↓↓

➤Я хочу сделать так ( когда открываем карточку товара)  ↓↓↓

➤когда товары на главной странице,  должно выглядеть так↓↓↓

ПРИМЕР МАГАЗИНА, У КОТОРОГО ЭТО РЕАЛИЗОВАНО:  ССЫЛКА

➤Как найти инструкцию от Loox - Photo Reviews.↓↓↓

✅ ЗАДАНИЕ4: Нужно разместить отзывы, чтобы они отражались под Описанием и названием товара, когда мы открываем карточку товара. И чтобы отзывы отражались под названием товара на страницах сайта. 

5. После того, как мы заказали товар на сайте, на почту покупателя приходит письмо-подтверждение с номером и деталями заказа, а так же ПРЕВЬЮ самого товара. 

✪ В ЧЕМ ПРОБЛЕМА: ПРЕВЬЮ товара отображаемое в письме - это превью того изображения, которое я разместила в карточке товара. Но дело в том, что покупатель, заполняя персонализированный блок Teeinblue, изменяет внешний вид товара ( добавляет свое имя и прочее). А ему приходит подтверждение со стандартным изображением, будто он ничего не изменял. Я проверила это - создала пробный товар TEST PRODUCT за 1$  и купила его. 

➤Вот как это выглядит↓↓↓

В Teeinblue, знают про эту проблему и у них есть подробная инструкция, как это исправить. Нужно вставить их код в Add to cart, там где находится HTML.

Инструкция находится на сайте приложения Ссылка: 

https://support.teeinblue.com/portal/en/kb/articles/how-to-set-up-render-design-images

➤Скриншот ↓↓↓

Мне нужно настроить следующие пункты: 

• Показать дизайн в корзине
• Показать дизайн в электронном письме с подтверждением

✅ ЗАДАНИЕ5: Нужно настроить корректное отображение дизайна в корзине и в электронном письме, подтверждающим заказ. 

6. В приложении Teeinblue есть так называемый “кастомизатор”- табличка, с помощью которой покупатель выбирает себе ту или иную опцию. Пишет имя, какой-то текст или выбирает то или иное изображение. Я хочу внести небольшую правку в этот кастомизатор. 

• Например, покупатель пишет свой текст или имя. В админке я устанавливаю максимально допустимое количество символов, включая пробелы, чтобы покупатель не смог напечатать больше положенного. 
• В интерфэйсе кастомизатора это отражается как надпись снизу: Maximum  up to ( число)  caracters. Но нет опции обратного отсчета символов, что не удобно, потому что мы не понимаем, сколько мы уже напечатали, а сколько осталось. ↓↓↓ 

✔ Идея с обратным отсчетом символов отлично реализована на сайте: ССЫЛКА

Например, (11\17) означает, что мы ввели 11 символов включая пробелы из 17 возможных. (26\36) соответственно означает, что мы ввели 26 символов (с пробелами)  из 36. 

✅ ЗАДАНИЕ6: Сделать “виджет” обратного отсчета символов, когда речь идет о печатании текста.

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

✎ВОПРОС: Может ли данное преобразование нарушить стабильность моего приложения Teeinblue? Если может, то можно этот пункт пропустить. 

✅ ЗАДАНИЕ 7:  На главной странице уменьшить расстояние от логотипа до баннера ( только в мобильной версии сайта)↓↓↓ 

ЗАКЛЮЧЕНИЕ:

Основные цвета сайта:

• голубой #2879FE
• голубо-синий (цвет зависания)  #2930FA
• оранжевый #FFB507
• светло-фиолетовый (футер) #F7F8FA
• черный #191919
• серый #777777
• красный (error) #F8353E

➤Коды HTML находятся здесь↓↓↓  

Доступ к админке сайта предоставляется по электронной почте.