1. Начало
  2. Shopiko
  3. Как да добавим Mailchimp форма за абонамент в онлайн магазина?

Как да добавим Mailchimp форма за абонамент в онлайн магазина?

Чрез формата за абонамент от Mailchimp можете да разширите мейлинг списъка си с Ваши настоящи и бъдещи клиенти, които се интересуват от Вашите продукти и услуги и новостите във Вашия магазин.

За да вградите форма за абонамент от Mailchimp в Shopiko онлайн магазин, така че да изглежда като част от него, ще е нужно първо да активирате Разработчик в магазина и да генерирате код за Embedded Form в Mailchimp.

1) Генериране на код за формата в Mailchimp връзка към този раздел

За да генерирате кода на формата за абонамент, достъпете Mailchimp » Lists – избирате листа » Signup forms » Embedded form.

Copy/paste onto your site"

Извършете необходимите настройки и копирайте получения код от полето „Copy/paste onto your site„.

Уверете се, че сте активирали и настроили GDPR съобщението във формата за абонамент.

Този код след това поставете в обикновен текстов редактор и го запишете. Например поставете кода в Notepad или Notepad++ за Windows и запишете файла в разширение .txt или .html.

Важно: Запишете кода в текстов файл, тъй като ще е нужно да вземете отделни части от него и да ги поставите в различни опции в администрацията на Shopiko.

2) Добавяне на CSS/JS кода в Shopiko в Разработчик връзка към този раздел

Генерираният код за формата в Mailchimp съдържа три вида код, който трябва да се постави на различни места в средата за разработчици (Разработчик) в магазина.

CSS – стил на формата

Първата част от кода е за стила на самата форма.

Първата част от кода, започващ от тага <link> и завършващ с последния затварящ таг </style> е стилът на формата и изглежда по следния начин:

CSS - стил на формата


Този код е нужно да се постави в Shopiko в Разработчик » HTML/JS » Inside the <head>.

в Shopiko в Разработчик » HTML/JS

Важно: След като поставите кода, не забравяйте да запишете промените с бутон Запис.

Ако не искате кодът за стила да се добавя към HTML кода на страницата, но в стиловия файл на темата (style.css), можете да го поставите в Разработчик » CSS » Common CSS. В Common CSS се поставя единствено стилът, без таговете <link> и <style>. Тагът <link href=“/… трябва да си остане в HTML/JS » Inside the <head>.

Inside the head

Form – самата форма

Втората част от кода е самата форма за абонамент (полетата, текста).

Втората част от кода, започващ от тага <div id=“mc_embed_signup“> и завършващ с последния затварящ таг </div>, след затварящия таг на формата </form>, е самата форма и изглежда по следния начин:

Form - самата форма

Засега не поставяйте този код никъде, тъй като има няколко места в магазина, на които може да се покаже формата. В зависимост от това къде искате да се покаже формата, кодът може да се постави или в отделна страница или във футъра/хедъра на магазина. Вижте следващите точки в статията, за да можете да добавите формата коректно.

JavaScript – функционалности във формата

Третата част от кода е JavaScript код, който се използва за различни функционалности в самата форма (например за валидиране на съдържанието в попълнените полета).

Последната част от кода, започващ от тага <script> и завършващ с последния затварящ таг </script>, е за функционалностите на формата и изглежда по следния начин:

JavaScript - функционалности във формата

Този код е нужно да се постави в Shopiko в Разработчик » HTML/JS » At the end of <body>.

HTML/JS » At the end of body

Важно: След като поставите кода, не забравяйте да запишете промените с бутон Запис.

След като сте поставили кода за стила и кода за функционалностите, трябва да изберете къде ще се показва самата форма. Това става като използвате кода на самата форма (Form).

3) Поставяне на формата в отделна страница в Shopiko връзка към този раздел

Можете да създадете нова страница в магазина, в която да поставите формата за абонамент. Например специална страница Абонамент.

При редакция на страницата в Shopiko, отворете опцията за поставяне на HTML код „Изходен код на документа в HTML„.

Изходен код на документа в HTML

Поставете втората част от кода на формата (Form – самата форма) в отворилия се прозорец.

(Form - самата форма)

Запишете кода с бутон Добре.

Важно: Редакторът на код в страницата ще промени поставения код, като ще премахне от него всички тагове като <style>, <script>, <link> както и няколко нужни за нормалното функциониране на формата. Много е важно след като запишете кода да отворите отново редактора на код, за да извършите допълнителни корекции.

Коригиране на поставения код в страницата в Shopiko

Отворете отново режима за редактиране на HTML в редактора на страницата, тъй като ще е нужна малка корекция в поставения код.

1) mce-responses

Открийте реда в кода:

<div id=“mce-responses“ class=“clear“>&nbsp;</div>

и го заменете със следните редове:

<div id=“mce-responses“ class=“clear“>&nbsp;
<div class=“response“ id=“mce-error-response“ style=“display:none“>&nbsp;</div>
<div class=“response“ id=“mce-success-response“ style=“display:none“>&nbsp;</div>
</div>

Коригиране на поставения код в страницата в Shopiko

Ако не извършите тази корекция, при използване на формата за абонамент, след натискане на бутона за абонамент, няма да се получи потвърдителното съобщение.

Коригиране на поставения код в страницата в Shopiko

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 builderForms and response emails.

Mailchimp » Signup forms » Form builder - Forms and response emails

Важно: В зависимост от темата на магазина, много е вероятно да е нужна допълнителна обработка и редакция на кода на стила на формата.

Вижте още:

Добавяне на Mailchimp форма за абонамент в банер в Shopiko

Добавяне на Mailchimp Pop-up форма за абонамент в Shopiko

Обновена: 21.04.2022

Беше ли Ви полезна тази статия?

Вижте още