Přidání produktových obrázků do formuláře

Jak do prodejního formuláře přidat obrázky?

K jednotlivým produktům ve formuláři a k miniupsellovým položkám můžete přidávat náhledové obrázky. Pro přidání obrázků je potřeba přidat do HTML zdrojového kódu prodejní stránky kód, který podrobně popisujeme níže.

Jde o krátkou část HTML kódu, který načítá obrázky produktů z konkrétní adresy a ty přidává k určeným produktům.

Prodejní formulář potom může vypadat například takhle:

Jak na to?

1. Upravte si následující kód podle instrukcí uvnitř. Obrázky, na které odkazujete, si připravte dopředu v kvalitním rozlišení a nahrajte je na veřejně dostupné úložiště. Ideálně přímo na hosting vašeho webu.
   

   <style>
   /* Produktový obrázek pro položky prodejního formuláře */
   /* Nahraďte {kód produktu} níže ↓ za kód produktu z FAPI. Ten najdete ve FAPI v části Prodej > Produkty > první sloupec Kód (např. "321967")*/
   
   .fapi-product-{kód produktu}::after {
   
       /* Nahraďte na URL obrázku, který k produktu chcete zobrazit */
       --product-image-url: url(https://imgur.com/6LcoUN9.png);
   
       /* Výška (velikost) obrázku */
       --product-height: 200px;
   
       /* ↓ Tuto část neměnit ↓ */
       background-image: var(--product-image-url);
       background-repeat: no-repeat;
       background-size: contain;
       background-position: left;
       content: "";
       display: block;
       width: 100%;
       height: var(--product-height);
       margin-top: 20px;
   }
   
   /* ↓ ↓ ↓  POKUD NEMÁTE MINIUPSELL, TAK TUTO ČÁST SMAŽTE ↓ ↓ ↓  */
   /* Produktový obrázek pro mini upsell produkt */
   /* Nahraďte {kód produktu} níže ↓ za kód produktu z FAPI. Ten najdete ve FAPI v části Prodej > Produkty > první sloupec Kód (např. "321967")*/
   .fapi-order-bump-product-{kód produktu}::after {
   
       /* Nahraďte na URL obrázku, který k produktu chcete zobrazit */
       --product-image-url: url(https://imgur.com/xpwx5ly.png);
   
       /* Výška (velikost) obrázku */
       --product-height: 200px;
   
       /* ↓ Tuto část neměnit ↓ */
       background-image: var(--product-image-url);
       background-repeat: no-repeat;
       background-size: contain;
       background-position: left;
       content: "";
       display: block;
       width: 100%;
       height: var(--product-height);
       margin-left: 40px;
       margin-bottom: 10px;
   }
   /* ↑ ↑ ↑   POKUD NEMÁTE MINIUPSELL, TAK TUTO ČÁST SMAŽTE ↑ ↑ ↑   */
   </style>
   
   	

2. Upravený kód umístěte nad vložený kód prodejního formuláře na Vašem webu. Pokud nahráváte obrázky pro více produktů, přidávání obrázků funguje stále stejně - definujte:
   1.  který produkt má obrázek mít,
   2. jakou fotku pro něj máme použít,
   3. jak máme obrázek zobrazit.



Každý produkt musí být definovaný takto:




3. Upravenou stránku na Vašeho webu uložte tak, aby obsahovala:
   1. <style> kód výše, s vyjmenovanými produkty a určenými obrázky,
   2. <script> pro vložení prodejního formuláře.
4. Zkuste stránku znovu načíst a je hotovo! Formulář by nyní měl u konkrétních produktů zobrazovat produktové obrázky.