Temainställningar

Du kan använda anpassning av temainställningar i sidomenyn i temaredigeraren för att göra ändringar i din webbshops typografi, färger, länkar till sociala medier och varukorgssida. Ändringar av temainställningar gäller för hela webbshoppen.

Avsnitt och block har även inställningar som du kan justera för att anpassa enskilda avsnitt i ditt tema. Mer information om avsnitt och block.

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

Anpassa din logotyp

Logotypbilder har en maximal bredd på 300 px.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på logotypen.

  5. I området Logotyp lägger du till din bild eller använder en gratis bild:

    • Lägg till bilden genom att klicka på Välj bild och sedan lägga till en ny eller befintlig bild:

      • Om du vill använda en bild som du redan har laddat upp till Shopify-admin väljer du bilden och klickar sedan på Klar.
      • Klicka på Lägg till bilder för att använda en bild från din lokala dator. Välj och lägg till en bild och klicka sedan på Klar.
    • Klicka på Utforska gratisbilder för att använda en gratis bild. Hitta en bild, klicka på bilden för att välja den och klicka sedan på Välj.

  6. Valfritt: Lägg till alternativtext till logotypbilden:

    1. Klicka på Redigera i området Logotyp.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Klicka på Spara.
  7. Valfritt: Använd intervallreglaget för att justera logotypens pixelbredd i området Logotypbredd för skrivbord/dator.

  8. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Logotyp.

  7. I området Logotyp lägger du till din bild eller använder en gratis bild:

    • Du kan lägga till en bild genom att trycka på Välj bild och sedan lägga till en ny eller befintlig bild:

      • Om du vill använda en bild som du redan har laddat upp till Shopify-admin så väljer du bilden och trycker sedan på Klar.
      • Tryck på Lägg till bilder för att använda en bild från en lokal enhet. Välj och lägg till en bild från en lokal enhet, tryck på bilden för att välja den och tryck sedan på Klar.
    • Om du vill använda en gratis bild trycker du på Utforska gratisbilder. Hitta en bild, tryck på bilden för att välja den och tryck sedan på Klar.

  8. Valfritt: Lägg till alternativtext till logotypbilden:

    1. Tryck på Redigera i området Logotyp.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Tryck på .
  9. Valfritt: Använd intervallreglaget för att justera logotypens pixelbredd i området Logotypbredd för skrivbord/dator.

  10. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Logotyp.

  7. I området Logotyp lägger du till din bild eller använder en gratis bild:

    • Du kan lägga till en bild genom att trycka på Välj bild och sedan lägga till en ny eller befintlig bild:

      • Om du vill använda en bild som du redan har laddat upp till Shopify-admin så väljer du bilden och trycker sedan på Klar.
      • Tryck på Lägg till bilder för att använda en bild från en lokal enhet. Välj och lägg till en bild från en lokal enhet, tryck på bilden för att välja den och tryck sedan på Klar.
    • Om du vill använda en gratis bild trycker du på Utforska gratisbilder. Hitta en bild, tryck på bilden för att välja den och tryck sedan på Klar.

  8. Valfritt: Lägg till alternativtext till logotypbilden:

    1. Tryck på Redigera i området Logotyp.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Tryck på .
  9. Valfritt: Använd intervallreglaget för att justera logotypens pixelbredd i området Logotypbredd för skrivbord/dator.

  10. Tryck på .

Lägga till en favoritikon

Du kan lägga till en favoritikon, eller favicon, som hjälper dig med varumärkeshanteringen i webbshoppen. En favoritikon visas på följande platser:

  • din webbläsarflik
  • din webbläsarhistorik
  • skrivbordsikoner
  • bredvid webbshopsnamnet när webbplatsen är bokmärkt

