Avsnitt för Debut

Avsnitt är anpassningsbara block med innehåll som avgör layouten på olika sidor på din webbutik.

  • I Hem-avsnitt finns olika funktioner som du kan lägga till, ordna om eller ta bort, till exempel bildspel eller registrering för nyhetsbrev. Du kan ha upp till 25 avsnitt på din hemsida.

  • Varje sidtyp har sina egna avsnitt. Till exempel avgör produktsideavsnittet layouten för varje produktsida i din webbutik.

  • Sidavsnitt finns alltid på specifika platser i din webbutik. Du kan anpassa dem, men du kan inte flytta eller ta bort dem.

  • Varje tema innehåller fasta avsnitt, till exempel sidhuvud och sidfot som visas på alla sidor i din webbutik.

Du kan lära dig om Debuts unika urval av avsnitt och hur man anpassar dem för att passa ditt företag.

Debut inkluderar följande statiska avsnitt:

  • Rubrik
  • Sidfot
  • Produktsidor
  • Produktseriesidor
  • Kollektionslistsida
  • Bloggsidor
  • Inlägg
  • Varukorgssida

Dynamiska avsnitt

Du kan lägga till, ordna om och ta bort dynamiska avsnitt för att anpassa layouten av din hemsida. Varje tema har en unik uppsättning dynamiska avsnitt att välja mellan.

Debut inkluderar följande dynamiska avsnitt:

  • Blogginlägg
  • Kollektionslista
  • Utvald kollektion
  • Galleri
  • Bild med text
  • Bild med textöverlagring
  • Logotyplista
  • Bildspel
  • Utvald produkt
  • Nyhetsbrev
  • Karta
  • Rich text
  • Omdömen
  • Textkolumner med bilder
  • Video
  • Anpassat innehåll

Rubrik

I headeravsnittet kan du redigera innehållet som visas högst upp på varje sida i din butik. Du kan lägga till en logotypbild, välja vilken meny du vill visa och skapa ett meddelande.

Rubrikfältet på John's Apparel-webbplatsen visar huvudmenyobjekten, en sökikon och en varukorgsikon

Anpassning av rubriksektionen:

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Sidhuvud.

  4. Välj vänster eller centrerad under Placering av logotyp för att välja var din logotyp ska placeras. Butiksnamnet kommer i stället att visas i vanlig text om du inte lägger till en logotyp. Du kan ändra butiksnamnet under sidan Allmänna inställningar på ditt administratörskonto.

  5. Klicka på välj bild under Logotyp för att lägga till en logotyp. Klicka på Ladda upp för att ladda upp en bild från din dator. Klicka på gratisbilder i Burst för att använda en kostnadsfri stockbild.

  6. Justera reglaget för anpassning av logotypbredd till önskad bredd för att ändra storleken på din logotyp. Justering av logotypbredden förvränger inte din logotypbild.

  7. Klicka på ändra under Meny för att välja vilken meny du vill visa i headern. Välj en befintlig meny eller skapa en ny genom att klicka på skapa meny. Klicka på ta bort om du inte vill visa en meny i din header.

  8. Gör så här om du vill visa ett meddelande högst upp på sidan:

  9. Markera visa meddelande i meddelandefältet.

  10. Markera endast startsida för att visa meddelandet på startsidan. I annat fall visas meddelandet på varje sida i din butik.

  11. Ange texten för ditt meddelande i textfältet.

  12. Ange URL i länkfältet för att lägga till en länk till ditt meddelande.

  13. Klicka på färgprov i Meddelandefältet och välj en färg för att ändra bakgrundsfärg för meddelandefältet.

  14. Klicka på färgremsan för Text och välj en färg för att ändra bakgrundsfärg för texten i meddelandet.

  15. Klicka på Spara.

Sidfot

Sidfoten är det avsnitt som syns längst ned på varje sida i din butik. Du kan lägga till följande funktioner i din sidfot:

  • betalningsikoner
  • snabblänkar
  • nyhetsbrevsregistrering
  • Ett textavsnitt som innehåller information om ditt företag
  • sociala medier-ikoner
  • en språkväljare
  • en valutaväljare

Sidfoten på en webbplats som visar en meny, nyhetsbrevsregistrering och en upphovsrättstext.

Lägg till betalningsikoner

