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.
Ezen az oldalon
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:
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.
A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.
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 }}- Jelölje ki ezt a kódot, és törölje.
- 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 - Kattintson a Sablon előnézete gombra a módosítások megtekintéséhez.
- 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:
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.
A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.
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 %}- Jelölje ki ezt a kódot, és törölje.
- Kattintson a Sablon előnézete gombra a módosítások megtekintéséhez.
- Kattintson a Mentés gombra.
Logó szerkesztése
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:
A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.
Kattintson a Fájlok feltöltése gombra.
Válassza ki és töltse fel az üzlete logóját az eszközéről.
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
.pngvagy.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:
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.
A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.
Keresse meg a következő kódot, amely az üzletnevére hivatkozik:
<p class="to-uppercase">
{{ shop.name }}
</p>- Jelölje ki ezt a kódot, és törölje.
- 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' }}- A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
- 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:
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.
A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.
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">- 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>- A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
- 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:
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.
A Dokumentumok szakaszban kattintson a Csomagolólevél-sablon lehetőségre.
Keresse meg a következő Liquid változót, amely az üzletnevére hivatkozik:
<p class="to-uppercase">
{{ shop.name }}
</p>- Jelölje ki ezt a kódot, és törölje.
- 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>- Keresse meg a következő Liquid változókat:
.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}- 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;
}- A módosítások megtekintéséhez kattintson a Sablon előnézete gombra.
- 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:
A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.
Kattintson a Fájlok feltöltése gombra.
Válassza ki és töltse fel a CSS-fájlját.
A feltöltés befejezésekor másolja ki a fájl URL-jét.
Illessze be a következő kódot:
<link
rel="stylesheet"
type="text/css"
href="https://cdn.shopify.com/path_to_file/styles.css"
>