Pop

Ett minimalistiskt tema som är utformat för att tillgängliggöra ditt innehåll. Pop-temat är idealiskt för butiker med små till medelstora lager. Pop är utformat runt ett stort sidofält med navigeringsfunktioner som gör att ditt innehåll är lättåtkomligt.

Exempel på webbutiker som använder Pop

Temaredigerare

Använd temaredigeraren för att anpassa ditt tema. Verktygsfältet för att redigera temat är indelat i Avsnitt och Temainställningar.

Temaredigerarens verktygsfält som visar Avsnitts- och Temainställningar

Du kan använda avsnitt för att ändra innehåll och layout för de olika sidorna i din butik. Du kan använda temainställningar för att anpassa din butiks teckensnitt och färger och göra ändringar i dina länkar till sociala medier och i dina kassainställningar.

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 s unika urval av avsnitt och hur man anpassar dem för att passa ditt företag.

Pop inkluderar följande statiska avsnitt:

  • Logotyp och meny
  • Meddelandefält
  • Sidfot
  • Produktsidor
  • Produktseriesidor
  • Kollektionslistsida
  • Artikel

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.

Pop inkluderar följande dynamiska avsnitt:

  • Blogginlägg
  • Kollektionslista
  • Utvald kollektion
  • Bild med text
  • Bildspel
  • Utvald produkt
  • Nyhetsbrev
  • Karta
  • Rik text
  • Video
  • Anpassa HTML

Produktsidor

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

  • Varumärket eller säljaren
  • Bildzoom
  • Relaterade produkter
  • En kvantitetsväljare
  • En dynamisk kassaknapp
  • Ikoner för social delning

Så här redigerar du inställningarna för produktsidor:

  1. Välj Produktsidor i rullgardinsmenyn.

  2. Klicka på Avsnitt.

  3. Klicka på Produktsida.

  4. Markera Visa produktsä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.

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

  6. Markera visa relaterade produkter för att visa ett urval av relaterade produkter längst ned på sidan. Den kollektion som produkten tillhör avgör vilka relaterade produkter som visas. Skapa en kollektion för produkten eller lägg till den i en befintlig kollektion för att relaterade produkter ska kunna visas. Inga relaterade produkter kommer att visas om produkten inte ingår i en kollektion.

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

  8. Markera Visa dynamisk kassaknapp för att visa en dynamisk kassaknapp.

  9. Markera aktivera produktdelning för att visa ikoner för delning i sociala medier.

  10. 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. Hitta Pop och klicka på Anpassa.

  2. Klicka på Avsnitt.

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

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

  5. Ange en underrubrik till prenumerationsformuläret för ditt nyhetsbrev i fältet Undertext. Standardtexten är "Kampanjer, nya produkter och försäljning. Direkt till din inkorg."

  6. Ställ in bakgrundsfärg i avsnittet för nyhetsbrevsregistrering genom att klicka på färgkartan för bakgrundsfärg och välja en färg.

  7. Klicka på Spara.

Video

Du kan lägga till en video som har laddats upp till YouTube eller Vimeo till din hemsida. Videor kan engagera kunder och generera intresse för ditt företag.

Så här lägger du till en video på din startsida:

  1. Hitta Pop och klicka på Anpassa.

  2. Klicka på Avsnitt.

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

  4. Ange en rubrik för din video i fältet Rubrik.

  5. Ange delningslänken för ditt videoklipp i fältet Videolänk.

    En delningslänk för YouTube ser ut så här: https://youtu.be/OTJXAUZY9t0. Du kan läsa om hur man kopierar en delningslänk för en YouTube-video i den här hjälpartikeln om YouTube.

    En delningslänk för Vimeo ser ut så här: https://vimeo.com/281332510. Du kan läsa om hur man kopierar en delningslänk för en Vimeo-video i den här hjälpartikeln om Vimeo.

  6. Klicka på Spara.

Anpassa HTML

I avsnittet Anpassad HTML kan du använda HTML-kod för att skapa anpassat innehåll till din startsida. Du kan till exempel använda HTML för att formatera textblock, skapa tabeller eller bädda in innehåll från en tredjepartswebbplats.

Lägg till anpassad HTML på din hemsida:

  1. Hitta Pop och klicka på Anpassa.

  2. Klicka på Avsnitt.

  3. Klicka på Lägg till avsnitt.

  4. Klicka på Anpassad HTML > Lägg till i området Avancerad layout.

  5. Klicka på Anpassad HTML och ange den HTML-kod som du vill lägga till på din startsida.

  6. Klicka på Spara.

