Så matchar du widgeten med temats färger

Bundlex kan matcha din paketwidget med butikens utseende med några få klick. Panelen Widgetfärgspresets läser färgschemana i ditt Shopify-tema och föreslår färdiga färgkombinationer, så att dina erbjudanden känns som en naturlig del av sidan i stället för ett tillägg.

Var du hittar färgpreset

Öppna ett paket i redigeraren och gå till fliken Stil. Panelen Widgetfärgspresets finns ovanför de detaljerade kontrollerna för Widgetstil. Använd presets för att ställa in allt på en gång och finjustera sedan individuella elementfärger i avsnittet Widgetstil nedanför om du vill.

Välj en primärfärg

Raden Primärfärg är utgångspunkten för hela paletten. Du kan ställa in den på fyra sätt:

• Föreslagna färgrutor - de färgade rutorna hämtas direkt från färgschemana i ditt Shopify-tema, till exempel knappfärger, textfärger och bakgrunder. Klicka på en ruta för att använda den.
• Standardfärger - den mörkgrå rutan efter temats färgrutor återställer widgetens standardfärger i svart och vitt.
• Anpassad färg - klicka på rutan med plusikonen för att öppna en färgväljare och välja valfritt hexvärde. Tryck på Enter när du har angett hexvärdet och kontrollera att förhandsvisningen ändras.
• Slumpmässig färg - klicka på uppdateringsrutan för att ta fram en slumpmässig färg om du bara vill utforska olika alternativ.

Oavsett vad du väljer bygger Bundlex direkt om widgetens övriga färger runt den och tillämpar resultatet i liveförhandsvisningen.

Välj en accentfärg, alltså en sekundär färg

Sekundärfärg är accentfärgen som används för märken, aktiva lägen och markeringar. Bundlex genererar den automatiskt så att den harmonierar med din primärfärg och erbjuder flera harmonialternativ som färgrutor du kan klicka igenom.

Om du hellre vill ställa in accentfärgen själv har du samma två åsidosättningsalternativ som på raden för primärfärg:

• Anpassad accentfärg - plusrutan öppnar en färgväljare för ett exakt hexvärde.
• Slumpmässig harmonifärg - uppdateringsrutan väljer en kontrasterande färg från färghjulet som fortfarande fungerar med din primärfärg.

Reglage för transparenta erbjudanden

Bredvid primärfärgen hittar du reglaget Transparent, som styr bakgrunden för ej valda erbjudandekort:

• Av - bakgrunderna för ej valda erbjudanden får en heltäckande färg, en ljus ton av dina färger när den kommer från ett preset, så att varje nivå visas som ett eget kort.
• På - bakgrunderna för ej valda erbjudanden förblir transparenta för ett renare och plattare utseende som smälter in i sidan.

När du växlar reglaget ändras endast transparensen för bakgrunden till det ej valda erbjudandet. Bakgrunderna för valda erbjudanden och hovring samt text-, märkes- och kantfärger förblir oförändrade. När du stänger av reglaget blir bakgrunden helt ogenomskinlig igen. Färgrutor som du klickar på medan reglaget är aktiverat tillämpar den transparenta versionen av det presetet.

Förslaget "Använd hörnradie"

Det är inte bara färger som Bundlex kan hämta från ditt tema. Om det upptäcker att temats hörnradie skiljer sig från widgetens aktuella hörn visas en banner med Använd hörnradie och texten "Matcha widgetens hörn med ditt tema."

1. Klicka på Använd i bannern för att tillämpa temats hörnradie på widgetens erbjudandekort, erbjudandebilder och bilder för korsförsäljning.
2. Eller stäng den med stängningsikonen om du föredrar dina nuvarande hörn.

Förslaget kan saknas eftersom ingen skillnad har upptäckts, temat inte tillhandahåller en användbar radie eller du har stängt det. Du kan fortfarande ställa in hörnen själv under Widgetstil.

Finjustera individuella element

När du har valt din palett expanderar du ett element under Widgetstil. Med Erbjudandekort kan du justera hörnradie, avstånd samt valda, hovrade och ej valda lägen separat. I det här exemplet ställde vi in kortets hörnradie på 8 pixlar. Använd presets först och gör sedan dessa slutliga justeringar, eftersom valet av ett annat preset kan ersätta individuella färgval.

Spara och kontrollera butiken

Klicka på Spara. Testa en aktiv rabatt på den riktade produktsidan. Välj varje erbjudande, kontrollera kontrasten för text och märken, välj varianter och använd Lägg i kundvagn. Kontrollera sidan på dator och mobil, eftersom redigerarens förhandsvisning inte kan visa alla temabakgrunder eller skärmstorlekar.

Vårt exempel behåller samma regler för mängdrabatter: två Ivory Small-väskor har ett varusubtotal på $43.20 efter 10 % rabatt. Styling ändrar presentationen, inte rabattberäkningen. Kontrollera kundvagn och kassa som en del av den slutliga granskningen.

Så genereras förslagen

Bundlex läser temats färginställningar och tar fram matchande nyanser. Temabaserade förslag kan upprepas med samma temainställningar. Kontrollerna Slumpmässig färg och Slumpmässig harmoni skapar avsiktligt nya val.

Tips

• Presets är en snabb utgångspunkt. När du har använt ett preset kan du fortfarande justera färgen för varje enskilt element i Widgetstil.
• Om inga föreslagna färgrutor visas kunde Bundlex inte läsa färgvärden från ditt aktiva tema. Du kan fortfarande använda de anpassade och slumpmässiga alternativen.
• Använd liveförhandsvisningen för att kontrollera kontrasten, särskilt när reglaget Transparent är aktiverat, så att märken och text förblir läsbara mot sidans bakgrund.