Egen CSS

För stil som går utöver den visuella redigeraren innehåller Sami Product Labels en inbyggd CSS-redigerare. Du kan också styra märkets lagerordning med z-index, lägga till verktygstips vid hovring och ange alt-text för bildmärken.

Så lägger du till egen CSS

1. Öppna märkesredigeraren

   Gå till Badges & Labels i Sami Product Labels. Välj Create badge, eller välj ikonen Edit badge/label i kolumnen Actions för ett befintligt märke.

2. Gå till fliken Design

   Välj Design i märkesredigeraren. Den här fliken är vald som standard när redigeraren öppnas.

3. Scrolla till Advanced Settings

   Expandera Advanced settings nära botten av fliken Design.

4. Aktivera ”Custom css”

   Slå på Custom css under Advanced.

5. Infoga en selektor och lägg till din CSS

   CSS-redigeraren visas med tre alternativ under CSS reference:

   • .samita_productLabel-content formaterar hela märket.
   • .samita_productLabel-content-text formaterar textmärken.
   • .samita_productLabel-content img formaterar bildmärken.

   Välj alternativet du behöver. Appen infogar en selektor som är avgränsad med det aktuella märkets ID, till exempel .__content--94129, i redigeraren. Behåll den märkesspecifika delen av selektorn och lägg sedan bara till de deklarationer du behöver inom klammerparenteserna.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Välj en klass under CSS reference för att infoga en märkesavgränsad selektor i redigeraren för egen CSS.

6. Förhandsvisa och spara

   Följ förhandsvisningen medan du redigerar. När resultatet ser rätt ut väljer du Save och kontrollerar sedan märket på relevant kollektions- eller produktsida i din butik.

Caution

Egen CSS sparas med det här märket, men dess selektorer avgör fortfarande vilka butikselement den kan påverka. Behåll den märkesavgränsade selektorn som appen genererar. En bred selektor som enbart .samita_productLabel-content kan också matcha andra märken.

Z-index-styrning

Åtgärda ett märke som göms bakom ett överlägg på produktbilden, ett fast sidhuvud eller ett annat märke.

1. Aktivera Z-index i Advanced settings.
2. Ange ett värde från 1 till 100. Högre värden placerar märket framför element med lägre z-index-värden.

Ange ett z-index-värde för att styra märkets lagerordning.

Note

Z-index påverkas också av den staplingskontext som ditt tema skapar. Om det inte hjälper att höja märkets värde kan en överordnad behållare i temat behöva sin egen CSS-justering.

Verktygstips vid hovring

Lägg till ett verktygstips som visas när kunder för pekaren över ditt märke – användbart för att förklara vad ”New Arrival” eller ”Limited Edition” betyder utan att belamra produktbilden.

1. Aktivera Show tooltip on hover i Advanced settings.
2. Ange texten som ska visas vid hovring.

Lägg till verktygstipstext som visas när kunder håller pekaren över märket.

Lägg inte viktig information enbart i verktygstipset. Användare av pekskärmar och kunder som navigerar med tangentbord kanske inte utlöser något hovringsläge.

Alt-text för SEO på bildmärken

Ange alt-text så att skärmläsare kan beskriva innebörden av ett bildmärke. Beskrivande alt-text kan också stödja bild-SEO.

1. Aktivera Seo alt text i Advanced settings.
2. Ange en kortfattad beskrivning av budskapet som märket förmedlar, till exempel ”20% off sale badge” eller ”Free shipping label”. Undvik nyckelordsspam och fraser som ”image of”.

Ange alt-text för tillgänglighet och SEO.

Nästa steg

• Ändra märkets stil – anpassa ditt märke med den visuella redigerarens inställningar.
• Ändra märkets position – placera ditt märke på rätt plats på sidan.

Tip

Behöver du support?

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