Temainställningar Du kan använda temainställningar för att anpassa färger och typografi i din webbutik. Du kan även skapa länkar till dina konton i sociala medier, redigera dina varukorgsinställningar och lägga till en Favicon.

Pop innehåller följande temainställningar:

  • Färger
  • Typografi
  • Favicon
  • Varukorgssida
  • Sociala medier
  • Utcheckningskassa

Färger

Du kan välja färger för olika delar av din webbutik.

Anpassa dina färginställningar

  1. Bredvid **** klickar du på Anpassa.

  2. Klicka på Temainställnngar.

  3. Klicka på Färger.

  4. För varje innehållstyp klickar du på färgfönstret för att använda färgväljaren:

    Färgväljaren i temaredigeraren

- Området Senast valda visar de färger som du senast valde för ditt tema. - Området Används för närvarande visar de färger som du för närvarande använder i andra delar av ditt tema.

För att ställa in färgen till transparent, klicka på Ingen.

  1. Klicka på Spara.

Typografi

Du kan ställa in teckensnittsstil och storlek på texten i din webbutik.

Anpassa dina typografiinställningar

  1. Bredvid **** klickar du på Anpassa.

  2. Klicka på Temainställnngar.

  3. Klicka på Typografi.

  4. För varje texttyp klickar du på Ändra för att använda typsnittsväljaren:

  5. Utforska typsnitt genom att använda sökfältet, eller genom att klicka på Ladda fler.

    Se Shopifys teckensnittsbibliotek för att se alla tillgängliga teckensnitt.

  6. Klicka på namnet på det typsnitt du vill använda.

  7. Om du vill ändra teckensnittet till en annan stil, så som fet eller kursiv, klickar du på Vanligt. Klicka sedan på den stil du vill använda och klicka på Välj:

    Ett urval av typsnitt som finns tillgängliga i typsnittsväljaren

  8. Klicka på Spara.

Sociala medier

Du kan lägga till knappar för delning till sociala medier för dina produkter och blogginlägg och länkar till dina sociala medier-konton.

Så här anpassar du inställningarna för sociala medier:

  1. Hitta Pop och klicka på Anpassa.

  2. Klicka på Temainställningar.

  3. Klicka på Sociala medier.

  4. Klicka på välj bild eller se gratisbilder under Bilder för delning till sociala medier för att ladda upp en bild för delning till sociala medier.

  5. Ange länkar till dina konton i de avsedda fälten för att lägga till länkar till dina sociala medier-konton under Sociala konton. Ange fullständiga länkar, till exempel https://instagram.com/shopify eller https://twitter.com/shopify.

    Länkar till dina sociala medier-konton visas i webbutikens sidfot.

  6. Markera en eller flera av kryssrutorna under alternativ för delning till sociala medier för att lägga till knappar för social delning vid dina produkter och i bloggposter.

    Du kan lägga till följande delningsknappar:

- Dela på Facebook - Twittra på Twitter - Pin på Pinterest (inte tillgänglig för delning av blogginlägg)

  1. Klicka på Spara.

Observera: Om du vill visa knappar för delning till sociala medier på produktsidor och i bloggposter måste du också aktivera knapparna i avsnitten för de sidorna.

Lägg till undermenyer till sidofältet

Skapa menyer på navigeringssidan för att lägga till rullgardinsmenyer i din huvudmeny. Denna artikel förklarar den processen.

Optimal storlek på butikslogotyp

En proportionellt kompakt logotyp ser bäst ut i Pop-temat eftersom det visar din logotyp i ett sidofält. Bannerliknande logotyper, med stor bredd och relativt liten höjd, ser inte bra ut i det temat.

Maximal bredd för din logotyp är 450 pixlar, och den maximala höjden är 200 pixlar. Din uppladdade logotypfil kommer att justeras för att passa inom dessa begränsningar.

PNG är det idealiska formatet.

Gör din logotyp större på mobila enheter

Först och främst är det extremt viktigt att minska allt negativt utrymme eller alla transparenta pixlar runt din logotyp innan du laddar upp filen till Shopify.

Här är en logotyp med gott om negativt utrymme runt den:

Här är samma logotyp när dessa faktorer minskas — när allt negativt utrymme har skurits bort:

Logotypen som inte har anpassats visas nedan när den används i Pop-temat:

Den anpassade logotypen visas nedan när den används i Pop-temat:

