Tilpas udseendet af hvert widgetelement

Sektionen Widgetstil opdeler widgetten på produktsiden i individuelle elementer, så du kan style hvert element separat. Åbn den i bundle-editoren, og du finder et sæt harmonikapaneler, ét for hvert element, hvor du styrer farver, skrifttyper, kanter, afstand, badges og meget mere.

Sådan fungerer sektionen Widgetstil

Åbn bundlens fane Stil, og find Widgetstil. Klik på en paneloverskrift for at få vist kontrollerne for det pågældende element. Når du holder markøren over en overskrift, fremhæves det tilsvarende element i forhåndsvisningen. Nogle paneler vises kun, når den tilsvarende funktion er tilgængelig i bundlen.

De fleste paneler har de samme grundelementer: en farvevælger, en skriftstørrelse og en vælger til skriftstil. Paneler, der styler en boks, f.eks. tilbudskortet eller et badge, viser også baggrundsfarve, kantfarve, kantbredde og hjørneradius. Dine ændringer gemmes sammen med resten af bundlen.

Panelerne, element for element

Sidehoved

Styrer tekstfarve, skriftstørrelse og skriftstil for widgettens sidehoved. Indtast sidehovedteksten højere oppe på fanen Stil for at få vist Justering af sidehoved (Venstre, Centreret, Centreret med gennemgående linje eller Højre). Når justeringen er indstillet til Centreret med gennemgående linje, vises en ekstra kontrol i dette panel til linjens farve og tykkelse.

Tilbudskort

Dette er boksen omkring hvert tilbud, altså hvert mængdeniveau. Det er det største panel, fordi det dækker tre visuelle tilstande:

• Tilbud ikke valgt: baggrundsfarve, kantfarve og kantbredde for standardtilstanden.
• Tilbud ved markøren: de samme tre kontrolelementer, når kunden holder markøren over kortet.
• Valgt tilbud: de samme tre kontrolelementer for det tilbud, der er valgt i øjeblikket.

Panelet angiver også fælles kortelementer: hjørneradius, afstanden mellem kortene, vandret og lodret indvendig margen samt en Radio-indstilling til at vise eller skjule radioknappen. Den animerede baggrundseffekt indstilles separat med kontakten Dekoration længere oppe på fanen Style (Blobs, Ringe, Hjerter, Stjerneeksplosion, Procent, Stjerner, Ur eller Penge), og den vises kun på det valgte tilbud. Tilbudskortenes farver styrer også radioknappens udseende.

Tilbudsoverskrift og underoverskrift

To separate paneler, hver med indstillinger for farve, skriftstørrelse og skriftstil for tilbudsoverskriften og underoverskriften.

Rabatmærke

Tilpasser rabatmærket med tekstfarve, baggrundsfarve, skriftstørrelse og skriftstil. Bemærk, at disse indstillinger også påvirker ekstra gavemærker.

Tilbudsbillede

Styrer tilbudsbilledets størrelse, hjørneradius, kantfarve, kantbredde og en Skygge (Ingen, Lille, Mellem eller Stor). Her indstilles også, hvordan billedet vises:

• Original: bevarer billedets oprindelige højde-bredde-forhold.
• Kvadratisk: beskærer billedet til et kvadrat.
• Kvadratisk (top): beskærer billedet til et kvadrat og bevarer den øverste del.
• Kvadratisk (tilpas): tilpasser hele billedet i et kvadrat uden beskæring.

Antalsmærke

Tilpasser det lille antal, der kan vises på tilbudsbilledet. Du kan angive tekstfarve, baggrundsfarve, hjørneradius, skriftstørrelse, skriftstil og Placering (øverst til højre, øverst til venstre, nederst til højre eller nederst til venstre). Tallet vises på tilbudsbilledet, når "Vis antalsmærke" er aktiveret.

Variantmærke

