DokumentationHandelKomma igång

Varumärkning för Storefront

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Nybörjare
  • Mellanliggande
  • Administratör
  • Ledare
  • Användare

En av de första sakerna du vill göra är att ändra logotypen i sidhuvudet och överföra en favoritikonen för webbläsaren. Sedan ska du lägga till ditt välkomstmeddelande och uppdatera copyrightmeddelandet i sidfoten. Det här är några enkla designelement som du kan ta hand om direkt. Medan din butik är under utveckling kan du aktivera demomeddelandet för butiken och sedan ta bort det när du är redo att starta.

Marknadsföringselement för Storefront

Ladda upp din logotyp

Storleken och platsen för logotypen i rubriken bestäms av butikens tema. Din logotyp kan sparas antingen som en GIF-, PNG- eller JPG-fil (JPEG) och överföras från administratören för din butik.

Logotyp i sidhuvud

Logotypbilden finns på följande plats på servern. Alla bildfiler med namnet logo.svg används som standardtemats logotyp.

Fullständig sökväg - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

Relativ sökväg - images/logo.svg

Om du inte känner till storleken på logotypen eller andra bilder som används i ditt tema, öppnar du sidan i en webbläsare, högerklickar på bilden och kontrollerar elementet.

NOTE
Förutom logotypen i rubriken visas logotypen även på e-postmallar och på PDF-fakturor och andra säljdokument. De logotyper som används för e-postmallar och fakturor har olika storlekskrav och måste laddas upp separat.

Filformat för logotyper som stöds:

Filformat
Beskrivning
PNG
(Portable Network Graphics) Det här nyare alternativet till formatet GIF stöder upp till 16 miljoner färger (24 bitar). Det förlustfria komprimeringsformatet ger en bitmappsbild med hög kvalitet och skarp text, men större filstorlek än vissa format. PNG-formatet stöder genomskinliga lager och är utformat för visning online och direktuppspelning.
GIF
(Graphics Interchange Format) Ett vanligt och äldre bitmappsformat som är begränsat till 256 färger (8 bitar). Formatet GIF stöder enkel animering och genomskinliga lager.
JPG (JPEG)
(Joint Photographic Expert Group) Ett komprimerat bitmappsformat som används av de flesta digitalkameror. Förstörande komprimering orsakar en del dataförlust, som ibland märks som oskarpa fläckar i texten.

  1. Gå till Content > Design>Configuration ​på sidofältet_ Admin _.

    Designkonfigurationssida {width="700"}

  2. Leta reda på den butiksvy som du vill konfigurera och klicka på Edit i kolumnen Action.

  3. Expandera Expansionsväljaren i avsnittet Header.

    Huvudinställningar {width="600"}

  4. Om du vill överföra en ny logotyp klickar du på Upload och väljer filen på datorn.

  5. Ange Logo Image Width och Logo Image Height i pixlar.

  6. För Logo Image Alt anger du den text som du vill ska visas när någon hovrar över bilden.

  7. Klicka på Save Configuration när du är klar.

Lägg till en favoritikoner

Favicon är en förkortning av Favoritikon och refererar till den lilla ikonen på fliken för varje webbläsarsida. Beroende på webbläsaren visas favoritikonen även i adressfältet, precis före URL:en.

En favoritikonbild är vanligtvis 16 x 16 pixlar eller 32 x 32 pixlar stor. Commerce accepterar filtyperna ICO, PNG, APNG, GIF och JPG (JPEG), men alla webbläsare stöder inte dessa format. Det mest använda filformatet för favoritikoner är ICO. Du kan använda andra bildfiltyper, men formatet kanske inte stöds av alla webbläsare. Det finns många kostnadsfria verktyg online som du kan använda för att generera en ICO-bild eller konvertera en bild till det formatet.

Favoritikonen på webbläsarfliken

Commerce har stöd för följande filformat som favoritikoner:

Filformat
Beskrivning
ICO
Det här bildfilsformatet är avsett för ikonbilder på små datorer. ICO-formatet används oftast i Microsoft® Windows OS och kan innehålla bilder på upp till 256 x 256 pixlar och 16 miljoner färger (24 bitar) med 8 bitar genomskinlighet.
PNG
(Portable Network Graphics) Det här nyare alternativet till formatet GIF stöder upp till 16 miljoner färger (24 bitar). Det förlustfria komprimeringsformatet ger en bitmappsbild med hög kvalitet och skarp text, men större filstorlek än vissa format. PNG-formatet stöder genomskinliga lager och är utformat för visning online och direktuppspelning.
APNG
(Animerad Portable Network Graphics) Ett filformat som liknar PNG och som stöder enkel animering.
GIF
(Graphics Interchange Format) Ett vanligt och äldre bitmappsformat som är begränsat till 256 färger (8 bitar). Formatet GIF stöder enkel animering och genomskinliga lager.
JPG (JPEG)
(Joint Photographic Expert Group) Ett komprimerat bitmappsformat som används av de flesta digitalkameror. Förstörande komprimering orsakar en del dataförlust, som ibland märks som oskarpa fläckar i texten.

