Temainställningar

Du kan använda temainställningar för att göra ändringar i din webbutiks typografi, färger, länkar till sociala medier och kassainställningar. När du gör ändringar i dina temainställningar gäller de för hela din webbutik.

Logotyp

Du kan lägga till en logotyp för ditt företag i din webbshop. Din logotyp visas på följande platser:

  • din sidfot på alla sidor
  • din lösenordssida

Logotypbilder har en maximal bredd på 300 px.

Anpassa din logotyp

Anpassa din logotyps bredd

  1. Klicka på Temafärllningar.
  2. Klicka på logotypen.
  3. Justera skjutreglaget till den pixelbredd du vill ha på skrivbordets logotypbredd.

Favicon

Du kan lägga till en favoritikon, eller en favicon, vilken kan hjälpa till att varumärka din webbutik. En favoritikon visas på följande platser:

  • din webbläsarflik
  • din webbläsarhistorik
  • skrivbordsikoner
  • bredvid din webbshops namn, när den är bokmärkt

Mer information om faviconer.

Anpassa din favicon

Färger

Du kan skapa upp till 21 unika färgscheman och tillämpa dem på olika avsnitt i din webbshop. Läs mer om färgalternativ, färgscheman och färgtoningar.

Anpassa dina färginställningar

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Klicka på Anpassa bredvid temat du vill anpassa.
  3. Klicka på Temainställningar och sedan på Färger.
  4. 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.
  5. Klicka på färgprovet för den innehållstypfärg du vill ändra.
  6. 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.
  7. Klicka på Spara.

Typografi

Du kan ställa in typsnittsstil och storlek på texten i din webbutik. Du kan välja ett systemtypsnitt eller ett anpassat typsnitt.

Vi rekommenderar att du använder systemteckensnitt i din butik. Systemteckensnitt är teckensnitt som redan är installerade på en användares dator. Om du använder systemteckensnitt undviker du att ladda ner nya typsnitt till din kunds dator, vilket kan påverka din butiks inläsningshastighet negativt. Vilket teckensnitt som visas på kundens dator beror på deras operativsystem.

Anpassa dina typografiinställningar

Shopifys teckensnittsbibliotek innehåller en lista med tillgängliga teckensnitt.

Anpassa dina teckenstorlekar

Du kan ställa in standard teckenstorlekar för rubriken och brödtexten i temainställningen Typografi.

Steg:

Layout

Med Layout kan du konfigurera maximal bredd som din webbshop kommer att visas i, samt konfigurera det vertikala och horisontella utrymmet mellan avsnitten.

Animationer

Animationer gör det möjligt för dig att lägga till rörelse och visuellt intresse för din webbshop. Du kan aktivera en intoningsanimering som visar butikens avsnitt på bläddring och en hovringseffekt för dina kort och knappar.

Steg:

  1. Från din Shopify-admin går du till Webbshop > Teman.
  2. Klicka på Anpassa bredvid temat du vill anpassa.
  3. Klicka på Temainställningar och sedan på Animationer.
  4. Valfritt: Om du vill aktivera en animation som visar webbshopens avsnitt i bläddring väljer du Visa avsnitt vid bläddring.
  5. Valfritt: Om du vill lägga till en animation för hovringseffekt till dina kort och knappar väljer du ett av följande alternativ från inställningen Hovringseffekt:

    • Vertikal upprullning: När en kund hovrar över ett kort eller en knapp förskjuts elementet.
    • 3D-tangenten: När en kund hovrar över ett kort eller en knapp flyttas elementet framåt, vilket ger den en 3D-effekt. Detta har också en diskret utskuret ljus som flyttar sig över elementet, vilket ger det ytterligare ett dimensionslager.
  6. Klicka på Spara.

Kanter och skuggor

Du kan justera kanter och skuggor för vissa interaktiva innehållstyper, till exempel lådor, knappar, varianter eller kvantitetsinmatningar.

Anpassningsbara alternativ för kanter är:

  • Tjocklek, vilket ändrar artikelns konturer.
  • Opacitet, som ställer in synligheten för artikelkonturen.
  • Hörnradie, som rundar av hörnen på dina artiklar.

Alternativen för skuggor är:

  • Opacitet som ändrar synligheten för artikelns skuggning. En skuggopacitet på 0 % tar helt bort artikelns skuggning.
  • Reglagen för Horisontell eller Vertikal förskjutning flyttar placeringen av skuggorna runt artikeln.
  • Använd skjutreglaget Suddig för att ändra opaciteten för artikelns skuggning.

