Blog

07.01.2020
#HowTo

#HowTo: Jak stworzyć landing page pod wyprzedaże sezonowe?

#HowTo: Jak stworzyć landing page pod wyprzedaże sezonowe?

Styczeń to sezon największych wyprzedaży. Chcesz stworzyć funkcjonalną, przejrzystą i nowoczesną stronę dedykowaną dużym promocjom w sklepie internetowym? W AtomStore zrobisz to sam, bez angażowania programistów czy dodatkowych narzędzi. Potrzebujesz tylko kilku grafik i podstawowej znajomości HTML.

 

#HowTo to cykl, w którym w przystępny sposób pokazujemy, jak wykorzystać możliwości systemu AtomStore w prowadzeniu e-biznesu. W każdym wpisie znajdziesz instrukcję krok po kroku, dobre praktyk i i przykłady.

Początek roku (styczeń - luty) to najlepszy moment na wyprzedaże. Klienci, mimo wielu okazji w listopadzie i grudniu, jak Black Friday, Dzień Singla czy Dzień Darmowej Dostawy (tzw. Xmas Shopping Peak) w tym okresie polują na dobre okazje. Wśród najbardziej poszukiwanych noworocznych wyprzedaży znalazły się odzież i obuwie (47,5 proc.), sprzęt RTV (28,3 proc.), sprzęt AGD (22 proc.), laptopy i komputery (13,2 proc.) oraz wyposażenie domu (12,9 proc.).

 

Jak skumulować wszystkie oferty promocyjne w jednym miejscu w sklepie internetowym? Najlepiej przygotować dedykowany landing page. Zobacz naszą propozycję na ciekawą i bardziej rozbudowaną stronę z promocjami.

 

1. Stwórz landing page dla akcji promocyjnej

Przejdź do sekcji Marketing → Landing pages → Dodaj nowy. Wypełnij pola jak nazwa i alias. Pamiętaj! Alias to link URL, który będzie wyświetlany. Warto postawić na proste i przyjazne linki jak np. /sale czy /wyprzedaz.

2. Dodaj baner główny

Przejdź niżej, w sekcji Banery kliknij “Dodaj baner”. Uzupełnij pola. W części URL wybierz dowolny adres w sklepie internetowym lub URL właśnie stworzonego landing page. Następnie dodaj baner (zalecana długość to 1200 px).

3. Dodaj banery dodatkowe

Podpowiedź swoim klientom, czego szukają i pozwól im szybciej trafić do upragnionego produktu. Aby to zrobić, przygotuj dwa banery (rekomendowana długość to 620 px). Aby uzyskać powyższy efekt, należy wprowadzić proste modyfikacje w kodzie. Kliknij ikonę "Wstaw obrazek" w panelu edycji tekstu. Wgraj obrazek, który chcesz dodać (Wgraj pliki). Następnie wybierz "Zaawansowane" i wprowadź szczegóły stylu obrazka. Jeżeli dwa obrazki mają wyświetlać się obok siebie wpisz polecenie:

 

display: inline-block;

 

Aby zachować niewielki margines między obrazkami po średniku (;) dodpisz:

 

padding-right: 5px;

 

Z prawej strony obrazka zostanie dodany odstęp wielkości 5 pikseli. Kliknij OK. Obrazek został dodany. 

 

 

Teraz zaznacz obrazek i kliknij ikonę Wstaw/edytuj link. Wstaw adres URL oraz pożądaną akcję. Kliknij OK, aby zapisać. Następnie w ten sam sposób dodaj kolejny baner. Pamiętaj, aby wprowadzić odpowiednie style!

4. Dodaj banery kategorii

Możesz też dodać banery, które będą reprezentowały poszczególne kategorie produktów w Twoim sklepie internetowym. Aby dodać cztery kafelki, przygotuj cztery grafiki (zalecana długość to 300 px). Dodawaj je za pomocą Wstaw obrazek, a następnie edytuj style w zakładce Zaawansowane. Wybierz ten sam kod HTML:

 

display: inline-block; padding-right: 5px;

 

aby obrazki wyświetlały się obok siebie. Zapisz zmiany.

5. Dodaj produkty z listy dynamicznej

Zaprezentuj swoje promocyjne produkty już na landing page. W AtomStore wykorzystasz do tego listy dynamiczne. Przejdź do zakładki Katalog → Listy dynamiczne → Dodaj nową.

 

Jak wykorzystać listy dynamiczne w sklepie?

 

Mając gotową listę, wróć do tworzenia landing page. Wprowadź wybrany tekst np. “koszulki termoaktywne od 81,99 PLN!” Wielkość, kolor i styl czcionki możesz edytować w górnej belce edytora tekstowego. Aby dodać listę wybierz ikonę “Wstaw dynamiczną listę”. Następnie wprowadź ilość wyświetlanych elementów w danej ilości i kliknij polecenie “Wstaw”. W edytorze pojawi się znacznik: #product-filter-3-4#, który informuje o pomyślnym dodaniu listy do landing page.

 

 

Warto dodać przycisk CTA, który przeniesie nas do całej kategorii lub zawartości listy dynamicznej. Aby dodać przycisk Zobacz więcej jak na przykładzie, wystarczy wprowadzić kod HTML w Narzędzia → Kod źródłowy:

 

<h2 style="text-align: center;"><strong>

<a href="https://demo.atomstore.pl/products/filter/3/language:pol">

<span style="color: #ff0000; border-style: solid; padding: 15px;">ZOBACZ WIĘCEJ</span>

</a></strong></h2>

 

Możesz zmienić dowolnie kolor obramowania, a także odstęp w buttonie. Jeżeli masz gotowe obrazki prezentujące przycisk, również możesz je wykorzystać wstawiając je jako obrazek i podlinkowując.

 

Możesz dodać dowolną liczbą list dynamicznych do landing page. Jeżeli to już wszystkie informacje jakie chcesz zaprezentować na tej stronie, przejdź niżej do ustawień landinga. Wybierz m.in. sklep, w którym ma się wyświetlać landing i z którego ma zaciągać produkty (o ile działasz w multistore).

 

Inspiracje do Twojego landing page znajdziesz pod linkiem https://demo.atomstore.pl/sales

 

Nie zapomnij dodać baneru z informacją o wyprzedaży do sekcji bannerowej na stronie głównej. O tym, jak to zrobić piszemy w tym wpisie.Wyśij również newsletter, w którym poinforumujesz swoich Klientów o specjalnej okazji na tańsze zakupy, jak nasz Klient Bobomio

 

 

Wyślij newsletter o wyprzedaży z AtomStore!

 

 

AtomStore to platforma e-commerce klasy premium. Tworzymy dedykowane sklepy internetowe oraz systemy B2B. Oferujemy kompleksowe wdrożenia od A do Z, sklepy mobilne w technologii responsive web design, integracje z programami Comarch Optima, XL, WF-Mag, Subiekt.
Wspólnie rozwiązujemy problemy polskiego e-handlu!

Znajdź nas na:

  • Blog
  • Facebook
  • Youtube
  • Linked in
  • iab