Anpassa utseendet för varje widgetelement

Avsnittet Widgetstil delar upp widgeten på produktsidan i individuella element, så att du kan formge varje element separat. Öppna det i paketredigeraren, så hittar du en uppsättning dragspelsmenyer, en för varje element, där du styr färger, teckensnitt, kanter, avstånd, märken och mer.

Så fungerar avsnittet Widgetstil

Öppna paketets flik Stil och leta reda på Widgetstil. Klicka på en panelrubrik för att visa kontrollerna för elementet. När du håller pekaren över en rubrik markeras motsvarande element i förhandsvisningen. Vissa paneler visas endast när motsvarande funktion är tillgänglig i paketet.

De flesta paneler innehåller samma grunddelar: en färgväljare, en teckenstorlek och en väljare för teckenstil. Paneler som formger en ruta, till exempel erbjudandekortet eller ett märke, visar även bakgrundsfärg, kantfärg, kantbredd och hörnradie. Dina ändringar sparas tillsammans med resten av paketet.

Panelerna, element för element

Sidhuvud

Styr textfärg, teckenstorlek och teckenstil för widgetens sidhuvud. Ange sidhuvudtext högre upp på fliken Stil för att visa Sidhuvudets justering (Vänster, Centrerad, Centrerad med linje genom eller Höger). När justeringen är inställd på Centrerad med linje genom visas en extra kontroll i denna panel för linjens färg och tjocklek.

Erbjudandekort

Detta är rutan runt varje erbjudande, alltså varje mängdrabattnivå. Det är den största panelen eftersom den omfattar tre visuella lägen:

• Erbjudandet är inte valt: bakgrundsfärg, kantfärg och kantbredd för standardläget.
• Erbjudande vid hovring: samma tre kontroller som tillämpas när kunden håller muspekaren över kortet.
• Valt erbjudande: samma tre kontroller för det erbjudande som för närvarande är valt.

Panelen innehåller även gemensamma kortinställningar: hörnradie, avståndet mellan korten, horisontell och vertikal utfyllnad samt alternativet Radio för att visa eller dölja radioknappen. Den animerade bakgrundseffekten ställs in separat med reglaget Dekoration längre upp på fliken Style (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock eller Money), och visas endast på det valda erbjudandet. Färgerna för erbjudandekortet styr även radioknappens utseende.

Erbjudandets titel och undertitel

Två separata paneler, var och en med färg, teckenstorlek och teckensnitt för erbjudandets titelrad och underrad.

Rabattetikett

Formaterar rabattetiketten med textfärg, bakgrundsfärg, teckenstorlek och teckensnitt. Observera att dessa inställningar även påverkar extra märken för gratisprodukter.

Erbjudandebild

Styr erbjudandebildens storlek, hörnradie, kantfärg, kantbredd och Skugga (Ingen, Liten, Medelstor eller Stor). Här ställer du även in hur bilden visas:

• Original: behåller bildens ursprungliga proportioner.
• Kvadrat: beskär bilden till en kvadrat.
• Kvadrat (överkant): beskär bilden till en kvadrat och behåller den övre delen.
• Kvadrat (anpassa): visar hela bilden i en kvadrat utan beskärning.

Antalsmärke

Formaterar det lilla antalet som kan visas på erbjudandebilden. Du kan ställa in textfärg, bakgrundsfärg, hörnradie, teckenstorlek, teckensnitt och Position (Överst till höger, Överst till vänster, Nederst till höger eller Nederst till vänster). Talet visas på erbjudandebilden när "Visa antalsmärke" är aktiverat.

Variantetikett

Ställer in färg, teckenstorlek och teckensnitt för titlar på variantalternativ, till exempel Storlek eller Färg, samt deras radnummer.

Rullgardinsmeny

För rullgardinsmenyer för varianter använder du den separata panelen Rullgardinsmeny för att justera text, bakgrund, kantlinje, hörn och utfyllnad.

Erbjudandemärke

Märket är uppmärksamhetstexten, till exempel "Mest populär", på ett erbjudande. Utöver vanlig textfärg, bakgrundsfärg, teckenstorlek och teckensnitt innehåller panelen väljaren Märkets form med många förinställningar:

• Standard, Vikt, Piller
• Pil höger, Pil vänster
• Kvadrat
• Banner, Rundad banner
• Hörnremsa, Sidoremsa, Alternativ sidoremsa, Rundad sidoremsa

Pris

Panelen Pris grupperar tre textstilar, var och en med egen färg, teckenstorlek och teckensnitt:

• Huvudpris: det aktuella försäljningspriset.
• Jämförpris: det överstrukna "före-priset".
• Text per artikel: texten med priset per enhet.

Paket

Produktpaket har även panelen Paket för produktnamnstexten, kanten mellan paketinnehållen och plustecknet mellan produkterna.

Fördelar

Formaterar punktlistan med fördelar. Här ställer du in en gemensam teckenstorlek och ett teckensnitt samt separata Textfärg och Ikonfärg, så att ikonerna och texten kan ha olika färger.

Gåva och merförsäljning

Formaterar blocket med gratisprodukter i två lägen, vart och ett med bakgrundsfärg, titelfärg, teckenstorlek och teckensnitt:

• Gåva för valt erbjudande: gåvoblocket på det valda erbjudandet.
• Gåva för ej valt erbjudande: gåvoblocket på andra erbjudanden.

En tredje grupp, Gåvobild, styr gåvobildens bredd och hörnradie.

Bilder i popupfönster för gratisprodukter och mix & match

Öppna Style > Modal style > Gift modal och leta reda på Bildanpassning. Du kan även nå dessa kontroller via Anpassa modal stil bredvid en väljare för gratisprodukter eller mix & match. Välj Original för att behålla hela bildens proportioner eller Kvadrat för enhetliga miniatyrbilder. Inställningen delas av popupfönster för val av gratisprodukter och paketpooler inom denna rabatt. Bilderna i huvudwidgeten använder de separata kontrollerna för erbjudandebilder.

Sidfot

Ställer in färg, teckenstorlek och teckensnitt för widgetens sidfotstext.

Behållare och maxbredd

Panelen Behållare styr widgetens totala bredd genom inställningen Maxbredd:

• Shopifys standard (44rem): begränsar widgeten till 44rem inom det tillgängliga utrymmet.
• Full bredd (100 %): låter widgeten sträcka sig över hela behållaren.
• Anpassad: visar fältet Bredd där du anger ett pixelvärde.

Panelen innehåller även Varningsfärg, som används för varningstext om lågt lagersaldo.

Använd Övre marginal och Nedre marginal här för att justera utrymmet runt widgeten för denna rabatt innan du lägger till anpassad CSS.

Full bredd fyller widgetens överordnade behållare. Den kan inte göra en smal produktinformationskolumn i ditt tema bredare.

Redigeringstips

• Titta på liveförhandsvisningen medan du arbetar. När du håller muspekaren över en panelrubrik markeras det matchande elementet, så att du kan bekräfta att du redigerar rätt del innan du ändrar ett värde.
• Formatera erbjudandekortets tre lägen, ej valt, hovring och valt, tillsammans så att det valda läget tydligt skiljer sig från de övriga.
• Om du behöver formatering som panelerna inte erbjuder kan du använda panelen Anpassad CSS längst ned i avsnittet för att lägga till CSS som åsidosätter widgetens stilar.