Mer information om faviconer.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema som du vill lägga till en favoritikon för och klicka sedan på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Beroende på din temaversion klickar du på Logotyp eller Favoritikon.

  5. Klicka på Välj bild i avsnittet Favoritikon och lägg sedan till en ny eller befintlig bild:

    • Om du vill välja en bild som du redan har laddat upp till din Shopify-administratör kan du söka efter eller leta rätt på bilden och sedan markera den med kryssrutan.
    • Om du vill välja en bild från din lokala dator klickar du på Lägg till bilder, öppnar bilden från din lokala dator och markerar den med kryssrutan.
  6. Klicka på Done (Klar).

  7. Valfritt: Lägg till alternativtext till favoritikon-bilden:

    1. Gå till avsnittet Favoritikonbild och klicka på Redigera.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Klicka på Spara.
  8. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema som du vill lägga till en favoritikon för och tryck sedan på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Beroende på vad du har för temaversion klickar du på Logotyp eller Favoritikon.

  7. Tryck på Välj bild i avsnittet Favoritikon-bild och lägg sedan till en ny eller befintlig bild:

    • Om du vill välja en bild som du redan har laddat upp till din Shopify-administratör kan du söka efter eller leta rätt på bilden och sedan markera den med kryssrutan.
    • Om du vill välja en bild från din lokala enhet trycker du på Lägg till bilder, öppnar bilden från din lokala enhet och markerar den med kryssrutan.
  8. Klicka på Klar.

  9. Lägg till alternativ text till din faviconbild:

    1. Gå till avsnittet Favoritikonbild och tryck på Redigera.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Tryck på .
  10. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema som du vill lägga till en favoritikon för och tryck sedan på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Beroende på vad du har för temaversion klickar du på Logotyp eller Favoritikon.

  7. Tryck på Välj bild i avsnittet Favoritikon-bild och lägg sedan till en ny eller befintlig bild:

    • Om du vill välja en bild som du redan har laddat upp till din Shopify-administratör kan du söka efter eller leta rätt på bilden och sedan markera den med kryssrutan.
    • Om du vill välja en bild från din lokala enhet trycker du på Lägg till bilder, öppnar bilden från din lokala enhet och markerar den med kryssrutan.
  8. Klicka på Klar.

  9. Lägg till alternativ text till din faviconbild:

    1. Gå till avsnittet Favoritikonbild och tryck på Redigera.
    2. Ange en kort beskrivning av bilden i fältet Alternativtext.
    3. Tryck på .
  10. Tryck på .

Färger

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 skapa och anpassa upp till 21 unika färgscheman och tillämpa dem på olika avsnitt i webbshoppen.

Färgscheman

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.

Lista över olika inställningar som du kan tillämpa på färgscheman i temaredigeraren.
InställningBeskrivning
BakgrundFärg tillämpas på bakgrunden i vissa avsnitt och på konturknappens bakgrund.
Tonad bakgrundEn toning av färger tillämpas på bakgrunden i vissa avsnitt. Bakgrundstoningar ersätter bakgrunden när det är möjligt.
TextFärg tillämpas på avsnittet eller blocktexten.
Enfärgad knappbakgrundFärg tillämpas på den primära knappbakgrunden.
Enfärgad knappetikettFärg tillämpas på den primära knapptexten.
KnappkonturFärg tillämpas på sekundär knapptext och -kant.
SkuggaFä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, black eller blue.
  • RGB-färgkoder.
  • Hexadecimala färgvärden.

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å ikonen inställningar och klicka 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.

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.

Väljare av färgscheman

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.

Konfigurera toningar

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Klicka på Anpassa bredvid temat du vill anpassa.

  3. Klicka på ikonen inställningar och klicka sedan på Färger.

  4. Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.

  5. Klicka på färgprovsalternativet för toning, till exempel Tonad bakgrund.

  6. 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.

  7. 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.
  8. Klicka på Spara.

Toningsväljare i temaredigeraren

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:

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Klicka på Anpassa bredvid temat du vill anpassa.

  3. Klicka på ikonen inställningar och klicka sedan på Färger.

  4. Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.

  5. Klicka på den toning som du vill redigera.

  6. Klicka på pilen bredvid Toning och välj sedan CSS.

  7. Skriv eller klistra in din toningskod i fältet CSS-kod. Förhandsgranskningen i temaredigeraren visar din toning på rätt plats.

  8. Klicka på Spara.

Fältet CSS-kod för toning i temaredigeraren

Ta bort en toning

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Klicka på Anpassa bredvid temat du vill anpassa.

  3. Klicka på ikonen inställningar och klicka sedan på Färger.

  4. Klicka på ett befintligt schema som du vill redigera i avsnittet Scheman.

  5. Klicka på toningen som du vill ta bort.

  6. Klicka på Ta bort gradient.

  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.

Överväg att använda systemtypsnitt i butiken, eftersom systemtypsnitt redan är installerade på en användares dator. Om du använder systemtypsnitt undviker du att ladda ner nya typsnitt till kundens dator, vilket kan påverka butikens laddningshastighet negativt. Vilket typsnitt som visas på kundens dator beror på dess operativsystem.

