Dostosowywanie specyfikacji towarów

Możesz dostosować szablon specyfikacji towarów. Zmiana szablonu pozwala dodać własny branding i zmienić wygląd oraz sposób obsługi specyfikacji towarów.

Zmiana adresu sklepu

Jeśli chcesz edytować lub zmienić adres sklepu, przejdź do opcji Ustawienia > Ogólne i edytuj informacje o sklepie.

Jeśli chcesz zmienić tylko adres na specyfikacjach towarów, wykonaj poniższe czynności.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Wysyłka i dostawa.

2. W sekcji Dokumenty kliknij Szablon listu przewozowego.

3. Znajdź zmienną Liquid {{ shop_address.summary }}, która odnosi się do adresu sklepu. Jeśli nie możesz znaleźć tej zmiennej, wypróbuj następującą:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}

4. Zaznacz ten kod i usuń go.
5. W pustym miejscu wpisz adres, który ma być widoczny na specyfikacjach towarów. Możesz na przykład wpisać adres w następujący sposób: 123 Example Street, New York, NY, 10000, United States
6. Kliknij opcję Podgląd szablonu, aby zobaczyć zmiany.
7. Kliknij opcję Zapisz.

Usuwanie obrazów produktów

Możesz usunąć obrazy produktów wyświetlane obok tytułów produktów na specyfikacjach towarów.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Wysyłka i dostawa.

2. W sekcji Dokumenty kliknij Szablon listu przewozowego.

3. Znajdź następujące zmienne Liquid, które odnoszą się do obrazów produktów:

{% if line_item.image != blank %}
       <div class="flex-line-item-img">
         <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
           {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
         </div>
       </div>
       {% endif %}

4. Zaznacz ten kod i usuń go.
5. Kliknij opcję Podgląd szablonu, aby wyświetlić podgląd zmian.
6. Kliknij opcję Zapisz.

Edycja logo

Zanim dodasz logo sklepu do specyfikacji towarów, musisz przesłać logo do panelu administracyjnego Shopify. Po przesłaniu zanotuj nazwę pliku, aby użyć jej później w szablonie specyfikacji towarów.

Po przesłaniu logo do sklepu możesz dodać logo i usunąć nazwę sklepu, dodać logo nad nazwą sklepu lub dodać logo obok nazwy sklepu.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Treści > Pliki.

2. Kliknij opcję Prześlij pliki.

3. Wybierz i prześlij logo sklepu ze swojego urządzenia.

4. Po zakończeniu przesyłania zanotuj nazwę pliku wraz z jego rozszerzeniem (na przykład .png lub .jpg).

Dodawanie logo i usuwanie nazwy sklepu

Możesz usunąć nazwę sklepu i zastąpić ją logo sklepu u góry specyfikacji towarów.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Wysyłka i dostawa.

2. W sekcji Dokumenty kliknij Szablon listu przewozowego.

3. Znajdź następujący kod, który odnosi się do nazwy sklepu:

<p class="to-uppercase">
  {{ shop.name }}
</p>

4. Zaznacz ten kod i usuń go.
5. W utworzonym miejscu wpisz poniższy kod, używając nazwy wcześniej przesłanego pliku:

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

Filtr file_img_url generuje adres URL dla przesłanego pliku o określonym rozmiarze, a filtr img_tag tworzy tag obrazu HTML z podanym alternatywnym tekstem.

Na przykład, jeśli przesłany plik to shop_logo.png, odpowiedni kod Liquid będzie wyglądać następująco:

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}

6. Wybierz opcję Podgląd szablonu, aby wyświetlić podgląd zmian.
7. Kliknij opcję Zapisz.

Dodawanie logo nad nazwą sklepu

Jeśli chcesz dodać logo nad nazwą sklepu u góry specyfikacji towarów, wykonaj poniższe czynności.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Wysyłka i dostawa.

2. W sekcji Dokumenty kliknij Szablon listu przewozowego.

3. Znajdź następującą zmienną Liquid, która odnosi się do nazwy sklepu i dodaj podział wiersza między dwoma wierszami:

<div class="shop-title">
      |
      <p class="to-uppercase">

4. W utworzonym miejscu wpisz poniższy kod, używając nazwy przesłanego wcześniej pliku (na przykład shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>

5. Wybierz opcję Podgląd szablonu, aby wyświetlić podgląd zmian.
6. Kliknij opcję Zapisz.

Dodawanie logo obok nazwy sklepu

Jeśli chcesz dodać logo obok nazwy sklepu u góry specyfikacji towarów, wykonaj poniższe czynności.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Ustawienia > Wysyłka i dostawa.

2. W sekcji Dokumenty kliknij Szablon listu przewozowego.

3. Znajdź następującą zmienną Liquid, która odnosi się do nazwy sklepu:

<p class="to-uppercase">
{{ shop.name }}
</p>

4. Zaznacz ten kod i usuń go.
5. W utworzonym miejscu wpisz poniższy kod, używając nazwy przesłanego wcześniej pliku (na przykład shop_logo.png):

{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>

6. Znajdź następujące zmienne Liquid:

.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}

7. Dodaj nowy wiersz na końcu powyższych zmiennych i wklej następujący kod:

.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}

8. Wybierz opcję Podgląd szablonu, aby wyświetlić podgląd zmian.
9. Kliknij opcję Zapisz.

Stylizacja specyfikacji towarów za pomocą CSS

Możesz dostosować specyfikację towaru za pomocą plików CSS przesłanych do Shopify. Pliki CSS hostowane poza Shopify nie będą prawidłowo renderowane.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji Treści > Pliki.

2. Kliknij opcję Prześlij pliki.

3. Wybierz i prześlij plik CSS.

4. Po zakończeniu przesyłania skopiuj adres URL pliku.

5. Dodaj następujący kod:

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.shopify.com/path_to_file/styles.css"
>