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. Med temaredigeraren kan du redigera innehållet som visas i butiken genom att lägga till och redigera temasektioner. Du kan även ändra butikens utseende, känsla och funktionalitet med hjälp av temainställningarna.

Temainnehåll byggs med hjälp av avsnitt. Avsnitt är anpassningsbara innehållsblock som bestämmer layouten och utseendet för olika sidor i din webbutik.

Statiska avsnitt är avsnitt som visas på förutbestämda platser i din webbutik. Dessa avsnitt kan inte tas bort eller ordnas om. Statiska avsnitt kan bland annat vara sidhuvuden, sidfötter, navigeringsavsnitt eller innehållsavsnitt på sidor såsom produktsidor och produktseriesidor. Avsnittet Product (Produkt) avgör exempelvis utseendet för varje produktsida i din webbutik.

Dynamiska avsnitt är valfria avsnitt som du kan använda för att skräddarsy din startsidas layout. På butikens startsida kan du skapa en sidlayout genom att lägga till, omorganisera och ta bort dynamiska avsnitt. Du kan ha upp till 25 dynamiska avsnitt på din startsida.

Du kan lära dig om Pops 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
  • Rich 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.

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

  1. Klicka på Avsnitt.

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

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

  4. 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."

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

  6. 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. Klicka på Avsnitt.

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

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

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

  5. 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 ett anpassat HTML-avsnitt på din startsida

  1. Klicka på Lägg till avsnitt.

  2. Klicka på Custom HTML (anpassad HTML), och klicka sedan på Välj.

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

  4. Klicka på Spara.

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
  • Kassa

Färger

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

Anpassa dina färginställningar

  1. Klicka på Temainställnngar.
  2. Klicka på Färger.
  3. För att öppna färgväljaren klickar du på färgkartan för den innehållstypsfärg som du vill ändra. 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.

    Om du vill ställa in en specifik hexfärgkod klickar du på textfältet för att ange färgen.

    Radera hexkodvärdet från textfältet för att ställa in färgen till transparent.

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

Det rekommenderas att du använder systemtypsnitt i din butik. Om du använder systemtypsnitt undviker du att ladda ner nya typsnitt till din kunds dator, vilket kan påverka din butiks laddningshastighet negativt. Vilket typsnitt som visas på din kunds dator beror på deras operativsystem. Läs mer om systemtypsnitt.

Anpassa dina typografiinställningar

  1. Klicka på Temainställnngar.

  2. Klicka på Typografi.

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

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

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

  6. Om du vill ändra typsnittet till en annan stil klickar du på namnet på den aktuella teckensnittsstilen och väljer sedan en ny teckensnittsstil från rullgardinsmenyn.

  7. Klicka på Välj.

  8. Klicka på Spara.

Sociala medier

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

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

  1. Klicka på Temafärllningar.

  2. Klicka på Sociala medier.

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

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

  5. 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 - Tweet 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.

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.

Det blir särskilt viktigt med bilder med högre upplösning 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