Anpassa teckensnittstyper

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

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Typografi.

  5. Om du vill ändra typ av typsnitt för butikens rubriker eller brödtext klickar du på Ändra i avsnittet Rubriker eller Brödtext.

  6. Klicka på namnet på det typsnitt du vill använda och klicka sedan på Välj.

  7. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Typografi.

  7. Du kan ändra en teckensnittstyp för rubrikerna eller brödtexten i butiken genom att trycka på Ändra i avsnitten Rubriker eller Brödtext.

  8. Tryck på namnet på det typsnitt du vill använda och tryck sedan på Klar.

  9. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Typografi.

  7. Du kan ändra en teckensnittstyp för rubrikerna eller brödtexten i butiken genom att trycka på Ändra i avsnitten Rubriker eller Brödtext.

  8. Tryck på namnet på det typsnitt du vill använda och tryck sedan på Klar.

  9. Tryck på .

Anpassa dina teckenstorlekar

Du kan ställa in standardteckenstorlekar för rubriker och brödtext i temainställningen Typografi.

Den minsta teckenstorleken är 100 % och den största teckenstorleken är 150 %. Varje ökning av skalan så ökar teckenstorleken med 5 %. Standardinställningen är 100 %.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Typografi.

  5. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för text i Rubriker.

  6. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för brödtexten.

  7. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Typografi.

  7. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för text i Rubriker.

  8. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för brödtexten.

  9. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Typografi.

  7. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för text i Rubriker.

  8. Använd intervallreglaget Teckensnittsskala för att välja standardstorlek för teckensnitt och ändra den för brödtexten.

  9. Tryck på .

Layout

Du kan konfigurera maximal bredd som webbshoppen kommer att visas i, samt konfigurera det vertikala och horisontella utrymmet mellan avsnitten.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Layout.

  5. Använd intervallreglaget för Sidbredd för att välja en sidbredd på mellan 1 000 px och 1 600 px. Standardinställningen är 1 600 px.

  6. Valfritt: Använd intervallreglaget för att lägga till vertikalt Utrymme mellan mallavsnitt på sidorna. Du kan lägga till upp till maximalt 100 px mellan avsnitt.

  7. Valfritt: Om du har en rutnätslayout använder du intervallreglagen för Horisontellt utrymme och Vertikalt utrymme för att lägga till utrymme mellan rutnätsinnehållet på sidorna. Vid tillägg av horisontellt utrymme kan du lägga till maximalt 40 px utrymme till innehållsraderna på sidorna. Om du lägger till vertikalt utrymme så läggs maximalt 40 px utrymme till i kolumnerna med innehåll på sidorna.

  8. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Layout.

  7. Använd intervallreglaget för Sidbredd för att välja en sidbredd på mellan 1 000 px och 1 600 px. Standardinställningen är 1 600 px.

  8. Valfritt: Använd intervallreglaget för att lägga till vertikalt Utrymme mellan mallavsnitt på sidorna. Du kan lägga till upp till maximalt 100 px mellan avsnitt.

  9. Valfritt: Om du har en rutnätslayout använder du intervallreglagen för Horisontellt utrymme och Vertikalt utrymme för att lägga till utrymme mellan rutnätsinnehållet på sidorna. Vid tillägg av horisontellt utrymme kan du lägga till maximalt 40 px utrymme till innehållsraderna på sidorna. Om du lägger till vertikalt utrymme så läggs maximalt 40 px utrymme till i kolumnerna med innehåll på sidorna.

  10. Tryck på Spara.

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Layout.

  7. Använd intervallreglaget för Sidbredd för att välja en sidbredd på mellan 1 000 px och 1 600 px. Standardinställningen är 1 600 px.

  8. Valfritt: Använd intervallreglaget för att lägga till vertikalt Utrymme mellan mallavsnitt på sidorna. Du kan lägga till upp till maximalt 100 px mellan avsnitt.

  9. Valfritt: Om du har en rutnätslayout använder du intervallreglagen för Horisontellt utrymme och Vertikalt utrymme för att lägga till utrymme mellan rutnätsinnehållet på sidorna. Vid tillägg av horisontellt utrymme kan du lägga till maximalt 40 px utrymme till innehållsraderna på sidorna. Om du lägger till vertikalt utrymme så läggs maximalt 40 px utrymme till i kolumnerna med innehåll på sidorna.

  10. Tryck på .

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:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Animationer.

  5. Valfritt: Om du vill aktivera en animation som visar webbshopens avsnitt i bläddring väljer du Visa avsnitt vid bläddring.

  6. Valfritt: Om du vill lägga till en animation med hovringseffekt till kort och knappar så 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-lyft: När en kund hovrar över ett kort eller en knapp flyttas elementet framåt, vilket ger det en 3D-effekt. Detta ger också en diskret utskuret ljus som flyttar sig över elementet, vilket ger det ytterligare ett dimensionslager.
  7. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Animationer.

  7. Valfritt: Om du vill aktivera en animation som visar webbshopens avsnitt i bläddring väljer du Visa avsnitt vid bläddring.

  8. Valfritt: Om du vill lägga till en animation med hovringseffekt till kort och knappar så 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-lyft: När en kund hovrar över ett kort eller en knapp flyttas elementet framåt, vilket ger det en 3D-effekt. Detta ger också en diskret utskuret ljus som flyttar sig över elementet, vilket ger det ytterligare ett dimensionslager.
  9. Tryck på Spara.

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Animationer.

  7. Valfritt: Om du vill aktivera en animation som visar webbshopens avsnitt i bläddring väljer du Visa avsnitt vid bläddring.

  8. Valfritt: Om du vill lägga till en animation med hovringseffekt till kort och knappar så 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-lyft: När en kund hovrar över ett kort eller en knapp flyttas elementet framåt, vilket ger det en 3D-effekt. Detta ger också en diskret utskuret ljus som flyttar sig över elementet, vilket ger det ytterligare ett dimensionslager.
  9. Tryck på .