Knappar

Du kan anpassa inställningarna för knapparna för att uppmana till köp i din webbshop genom att lägga till skuggor, ändra avståndet eller opaciteten och justera formen på dina knappar.

Exempel på en webbshop med knapp med uppmaning till köp

Anpassa knappar

Variantalternativ med

Skiss på en webbshop med valbara färgrutealternativ

Prover är en visuell representation av produktvarianter. För att visa prover behöver du den senaste versionen av Dawn och kategorimetafält anslutna till dina varianter. Med Dawn kan variantalternativ visas antingen i en rullgardinsmeny eller som ett prov. Om du visar variantalternativ som ett prov kan du välja att visa dessa prover som en cirkel eller ruta eller som ingen. Alternativvärdet visas då som text.

Exempel på Dawn-inställningar för färgrutor

Ställ in färgrutor med kategorimetafält

  1. Gå till Produkter från din Shopify-admin.
  2. Klicka på en produkt.
  3. I avsnittet Produktorganisation anger du din produkts kategori i fältet Produktkategori och väljer sedan det mest exakta resultatet från listan Produktkategori. Produktkategorin måste innehålla kategorimetafältet Färg.
  4. I avsnittet Varianter klickar du på Lägg till alternativ såsom storlek eller färg.
  5. Klicka på Färger.
  6. Klicka på fältet Lägg till färg och välj alla standardfärgposter från rullgardinsmenyn.
  7. Så här lägger du till en anpassad färginmatning:

    1. Klicka på Lägg till färg och klicka sedan på Lägg till ny inmatning.
    2. Fyll i fälten Etikett och Färg på sidan Lägg till post.
    3. Om du vill ha ett mönster istället för en färg fyller du i fältet Bild. Om du lägger till både en färg och en bild kommer bilden att användas för färgrutan.
    4. Välj Basfärg och Basmönster.
    5. Klicka på Spara.
  8. Klicka på Spara för att spara din produkt.

Anpassa färgrutor i Dawn

  1. Gå till Webbshop > teman från din Shopify-admin.
  2. Se till att du har den senaste versionen av Dawn installerad och klicka sedan på Anpassa.
  3. Navigera till produkten som du lagt till färgalternativ för.
  4. Valfritt: Om du vill anpassa färgrutor klickar du på blocket Variantväljare. Du kan ändra visningen av färgrutorna genom att välja mellan Cirkel, Kvadrat eller Ingen.
  5. Klicka på Spara för att spara temat.

Variantpiller

Variantpiller gör att du kan visa varianterna av en produkt på en produktsida eller i ett avsnitt med en utvald produkt. Kunden kan välja önskad variant för att lägga till produkten i sin varukorg utan att behöva ändra produktsidor.

Exempel på en webbshop med valbara variantpiller

Anpassa Variantpiller

Inmatningar

Indata är interaktiva områden som kräver kundindata, till exempel en kvantitetsväljare, ett e-postformulär eller varukorgsanteckningar. Du kan justera utseendet på dina indata i webbshoppen via temainställningar.

Exempel på en webbshop med kvantitetsinmatning

Anpassa indata

Kort

Produktkort-, produktseriekort- och bloggkortsinställningar gör det möjligt för dig att anpassa stilen på varje typ av separat område som visas i avsnitt. Du kan ändra färg, justering, bildutfyllnad, kanter och skuggor av dessa tre typer av avsnittskort.

Anpassa kort

Innehållsbehållare

Behållare är textdelen av innehållsavsnitt, till exempel textrutan på ett bildspel, en bildbanner eller kolumnerna i avsnitt med flera kolumner. Du kan anpassa utseendet på innehållsbehållare för din webbshop.

Anpassa innehållsbehållare

Media

Media är den visuella komponenten i avsnitt, till exempel produktmedia eller bilden i "bild med text"-avsnitt. Du kan lägga till kanter och skuggor till din media.

Anpassa media

Nedrullningar och popup-fönster

Justera utseendet på rullgardinsmenyer för navigering, spärrande popup-fönster och popup-rutor för varukorg.

Anpassa rullgardinsmenyer och popup-fönster

Lådor