Du kan visa ikoner för de betalningsmetoder som du accepterar i sidfoten. I det här området visas ikonerna som är kopplade till den betalningsleverantör du har aktiverat i avsnittet betalningsinställningar i ditt administratörskonto.

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Sidfot.

  4. Markera Visa betalningsikoner.

  5. Klicka på Spara.

Lägg till en meny, nyhetsbrevsregistrering eller textmeddelande

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Dator</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>Från din Shopify-admin går du till <strong>Webbutik</strong> &gt; <strong>Teman</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>Från <a href="https://www.shopify.com/install/detect">Shopify-appen</a> klickar du på <strong>Butik</strong>.
</li><li>Tryck på <strong>Webbutik</strong> i avsnittet <strong>Försäljningskanaler</strong>.
</li><li>Tryck på <strong>Hantera teman</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>Från <a href="https://www.shopify.com/install/detect">Shopify-appen</a> klickar du på <strong>Butik</strong>.
</li><li>Tryck på <strong>Webbutik</strong> i avsnittet <strong>Försäljningskanaler</strong>.
</li><li>Tryck på <strong>Hantera teman</strong>.
</li></ol></div>
</div>



1. Bredvid **Debut** klickar du på **Anpassa**.
  1. Klicka på Avsnitt.

  2. Klicka på Sidfot.

  3. För att lägga till ett innehållsblock i innehållsområdet, klicka på lägg till innehåll. Välj typ av block från följande alternativ:

- Meny - Nyhetsbrev - Text

Du kan lägga till upp till fyra innehållsblock.

Klicka på ikonen ⋮⋮ och dra blocket till en annan plats för att flytta ett innehållsblock.

Ta bort ett innehållsblock genom att klicka på blocket och klicka sedan på Ta bort innehåll.

Anpassa ett innehållsblock genom att klicka på blocket och ändra inställningarna.

  1. Klicka på Spara.

Lägg till ikoner på sociala medier

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Sidfot.

  4. Klicka på avsnittet Temainställningar.

  5. Ange URL-adressen till din profil i det relevanta fältet för sociala medier.

  6. Klicka på Spara.

Välj en språkväljare

Du bör bara lägga till en språkväljare om du har aktiverat flera butiksspråk.

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Sidfot.

  4. Välj Visa språkväljare under Språkväljare.

  5. Klicka på Spara.

Lägg till en valutaväljare

Du bör bara lägga till en valutaväljare om du har aktiverat flera valutor.

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Sidfot.

  4. Välj Visa valutaväljare under Valutaväljare.

Produktsidor

I avsnittet Produktsidor kan du lägga till eller ta bort följande element:

  • En kvantitetsväljare
  • Etiketter för varianter
  • Varumärket eller säljaren
  • Bildzoom
  • En dynamisk kassaknapp
  • Knappar för delning i sociala medier
  • Produktrekommendationer

Du kan även ställa in storleken på dina bilder.

Redigera produktsideinställningar

  1. Välj Produktsidor i rullgardinsmenyn.

  2. Klicka på Avsnitt.

  3. Klicka på Produktsidor.

  4. Välj en bildstorlek från rullgardinsmenyn Bildstorlek för att välja bildstorlek.

  5. Markera visa kvantitetsväljare för att visa en kvantitetsväljare.

  6. Markera visa etiketter för varianter för att visa etiketter för varianter, såsom "storlek" och "färg". Etiketterna som visas är baserade på namnen för produkten.

  7. Markera visa säljare för att visa produktmärket eller säljaren. Du behöver lägga till en säljare till produkten för att kunna visa ett varumärkesnamn eller en säljare.

  8. Markera aktivera bildzoom för att låta kunder zooma in produktbilden genom att svepa musen över bilden.

  9. Markera visa dynamisk kassaknapp för att visa en dynamisk kassaknapp.

  10. Markera visa knappar för delning till sociala medier om du vill visa knappar för delning till sociala medier.

  11. Klicka på Spara.

Lägga till eller ta bort produktrekommendationer

Du kan visa rekommenderade produkter på produktsidor för att underlätta för kunder att upptäcka andra produkter som kan intressera dem.

  1. Välj Produktsidor i rullgardinsmenyn.

  2. Klicka på Produktrekommendationer.

  3. Använd kryssrutan Visa dynamiska rekommendationer för att visa eller dölja produktrekommendationer på dina produktsidor.

  4. Valfritt: Om du vill ändra den rubrik som visas ovanför de rekommenderade produkterna anger du en ny i fältet Rubrik.

  5. Valfritt: Använd kryssrutan Visa leverantör för att visa eller dölja leverantörerna i produktbeskrivningarna.

  6. Klicka på Spara.