Inställningar för anpassning av visuella element

Du kan justera utseendet på element i ditt tema, till exempel knappar, produktkort och varianter, från sidan Temainställningar. Varje alternativ innehåller de relevanta inställningarna för det elementet.

Du kan justera inställningarna för följande element i ditt tema:

  • Knappar: Knappar inkluderar uppmaningsknappar i avsnitt som ett bildspel eller en bild med text samt knapparna i ett kontaktformulär, på dina produktsidor och varukorgssidor.

  • Variantovaler: Med variantovaler kan du visa en produkts varianter på en produktsida eller i ett avsnitt med utvalda produkter. Kunder kan välja önskad variant för att lägga till produkten i varukorgen utan att behöva ändra produktsida. Du kan anpassa hur variantovaler visas i webbshoppen.

  • Indata: 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å indata i webbshoppen.

  • Med inställningarna för produktkort, produktseriekort och bloggkort kan du anpassa stilen på varje korttyp när de visas i sidavsnitt. - Produktkort: På produktkort visas information om dina produkter i områden av ditt tema som listar flera produkter, såsom produktseriemallar, produktserieavsnitt och sökresultat. - Produktseriekort: Produktseriekort visa information om dina produktserier i områden av ditt tema som listar produktserier, såsom en lista eller avsnitt för produktserier. - Bloggkort: På bloggkort visas information om dina bloggposter i områden av ditt tema som listar flera produkter, såsom bloggmallar, bloggavsnitt och sökresultat.

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

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

  • Rullgardinsmenyer och popup-rutor: Du kan justera utseendet på rullgardinsmenyer, spärrande popup-fönster och popup-varukorgar i webbshoppen.

  • Lådor: Lådor är dolda, interaktiva behållare som visas när de trycks eller klickas på, till exempel en hopfällbar meny eller filteralternativ för produktserier. Du kan anpassa lådornas kanter och skuggor i webbshoppen.

  • Brickor: Brickorna Rea och Slutsåld läggs till automatiskt i produktbilderna när du sänker priset eller när lagerantalet når 0. Du kan justera position, form och färg på brickorna Rea och Slutsåld var för sig i temainställningarna. Brickorna Sida och Blogg visas i relevanta sökresultat. Du kan anpassa dessa brickors placering och form, men du kan inte ändra färgen på brickorna Sida och Blogg.

  • Varumärkesinformation: Du kan inkludera information om varumärke i webbshoppen. När du har slutfört följande steg kan du lägga till blocket Varumärkesinformation i webbshoppens sidfot.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Klicka på Anpassa bredvid temat du vill redigera.

  3. Klicka på ikonen inställningar.

  4. Klicka på ett element för att öppna inställningarna.

  5. Justera önskade tillgängliga inställningar. Du kan granska ändringarna genom att navigera till olika områden i ditt tema i förhandsgranskningsfönstret.

  6. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Anpassa bredvid temat du vill redigera.

  4. Tryck på ikonen inställningar.

  5. Tryck på ett element för att öppna inställningarna.

  6. Justera önskade tillgängliga inställningar. Du kan granska ändringarna genom att navigera till olika områden i ditt tema i förhandsgranskningsfönstret.

  7. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Anpassa bredvid temat du vill redigera.

  4. Tryck på ikonen inställningar.

  5. Tryck på ett element för att öppna inställningarna.

  6. Justera önskade tillgängliga inställningar. Du kan granska ändringarna genom att navigera till olika områden i ditt tema i förhandsgranskningsfönstret.

  7. Tryck på .

