Skapa ett grundläggande banner

Ett grundläggande banner är ett fält som du bygger av content elements – rubriker, meddelanden, knappar, nedräkningar och bilder – grupperade i en eller flera sektioner. Redigeraren har två flikar: Design (innehåll och formgivning) och Placement (var och för vem fältet visas).

1. Öppna sidan Banners

   Öppna appen Sami Product Labels i Shopify-admin, klicka på Extra Features i appens sidofält och växla sedan till fliken Banners.

   

   Öppna Banners från sidofältet i Sami Product Labels.

2. Klicka på Create banners och välj sedan Basic

   Klicka på Create banners. I dialogrutan Select Type klickar du på Select bredvid Basic – typen som stöder en eller flera innehållsgrupper.

   

   Välj Basic för att bygga ett vanligt meddelandefält.

   Note

   Vill du inte börja från noll? På sidan Banners kan du använda Featured templates eller View all templates för att öppna ett färdigt banner och redigera det.

3. Namnge bannern

   Helskärmsredigeraren öppnas på fliken Design. Ersätt New Banner i namnfältet ovanför förhandsgranskningen med ett namn på högst 50 tecken. Namnet är internt – det identifierar bannern i din lista och visas aldrig för kunder.

   Bredvid namnet finns också en språkväljare, växlare för förhandsgranskning på dator och mobil samt statusreglaget Active / Draft.

   

   Verktygsfältet ovanför förhandsgranskningen innehåller bannerns namn, språk, förhandsgranskningsenhet och status.

4. Bygg innehållet

   Under Content listar Section 1 de element som bygger upp fältet. Klicka på ett element för att redigera dess text och formgivning, dra i handtaget till vänster för att ändra ordning eller använd ikonerna till höger på en rad för att dölja, duplicera eller ta bort det.

   Klicka på Add element för att lägga till ett nytt:

   Element	Vad det lägger till
   Message	En rad brödtext.
   Heading	En stor rubrik.
   Line break	Vertikalt avstånd mellan element.
   Button	En uppmaningsknapp med egen länk.
   Countdown	En timer med dagar, timmar, minuter och sekunder.
   Image	En bild eller logotyp.

   

   Lägg till, ordna om och redigera de element som bygger upp fältet.

5. (Valfritt) Lägg till fler innehållsgrupper

   Klicka på Add Group för att skapa Section 2, Section 3 och så vidare. Varje sektion är ett separat meddelande, och bannern växlar mellan dem – styr tidpunkterna under Animation i nästa steg.

   Behåll en enda sektion om du bara vill visa ett statiskt meddelande.

6. Utforma fältet

   I panelen Style:

   • Background Type – välj Single Color, Gradient Color eller Pattern Image och ange sedan färg eller bild.
   • Font Style – ange typsnitt, storlek, vikt och textfärg.
   • Padding – styr avståndet inuti fältet.

   

   Ange bakgrund, typsnitt och utfyllnad för hela fältet.

7. Lägg till en stängningsknapp eller gör fältet klickbart

   Båda alternativen finns i panelen Button och är avstängda som standard:

   • Markera Include Close Button för att placera ett ”x” på fältet så att kunder kan stänga det. Två fält visas: Color och Hover Color.
   • Markera Bar Clickable för att göra hela fältet till en länk. Ett fält, Link URL, visas – ange målet och använd reglaget bredvid för att öppna länken i en ny flik.

   

   När du aktiverar en kryssruta visas dess inställningar – färger för stängningsknappen eller länk-URL:en.

8. Ange animationens tidpunkter

   I panelen Animation väljer du en Horizontal- eller Vertical-övergång och anger sedan tiderna i sekunder:

   Fält	Vad det styr
   Disappear After	Hur länge fältet visas innan det döljs.
   Interval Between Bar Display	Pausen innan fältet visas igen.
   Time For The Bar To Fade In	Hur lång tid intoningen tar.
   Time Per Group	Hur länge varje sektion visas innan nästa tar över.

   Note

   Låt ett fält vara 0 för att stänga av beteendet – till exempel gör Disappear After = 0 att fältet förblir synligt tills kunden stänger det.

9. (Valfritt) Lägg till egen CSS

   Öppna Advance Section för att skriva din egen CSS i rutan Custom CSS (Developer Zone). Listan CSS reference under den visar tillgängliga selektorer – klicka på en för att infoga den.

10. Välj var bannern visas

    Växla till fliken Placement och välj en visningsposition:

    Position	Beteende
    Top	Trycker ned sidans innehåll.
    Top Sticky	Trycker ned innehållet och förblir synligt vid scrollning.
    Top Overlay	Överlappar överdelen av sidans innehåll.
    Overlay Sticky	Överlappar innehållet och förblir synligt vid scrollning.
    Bottom Sticky	Fast i sidans nederkant.
    Custom	Placera fältet var som helst med en kortkod.

    Under positionsväljaren kan du avgränsa målgruppen med Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions och Visibility date. Panelen Shortcode ger dig kodstycket du klistrar in i ditt tema när du väljer Custom.

    Se Konfigurera visningsvillkor för en fullständig genomgång av varje villkorstyp.

    

    Välj en visningsposition och lägg sedan till villkor för att styra vem som ser bannern.

11. Spara och aktivera

    Ställ in statusreglaget ovanför förhandsgranskningen på Active och klicka sedan på Save i det övre högra hörnet. Låt det stå på Draft om du vill fortsätta arbeta utan att publicera.

    Caution

    Banners visas bara i din butik om appinbäddningen är aktiverad i ditt tema. Se Aktivera appen i ditt tema.

Nästa steg

• Konfigurera visningsvillkor – ställ in detaljerade målgruppsregler för ditt banner.
• Skapa ett banner med oändlig scrollning – testa ett rullande fält i tickerstil i stället.

Tip

Behöver du hjälp?

Om du stöter på problem när du följer de här stegen kan du kontakta oss på [email protected].