Angiver farve, skriftstørrelse og skriftstil for titler på variantindstillinger (f.eks. Størrelse eller Farve) og deres rækkenumre.

Rullemenu

For variant-rullemenuer kan du bruge det separate Rullemenu-panel til at justere tekst, baggrund, kant, hjørner og indvendig margen.

Tilbudsmærke

Mærket er fremhævelsen (f.eks. "Mest populær") på et tilbud. Ud over den sædvanlige tekstfarve, baggrundsfarve, skriftstørrelse og skriftstil indeholder dette panel en Mærkeform-vælger med mange forudindstillinger:

• Standard, Foldet, Pille
• Pil mod højre, Pil mod venstre
• Kvadratisk
• Banner, Afrundet banner
• Hjørnebånd, Sidebånd, Alternativt sidebånd, Afrundet sidebånd

Pris

Pris-panelet samler tre tekststile, hver med sin egen farve, skriftstørrelse og skriftstil:

• Hovedpris: den aktive salgspris.
• Sammenligningspris: den gennemstregede "før"-pris.
• Pris pr. enhed: teksten, der viser prisen pr. enhed.

Bundle

Produktbundles har også et Bundle-panel til produktnavnet, kanten mellem bundleelementerne og plustegnet mellem produkterne.

Fordele

Tilpasser punktlisten med fordele. Her angiver du en fælles skriftstørrelse og skriftstil samt en separat Tekstfarve og Ikonfarve, så ikonerne og teksten kan have forskellige farver.

Gave og mersalg

Tilpasser blokken med gratis gaver i to tilstande, hver med en baggrundsfarve, titel farve, skriftstørrelse og skriftstil:

• Gave til valgt tilbud: gaveblokken på det valgte tilbud.
• Gave til ikke-valgt tilbud: gaveblokken på andre tilbud.

En tredje gruppe, Gavebillede, styrer gavebilledets bredde og hjørneradius.

Billeder i gave- og Mix & match-popups

Åbn Style > Modal style > Gift modal og find Billedtilpasning. Du kan også åbne disse indstillinger via Tilpas modalstil ved siden af en gave- eller Mix & match-vælger. Vælg Original for at bevare hele billedets proportioner eller Kvadratisk for ensartede miniaturebilleder. Indstillingen deles af popupper til gavevalg og bundlepuljer inden for denne rabat, mens billederne i hovedwidgetten bruger de separate indstillinger for tilbudsbilleder.

Sidefod

Angiver farve, skriftstørrelse og skriftstil for teksten i widgettens sidefod.

Container og maksimal bredde

Container-panelet styrer widgettens samlede bredde via indstillingen Maksimal bredde:

• Shopify-standard (44rem): begrænser widgetten til 44rem inden for den tilgængelige plads.
• Fuld bredde (100 %): lader widgetten strække sig til bredden af sin container.
• Brugerdefineret: viser et Bredde-felt, hvor du indtaster en værdi i pixel.

Panelet indeholder også en Alert-farve, der bruges til advarselsteksten om lav lagerbeholdning.

Brug Topmargen og Bundmargen her til at justere pladsen omkring denne rabats widget, før du tilføjer brugerdefineret CSS.

Fuld bredde udfylder widgettens overordnede container. Den kan ikke gøre en smal produktinformationskolonne i dit tema bredere.

Tip til redigering

• Se liveforhåndsvisningen, mens du arbejder. Når du holder markøren over en paneloverskrift, fremhæves det tilsvarende element, så du kan bekræfte, at du redigerer den rigtige del, før du ændrer en værdi.
• Tilpas tilbudskortets tre tilstande (ikke valgt, ved markøren, valgt) samlet, så den valgte tilstand tydeligt skiller sig ud fra resten.
• Hvis du har brug for styling, som panelerne ikke tilbyder, kan du bruge panelet Brugerdefineret CSS nederst i sektionen til at tilføje CSS, der tilsidesætter widgettens styling.