Produktseriesidor

Du kan ställa in dina kollektionssidor för att låta kunder filtrera och sortera bland produkterna i kollektionen. Du kan välja en layout för din kollektion, antingen ett rutnät eller en lista, och välja hur många produkter du vill visa.

Så här ställer du in layouten för dina kollektionssidor:

  1. Navigera till en kollektionssida i temaredigeraren.

  2. Klicka på fliken Avsnitt.

  3. Klicka på produktseriesidor.

  4. Välj antingen rutnät eller lista under Layout.

  5. Välj antal produkter per rad och antal rader per sida (om du valde rutnät) från listorna.

  6. Markera visa kollektionsbild om du vill visa en kollektionsbild högst upp på sidan.

  7. Markera visa produktsäljare om du vill visa produktmärket eller säljaren.

  8. Markera aktivera sortering för att visa en sorteringsmeny.

  9. Markera aktivera taggfiltrering för att låta dina kunder filtrera kollektionen efter produkttagg.

  10. Klicka på Spara.

Kollektionslistsida

Sidan med produktserielistan visar ett rutnät med alla dina produktserier. Dina kunder kan använda produktserielistan för att snabbt bläddra igenom dina produktserier och hitta den produktserie de vill bläddra i. I Debut är produktserielistan en topplänk i sidhuvudmenyn.

Obs! Namnet på din samlingslistan i den översta menyn kan variera. I det här exemplet heter menyn "Katalog".

Du kan visa miniatyrer av alla dina produktbilder i en kollektion i ett rutmönster, eller så kan du välja att visa en utvald kollektion. Du kan också välja hur du vill sortera kollektioner på sidan.

Så här ställer du in layouten för din kollektionssida:

  1. Navigera till din listsidan för din samling genom att klicka på menyn längst upp.

  2. Klicka på fliken Avsnitt.

  3. Klicka på Kollektionslistsida.

  4. Gör något av följande:

    1. Välj Alla om du vill visa miniatyrbilder av dina kollektioner i ett rutmönster.
    2. Välj Utvalda för att visa en kollektion på kollektionslistsidan.
  5. Gör följande om du markerade Alla i föregående steg:

    1. Välj ett alternativ för sortering från listan Sortera kollektioner efter.
    2. Välj antal kollektioner per rad från listan Kollektioner per rad.
  6. Klicka på Spara.

Bloggsidor

Med Debut kan du lista dina blogginlägg eller visa dem i ett rutnät. Om du har fler än en blogginläggsskribent kan du visa namnet på respektive skribent för varje blogginlägg. Du kan även visa publiceringsdatum för varje blogginlägg.

  1. Navigera till din bloggsida i förhandsgranskningsområdet för temaredigeraren.

  2. Klicka på Avsnitt.

  3. Klicka på Bloggsidor.

  4. Välj om du ska visa blogginlägg i en lista eller ett rutnät under Layout.

  5. Markera visa skribent för att visa skribentens namn.

  6. Markera visa datum för att visa blogginläggets publiceringsdatum.

  7. Klicka på Spara.

Varukorgssida

I avsnittet Varukorgssida kan du aktivera följande inställningar:

  • Varukorgsanteckningar
  • Automatiska varukorgsuppdateringar

Lägg till varukorgsanteckningar

Du kan låta dina kunder lägga till anteckningar i sina order på varukorgssidan.

  1. Välj Varukorg i rullgardinsmenyn högst upp.

  2. Klicka på fliken Avsnitt.

  3. Klicka på sidan Varukorg.

  4. Markera aktivera varukorgsanteckningar.

  5. Klicka på Spara.

Aktivera automatiska uppdateringar av varukorgen

Du kan låta varukorgen visa uppdaterad information så snart en kund gör ändringar i sin order. Till exempel kan delsumman uppdateras när kunden ändrar antalet varor i varukorgen. Så här aktiverar du automatiska varukorgsuppdateringar:

  1. Välj Varukorg i rullgardinsmenyn högst upp.

  2. Klicka på fliken Avsnitt.

  3. Klicka på sidan Varukorg.

  4. Markera Aktivera automatiska varukorgsuppdateringar.

  5. Klicka på Spara.

