Färgscheman
Du kan definiera olika färgscheman i dina temainställningar och tillämpa dem på olika avsnitt i din webbshop med en färgväljare. Ett färgschema är en uppsättning färger. Temat har en uppsättning tillämpade standardfärgscheman som du kan ändra när som helst i temaredigeraren. Du kan lägga till dina varumärkesfärger för att skapa en sammanhållen tillämpning av din färgpalett över webbshoppen.
Mallar har inte individuella färginställningar så att designen för din webbshop är konsekvent på alla dina webbplatser. En mall betraktas som en huvudsida eller huvudinnehållet i en butik. Att ha olika färgscheman i butiken kan ge en dålig användarupplevelse och kan göra att kunder lämnar butiken utan att köpa produkter.
Du kan granska webbshopfunktioner och sidtyper för avsnitt som innehåller inställningen för färgschema.
På den här sidan
Temainställningar för färgschema
Färgscheman är en temainställning som grupperar element och deras respektive färger på ett visuellt representativt sätt. Du kan tilldela olika färger till olika element i ett sammanhållet färgschema som kan tillämpas över ditt tema där det finns en färgschemaväljare tillgänglig. Du kan ha upp till 21 färgscheman. Du kan också förhandsgranska hur dina färger visas i ditt schemas förhandsgranskning.
| Inställning | Beskrivning |
|---|---|
| Bakgrund | Färg tillämpas på bakgrunden i vissa avsnitt och på konturknappens bakgrund. |
| Tonad bakgrund | En toning av färger tillämpas på bakgrunden i vissa avsnitt. Bakgrundstoningar ersätter bakgrunden när det är möjligt. |
| Text | Färg tillämpas på avsnittet eller blocktexten. |
| Enfärgad knappbakgrund | Färg tillämpas på den primära knappbakgrunden. |
| Enfärgad knappetikett | Färg tillämpas på den primära knapptexten. |
| Knappkontur | Färg tillämpas på sekundär knapptext och -kant. |
| Skugga | Färg tillämpas på skuggorna. |
Hantera ditt färgschema
Din butiks färgschema och färgalternativ ställs in i dina temainställningar. För solida färger använder du färgväljaren för att välja en ny färg eller anger värdet för färgen i textfältet. Färgfältet accepterar följande färgnamn och värden:
- färgnamn såsom
red,blackellerblue - RGB-färgkoder
- hexadecimala färgvärden
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Klicka på Anpassa bredvid temat du vill anpassa.
Klicka på kugghjulsikonen och sedan på Färger.
Klicka på ett befintligt schema i avsnittet Scheman eller klicka på Lägg till schema för att lägga till ett nytt färgschema.
Klicka på färgprovet för den innehållstypfärg du vill ändra.
Ställ in färg genom att ange hexfärgkoden eller välja färgen från färgväljaren. Radera hexkoden från textfältet för att ställa in färgen till transparent.
Klicka på Spara.
Tillämpa ditt färgschema
När du har definierat ditt färgschema i dina temainställningar kan du tilldela ett färgschema med hjälp av färgschemaväljaren i temats avsnitt och block. Färgschemaväljaren är endast tillgänglig i vissa avsnitt, block och allmänna temainställningar.
Toningar
I vissa teman kan du ställa in en toning av färger för att få visuellt intressanta bakgrundsalternativ. Inställningen color_background används för att anpassa CSS-bakgrundsegenskapen.
Toningsväljaren gör det möjligt för dig att välja färger, toningsstil, vinkel, placering och opacitet för toningen. Alternativen som valts i toningsväljaren förhandsgranskas i realtid i temaredigeraren. Du kan även skapa en toningsbakgrund med hjälp av CSS-kod, som innehåller en verifieringskontroll.
Skapa toningar
Från din Shopify-admin går du till Webbshop > Teman.
Klicka på Anpassa bredvid temat du vill anpassa.
Klicka på kugghjulsikonen och sedan på Färger.
Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.
Klicka på färgprovsalternativet för toning, till exempel Tonad bakgrund.
Om du inte tidigare har ställt in en toning så visas några förinställda alternativ som du kan välja mellan. Välj en förinställd toning för att öppna alternativpanelen.
Välj dina toningsalternativ:
- Välj linjär eller radiell toning. Använd knapparna för att välja önskad toningsstil.
- Ställ in vinkel på toningen med uppåt- och nedåtpilarna. Klicka på uppåt- och nedåtpilarna för att öka eller minska vinkeln med 5 procent.
- Använd skjutreglaget för att välja Placering för din toning eller ange ett numeriskt värde i fältet.
- Du kan ange en specifik färghexkod eller använda färgreglaget för att välja en nyans. Nyligen valda färger visas längst ned i panelen för toningsalternativ.
- Om du vill göra toningen ogenomskinlig kan du använda reglaget till höger för att välja transparens för toningen. Du kan också ange en procentsats i fältet intill hexfärgkoden.
Klicka på Spara.
Använd CSS för att ställa in toningar
De flesta CSS background-egenskapsvärden kan användas för att ställa in en bakgrundsfärg. Du kan använda det här fältet för solida färger (till exempel skapar #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) och hsla(0, 0%, 0%, 1) en solid svart bakgrund) eller för toningar (till exempel linear-gradient(red, green), radial-gradient(red, green) eller conic-gradient(red, green)). Toningar kan också upprepas.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Klicka på Anpassa bredvid temat du vill anpassa.
Klicka på kugghjulsikonen och sedan på Färger.
Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.
Klicka på den toning som du vill redigera.
Klicka på pilen bredvid Toning och välj sedan CSS.
Skriv eller klistra in din toningskod i fältet CSS-kod. Förhandsgranskningen i temaredigeraren visar din toning på rätt plats.
Klicka på Spara.
Ta bort en toning
Från din Shopify-admin går du till Webbshop > Teman.
Klicka på Anpassa bredvid temat du vill anpassa.
Klicka på kugghjulsikonen och sedan på Färger.
Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.
Klicka på toningen som du vill ta bort.
Klicka på Ta bort gradient.
Klicka på Spara.