Sociala medier

Du kan lägga till länkar till sociala medier-konton som visas i webbshoppens sidfot.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Sociala medier.

  5. Lägg till länkar till sociala medier genom att ange webbplatsadresserna för dina konton i de relevanta Sociala medier-konton-fälten. Du måste ange fullständiga länkar som till exempel https://instagram.com/shopify eller .https://tiktok.com/@shopify

  6. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Sociala medier.

  7. Lägg till länkar till sociala medier genom att ange webbplatsadresserna för dina konton i de relevanta Sociala medier-konton-fälten. Du måste ange fullständiga länkar som till exempel https://instagram.com/shopify eller .https://tiktok.com/@shopify

  8. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Sociala medier.

  7. Lägg till länkar till sociala medier genom att ange webbplatsadresserna för dina konton i de relevanta Sociala medier-konton-fälten. Du måste ange fullständiga länkar som till exempel https://instagram.com/shopify eller .https://tiktok.com/@shopify

  8. Tryck på .

Sökbeteende

Webbshoppen 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 din webbshop på. Sökförslag ger även kunderna möjlighet att snabbt surfa bland matchningar utan att behöva lämna den aktuella sidan för att se en separat lista med sökresultat.

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

Du kan anpassa hur sökförslag visas för kunderna.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Sökbeteende.

  5. Om du vill aktivera eller inaktivera sökförslag så markerar eller avmarkerar du Aktivera sökförslag.

  6. Valfritt: Du kan visa eller dölja produktsäljaren i sökförslag genom att markera eller avmarkera Visa produktsäljare.

  7. Valfritt: Om du vill visa eller dölja produktpriset i sökförslag markerar eller avmarkerar du visa produktpris.

  8. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Sökbeteende.

  7. Om du vill aktivera eller inaktivera sökförslag så markerar eller avmarkerar du Aktivera sökförslag.

  8. Valfritt: Du kan visa eller dölja produktsäljaren i sökförslag genom att markera eller avmarkera Visa produktsäljare.

  9. Valfritt: Om du vill visa eller dölja produktpriset i sökförslag markerar eller avmarkerar du visa produktpris.

  10. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Sökbeteende.

  7. Om du vill aktivera eller inaktivera sökförslag så markerar eller avmarkerar du Aktivera sökförslag.

  8. Valfritt: Du kan visa eller dölja produktsäljaren i sökförslag genom att markera eller avmarkera Visa produktsäljare.

  9. Valfritt: Om du vill visa eller dölja produktpriset i sökförslag markerar eller avmarkerar du visa produktpris.

  10. Tryck på .

Valutaformat

Du kan välja att visa valutakoden med priser på produkterna.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Valutaformat.

  5. Välj Visa valutakoder för att visa valutakoder.

  6. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Valutaformat.

  7. Välj Visa valutakoder för att visa valutakoder.

  8. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Valutaformat.

  7. Välj Visa valutakoder för att visa valutakoder.

  8. Tryck på .

Varukorg

Du kan ändra stilen på varukorgen i webbshoppen. När en kund lägger till en produkt från din butik i varukorgen så 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 kvar kunden 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 varukorgspanelen.

