Skapa ett banner med oändlig scrollning

Ett banner med oändlig scrollning är ett fält vars innehåll loopar kontinuerligt från höger till vänster, som en nyhetsticker. Använd det för återkommande kampanjer, meddelanden om fri frakt eller korta aviseringar som du vill att kunder ska lägga märke till.

Note

Ett banner med oändlig scrollning har en enda innehållssektion – det finns inget alternativ Add Group. Om du behöver flera meddelanden som växlar efter varandra använder du ett grundläggande banner i stället.

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 Infinite Scroll

   Klicka på Create banners. I dialogrutan Select Type klickar du på Select bredvid Infinite Scroll – typen som loopar bannerns innehåll oändligt för en sömlös scrollningseffekt.

   

   Välj Infinite Scroll för att bygga ett fält i tickerstil.

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 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. Redigera det scrollande innehållet

   Section 1 börjar med ett enda Description-element som innehåller exempeltext som ✨ Free ship on order $40+ ✨. Klicka på det för att öppna dess inställningar till höger:

   • Content – en rich text-redigerare med fet stil, kursiv stil, understrykning, emoji, justering och en HTML-vy (</>). Språkchipet visar vilket språk du redigerar.
   • Text – typsnittets Size och Color.
   • Padding och Margin – avstånd runt elementet, i pixlar.

   Klicka på Add element för att lägga till fler objekt i loopen – Message, Heading, Line break, Button, Countdown eller Image – och dra i handtaget till vänster på en rad för att ändra ordning.

   

   Redigera elementet som loopar över fältet eller lägg till fler i sekvensen.

5. Utforma fältet

   I panelen Style:

   • Background Type – välj Single Color, Gradient Color eller Pattern Image. Banners med oändlig scrollning använder Pattern Image som standard. Använd Change Image för att byta mönsterbild eller Remove för att ta bort den.
   • Font Style – ange typsnitt, vikt och standardfärg för text.
   • Padding – styr avståndet inuti fältet.

   Note

   Mönsterbilder ska vara PNG, JPG eller SVG, högst 5 MB och 512 × 512 px.

6. 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.

7. Ange scrollhastighet och tidpunkter

   Alla fyra fälten i panelen Animation anges i sekunder:

   Fält	Vad det styr
   Scroll speed	Hur lång tid en hel loop tar. Ett högre tal ger långsammare scrollning.
   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.

   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.

   

   Scroll speed anger varaktigheten för en loop – öka värdet för att sakta ned tickern.

8. (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 – bland annat .samita_banner_groups.infinityScroll, omslaget som används när oändlig scrollning är aktiverad. Klicka på en selektor för att infoga den.

9. 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.

10. 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 – styr var och för vem ditt banner visas.
• Skapa ett grundläggande banner – bygg i stället ett statiskt eller växlande meddelandefält.

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].