Utvald kollektion

Du kan framhäva en kollektion på din startsida. Du kan marknadsföra reor och nya kollektioner genom att välja ut och framhäva kollektioner.

Med Debut kan du lägga till en "Visa alla" -knapp för att låta kunderna se hela kollektionen, och du kan visa säljarens namn under varje produktbild.

Presentera en produktserie på din hemsida:

  1. Klicka på fliken Avsnitt.

  2. Klicka på avsnittet Utvalda produkter.

  3. Ange texten i fältet Rubrik för att ändra texten som visas ovanför kollektionen.

  4. Välj den kollektion du vill visa från Kollektionslistan. Klicka på länken Redigera kollektion för att öppna sidan Kollektioner i en ny flik och lägga till eller ta bort produkter från den utvalda kollektionen.

  5. Välj antal produkter som ska visas per rad i listan Produkter per rad.

  6. Välj hur många produktrader du vill visa från listan Rader.

  7. Markera visa produktsäljare om du vill visa säljaren eller varumärket under varje produktbild.

  8. Markera visa "visa alla"-knappen om du vill att kunder ska kunna se alla produkter i en kollektion.

  9. Klicka på Spara.

Bild med text

Med Debut kan du lägga till en bild med text som visas till höger eller vänster om bilden. Du kan även lägga till en knapp som länkar till en sida i din butik:

Du kan använda en bild med text för att marknadsföra en produkt eller kollektion, eller för att generera trafik till din bloggsida.

Att lägga till en bild med textavsnitt på din hemsida:

  1. Klicka på fliken Avsnitt.

  2. Klicka på avsnittet Bild med text.

  3. Klicka på välj bild under Bild och gör sedan något av följande:

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. I listan Layout väljer du om du vill att bilden ska visas till höger eller vänster om texten.

  2. Ange en ny titel för det här avsnittet i fältet Rubrik.

  3. Ange den text som du vill visa under rubriken i Textfältet.

  4. Ange den text som du vill visa på knappen i knappmarkeringsfältet.

  5. I fältet Knapplänk väljer du en sida i din butik som du vill att knappen ska länka till.

  6. Klicka på Spara.

Bild med textöverlagring

Du kan visa en stor bild med en anpassad textöverlagring på din hemsida.

Avsnittet Bild med text innehåller följande inställningar:

  • Bild – Välj en bild att lägga till i avsnittet.
  • Bildjustering - Ange på vilken sida du vill att bilden ska visas.
  • Layout – Ställ in bredden på avsnittet.
  • Avsnittshöjd – Ställ in höjden på avsnittet. För att förhindra bildbeskärning väljer du Anpassa till bild där höjden på avsnittet anpassas baserat på höjden på din bild.
  • Textstorlek – Ange textens storlek.
  • Rubrik - Lägg till en rubrik i avsnittet.
  • Text – Lägg till text i avsnittet. Avsnittet Bild med textöverlägg ändras automatiskt till rubriken du anger.
  • Knapptext – Lägg till en knapp med en textetikett i avsnittet.
  • Knapplänk - Länka din knapp till en annan sida eller webbplats.

Lägga till en bild med text på din hemsida

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Lägg till avsnitt > Bild med text > Lägg till.

  3. Använd inställningarna i textavsnittet för att anpassa din bild.

  4. Klicka på Spara.

Nyhetsbrev

Du kan lägga till nyhetsbrevsregistrering på din startsida. Detta låter dig samla in kunders e-postadresser för e-postmarknadsföringskampanjer. Se Shopify-bloggen för mer information om e-postmarknadsföring.

Nyhetsbrevsavsnittet på en webbplats. Det finns ett fält för kunder att ange en e-postadress och en knapp som säger

Gör så här för att lägga till ett prenumerationsformulär för nyhetsbrev på din startsida:

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Lägg till avsnitt> Nyhetsbrev.

  4. Ange en rubrik för din nyhetsbrevsregistrering i Rubrik-fältet. Standardrubriken är "Prenumerera på vårt nyhetsbrev".

  5. Ange en underrubrik till nyhetsbrevsregistreringen i fältet Underrubrik.

  6. Klicka på Spara.

