Csomagjegyzékek testreszabása

Testreszabhatja a csomagjegyzékek sablonját. A sablon módosítása lehetővé teszi, hogy hozzáadja saját márkaépítését, és megváltoztassa a csomagjegyzék kinézetét és benyomását.

Az üzlet címének módosítása

Ha szerkeszteni vagy módosítani szeretné az üzlete címét, akkor lépjen a Beállítások > Általános menüpontba, és szerkessze az üzlete adatait.

Ha csak a csomagjegyzékeken szereplő címet szeretné módosítani, akkor kövesse az alábbi lépéseket.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Beállítások > Szállítás és kézbesítés menüpontra.

  2. A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.

  3. Keresse meg a {{ shop_address.summary }} Liquid változót, amely az üzlete címére hivatkozik. Ha nem találja ezt a változót, akkor próbálkozzon a következővel:

{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
  1. Jelölje ki ezt a kódot, és törölje.
  2. Gépelje be ebbe az üres helyre azt a címet, amelyet a csomagjegyzékeken szeretne megjeleníteni. Például a cím a következőképpen nézhet ki: 123 Example Street, New York, NY, 10000, United States
  3. Kattintson a Sablon előnézete gombra a módosítások megtekintéséhez.
  4. Kattintson a Mentés gombra.

Termékképek eltávolítása

Eltávolíthatja azokat a termékképeket, amelyek a csomagjegyzékeken a terméknevek mellett jelennek meg.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Beállítások > Szállítás és kézbesítés menüpontra.

  2. A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.

  3. Keresse meg a következő Liquid változókat, amelyek a termékképekre hivatkoznak:

{% 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 %}
  1. Jelölje ki ezt a kódot, és törölje.
  2. Kattintson a Sablon előnézete gombra a módosítások megtekintéséhez.
  3. Kattintson a Mentés gombra.

Mielőtt hozzáadná az üzlet logóját a csomagjegyzékekhez, fel kell töltenie a logót a Shopify adminisztrációs felületére. A feltöltés után jegyezze meg a feltöltött fájl nevét, hogy később felhasználhassa a csomagjegyzéksablonban.

Miután feltöltötte a logót az üzletébe, hozzáadhatja a logót és eltávolíthatja az üzletnevet, hozzáadhatja a logót az üzletnév fölé, vagy hozzáadhatja a logót az üzletnév mellé.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.

  2. Kattintson a Fájlok feltöltése gombra.

  3. Válassza ki és töltse fel az üzlete logóját az eszközéről.

  4. A feltöltés befejezése után jegyezze meg a fájl nevét, beleértve a fájlkiterjesztést is (például .png vagy .jpg).

Logó hozzáadása és üzletnév eltávolítása

Eltávolíthatja az üzletnevét, és lecserélheti azt az üzlete logójára a csomagjegyzékek tetején.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Beállítások > Szállítás és kézbesítés menüpontra.

  2. A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.

  3. Keresse meg a következő kódot, amely az üzletnevére hivatkozik:

<p class="to-uppercase">
  {{ shop.name }}
</p>
  1. Jelölje ki ezt a kódot, és törölje.
  2. A létrehozott helyre írja be a következő kódot a korábban feltöltött fájlnév használatával:
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}

A file_img_url szűrő létrehozza a feltöltött fájl URL-jét a megadott méretben, az img_tag szűrő pedig létrehoz egy HTML-képcímkét a megadott helyettesítő szöveggel.

Például, ha a feltöltött fájl a shop_logo.png, a megfelelő liquid kód a következő lesz:

{{ 'shop_logo.png' | file_img_url: 'small' | img_tag: 'Logo' }}
  1. A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
  2. Kattintson a Mentés gombra.

Logó hozzáadása az üzletnév fölé

Ha a logót a csomagjegyzékek tetején az üzletnév fölé szeretné hozzáadni, akkor kövesse az alábbi lépéseket.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Beállítások > Szállítás és kézbesítés menüpontra.

  2. A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.

  3. Keresse meg a következő Liquid változót, amely az üzletnevére hivatkozik, és szúrjon be egy sortörést a két sor közé:

<div class="shop-title">
      |
      <p class="to-uppercase">
  1. A létrehozott helyre írja be a következő kódot a korábban feltöltött fájlnév használatával (például shop_logo.png):
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<br>
  1. A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
  2. Kattintson a Mentés gombra.

Logó hozzáadása az üzletnév mellé

Ha a logót a csomagjegyzékek tetején az üzletnév mellé szeretné hozzáadni, akkor kövesse az alábbi lépéseket.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Beállítások > Szállítás és kézbesítés menüpontra.

  2. A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.

  3. Keresse meg a következő Liquid változót, amely az üzletnevére hivatkozik:

<p class="to-uppercase">
{{ shop.name }}
</p>
  1. Jelölje ki ezt a kódot, és törölje.
  2. A létrehozott helyre írja be a következő kódot a korábban feltöltött fájlnév használatával (például shop_logo.png):
{{ 'FILE NAME' | file_img_url: 'small' | img_tag: 'Logo' }}
<span class="to-uppercase">
  {{ shop.name }}
</span>
  1. Keresse meg a következő Liquid változókat:
.shop-title {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  flex: 6;
  font-size: 1.9em;
}
  1. Szúrjon be egy új sort a fent felsorolt változók végére, és illessze be a következő kódot:
.shop-title img {
 vertical-align: middle;
}

.shop-title span {
 vertical-align: middle;
}
  1. A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
  2. Kattintson a Mentés gombra.

Csomagjegyzékek stilizálása CSS használatával

A csomagjegyzékét a Shopify rendszerébe feltöltött CSS-fájlok használatával szabhatja testre. A Shopify rendszerén kívül tárolt CSS-fájlok nem fognak megfelelően megjelenni.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.

  2. Kattintson a Fájlok feltöltése gombra.

  3. Válassza ki és töltse fel a CSS-fájlját.

  4. A feltöltés befejezésekor másolja ki a fájl URL-jét.

  5. Illessze be a következő kódot:

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