Steg 1: Skapa en favoritikonbild

  1. Använd valfri bildredigerare och skapa en 16 × 16- eller 32 × 32-grafik av logotypen.

  2. (Valfritt) Använd något av de tillgängliga onlineverktygen för att konvertera filen till .ico-format och spara filen på datorn.

Steg 2: Överför favoritikonen till din butik

  1. Gå till Content > Design>Configuration ​på sidofältet_ Admin _.

  2. Leta reda på den butiksvy som du vill konfigurera i rutnätet och klicka på Edit i kolumnen Action.

  3. Under Other Settings ​expanderar du Expansionsväljaren i avsnittet HTML Head.

    Inställningar för HTML-huvud {width="600"}

  4. Om du vill ta bort den aktuella favoritikonen klickar du på ikonen Ta bort ( papperskorgen ) i bildens nedre vänstra hörn.

  5. Klicka på Upload och öppna favicon-filen som du har förberett.

    Överförd favoritikonen {width="400"}

  6. Klicka på Save Configuration när du är klar.

Steg 3: Uppdatera cachen

  1. När du uppmanas att uppdatera cachen klickar du på länken Cache Management i meddelandet längst upp på arbetsytan.

  2. Markera kryssrutan Page Cache som är markerad som Invalidated i listan.

  3. Ange Actions till Refresh och klicka på Submit.

  4. Om du vill visa den nya favoritikonen går du tillbaka till butiken och uppdaterar webbläsaren.

Ändra välkomstmeddelandet

Välkomstmeddelandet i rubriken utökas så att det innehåller namnet på den kund som är inloggad. Innan du startar din butik måste du ändra standardtexten Välkommen för varje butiksvy.

Välkommen

  1. Gå till Content > Design>Configuration ​på sidofältet_ Admin _.

  2. Leta reda på den butiksvy som du vill konfigurera i rutnätet och klicka på Edit i kolumnen Action.

  3. Under Other Settings ​expanderar du Expansionsväljaren i avsnittet Header.

  4. I Welcome Text anger du den välkomstmeddelandetext som du vill ska visas i butikens sidhuvud.

    Huvudinställningar {width="600"}

  5. Klicka på Save Configuration när du är klar.

  6. När du uppmanas att uppdatera sidcachen klickar du på länken Cache Management högst upp på arbetsytan och följer instruktionerna för att uppdatera cachen.

Ändra copyrightmeddelandet

I din butik visas ett copyrightmeddelande i sidfoten på varje sida. Som en god praxis bör copyrightmeddelandet innehålla det aktuella året och identifiera ditt företag som den lagliga ägaren av innehållet på webbplatsen.

Exempel på copyrightmeddelande

Teckenkoden © används för att infoga copyrightsymbolen, vilket visas i följande exempel:

  • Exempel på långt format

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Exempel på kort format

    © 2021 Luma, Inc. All rights reserved.

Så här uppdaterar du copyrightmeddelandet:

  1. Gå till Content > Design>Configuration ​på sidofältet_ Admin _.

  2. Leta reda på den butiksvy som du vill konfigurera i rutnätet och klicka på Edit i kolumnen Action.

  3. Under Andra inställningar expanderar du Expansionsväljaren avsnittet Footer .

    Inställningar för sidfotsdesign {width="600"}

  4. För Copyright anger du det copyrightmeddelande som du vill ska visas i sidfoten på varje sida.

    Använd teckenkoden © för att infoga en copyrightsymbol.

  5. Klicka på Save Configuration när du är klar.

Ange butikens demomeddelande

Om din butik är online, men fortfarande är under uppbyggnad, kan du visa ett demonstrationsmeddelande längst upp på sidan så att andra kan se att butiken ännu inte är öppen för affärer. När du är redo att publicera tar du bara bort meddelandet. Det liknar att vända tecknet som hänger i fönstret från Stängd till Öppna. Formatet på demonstrationsmeddelandet bestäms av temat för din butik.

Meddelande om Adobe Storefront-demo

  1. Gå till Content > Design>Configuration ​på sidofältet_ Admin _.

  2. Leta reda på den butiksvy som du vill konfigurera i rutnätet och klicka på Edit i kolumnen Action.

  3. Under Other Settings ​expanderar du Expansionsväljaren i avsnittet HTML Head.

    HTML Head {width="600"}

  4. Bläddra nedåt och ställ in Display Demo Store Notice efter dina önskemål.

  5. Klicka på Save Configuration när du är klar.

  6. Om du uppmanas att uppdatera cachen klickar du på Cache Management i systemmeddelandet och följer instruktionerna för att uppdatera cachen.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66