Video

Du kan lägga till en YouTube-video på din startsida. Videor kan engagera kunder och generera intresse för ditt företag.

Tips! Du kan lägga till en Vimeo-video på din startsida genom avsnittet för anpassat innehåll.

Videoavsnittet innehåller följande inställningar:

  • Videohöjd - Ställ in höjden på din video.
  • Textstorlek - Lägg till text i din video. Texten tas bort medan videon spelas upp om du väljer bild med uppspelningsknapp.
  • Visa överlagring – Lägg till ett färglager över din video för att göra texten mer lättläst. Överlagringen tas bort medan videon spelas upp om du väljer Bild med uppspelningsknapp.
  • Stil - Ange stilen för videon. Bakgrundsvideostilen är endast tillgänglig för datorer. Kunder som besöker din butik från en surfplatta eller mobil enhet kommer alltid att se bild med uppspelningsknapp-stilen.
  • Rubrik - Lägg till en rubrik i din video.
  • Videolänk - Lägg till YouTube-URL för din video.
  • Omslagsbild - Lägg till en omslagsbild till din video. Omslagsbilden är dold medan videon spelas upp.
  • Bildjustering – Justera din omslagsbild så att den viktigaste delen alltid är synlig.

Lägga till en video på din startsida

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Lägg till avsnitt> Video.

  3. Använd inställningarna för att anpassa videoavsnittet.

  4. Klicka på Spara.

Bildspel

Du kan lägga till ett bildspel på din hemsida. I bildspelsavsnittet kan du ställa in höjden på bilderna, lägga till text och knappar och välja om bildspelet ska spelas upp automatiskt.

Hemsidan för en onlinebutik kallad Pure Tea som har ett bildspel. En bild med en tekopp på skylt på en bänkskiva visas med rubriken

Se riktlinjerna nedan för mer information om beskärning av bilder för bildspel och rekommenderade bildstorlekar.

Så här skapar du ett bildspel:

  1. Bredvid Debut klickar du på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Bildspel.

  4. Ställ in höjden på dina bilder i rullgardinsmenyn Bildhöjd.

    Läs mer om hur bildhöjd påverkar ditt bildspel.

  5. Ange storleken på dina rubriker och underrubriker i rullgardinsmenyn Textstorlek.

  6. Ställ in var på dina bilder texten ska visas från rullgardinsmenyn Textjustering.

  7. Valfritt: markera visa överlagring. En bildöverlagring är ett färglager mellan en bild och en text som läggs över bilden. Överlagring kan förbättra färgkontrast och läsbarhet. Du kan ställa in färg och opacitet för överlagringen i färginställningar.

  8. Valfritt: markera autorotera bilder för att spela upp bildspelet automatiskt. Välj hur länge varje bild ska visas genom reglaget Byt bild efter.

  9. Gör så här om du vill lägga till en bild i ett bildspel:

    1. Klicka på lägg till bild under Innehåll.
    2. Klicka på välj bild under Bild. Klicka på ladda upp för att ladda upp en bild från din dator. Klicka på gratisbilder i Burst för att använda en kostnadsfri lagerbild.
    3. Välj en placering från rullgardinsmenyn Bildplacering för att ange hur du vill anpassa bilden i bildspelet. Du kan lära dig mer om bildplacering i riktlinjerna nedan.
    4. För att lägga till text i ett bildspel ska du ange texten antingen i fältet Rubrik, fältet Underrubrik eller i båda fälten.
    5. Lägg till en knapp i ditt bildspel genom att ange text i fältet för knappetikett. Välj en del av din webbutik som knappen ska länka till i fältet för knapplänk.
  10. Klicka på Spara.

Riktlinjer för bildspel

Du kan använda inställningarna och bildrekommendationerna nedan för att styra hur ditt bildspel ser ut i din webbutik. Hur dina bilder visas avgörs av följande faktorer:

  • Måtten på dina bilder
  • Dina inställningar för bildposition
  • Dina höjdinställningar
  • Bredd-höjd-förhållande för dina bilder

På grund av skillnader i storlek och form på olika skärmar kan dina bildspel se olika ut på mobila enheter och datorer.

Rekommendationer för bildstorlek

De rekommenderade måtten för bilder i ett bildspel beror på dina inställningar för bildhöjd. Använd följande riktlinjer:

