Jak dodać ikony płatności do stopki?

W tym poradniku przedstawimy, jak można dodać ikony w stopce sklepu (na dowolnym planie).

1. Pobierz załączony plik i wgraj do szablonu, do folderu snippets.
   tc-payment-icon.liquid

2. Odnajdź plik, który odnosi się do shop.enabled_payment_types – zazwyczaj jest to snippets/footer.liquid

3. Kiedy znajdziesz kod wyglądający podobnie do tego:

   <div class="payment-list">
   {% for type in shop.enabled_payment_types %}
      {{ type | payment_type_svg_tag: class: 'payment-list__item' }}
   {% endfor %}
   </div>
   	

4. Dodaj {% render 'tc-payment-icon', icon: 'NAZWA_IKONY', class: 'KLASA_CSS' %} dla każdej ikony. W atrybucie icon wprowadź nazwę ikony (dostępne wartości to: payu, dotpay, blik, visa, master). Jeżeli szablon dodaje klasę CSS do swoich ikon, należy wprowadzić ją także w atrybucie css.

5. Na powyższym przykładzie, dodanie ikon PayU, BLIK, VISA i Mastercard będzie wyglądać następująco:

   <div class="payment-list">
   {% render 'tc-payment-icon', icon: 'payu', class: 'payment-list__item' %}
   {% render 'tc-payment-icon', icon: 'blik', class: 'payment-list__item' %}
   {% render 'tc-payment-icon', icon: 'visa', class: 'payment-list__item' %}
   {% render 'tc-payment-icon', icon: 'master', class: 'payment-list__item' %}
   {% for type in shop.enabled_payment_types %}
      {{ type | payment_type_svg_tag: class: 'payment-list__item' }}
   {% endfor %}
   </div>
   	

6. Zapisz zmiany. Nie zapomnij włączyć ikon w ustawieniach stopki szablonu!