> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widżety post-purchase

> Ten dokument opisuje widżety post-purchase dostępne w Aftersell oraz sposób ich wykorzystania do budowania doświadczeń upsell po zakupie. Widżety są pogrupowane według zakresu i funkcji, a każdy widżet jest udokumentowany tylko raz, aby uniknąć powtórzeń.

***

<div id="funnel-wide-widgets">
  # Widżety obejmujące cały lejek
</div>

<div id="progress-bar">
  ## Pasek postępu
</div>

**Pasek postępu** pokazuje klientom, na którym etapie procesu post-purchase się znajdują.

Po włączeniu pasek postępu pojawia się we wszystkich ofertach upsell w ramach lejka. Wszelkie zmiany wprowadzone w pasku postępu obowiązują w całym lejku.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Pasek postępu post-purchase z krokami Koszyk, Zamówienie złożone, Oferta specjalna i Gotowe" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**Opcje konfiguracji**

* Włączanie i wyłączanie paska postępu dla lejka
* Wybór stylu wyświetlania:
  * **Minimalny**
  * **Minimalny z etykietami**
  * **Maksymalny**
* Wybór wyglądu **Czarny** lub **Biały**
* Regulacja górnego i dolnego odstępu w celu kontroli rozmieszczenia

***

<div id="offer-level-widgets">
  # Widżety na poziomie oferty
</div>

Widżety na poziomie oferty kontrolują treść i zachowanie pojedynczej oferty upsell.

Te widżety określają, co klient widzi na konkretnym kroku upsell, w tym komunikaty, elementy pilności, informacje o produkcie, szczegóły cen i akcje.

Każdą ofertę w lejku można dostosować niezależnie za pomocą widżetów na poziomie oferty, co pozwala dopasować doświadczenie na każdym etapie.