Bildstorleksrekommendationer efter inställning
Inställning av bildhöjd Rekommenderad bredd Rekommenderad höjd
Anpassa efter första bilden 1 200 px 600 px
Liten 1 200 px 475 px
Medium 1 200 px 489 px
Stor 1 200 px 775 px

Se steg 5 i instruktionerna för att skapa ett bildspel för att se eller ändra inställningarna för bildhöjd.

Bildbeskärning

Du kan vidta åtgärder för att kontrollera hur dina bilder beskärs eller för att undvika bildbeskärning helt och hållet.

Kontrollera beskärning av dina bilder

Du kan förvänta dig bildskärning för vissa skärmstorlekar när:

  • Dina bilder inte har samma bredd-höjd-förhållande.
  • Din bildhöjd är inställd som Liten, Medium eller Stor.
  • Din bildhöjd är inställd för att anpassa efter första bilden och dina bilder är högre än enhetens skärm eller webbläsarfönstret.

Du kan styra hur dina bilder beskärs med hjälp av inställningen Image position (bildplacering).

För varje bild kan du välja vilken del du vill ska fortsätta att synas efter beskärning. I följande exempel kan du se hur en bild kan beskäras för vissa skärmstorlekar. Inställningen för placering av bilden till vänster är Middle center (mitten). Inställningen för placering av bilden till höger är Top left (uppe till vänster).

En exempelbild som beskärs annorlunda beroende på inställningar för bildplacering.

Se steg 10 i instruktionerna för att skapa ett bildspel för att se eller ändra inställningarna för bildplacering.

Undvik bildbeskärning

Gör följande för att undvika bildbeskärning i ditt bildspel:

  • Ställ in din bildhöjd till anpassa efter första bilden.
  • Använd bilder som är dubbelt så breda än vad de är höga. Bredd-höjd-förhållandet för sådana bilder är 2:1. De rekommenderade måtten är 1 200 x 600 px.
  • Se till att alla dina bilder har likvärdiga bredd-höjd-förhållanden. Bildernas bredd-höjd-förhållande är viktigare än deras mått i pixlar.

I följande exempel kan du se hur en bild vars förhållande är 2:1 ser ut på en dator och en mobil enhet:

En obeskuren bild visas på en dator och en mobil enhet.

Bildhöjd

Bredden på bildspelsavsnittet är alltid 100 % av webbläsarfönstret. Höjden på dina bilder står i relation till bredden. På grund av skillnader i skärmstorlek varierar bredden och höjden på dina bilder för olika enheter. Höjden på dina bilder påverkas också av dina inställningar för bildhöjd.

Du kan använda höjdinställningen anpassa efter första bilden för att basera bildspelets höjd på höjden på din första bild. Den här inställningen fungerar bäst när alla dina bilder är lika stora eller har samma bredd-höjd-förhållande. Du kan byta ordning för dina bilder i bildspelet för att se hur de ser ut i olika höjder om dina bilder har olika mått eller förhållanden.

I det följande exemplet är den kortaste bildrutan placerad först:

En bildruta som är lägre avgör höjden på de andra två bildrutorna. Bilderna beskärs högst upp och längst ned eftersom att de andra bilderna är högre.

I nästa exempel är en högre bildruta placerad först:

En bildruta som är medelhög avgör höjden på de andra två bildrutorna. Bildrutan som är högre beskärs högst upp och längst ned. Bildrutan som är lägre beskärs på sidorna.

Se rekommendationer för bildstorlekar om du i stället använder höjdinställningarna liten, medium eller stor.

Bildförhållanden

Det rekommenderade bredd-höjd-förhållandet för dina bilder är 2:1 om du vill undvika bildbeskärning i ditt bildspel.

Använd kvadratiska bilder eller bilder som är högre än vad de är breda om du inte har något emot beskärning på datorskärmar och vill att bildspelet ska se bra ut i mobila enheter. I följande exempel visas en kvadratisk bild med bredd-höjd-förhållande 1:1.

En kvadratisk bild visas på en dator och en mobil enhet. Bilden beskärs på datorn, men inte på den mobila enheten.

Nästa exempel visar en stående bild med bredd-höjd-förhållande 2:3.

En hög bild visas på en dator och en mobil enhet. Bilden beskärs på datorn, men inte på den mobila enheten.

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

Prova gratis