Paneler är dolda, interaktiva behållare som visas när man trycker eller klickar på dem, till exempel en hopfällbar navigeringsmeny eller filteralternativ.

Anpassa lådor

Märken

Rea- och Utsåld-märken läggs automatiskt till i dina produktbilder när priset går ner eller när lagerantalet når 0. Du kan justera position, form och färg på dina märken.

Exempel på en webbshop med rea- och slutsåld-märken

Sid- och blogg-märken visas i relevanta sökresultat. Du kan anpassa platsen och formen för dessa märken, men inte färgen.

Anpassa märken

Ikoner

Ikoner är små bilder som kan läggas till i vissa avsnitt eller block. Ställ in färgschemat för dina ikoner i Temainställningar.

Exempel på en webbshop med ikoner i rader som kan döljas

Anpassa ikoner

Varumärkesinformation

Du kan inkludera information om ditt varumärke. Du kan lägga till blocket med varumärkesinformation i din sidfot.

Anpassa din varumärkesinformation

Sociala medier

Du kan lägga till knappar för social delning för dina produkter och bloggpost samt länkar till dina konton på sociala medier. Länkar till dina konton på sociala medier visas i webbshopens sidfot.

Anpassa inställningarna för sociala medier

Sökbeteende

Din webbshop har en förutsägande sökfunktion som visar förslag när kunderna börjar skriva i sökfältet. Sökförslagen kan hjälpa kunderna att formulera och förfina sina sökfrågor och ge dem nya sätt att utforska en webbshop på. Funktionen ger även kunderna möjlighet att snabbt bläddra bland matchningar utan att behöva lämna den aktuella sidan för att se en separat lista med sökresultat.

Du kan anpassa följande sökningsinställningar:

  • Aktivera sökförslag – Aktivera eller inaktivera sökförslag.
  • Visa produktsäljare – Visa eller dölj produktsäljare i sökförslag.
  • Visa produktpris – Visa eller dölj produktpriser i sökförslag.

Ändra inställningar för sökinmatning

För mer information om hur sökförslag fungerar, se Förutsägande sökning.

Valutaformat

Du kan välja att produkt-, varukorgs- och kassapriser alltid visar valutakoder.

Varukorg

Du kan ändra stilen på varukorgen i din webbshop. När en kund lägger till en produkt från din butik i sin varukorg kan varukorgen visas som en låda, en sida eller en popup-avisering. Använd lådan eller popup-aviseringsalternativet för att hålla kunden kvar på produktsidan. Använd sidalternativet för att ta kunden till varukorgssidan. När kundens varukorg är tom kan du visa en utvald produktserie i varukorgslådan.

Steg:

Om du har ställt in varukorgstypen som Panel kan du visa en produktserie i varukorgspanel. Den valda produktserien visas endast när varukorgen är tom.

Klicka på Välj kollektion för att lägga till en kollektion i den tomma varukorgspanelen. När du har valt en kollektion klickar du på Ändra för att välja en annan kollektion eller ta bort kollektionen från varukorgspanelen. Du kan också klicka på Skapa kollektion för att skapa en ny kollektion. Den här knappen tar dig bort från temainställningar och till sidan Kollektioner i din Shopify-admin.

Kassa

I det här avsnittet kan du anpassa din butiks kassa. Se Shopify kassa om du vill ha mer information om butikens betalningssida.

Ändra temastilar

En temastil är en uppsättning inställningar som valts av temadesignern. Du kan tillämpa en temastil för din butik för att ge den en snyggt utseende och känsla. Alla teman har en temastil som tillämpas som standard. Du ändrar inställningarna för temastilen själv när du anpassar ett tema. När du tillämpar en temastil på ditt tema kommer dina aktuella inställningar, såsom färger och typografi, att ändras.

Steg:

Ångra och gör om ändringar

Knappen Ångra återkallar din senaste ändring och knappen Gör om upprepar en ändring som du ångrade. Om du klickar på Ångra-knappen mer än en gång fortsätter du att ångra det du gjort, en ändring i taget. Knapparna Ångra och Gör om hittar du i verktygsfältet för att redigera tema.

Ångra- och

Klicka på Ångra-knappen för att reversera följande ändringar:

  • lägga till, sortera om och radera avsnitt
  • tillämpa färger, teckensnitt och andra inställningar för fliken Temainställningar
  • återställa en temastil.

Är du redo att börja sälja med Shopify?

Prova gratis