När du vet att din logotyp inte går att göra mindre p.g.a. dess negativa utrymme kan du justera höjden på din mobila header för att ge din logotyp utrymme att expandera. Som ett resultat blir din logotyp större.

Gå till temaredigeraren i avsnittet Header och navigering och öka värdet för "Storlek > Menyhöjd i mobila enheter".

Gör din logotyp större i sidofältet

Först och främst är det extremt viktigt att minska allt negativt utrymme eller alla transparenta pixlar runt din logotyp innan du laddar upp filen till Shopify.

Här är en logotyp med gott om negativt utrymme runt den:

Här är samma logotyp när dessa faktorer minskas — när allt negativt utrymme har skurits bort:

Logotypen med det negativa utrymmet visas nedan när den laddas upp i Pop-temat:

Den anpassade logotypen visas nedan när den används i Pop-temat:

När du vet att din logotyp inte går att göra mindre p.g.a. dess negativa utrymme kan du justera bredden på ditt sidofält för att ge din logotyp utrymme att expandera. Som ett resultat blir din logotyp större.

Gå till temaredigeraren i avsnittet Header och navigering och öka värdet för "Storlek > Menybredd på datorer".

Reducera tomt utrymme runt logotypen i sidofältet

Innan du tar bort utfyllnaden som läggs till av pop-temat ovanför och under din logotyp är det extremt viktigt att trimma eventuell utfyllnad som kan komma från själva bilden. Du måste trimma det negativa utrymmet eller genomskinliga pixlar som omger din logotypbilden innan du laddar upp filen till Shopify.

Här är en logotyp med gott om negativt utrymme runt den:

Här är samma logotyp när dessa faktorer minskas – när det negativa utrymmet har skurits bort:

Logotypen som inte har anpassats visas nedan när den används i Pop-temat:

Den anpassade logotypen visas nedan när den används i Pop-temat:

När du har laddat upp en anpassad logotyp till ditt kan du justera bredden på din sidomeny med temaredigeraren. I avsnittet Sidhuvud & Navigation redigerar du värdet "Dimensionering > Skrivbordets menybredd" efter din egen smak.

Som en slutlig åtgärd, för vilken support inte tillhandahålls, kan du följa dessa steg för att reducera utfyllnad ovan och under din logotyp:

  1. Klicka på timber.scss.liquid under Tillgångar för att öppna temats formatmall i online-kodredigeraren, eller gå till denna URL.

  2. Lägg till detta längst ned i filen:

`sass {% comment %} Följande medieförfrågningsfunktion ger detta: @media-skärm och (minimibredd: 1025 pixlar) {...} Sidomenyn visas endast när bredden är > 1025 pixlar. {% endcomment %}.

@include at-query ($min, $large) {.header-logo {margin-bottom: 30px / * original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} `

  1. Spara din fil.

Redigera inställningarna för produktsidan

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

  • Varumärket eller säljaren
  • Bildzoom
  • Relaterade produkter
  • En kvantitetsväljare
  • En dynamisk kassaknapp
  • Ikoner för social delning

Så här redigerar du inställningarna för produktsidor:

  1. Välj Produktsidor i rullgardinsmenyn.

  2. Klicka på Avsnitt.

  3. Klicka på Produktsida.

  4. Markera Visa produktsä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.

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

  6. Markera Visa relaterade produkter för att visa ett urval av relaterade produkter längst ned på sidan. Den kollektion som produkten tillhör avgör vilka relaterade produkter som visas. Skapa en kollektion för produkten eller lägg till den i en befintlig kollektion för att relaterade produkter ska kunna visas. Inga relaterade produkter kommer att visas om produkten inte ingår i en kollektion.

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

  8. Markera Visa dynamisk kassaknapp för att visa en dynamisk kassaknapp.

  9. Markera aktivera produktdelning för att visa ikoner för delning i sociala medier.

  10. Klicka på Spara.

Rekommenderade typer av produktbilder för Pop

Bilder med högre upplösning kommer att se mer polerade och professionella ut i Pop-temat, och vi rekommenderar därför att du använder bilder som är minst 1024 x 1024 px. Ju högre kvalitet, desto bättre eftersom att bilder automatiskt kommer att skalas ned vid behov.

Bilder med högre upplösning är särskilt viktiga om du använder funktionen Bildzoom, som du kan aktivera i Temaredigeraren i avsnittet Produktsidor:

I bästa fall kommer dina framhävda produktbilder att ha samma bredd-höjd-förhållande för att se så bra ut som möjligt på kollektionssidorna.

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

Prova gratis