Boxy produktowe / Boxy produktowe PRO

Tylko RWD

O aplikacji

Aplikacja Boxy produktowe pozwala zamieszczać wybrane produkty w dowolnym miejscu sklepu - w opisie produktu, kategorii czy producenta, module HTML, na stronie informacyjnej, wpisie na blogu, a nawet w dowolnym miejscu szablonu (edycja zaawansowana). Wystarczy wkleić prosty kod (shortcode) wygenerowany przez aplikację, np. [product id="20,35"] - narzędzie automatycznie pobierze aktualną nazwę, zdjęcie i cenę wybranych produktów i wyświetli je w formie boxów.

Aplikacja dostępna jest w dwóch wersjach - podstawowej i PRO, która dodaje slider oraz więcej sposobów wybierania produktów (promocje, nowości, wyszukiwarka, kategoria, kolekcja) - zobacz porównanie wersji.

Instrukcja Standard vs PRO Co nowego Częste pytania Przykłady użycia Cennik

Szablon Storefront

Aplikacja działa wyłącznie na szablonach RWD. Jeśli potrzebujesz boxów produktowych na szablonie Storefront, sprawdź aplikację Boxy produktowe Storefront.

Wersja standardowa vs PRO

	Standard	PRO
Wybrane produkty (po ID)	✓	✓
Produkty z modułów Shopera (promocje, nowości, produkty dnia, polecane)	-	✓
Produkty z wyszukiwarki (po frazie)	-	✓
Produkty z wybranej kategorii	-	✓
Produkty z wybranej kolekcji	-	✓
Wyświetlanie jako slider (+ automatyczne przewijanie)	-	✓
Ograniczenie liczby wyświetlanych produktów	-	✓
Wyświetlanie tylko dostępnych produktów	-	✓
Produkty tylko z kategorii najwyższego poziomu	-	✓
Kolejność produktów (domyślnie / losowo / A-Z / Z-A / cena)	-	✓
Wybór wyświetlanej ceny	✓	✓
Zdjęcia w formacie webp	✓	✓
Najniższa cena z 30 dni (Omnibus)	✓	✓
Ulepszony slider zdjęć (owl)	-	✓

Instrukcja konfiguracji

Konfigurację warto zacząć od ustawień ogólnych aplikacji, a następnie przejść do generowania kodu z boxami produktowymi.

Krok 1 · Konfiguracja aplikacji Wybór ceny, przycisk „Powiadom o dostępności”, zdjęcia webp, ulepszony slider (PRO) i Omnibus.

Krok 2 · Generowanie kodu boxów Wybrane produkty, moduły Shopera, wyszukiwarka, kategoria i kolekcja (PRO) - oraz dostępne parametry.

Gdzie wkleić kod

Wygenerowany shortcode możesz wkleić w dowolnym miejscu: w opisie produktu, kategorii lub producenta, w module HTML (w sekcji Moduły w Aktywnym stylu graficznym), na stronie informacyjnej, wpisie na blogu, a nawet w dowolnym miejscu szablonu (edycja zaawansowana w Aktywnym stylu graficznym).

Co nowego

2024 - wersja PRO

• możliwość wyboru kolejności wyświetlania produktów: domyślnie, losowo, A-Z, Z-A, wg. ceny malejąco, wg. ceny rosnąco

2023 - wersja PRO

• nowa sekcja „Produkty z wybranej kolekcji”
• możliwość wyboru nowego, ulepszonego slidera (owl) - w pełni responsywnego, z przewijaniem/przeciąganiem i strzałkami
• możliwość wyświetlania przycisku „Powiadom o dostępności” dla niedostępnych produktów

2023

• możliwość wyświetlania zdjęć w formacie webp
• wyświetlanie najniższej ceny z 30 dni (Omnibus), z możliwością konfiguracji tłumaczeń frazy dla wszystkich języków sklepu

2022

• możliwość wyświetlania produktów tylko z kategorii najwyższego poziomu
• wyświetlanie tylko produktów możliwych do kupienia (checkbox przy generowaniu boksów)

Częste pytania

W jakich miejscach mogę wyświetlić boxy produktowe?

W dowolnych - kod można na przykład umieścić na stronie informacyjnej czy poście na blogu, ale także w module HTML czy szablonach strony.

Dlaczego boksy produktowe wyglądają inaczej niż produkty w sklepie?

Aplikacja tworzy strukturę kodu HTML boksa z produktem identyczną z domyślnym kodem szablonu Shopera. Jeśli w Twoim sklepie był modyfikowany wygląd, boksy z aplikacji mogą się nieco różnić - zazwyczaj wystarczą drobne poprawki w stylach CSS. Poproś o to osobę, która pracowała nad Twoim sklepem, a jeśli nie masz takiej osoby - napisz do nas, postaramy się pomóc!

Ile produktów mogę wyświetlić w 1 boksie produktowym?

W każdym shortcodzie możesz umieścić dowolną liczbę produktów. Pamiętaj jednak, że każde 20 produktów to 1 zapytanie do serwera - aby zapewnić przyzwoitą szybkość działania sklepu, unikaj umieszczania zbyt wielu produktów na 1 stronie.

Ile razy mogę użyć boksów produktowych na 1 stronie?

Nie ma limitu użyć kodu na 1 stronie, warto jednak zachować umiar i nie umieszczać zbyt wielu produktów na 1 stronie.

Jak wymusić większą rozdzielczość zdjęcia wyświetlanego w boksie produktowym?

Domyślnie miniatury w boxach produktowych są generowane w rozmiarze 300×300 px. Czasami taka miniatura, żeby dobrze wyglądać na urządzeniach mobilnych, potrzebuje większego zdjęcia.

Poniższy kod wymusza pobranie zdjęcia w rozmiarze 500×500 zamiast 300×300 - należy go umieścić na końcu Wygląd i treści → Wygląd sklepu → Obecny szablon graficzny → Własny skrypt JS:

if (typeof Shop.prototype.callBackMamezi === "undefined") {
  Shop.prototype.callBackMamezi = {};
}

Shop.prototype.callBackMamezi.productBoxesCallback = function (data, block) {
  $.each(block.find(".product"), function (k, v) {
    var $img = $(v).find("img[lazy]");
    if ($img.length > 0) {
      var new_src = $img.attr("data-src").replace("300_300", "500_500");
      $img.attr({
        "src": new_src,
        "data-src": new_src
      });
    }
  })
}

Zapis .replace("300_300", "500_500") informuje, jaki rozmiar na jaki zamieniamy - w podanym przykładzie 300×300 zastępowane jest przez 500×500.

Przykłady użycia

Cennik