Чрез формата за абонамент от Mailchimp можете да разширите мейлинг списъка си с Ваши настоящи и бъдещи клиенти, които се интересуват от Вашите продукти и услуги и новостите във Вашия магазин.
За да вградите форма за абонамент от Mailchimp в Shopiko онлайн магазин, така че да изглежда като част от него, ще е нужно първо да активирате Разработчик в магазина и да генерирате код за Embedded Form в Mailchimp.
1) Генериране на код за формата в Mailchimp 
За да генерирате кода на формата за абонамент, достъпете Mailchimp » Lists – избирате листа » Signup forms » Embedded form.
Извършете необходимите настройки и копирайте получения код от полето „Copy/paste onto your site„.
Уверете се, че сте активирали и настроили GDPR съобщението във формата за абонамент.
Този код след това поставете в обикновен текстов редактор и го запишете. Например поставете кода в Notepad или Notepad++ за Windows и запишете файла в разширение .txt или .html.
Важно: Запишете кода в текстов файл, тъй като ще е нужно да вземете отделни части от него и да ги поставите в различни опции в администрацията на Shopiko.
2) Добавяне на CSS/JS кода в Shopiko в Разработчик
Генерираният код за формата в Mailchimp съдържа три вида код, който трябва да се постави на различни места в средата за разработчици (Разработчик) в магазина.
CSS – стил на формата
Първата част от кода е за стила на самата форма.
Първата част от кода, започващ от тага <link> и завършващ с последния затварящ таг </style> е стилът на формата и изглежда по следния начин:
Този код е нужно да се постави в Shopiko в Разработчик » HTML/JS » Inside the <head>.
Важно: След като поставите кода, не забравяйте да запишете промените с бутон Запис.
Ако не искате кодът за стила да се добавя към HTML кода на страницата, но в стиловия файл на темата (style.css), можете да го поставите в Разработчик » CSS » Common CSS. В Common CSS се поставя единствено стилът, без таговете <link> и <style>. Тагът <link href=“/… трябва да си остане в HTML/JS » Inside the <head>.
Form – самата форма
Втората част от кода е самата форма за абонамент (полетата, текста).
Втората част от кода, започващ от тага <div id=“mc_embed_signup“> и завършващ с последния затварящ таг </div>, след затварящия таг на формата </form>, е самата форма и изглежда по следния начин:
Засега не поставяйте този код никъде, тъй като има няколко места в магазина, на които може да се покаже формата. В зависимост от това къде искате да се покаже формата, кодът може да се постави или в отделна страница или във футъра/хедъра на магазина. Вижте следващите точки в статията, за да можете да добавите формата коректно.
JavaScript – функционалности във формата
Третата част от кода е JavaScript код, който се използва за различни функционалности в самата форма (например за валидиране на съдържанието в попълнените полета).
Последната част от кода, започващ от тага <script> и завършващ с последния затварящ таг </script>, е за функционалностите на формата и изглежда по следния начин:
Този код е нужно да се постави в Shopiko в Разработчик » HTML/JS » At the end of <body>.
Важно: След като поставите кода, не забравяйте да запишете промените с бутон Запис.
След като сте поставили кода за стила и кода за функционалностите, трябва да изберете къде ще се показва самата форма. Това става като използвате кода на самата форма (Form).
3) Поставяне на формата в отделна страница в Shopiko
Можете да създадете нова страница в магазина, в която да поставите формата за абонамент. Например специална страница Абонамент.
При редакция на страницата в Shopiko, отворете опцията за поставяне на HTML код „Изходен код на документа в HTML„.
Поставете втората част от кода на формата (Form – самата форма) в отворилия се прозорец.
Запишете кода с бутон Добре.
Важно: Редакторът на код в страницата ще промени поставения код, като ще премахне от него всички тагове като <style>, <script>, <link> както и няколко нужни за нормалното функциониране на формата. Много е важно след като запишете кода да отворите отново редактора на код, за да извършите допълнителни корекции.
Коригиране на поставения код в страницата в Shopiko
Отворете отново режима за редактиране на HTML в редактора на страницата, тъй като ще е нужна малка корекция в поставения код.
1) mce-responses
Открийте реда в кода:
<div id=“mce-responses“ class=“clear“> </div>
и го заменете със следните редове:
<div id=“mce-responses“ class=“clear“>
<div class=“response“ id=“mce-error-response“ style=“display:none“> </div>
<div class=“response“ id=“mce-success-response“ style=“display:none“> </div>
</div>
Ако не извършите тази корекция, при използване на формата за абонамент, след натискане на бутона за абонамент, няма да се получи потвърдителното съобщение.
2) Бутонът Subscibe
Текстът на бутона Subscibe може да се редактира директно в кода, потърсете реда:
<div class=“clear“><input type=“submit“ value=“Subscribe“ name=“subscribe“ id=“mc-embedded-subscribe“ class=“button“></div>
и променете стойността на value= с име за бутона по Ваш избор:
<div class=“clear“><input type=“submit“ value=“Абониране“ name=“subscribe“ id=“mc-embedded-subscribe“ class=“button“></div>
Запишете извършените промени по кода на формата и я тествайте подробно. Дали успявате да се абонирате, дали получавате имейл за потвърждение или някакво съобщение за грешка.
Важно: В зависимост от темата на магазина, много е вероятно да е нужна допълнителна обработка и редакция на кода за стила на формата.
4) Поставяне на формата в началото или края на страниците в Shopiko
Формата може да се вижда на всяка страница в магазина, например в началото или в края.
Поставяне на формата в началото на страниците
Кодът на формата (Form – самата форма) може да се постави в началото на всяка страница в магазина, като се постави в Разработчик » HTML/JS » At the begining of <body>.
Важно: В зависимост от темата на магазина, много е вероятно да е нужна допълнителна обработка и редакция на кода на стила на формата.
Поставяне на формата в края на страниците
Кодът на формата (Form – самата форма) може да се постави в края на всяка страница в магазина, като се постави в Разработчик » HTML/JS » At the end of <body>.
Когато кодът на формата се намира в края на страниците, при кликване на бутона за абонамент, посетителите ще бъдат насочени към специалните страници от Mailchimp за потвърждение или съобщение за грешка във формата.
Тези страници може да се редактират през акаунта Ви в Mailchimp » Signup forms » Form builder – Forms and response emails.
Важно: В зависимост от темата на магазина, много е вероятно да е нужна допълнителна обработка и редакция на кода на стила на формата.
Вижте още:
⇒ Добавяне на Mailchimp форма за абонамент в банер в Shopiko
