Ändra märkets stil

Anpassa typsnitt, färger, bakgrunder, kantlinjer, opacitet och rotation för text- och bildmärken.

Använd fliken Design för att ändra hur ett märke ser ut. Textmärken har inställningar för typsnitt, färg, bakgrund, kantlinje, opacitet och rotation. Bildmärken har inställningar för opacitet och rotation för den valda grafiken.

Öppna ett märke i redigeraren

Öppna Badges & Labels
Section titled “Öppna Badges & Labels”

Öppna Sami Product Labels > Badges & Labels i Shopify-admin.
Välj ett märke
Section titled “Välj ett märke”

Leta upp märket du vill uppdatera och klicka på Edit badge/label på dess rad.

Om du i stället vill utforma ett nytt märke klickar du på Create badge och väljer sedan Text badge eller Image badge.

Klicka på Edit badge/label för märket du vill anpassa.
Stanna på fliken Design
Section titled “Stanna på fliken Design”

Redigeraren öppnas på Design. Vilka avsnitt som finns beror på om du valde ett textmärke eller ett bildmärke.

Anpassa ett textmärke

Välj typsnitt och textfärg

Använd inställningarna under Badge text för att anpassa texten:

Font picker – Välj ett typsnitt i den inbyggda listan.
Use Custom Font Style – Aktivera det här alternativet för att ange en typsnittsfamilj i Font och välj sedan en tillgänglig typsnittsstil eller vikt, till exempel Regular eller Bold.
Text color – Öppna färgväljaren och välj en färg som förblir läsbar mot märkets bakgrund.

Inställningar för textmärke: typsnittsväljare, eget typsnittsformat och textfärg

Välj ett inbyggt typsnitt eller aktivera Use Custom Font Style och ange sedan textfärgen.

Textstorlek och teckenavstånd anges i Size. Se Ändra märkets storlek för de inställningarna.

Välj en bakgrund

Expandera Style och välj sedan en Fill type:

Fill type	Använd den för
Solid	En enda bakgrundsfärg eller en färgförinställning.
Shape	En mallform med en solid färg eller en toning.
Image	En textur, ett mönster eller en grafik som används som textmärkets bakgrund.

Avsnittet Style med fyllningstyperna Solid, Shape och Image

Expandera Style och välj bakgrundstyp för textmärket.

Använd en solid bakgrund

Välj Solid och välj sedan en Background color. Du kan också välja en av förinställningarna under Choose template.

Använd en form eller en toning som bakgrund

Välj Shape och konfigurera sedan följande:

Choose from library – Öppna mallgalleriet och filtrera designer efter kategorier som Sales, Autotext, Stock, Free shipping, Pre-order med flera.
Start color och End color – Använd samma färg för en enfärgad effekt eller två olika färger för en toning.
Gradient direction – Välj Left to right, Top to bottom, Diagonal eller Radial.
Choose template – Använd en formförinställning direkt från redigeraren.

Inställningar för formbakgrund med mallbibliotek, start- och slutfärger och toningsriktning

Välj en form, ange dess färger och välj toningsriktning.

Använd en bild som bakgrund

Välj Image och klicka sedan på Select Image för att välja en egen bakgrund. Redigeraren accepterar PNG-, JPG- eller SVG-filer på upp till 5 MB. Klicka på Remove för att rensa den valda bakgrunden.

Inställningar för egen märkesbakgrund med knapparna Select Image och Remove

Välj grafik som ska användas som bakgrund för ett textmärke.

Lägg till en kantlinje eller runda hörnen

Expandera Border & corners. Båda alternativen kan aktiveras oberoende av varandra:

Alternativ	Tillgängliga inställningar
Add border	Ange Border width från 0 till 8 px, välj en Border color och välj Solid, Dotted eller Dashed.
Round corners	Ange Corner radius från 0 till 100 px.

Avsnittet Border and corners med inställningar för kantlinjens bredd, färg och stil samt hörnradie

Lägg till en kantlinje, runda hörnen eller använd båda inställningarna tillsammans.

Utforma ett bildmärke

Bildmärken visar inte textmärkets inställningar för typsnitt, bakgrund eller Border & corners. Använd Content högst upp på fliken Design för att ändra märkets grafik och använd sedan Advanced settings för att justera dess opacitet eller rotation.

För bildens mått och placering, se Ändra märkets storlek och Ändra märkets position.

Justera opacitet eller rotation

De här effekterna är tillgängliga för både textmärken och bildmärken:

Expandera Advanced settings.
Aktivera alternativet du behöver under Effects.
Justera värdet medan du följer förhandsvisningen.

Effekt	Intervall
Adjust opacity	0 % till 100 %
Rotate badge	0° till 360°

Avsnittet Effects i Advanced settings med Adjust opacity och Rotate badge

Aktivera Adjust opacity eller Rotate badge och ange sedan effektens värde.

Förhandsvisa och spara

Använd förhandsvisningsverktygsfältet för att kontrollera märket på Collection page och Product page och växla sedan mellan Desktop view och Mobile view. När märket ser rätt ut i alla förhandsvisningar du behöver klickar du på Save.

Nästa steg

Ändra märkets storlek – ändra märkets storlek och justera textstorlek eller teckenavstånd.
Ändra märkets position – flytta märket och justera dess marginal eller padding.
Lägg till animation på ett märke – använd en animationseffekt och konfigurera dess hastighet och antal upprepningar.
Använd egen CSS – finjustera märket med egen CSS.

Var det här till hjälp?