Do tych widżetów należą:\
[Tekst](#text)\
[Minutnik](#timer)\
[Produkt upsell](#upsell-product)\
[Wybór produktu](#product-selection)\
[Rabat](#discount)\
[Odznaka](#badge)\
[Wysyłka](#shipping)\
[Obraz](#image)\
[Przyciski](#buttons)\
[Podział ceny](#price-breakdown)\
[Szczegóły produktu](#product-details)\
[Opcje wariantów i planów](#variant--plan-options)\
[Układ](#layout)\
[Wideo](#video)\
[Opinie](#testimonials)

***

<div id="text">
  ## Tekst
</div>

Widżet **Tekst** służy do nagłówków i tekstów uzupełniających w całej ofercie.

Obsługuje nagłówek i opcjonalny tekst główny, z kontrolkami rozmiaru czcionki, koloru, grubości, wyrównania, przekreślenia i odstępów.

Użyj zmiennej dynamicznej `{first-name}`, aby spersonalizować komunikaty dla każdego klienta.

***

<div id="timer">
  ## Minutnik
</div>

Widżet **Minutnik** dodaje poczucie pilności, wyświetlając odliczanie na żywo.

Dopóki minutnik działa, oferta pozostaje widoczna. Gdy minutnik osiągnie zero, oferta upsell automatycznie znika, a klient przechodzi dalej w lejku.

***

<div id="upsell-product">
  ## Produkt upsell
</div>

Widżet **Produkt upsell** to serce oferty. Określa, który produkt jest pokazywany, i działa jako kontener dla wszystkich widżetów związanych z produktem poniżej.

Wszystko, co następuje dalej, konfiguruje się w ramach tego widżetu.

***

<div id="product-selection">
  ## Wybór produktu
</div>

Widżet Wybór produktu kontroluje, który produkt jest pokazywany w ofercie upsell.

Możesz wybrać stały produkt lub dynamicznie określić produkt upsell na podstawie pierwotnego zamówienia klienta, co pozwala tworzyć zarówno statyczne, jak i adaptacyjne doświadczenia upsell.

<div id="product-type-options">
  #### Opcje typu produktu
</div>

* **Konkretny produkt**\
  Zawsze wyświetla ten sam produkt w upsellu.
* **Automatyczny upsell**\
  Dynamicznie wybiera produkt przy użyciu wstępnie zdefiniowanej logiki upsell.
* **Najdroższy w koszyku**\
  Używa najdroższej pozycji z pierwotnego zamówienia klienta.
* **Najtańszy w koszyku**\
  Używa najtańszej pozycji z pierwotnego zamówienia klienta.

<div id="changing-the-product">
  #### Zmiana produktu
</div>

Wybrany produkt pojawia się u góry widżetu. Aby go zmienić:

1. Kliknij **Change product**
2. Wybierz typ produktu
3. Wybierz lub potwierdź produkt

Podczas przeglądania karty **Products** w selektorze możesz zaznaczyć **Active products only**, aby ukryć na liście produkty w wersji roboczej i zarchiwizowane. Ten filtr jest domyślnie wyłączony i dotyczy tylko karty Products — kolekcje nie są nim objęte.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="Edytor ofert Aftersell pokazujący panel Edit upsell product obok podglądu oferty na żywo" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### Identyfikowanie produktów o identycznych nazwach
</div>

Jeśli Twój sklep ma wiele produktów lub wariantów o tym samym tytule, włącz przełącznik **Show IDs** w selektorze produktów, aby wyświetlić numeryczne ID produktu i ID wariantu Shopify pod każdą nazwą. Dzięki temu łatwo upewnisz się, że wybierasz właściwy produkt.

Przełącznik **Show IDs** jest dostępny na karcie **Product** selektora i jest domyślnie wyłączony. Nie jest dostępny na karcie Collection.

***

<div id="discount">
  ## Rabat
</div>

Widżet **Rabat** stosuje i wyświetla ceny promocyjne.

Możesz wybrać rabat procentowy (%) lub stałą kwotę w dolarach (\$). W razie potrzeby możesz dodać niestandardowy tekst rabatu, a rabat może odnosić się do ceny porównawczej produktu (compare-at) lub ją ignorować.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### Skrót do zbiorczych rabatów w ofertach wieloproduktowych
</div>

W przypadku ofert wieloproduktowych i opartych na kolekcjach sekcja **Discount** pojawia się bezpośrednio w ustawieniach widżetu Upsell Products — poniżej obszaru wyboru produktów. Daje to szybszy sposób na ustawienie lub aktualizację rabatów dla wielu produktów bez otwierania ustawień każdego produktu z osobna.

Sekcja jest domyślnie zwinięta. Po jej rozwinięciu:

* Wyświetlana jest lista wszystkich produktów w ofercie, każdy z polem wyboru i odznaką pokazującą jego aktualny rabat (na przykład `17% off` lub `$18.00 off`).
* Zaznacz produkty, które chcesz zaktualizować, używając pól wyboru. Domyślnie zaznaczone są wszystkie produkty.
* Znacznik poniżej listy pokazuje, do ilu produktów zostaną zastosowane Twoje zmiany.
* Użyj pól typu i wartości rabatu, aby ustawić rabat. Zmiany dotyczą tylko zaznaczonych produktów — niezaznaczone produkty zachowują dotychczasowe rabaty.

<div id="mixed-discounts-across-products">
  #### Mieszane rabaty w różnych produktach
</div>

Gdy zaznaczone produkty mają różne ustawienia rabatów, pola pokazują tekst zastępczy sygnalizujący różnice:

* Jeśli produkty mają różne **typy rabatów** (na przykład niektóre mają rabat %, a inne rabat \$), selektor typu pokazuje **Mixed**.
* Jeśli produkty mają różne **wartości rabatów** lub typy, pole wartości pokazuje **Multiple values** z informacją, że wprowadzenie nowej wartości nadpisze aktualny rabat każdego zaznaczonego produktu.

<div id="info-icon-on-product-rows">
  #### Ikona informacji w wierszach produktów
</div>

Ikona informacji (i) pojawia się obok odznaki rabatu produktu, gdy dany produkt ma skonfigurowane dodatkowe ustawienia rabatu — takie jak niestandardowy tytuł rabatu, cena porównawcza lub rabat subskrypcyjny. Najechanie na ikonę pokazuje podsumowanie tych dodatków.

***

<div id="badge">
  ## Odznaka
</div>

Widżet **Odznaka** wyróżnia kluczowe atrybuty produktu, takie jak popularność czy pilność.

Możesz wybrać wstępnie zdefiniowaną etykietę odznaki, wybrać spośród wielu stylów wizualnych, dodać ikonę i kontrolować, gdzie odznaka pojawia się w ofercie lub bezpośrednio na zdjęciu produktu.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="Oferta post-purchase pokazująca odznakę Trending nad tytułem produktu" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

Niestandardowe obrazy odznak można przesłać z poziomu **Advanced badge settings** (SVG lub PNG, do 10 MB).

<Note>
  Edycja odznak jest dostępna tylko w ofertach V2. Oferty V1 zachowują wszelkie wcześniej skonfigurowane odznaki, ale ustawień odznak nie można edytować w ofertach V1.
</Note>

***

<div id="shipping">
  ## Wysyłka
</div>

Widżet **Wysyłka** kontroluje sposób komunikowania kosztów wysyłki.

Możesz zaoferować darmową wysyłkę lub pobierać opłatę za wysyłkę, ustawiając konkretną cenę wysyłki.

***

<div id="image">
  ## Obraz
</div>

Widżet **Obraz** kontroluje sposób wyświetlania zdjęć produktu.

Zawiera opcje dostosowania rozmiaru głównego zdjęcia, dodania obramowania, włączenia karuzeli zdjęć oraz przesłania niestandardowego zdjęcia produktu z poziomu **Advanced image settings**.

***

<div id="language">
  ## Język
</div>

Sekcja **Language** kontroluje, który język jest używany dla wszystkich tekstów systemowych w ofercie, w tym tekstu przycisków, etykiet subskrypcji, etykiet cen i innych nieedytowalnych ciągów.

Wybierz język z listy rozwijanej **Language**, aby automatycznie przetłumaczyć teksty systemowe dla tej oferty. Aftersell obsługuje 32 języki.

To ustawienie nie wpływa na odznaki ani niestandardowe pola tekstowe — tłumaczone są tylko teksty generowane przez system.

***

<div id="buttons">
  ## Przyciski
</div>

**Widżet Przyciski** kontroluje, w jaki sposób klienci akceptują lub odrzucają upsell podczas checkoutu.

Możesz dostosować zachowanie i wygląd przycisków, w tym:

* Wybór **domyślnego tekstu przycisku akceptacji**
* Wymaganie **kliknięcia potwierdzającego** przed zaakceptowaniem upsellu
* Zmianę **stylu przycisku odrzucenia** (na przykład przycisk lub link)
* Dostosowanie **wyrównania przycisków** i szerokości
* Dodanie opcjonalnego **tekstu pomocniczego** nad lub pod przyciskami, z kontrolkami stylu i obsługą zmiennych dynamicznych

<div id="button-text">
  ### Tekst przycisku
</div>

Możesz skonfigurować tekst przycisku akceptacji dla swoich ofert post-purchase, korzystając z listy rozwijanej **Default accept button text**. Dostępne opcje zależą od typu oferty:

**Oferty standardowe:**

* **Pay Now** — wyświetla „Pay Now • \[łączna cena produktu]” (lub „Add Now • Free” dla produktów darmowych)
* **Accept Offer** — wyświetla „Accept Offer” niezależnie od ceny

**Oferty Subscription Upgrade:**

* **Upgrade Subscription** — wyświetla „Upgrade Subscription” (domyślne dla nowych ofert Subscription Upgrade)
* **Accept Offer** — wyświetla „Accept Offer” niezależnie od ceny
* **Pay Now** — wyświetla „Pay Now • \[łączna cena produktu]” (lub „Add Now • Free” dla produktów darmowych)

Aby przetłumaczyć tekst przycisków, użyj sekcji **Language** nad sekcją Buttons.

<div id="button-layout-options">
  ### Opcje układu przycisków
</div>

Możesz też kontrolować **pozycję przycisków akceptacji i odrzucenia** względem siebie. Obsługiwane są następujące układy:

* **Accept above decline** — wyświetla przycisk akceptacji nad opcją odrzucenia
* **Decline above accept** — wyświetla opcję odrzucenia nad przyciskiem akceptacji
* **Accept beside decline** — wyświetla przyciski akceptacji i odrzucenia obok siebie

Te opcje układu dają Ci większą elastyczność w dopasowaniu doświadczenia checkoutu i hierarchii komunikatów.

***

<div id="price-breakdown">
  ## Podział ceny
</div>

Widżet **Podział ceny** zwiększa przejrzystość cen.

Może wyświetlać wysyłkę i podatek, zawierać dodatkowe szczegóły, takie jak suma częściowa i rabaty, oraz być wyrównany lub umieszczony obok przycisków płatności dla maksymalnej czytelności.

<div id="hide-shipping-adjustment-line">
  ### Ukrywanie wiersza korekty wysyłki
</div>

Gdy Twoja oferta jest skonfigurowana jako upsell zastępujący (przy użyciu ustawienia „Replace item in original order with upsell”), podział ceny zawiera wiersz **Shipping adjustment**, który odzwierciedla różnicę kosztów wysyłki między produktem pierwotnym a zastępczym.

Możesz ukryć ten wiersz za pomocą pola wyboru **Hide shipping adjustment line**, które pojawia się w sekcji Price Breakdown tylko wtedy, gdy skonfigurowany jest upsell zastępujący. To ustawienie jest domyślnie wyłączone, więc istniejące oferty pozostają bez zmian.

* Gdy pole jest zaznaczone, wiersz korekty wysyłki jest ukryty w podziale ceny widocznym dla klienta.
* Gdy pole nie jest zaznaczone, wiersz korekty wysyłki jest wyświetlany normalnie.

To ustawienie wpływa tylko na wiersz korekty wysyłki w ofertach upsell zastępujących. Standardowy wiersz wysyłki w ofertach niezastępujących pozostaje bez zmian.

***

<div id="product-details">
  ## Szczegóły produktu
</div>

Widżet **Szczegóły produktu** kontroluje sposób prezentacji kluczowych informacji o produkcie.

Obsługuje oceny z recenzji produktu (automatycznie ukrywane, jeśli nie ma recenzji), opcjonalny selektor ilości oraz możliwość pominięcia oferty, jeśli produkt znajduje się już w pierwotnym zamówieniu.

Tytuły i ceny produktów są w pełni stylizowalne i obsługują niektóre zmienne dynamiczne, w tym `{product}`, `{original-price}`, `{current-price}`, `{savings}` i `{savings-line}`.

Można dodać opcjonalny opis oferty, aby wzmocnić wartość lub poczucie pilności.

<div id="product-review-star-colors">
  ### Kolory gwiazdek recenzji produktu
</div>

Gdy opcja **Show product reviews rating** jest włączona, możesz dostosować kolory wyświetlania ocen gwiazdkowych:

* **Star color** — kolor wypełnionych (aktywnych) gwiazdek. Domyślnie `#fdcc0d` (żółty).
* **Empty star color** — kolor niewypełnionych (nieaktywnych) gwiazdek. Domyślnie `#d1d5db` (jasnoszary).

Aby zmienić kolory, otwórz ustawienia widżetu **Product Details**, włącz **Show product reviews rating** i użyj pól koloru, aby ustawić preferowane wartości hex.

<div id="quantity-selector-presets">
  ### Ustawienia wstępne selektora ilości
</div>

Gdy selektor ilości jest włączony, możesz skonfigurować **wstępnie ustawioną ilość**, aby kontrolować, ile sztuk jest pokazywanych lub dozwolonych podczas wyświetlania oferty. Dostępne są następujące opcje ustawień wstępnych:

* **Fixed** — ustawia konkretną ilość, od której klient zaczyna. Selektor ilości jest ukryty i klient nie może zmienić ilości.
* **Percentage of purchased quantity** — ustawia ilość jako procent liczby sztuk pierwotnie kupionych przez klienta.
* **Minimum quantity** — ustawia dolny limit ilości. Klient zaczyna od tej wartości i może ją zwiększać.
* **Maximum quantity** — ustawia górny limit ilości. Klient zaczyna od 1 i nie może przekroczyć skonfigurowanego maksimum (do 20). Klientowi wyświetlany jest komunikat wskazujący maksymalną ilość dla danej pozycji.

<div id="description-position">
  ### Pozycja opisu
</div>

W ofertach z jednym produktem możesz kontrolować, gdzie pojawia się opis produktu względem przycisków CTA:

* **Default (above buttons)** — opis pojawia się nad przyciskami akceptacji i odrzucenia
* **Below buttons** — opis pojawia się pod przyciskami akceptacji i odrzucenia

To ustawienie pozwala dostosować układ tak, aby lepiej pasował do hierarchii komunikatów i preferencji projektowych.

***

<div id="variant--plan-options">
  ## Opcje wariantów i planów
</div>

Widżet **Variant & Plan Options** kontroluje widoczność wariantów, ich wybór oraz blokowanie planu subskrypcji.

Możesz pokazywać lub ukrywać warianty niedostępne w magazynie, ukryć cały produkt, jeśli wszystkie warianty są niedostępne, i kontrolować, czy opcje wariantów z jednym wyborem są pokazywane. **Ustawienia zaawansowane pozwalają całkowicie ukryć selektor wariantów**.

Opcje wstępnego wyboru wariantu obejmują inteligentne dopasowanie (Smart matching) do pierwotnego zakupu, brak wyboru (Unselected) wymagający wyboru użytkownika lub pierwszy dostępny wariant (First available variant).

W przypadku produktów z wieloma opcjami wariantów wyświetlane są wszystkie opcje, a wariant dostępny w magazynie jest wstępnie wybierany, gdy jest dostępny; opcje niedostępne są pokazywane jako niedostępne. W przypadku produktów z jedną opcją wariantu opcje niedostępne są ukrywane.

<div id="subscription-plan-locking">
  ### Blokowanie planu subskrypcji
</div>

Oferując produkty subskrypcyjne z wieloma planami subskrypcji, możesz zablokować ofertę na konkretnym planie. Zapobiega to zmianie planu subskrypcji przez klientów podczas doświadczenia post-purchase, gwarantując, że otrzymają dokładnie tę opcję subskrypcji, którą skonfigurujesz.

**Aby zablokować plan subskrypcji:**

1. W sekcji **Variant & Plan Options** znajdź listę rozwijaną **Lock subscription plan**
2. Wybierz konkretny plan z listy rozwijanej
3. Plan jest teraz zablokowany — klienci zobaczą nazwę planu jako statyczny tekst zamiast możliwej do zmiany listy rozwijanej

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Panel Variant and Plan Options z listą rozwijaną Lock subscription plan" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**Gdy plan jest zablokowany:**

* Klienci widzą nazwę planu wyświetlaną jako tekst
* Lista rozwijana wyboru planu jest ukryta
* Klienci nie mogą zmienić planu subskrypcji
* Jeśli zablokowany plan nie jest już dostępny w Shopify, oferta płynnie wraca do pokazywania wszystkich dostępnych planów

**Automatyczny reset:**

Ustawienie zablokowanego planu resetuje się automatycznie, jeśli zmienisz opcję zakupu produktu na wyłącznie zakup jednorazowy (usuwając opcję subskrypcji).

<div id="variant-selector-position">
  ### Pozycja selektora wariantów
</div>

Możesz kontrolować, gdzie pojawia się selektor wariantów względem przycisków CTA:

* **Above CTA buttons (default)** — selektor wariantów pojawia się nad przyciskami akceptacji i odrzucenia
* **Below CTA buttons** — selektor wariantów pojawia się pod przyciskami akceptacji i odrzucenia

Gdy zarówno selektor wariantów, jak i opis produktu znajdują się pod przyciskami CTA, możesz kontrolować ich kolejność:

* **Variant selector first** — selektor wariantów pojawia się przed opisem produktu
* **Description first** — opis produktu pojawia się przed selektorem wariantów

Możesz też dostosować górny i dolny odstęp selektora wariantów, aby dopracować rozmieszczenie i uzyskać pożądany układ wizualny.

***

<div id="layout">
  ## Układ
</div>

Widżet **Układ** kontroluje ogólną strukturę i odstępy w upsellu.

Możesz wybrać układ jedno- lub dwukolumnowy, dostosować maksymalną szerokość układu oraz dopracować górny i dolny odstęp, aby stworzyć przejrzyste, czytelne doświadczenie.

***

<div id="video">
  ## Wideo
</div>

Widżet **Wideo** dodaje do oferty klikalną miniaturę, która otwiera hostowany odtwarzacz wideo w nowej karcie, ze stylizowanym tłem i przyciskiem powrotu do upsellu. Wideo odtwarza się w nowej karcie, a nie w treści strony, dzięki czemu oferta upsell pozostaje otwarta w pierwotnej karcie.

Widżet obsługuje też **kolor tła**, aby dopasować się do Twojej marki lub skupić uwagę na odtwarzaczu, oraz **ustawienia układu** dotyczące wyrównania (lewo, środek, prawo) oraz górnego i dolnego odstępu.

Aby zobaczyć podgląd doświadczenia klienta, kliknij miniaturę w **podglądzie oferty** w edytorze. Hostowany odtwarzacz wideo otwiera się w nowej karcie dokładnie tak, jak na stronie sklepu, dzięki czemu możesz sprawdzić miniaturę, CTA i sposoby zamykania przed publikacją.

<div id="browser-compatibility">
  ### Zgodność z przeglądarkami
</div>

Widżet wideo otwiera odtwarzacz w nowej karcie. Na komputerach zawsze to działa, więc widżet jest zawsze pokazywany.

Na urządzeniach mobilnych działa to odwrotnie: Aftersell pokazuje widżet tylko w przeglądarkach, które rozpoznaje jako zdolne do otwarcia nowej karty bez wypychania klienta z checkoutu. Obejmuje to natywne przeglądarki mobilne — Safari, Chrome, Firefox i inne dobrze znane — a także przeglądarki wbudowane w aplikacje Facebook i Instagram.

**Każda inna przeglądarka mobilna ukrywa widżet.** Dotyczy to przeglądarek wbudowanych w aplikacje, takich jak aplikacja Google, TikTok i Pinterest, ogólnych webview oraz wszystkiego, czego Aftersell nie rozpoznaje. Ponieważ nierozpoznane przeglądarki są ukrywane, a nie pokazywane, zestaw środowisk, w których widżet się nie pojawi, nie jest stałą listą — przeglądarka, której Aftersell wcześniej nie widział, również go ukrywa.

Tam, gdzie widżet jest ukryty, możesz przesłać **obraz zastępczy (Fallback image)**, który będzie wyświetlany w jego miejsce — na przykład statyczny obraz promocyjny lub grafikę marki. Jest on wyświetlany bez linku ani przycisku odtwarzania. Jeśli obraz zastępczy nie jest ustawiony, w miejscu widżetu nic się nie wyświetla.

<Tip>
  Ustaw **obraz zastępczy** w każdym publikowanym widżecie wideo. Ponieważ wszystko, co nierozpoznane, jest ukrywane, same źródła ruchu nie powiedzą Ci, czy część klientów nie widzi widżetu — a bez obrazu zastępczego ci klienci nie zobaczą zupełnie nic.
</Tip>

<div id="video-source">
  ### Źródło wideo
</div>

Widżet odtwarza jedno wideo z jednego z dwóch źródeł. Użyj przełącznika **Upload** / **Link** w ustawieniach widżetu, aby wybrać, którego źródła używa odtwarzacz:

* **Upload** — przeciągnij i upuść lub wybierz plik MP4, WebM lub MOV (do 50 MB), aby hostować go bezpośrednio w Twoich plikach Shopify (Shopify Files). Po przesłaniu Shopify przetwarza plik, a w edytorze pojawia się podgląd.
* **Link** — wklej adres URL z YouTube, adres URL z Vimeo lub bezpośredni link do hostowanego pliku wideo (na przykład MP4 na Twoim własnym CDN-ie).

Możesz wypełnić oba, ale odtwarzane jest tylko źródło wybrane przełącznikiem — drugie pozostaje na swojej karcie i **nie** jest używane jako automatyczne źródło zapasowe. Jeśli ustawione jest tylko jedno źródło, to ono jest odtwarzane niezależnie od przełącznika.

Musisz ustawić co najmniej jedno źródło — przesłane wideo lub link do wideo — zanim będziesz mógł zapisać widżet.

<div id="supported-link-formats">
  #### Obsługiwane formaty linków
</div>

Pole linku akceptuje następujące formaty:

* **YouTube** — użyj standardowego adresu URL wideo (na przykład `https://youtu.be/VIDEO_ID` lub `https://www.youtube.com/watch?v=VIDEO_ID`). Adresy URL YouTube Shorts (`youtube.com/shorts/...`) nie są obsługiwane — otwórz wideo na YouTube i użyj linku z opcji Udostępnij.
* **Vimeo** — użyj standardowego adresu URL wideo (na przykład `https://vimeo.com/VIDEO_ID`). Adresy URL showcase oraz strony kanałów lub profili, które nie wskazują konkretnego wideo, nie są obsługiwane — użyj adresu URL konkretnego wideo z paska adresu. Adres URL kanału lub grupy zawierający numeryczne ID wideo działa.
* **Bezpośredni plik** — publicznie dostępny adres URL HTTPS wskazujący plik wideo (na przykład MP4 na Twoim CDN-ie).

<div id="link-validation">
  #### Walidacja linków
</div>

Edytor waliduje Twój link w dwóch momentach:

* **Gdy opuszczasz pole** — jeśli format adresu URL jest rozpoznawalnie błędny (na przykład link do YouTube Shorts lub adres URL showcase z Vimeo), błąd w treści wyjaśnia, czego użyć zamiast tego.
* **Przy zapisie** — edytor sprawdza u dostawcy wideo, czy wideo można osadzić. Jeśli wideo jest prywatne, usunięte lub ma wyłączone osadzanie, zapis jest blokowany, a powód jest wyświetlany przy polu linku. Popraw link i zapisz ponownie, aby kontynuować.

Jeśli sprawdzenie u dostawcy jest niedostępne (na przykład z powodu problemu z siecią), zapis przebiega bez blokowania.

<div id="shopify-files-permission">
  #### Uprawnienie Shopify Files
</div>

Przesłanie wideo wymaga uprawnienia `write_files`. Jeśli to uprawnienie nie zostało przyznane, w obszarze przesyłania pojawia się baner z przyciskiem **Update**. Kliknij go, aby przyznać uprawnienie i umożliwić przesyłanie.

<div id="upload-processing">
  #### Przetwarzanie przesyłanych plików
</div>

Po upuszczeniu lub wybraniu pliku moduł przesyłania pokazuje **Uploading…** podczas transferu pliku, a następnie **Processing…** podczas transkodowania przez Shopify. Podgląd pojawia się po zakończeniu przetwarzania. W trakcie przetwarzania wideo możesz nadal edytować inne ustawienia widżetu.

Nie możesz zapisać widżetu, którego jedynym źródłem jest wideo w trakcie przetwarzania — zapis jest blokowany do zakończenia transkodowania lub do momentu dodania linku do wideo jako tymczasowego źródła. Jeśli odrzucisz zmiany lub zamkniesz edytor przed zapisaniem, wszystkie trwające przesyłania są usuwane z plików Shopify.

Linki do wideo są walidowane przy zapisie widżetu.

<div id="thumbnail-and-watch-video-cta">
  ### Miniatura i CTA obejrzenia wideo
</div>

Prześlij obraz, który klienci zobaczą w ofercie przed otwarciem wideo. CTA obejrzenia wideo jest automatycznie umieszczane na miniaturze, aby zwrócić uwagę na akcję odtwarzania. Możesz ostylować tekst etykiety CTA, aby pasował do Twojej marki. Miniatury nie są generowane automatycznie z wideo — muszą zostać przesłane.

Możesz też przesłać osobną **miniaturę tylko dla urządzeń mobilnych**. Gdy jest ustawiona, miniatura mobilna jest pokazywana na urządzeniach mobilnych, a domyślna miniatura jest używana na komputerach, dzięki czemu możesz dopasować obraz do każdego rozmiaru ekranu.

<div id="fallback-image">
  ### Obraz zastępczy
</div>

Ustawienie **Fallback image** pozwala przesłać obraz wyświetlany, gdy widżet wideo jest ukryty, ponieważ przeglądarka klienta nie może otworzyć odtwarzacza — zobacz [Zgodność z przeglądarkami](#browser-compatibility). Obraz zastępczy jest pokazywany bez linku ani nakładki odtwarzania; to wyłącznie statyczny obraz.

Jeśli obraz zastępczy nie zostanie przesłany, w miejscu widżetu nic się nie wyświetla.

<div id="autoplay">
  ### Autoodtwarzanie
</div>

Przełącznik **Autoplay** kontroluje, czy wideo zaczyna odtwarzać się automatycznie po otwarciu hostowanego odtwarzacza.

Gdy autoodtwarzanie jest włączone, wideo startuje **wyciszone**. Większość nowoczesnych przeglądarek blokuje automatyczne odtwarzanie wideo z dźwiękiem, dopóki klient nie wejdzie w interakcję ze stroną, więc odtwarzanie bez dźwięku jest wymagane, aby autoodtwarzanie faktycznie zadziałało niezawodnie. Klienci mogą wyłączyć wyciszenie za pomocą kontrolek odtwarzacza po rozpoczęciu odtwarzania.

Jeśli wolisz, aby dźwięk był odtwarzany od pierwszej klatki, pozostaw autoodtwarzanie wyłączone i pozwól klientowi ręcznie kliknąć odtwarzanie wideo.

<div id="closing-the-video">
  ### Zamykanie wideo
</div>

Klient może zamknąć hostowany odtwarzacz i wrócić do oferty upsell na trzy sposoby:

* **Przycisk powrotu do oferty** — przycisk pod odtwarzaczem, który zamyka kartę i wraca do upsellu.
* **Podwójne kliknięcie w dowolnym miejscu** — podwójne kliknięcie w dowolnym miejscu tła zamyka odtwarzacz.
* **Automatyczne zamknięcie po zakończeniu** — gdy wideo skończy się odtwarzać, odtwarzacz zamyka się automatycznie.

Ponieważ wideo otwiera się w nowej karcie, zamknięcie odtwarzacza zamyka tę kartę — upsell pozostaje w pierwotnej karcie.

<div id="language-and-translations">
  ### Język i tłumaczenia
</div>

Teksty strony odtwarzacza wideo — etykieta przycisku powrotu do oferty, wskazówki dla komputerów i urządzeń mobilnych oraz tytuł i komunikat wyświetlane, gdy wideo jest niedostępne — podążają za ustawieniem **Language** oferty i można je dostosować w **Settings > Translations**.

***

<div id="testimonials">
  ## Opinie
</div>

Widżet **Opinie** wyświetla prawdziwe recenzje produktów w Twojej ofercie post-purchase, aby budować zaufanie i wzmacniać decyzję klienta o zaakceptowaniu upsellu.

Recenzje są pobierane z podłączonej aplikacji recenzji. Widżet pojawia się w selektorze edytora ofert jako **„Testimonials”** z ikoną gwiazdki.

Aby korzystać z tego widżetu, musisz mieć podłączoną aplikację recenzji w **Settings > Product Reviews**. Obsługiwane aplikacje to Judge.me, Klaviyo, Okendo i Yotpo. Zobacz [Integracje z aplikacjami recenzji](/pl/aftersell/checkout_widget_types#review-app-integrations), aby uzyskać instrukcje konfiguracji.

<div id="selection-modes">
  ### Tryby wyboru
</div>

Widżet Opinie obsługuje dwa tryby:

* **Manual** — samodzielnie wybierasz wyselekcjonowaną pulę recenzji do wyświetlenia. Recenzje są pokazywane w kolejności, w jakiej je zapisujesz.
* **Dynamic** — recenzje są automatycznie pobierane z zsynchronizowanej pamięci podręcznej Twojej aplikacji recenzji na podstawie produktów w ofercie upsell. Recenzje są powiązane z produktami oferty, a nie z pierwotnym zamówieniem klienta.

<div id="configuration-options">
  ### Opcje konfiguracji
</div>

* **Review app** — wybierz, z której podłączonej aplikacji recenzji pobierać recenzje.
* **Mode** — wybierz tryb Manual lub Dynamic.
* **Minimum rating** — ustaw minimalną ocenę gwiazdkową recenzji do wyświetlenia (na przykład 4 gwiazdki i więcej).
* **Display toggles** — pokazuj lub ukrywaj poszczególne elementy recenzji:
  * Ocena gwiazdkowa
  * Tytuł recenzji
  * Imię recenzenta
  * Data recenzji
  * Odznaka zweryfikowanego kupującego
* **Truncate review text** — ustaw maksymalną długość tekstu recenzji w znakach. Recenzje przekraczające ten limit są przycinane wielokropkiem.
* **Max reviews to show** — ustaw, ile recenzji się wyświetla, od 1 do 3.
* **Layout** — ułóż recenzje **Horizontal** (obok siebie) lub **Vertical** (jedna pod drugą).
* **Padding** — dostosuj odstępy wokół widżetu.

<div id="dynamic-mode-and-review-syncing">
  ### Tryb dynamiczny i synchronizacja recenzji
</div>

W trybie dynamicznym Aftersell importuje recenzje z Twojej aplikacji recenzji i przechowuje je, aby mogły być wyświetlane w ofercie. Pierwszy import odbywa się automatycznie w ciągu 24 godzin od podłączenia aplikacji recenzji, a następnie raz w tygodniu.

Aby zaimportować recenzje natychmiast, przejdź do **Settings > Product Reviews** i kliknij **Sync now** dla swojej aplikacji recenzji.

<div id="verified-buyer-badge">
  ### Odznaka zweryfikowanego kupującego
</div>

Gdy odznaka zweryfikowanego kupującego jest włączona, na kwalifikujących się recenzjach wyświetlana jest etykieta **„Verified buyer”**. Ta etykieta jest automatycznie tłumaczona na język ustawiony dla oferty i obsługuje 32 języki.

***

<div id="adding-additional-widgets">
  ## Dodawanie dodatkowych widżetów
</div>

Widżety można dodawać **nad lub pod widżetem Upsell Product**, co pozwala kontrolować przepływ informacji przed produktem lub po nim.

Dodatkowe widżety, które można dodać, to:

* **Image** — wyświetl obraz pomocniczy, aby wizualnie wzmocnić ofertę.
* **Text** — dodaj tekst pomocniczy, aby przekazać kluczowe komunikaty.
* **Text & Image** — połącz tekst i grafikę, aby podkreślić wartość lub wyjaśnić ofertę.
* **Extra Buy Button** — dodaj dodatkowe wezwanie do działania, aby zachęcić do zaakceptowania oferty. Niedostępne w ofertach pokazujących więcej niż jeden produkt.
* **Trust Badge** — wyświetl sygnały zaufania, takie jak gwarancje, bezpieczeństwo lub wskaźniki wiarygodności.
* **FAQs** — odpowiadaj na częste pytania klientów, aby zmniejszyć opór i zwiększyć pewność.
* **Video** — osadź wideo, aby zademonstrować produkt lub opowiedzieć historię swojej marki. Zobacz [Wideo](#video).
* **Testimonials** — pokazuj prawdziwe recenzje produktów z podłączonej aplikacji recenzji. Dostępne w ofertach V2. Zobacz [Opinie](#testimonials).

Aby dodać widżet:

1. Wybierz, czy widżet ma pojawić się **nad, czy pod** widżetem Upsell Product
2. Kliknij **Add widget** w wybranej sekcji
3. Wybierz i skonfiguruj widżet, który chcesz dodać

***

Aby dowiedzieć się więcej o tym, czym są oferty post-purchase, jak działają i jak zacząć z nich korzystać w Aftersell, zajrzyj do [tego artykułu, aby uzyskać więcej informacji](/pl/aftersell/post_purchase_overview).

***

Zachowanie i wygląd widżetów są ograniczone do opcji konfiguracji dostępnych w edytorze.\
Dalsze dostosowania nie są obsługiwane z powodu ograniczeń Shopify.

***

<div id="need-help">
  ## Potrzebujesz pomocy?
</div>

Jeśli masz pytania lub potrzebujesz pomocy w konfiguracji ofert post-purchase, nasz zespół wsparcia jest do Twojej dyspozycji. Możesz skontaktować się z nami w dowolnym momencie przez czat w aplikacji lub e-mailem.