Steg:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på varukorg.

  5. Använd rullgardinsmenyn Varukorgstyp för att välja varukorgsstilen Panel, Sida eller Popup-avisering.

  6. Valfritt: Välj Visa säljare för att visa säljare av artiklarna i en kunds varukorg.

  7. Valfritt: Om du vill ge kunderna en textruta där de kan ange specialförfrågningar eller lägga till extra orderinformation så väljer du Aktivera varukorgsanteckning.

  8. Valfritt: Om du väljer Panel som Varukorgstyp så kan du visa en produktserie i varukorgspanelen när den är tom:

    1. Klicka på Välj produktserie i Varukorgspanel.
    2. Klicka på namnet på den produktserie som du vill visa och klicka sedan på Välj.
  9. Valfritt: Om du väljer Panel som Varukorgstyp så kan du ändra färgschemat för varukorgspanelen genom att vidta följande åtgärder:

    1. Klicka på Ändra i området Varukorgspanel > Färgschema.
    2. Välj ett färgschema som du vill använda för varukorgspanelen.
  10. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Varukorg.

  7. Välj Varukorgstyp bland alternativen Panel, Sida eller Popup/avisering.

  8. Valfritt: Välj Visa säljare för att visa säljare av artiklarna i en kunds varukorg.

  9. Valfritt: Om du vill ge kunderna en textruta där de kan ange specialförfrågningar eller lägga till extra orderinformation så väljer du Aktivera varukorgsanteckning.

  10. Valfritt: Om du väljer Panel som Varukorgstyp så kan du visa en produktserie i varukorgspanelen när den är tom:

    1. Tryck på Välj produktserie i området Varukorgspanel.
    2. Klicka på namnet på den produktserie som du vill visa och tryck sedan på Klar.
  11. Valfritt: Om du väljer Panel som Varukorgstyp så kan du ändra färgschemat för varukorgspanelen genom att vidta följande åtgärder:

    1. Tryck på Ändra i Varukorgspanel > Färgschema.
    2. Välj ett färgschema som du vill använda för varukorgspanelen och tryck sedan på Klar.
  12. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Varukorg.

  7. Välj Varukorgstyp bland alternativen Panel, Sida eller Popup/avisering.

  8. Valfritt: Välj Visa säljare för att visa säljare av artiklarna i en kunds varukorg.

  9. Valfritt: Om du vill ge kunderna en textruta där de kan ange specialförfrågningar eller lägga till extra orderinformation så väljer du Aktivera varukorgsanteckning.

  10. Valfritt: Om du väljer Panel som Varukorgstyp så kan du visa en produktserie i varukorgspanelen när den är tom:

    1. Tryck på Välj produktserie i området Varukorgspanel.
    2. Klicka på namnet på den produktserie som du vill visa och tryck sedan på Klar.
  11. Valfritt: Om du väljer Panel som Varukorgstyp så kan du ändra färgschemat för varukorgspanelen genom att vidta följande åtgärder:

    1. Tryck på Ändra i Varukorgspanel > Färgschema.
    2. Välj ett färgschema som du vill använda för varukorgspanelen och tryck sedan på Klar.
  12. Tryck på .

Anpassat CSS

I avsnittet Anpassad CSS kan du ange din egen CSS-kod, till exempel för att anpassa utseendet på webbshoppens knappar utöver de tillgängliga standardinställningarna, eller för att tillämpa unik formatering på specifika textelement.

Anpassad CSS i temainställningarna påverkar alla sidor i din webbshoppen, förutom kassan.

Mer information om att Lägga till anpassad CSS till temat.

Temastil

En temastil är en uppsättning inställningar som valts av temadesignern. Du kan tillämpa en temastil för butiken för att ge den en snyggt utseende och snygg känsla. Alla teman har en temastil som tillämpas som standard. Vilka andra temastilsalternativ du har beror på vilket tema du använder.

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:

Dator
  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera och klicka på Anpassa.

  3. Klicka ikonen Temainställningar inställningar.

  4. Klicka på Temastil.

  5. Välj den temastil du vill använda och klicka sedan på Ändra stil.

  6. Klicka på Spara.

iPhone
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Temastil.

  7. Välj den temastil du vill använda och tryck sedan på Klar.

  8. Tryck på .

Android
  1. Från Shopify-appen trycker du på ikonen Meny.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera alla teman.

  4. Hitta det tema du vill redigera och tryck på Anpassa.

  5. Tryck på och sedan på Temainställningar.

  6. Tryck på Temastil.

  7. Välj den temastil du vill använda och tryck sedan på Klar.

  8. Tryck på .

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!