Farveskemaer
Du kan definere forskellige farveskemaer i dine temaindstillinger og anvende farveskemaerne på forskellige afsnit i hele din webshop med en farveskemavælger. Et farveskema er et sæt farver. Dit tema har en række standardfarveskemaer, som du kan ændre når som helst i temaeditoren. Du kan tilføje farverne på dit brand for at sikre en sammenhængende applikation af din farvepalet på tværs af din webshop.
Skabeloner har ikke individuelle farveindstillinger, så dit butiksdesign er ensartet på hele dit website. En skabelon anses som en hovedside eller det primære indhold i en butik. Hvis du har forskellige farveskemaer i din butik, kan det medføre en dårlig brugeroplevelse og få kunderne til at forlade din butik uden at købe produkter.
Under funktioner i webshop og sidetyper kan du se afsnit, der indeholder indstillingen Farveskema.
På denne side
Temaindstillinger for farveskema
Farveskemaer er en temaindstilling, der grupperer elementer og deres respektive farver på en visuelt repræsentativ måde. Du kan tildele forskellige farver til forskellige elementer i et sammenhængende farveskema, der kan anvendes i hele dit tema, hvor der er en tilgængelig farveskemavælger. Du kan have op til 21 farveskemaer. Du kan også se en forhåndsvisning af, hvordan dine farver vises, i skemaets forhåndsvisning.
| Indstilling | Beskrivelse |
|---|---|
| Baggrund | Farven anvendes på baggrunden i nogle afsnit og på baggrunden på oversigtsknappen. |
| Baggrundsgraduering | En farvegraduering anvendes på baggrunden i nogle afsnit. Baggrundgradueringerne erstatter baggrunden, hvor det er muligt. |
| Tekst | Farven anvendes på afsnittet eller blokteksten. |
| Udfyldt knapbaggrund | Farven anvendes på baggrunden for den primære knap. |
| Udfyldt knaptekst | Farven anvendes på teksten på den primære knap. |
| Rammeknap | Farve anvendes på den sekundære knaps tekst og kant. |
| Skygge | Farven anvendes på skyggerne. |
Administrer dit farveskema
Din butiks farveskema og farveindstillinger er angivet i dine temaindstillinger. Brug farvevælgeren til at vælge en ny farve eller indtast værdien af farven i tekstfeltet. Farvefeltet accepterer følgende farvenavne og -værdier:
- farvenavne, såsom
red,blackellerblue - RGB-farvekoder
- heksadecimale farveværdier
Fremgangsmåde:
Gå til Webshop > Temaer i din Shopify-administrator.
Klik på Tilpas ud for det tema, du vil tilpasse.
Klik på tandhjulskikonet, og klik på Farver.
I afsnittet Skemaer skal du klikke på et eksisterende skema eller klikke på Tilføj skema for at tilføje et nyt farveskema.
Klik på farveprøven for den farvetype for indhold, du vil ændre.
For at indstille din farve skal du indtaste en hex-farvekode eller vælge farven fra farvevælgeren. Hvis du vil angive farven til gennemsigtig, skal du slette hex-koden fra tekstfeltet.
Klik på Gem.
Anvender dit farveskema
Når du har defineret dit farveskema i dine temaindstillinger, kan du tildele et farveskema ved hjælp af farveskemavælgeren i dit temas afsnit og blokke. Farveskemavælgeren er kun tilgængelig i visse afsnit, blokke og generelle temaindstillinger.
Gradueringer
Du kan opsætte en graduering af farver i nogle temaer for at skabe visuelt spændende baggrunde. Indstillingen color_background bruges til at tilpasse CSS-baggrundens egenskaber.
Du kan bruge gradueringsvælgeren til at vælge gradueringens farver, type, vinkel, placering og gennemsigtighed. Du kan se en forhåndsvisning af de indstillinger, du vælger i gradueringsvælgeren, i realtid i temaeditoren. Du kan også oprette en gradueringsbaggrund ved hjælp af CSS-kode, som omfatter en valideringskontrol.
Opsæt gradueringer
Gå til Webshop > Temaer i din Shopify-administrator.
Klik på Tilpas ud for det tema, du vil tilpasse.
Klik på tandhjulskikonet, og klik på Farver.
Klik på et eksisterende skema, som du vil redigere, i afsnittet Skemaer.
Klik på indstillingen for gradueringsfarven, som f.eks. Baggrundsgraduering.
Hvis du ikke tidligere har opsat en graduering, vises der flere forudindstillede valgmuligheder, som du kan vælge mellem. Vælg en hvilken som helst forudindstillet graduering for at åbne panelet med valgmuligheder.
-
Vælg dine gradueringsmuligheder:
- Vælg mellem en lineær eller radial graduering. Brug knapperne til at vælge din foretrukne gradueringstype.
- Du kan indstille vinklen på din graduering med pil op og ned. Klik på pil op eller ned for at forøge eller formindske vinklen med 5 procent.
- Brug skyderen til at vælge din graduerings placering, eller angiv en numerisk værdi i feltet.
- Du kan angive en specifik hex-kode for en farve eller vælge en farve ved hjælp af skyderen. Dine senest valgte farver vises nederst i panelet med gradueringsmuligheder.
- Hvis du gerne vil gøre din graduering uigennemsigtig, kan du bruge skyderen til højre til at justere gradueringens gennemsigtighed. Du kan også angive et procenttal i feltet ud for farvens hex-kode.
Klik på Gem.
Angiv gradueringer ved hjælp af CSS
Du kan bruge de fleste CSS-værdier for background-egenskaber til at angive en baggrundsfarve. Du kan bruge dette felt til uigennemsigtige farver (f.eks. #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) og hsla(0, 0%, 0%, 1) skaber alle en uigennemsigtig sort baggrund). Du kan også bruge feltet til gradueringer (f.eks. linear-gradient(red, green), radial-gradient(red, green) eller conic-gradient(red, green)). Du kan også gentage gradueringer.
Fremgangsmåde:
Gå til Webshop > Temaer i din Shopify-administrator.
Klik på Tilpas ud for det tema, du vil tilpasse.
Klik på tandhjulskikonet, og klik på Farver.
Klik på et eksisterende skema, som du vil redigere, i afsnittet Skemaer.
Klik på den graduering, du vil redigere.
Klik på pilen ud for Graduering, og vælg derefter CSS.
Skriv eller indsæt din gradueringskode i feltet CSS-kode. Temaeditorens forhåndsvisning viser din graduering på den rigtige placering.
Klik på Gem.
Fjern en graduering
Gå til Webshop > Temaer i din Shopify-administrator.
Klik på Tilpas ud for det tema, du vil tilpasse.
Klik på tandhjulskikonet, og klik på Farver.
Klik på et eksisterende skema, som du vil redigere, i afsnittet Skemaer.
Klik på den graduering, du vil fjerne.
Klik på Fjern graduering
Klik på Gem.