Lägg till innehåll - produkter
Använd innehållstypen Produkter om du vill lägga till en lista med produkter på Page Builder scenen, antingen med ett rutnät eller en karuselllayout. Använd verktyget Lägg till innehåll - block för att placera blocket på scenen Page Builder och sedan placera en produktlista inuti blocket. Du kan också lägga till produktlistan direkt på en rad på en sida.
Riktlinjer för användning av karusellen
Produktkarusellen är ett kraftfullt och engagerande sätt att visa upp dina produkter. För att få ut så mycket som möjligt av det rekommenderar vi följande riktlinjer:
-
Lägg in produktkaruseller direkt i sidbreddsbehållare som rader, tabbar eller enkolumnslayouter. Med sidbreddslayouter får du bästa möjliga responsiva visning av dina produkter. Page Builder minskar antalet produkter som visas beroende på sidans bredd, inte behållarens bredd.
-
Lägg inte till en produktkarusell i en smal kolumn. Som vi nämnt fastställer Page Builder som standard antalet produkter som ska visas baserat på sidbredden, inte kolumnbredden.
-
Om du vill att produktkarusellen ska rulla kontinuerligt ställer du in både Autoplay och Infinite Loop på
Yes
. Om Autoplay är inställt påYes
men Infinite Loop är inställt påNo
stoppas den automatiska rullningen i slutet av produktlistan. -
Ange Carousel Mode till
Continuous
för att markera, centrera och rulla en produkt i taget i karusellen. De andra produkterna visas i listan, men de är genomskinliga för att framhäva den centrerade produkten.{width="600"}
-
Om du vill visa och rulla upp till fem produkter i taget i karusellen ska du behålla inställningen Carousel Mode till
Default
.{width="600"}
Följande instruktioner visar hur du lägger till en produktlista i ett block. Du kan sedan använda en widget för att placera blocket på en viss plats på en sida i din butik.
Verktygslådan Produkter
Skapa ett produktlistblock
-
Gå till Content > Elements>Blocks på sidofältet_ Admin _.
-
Klicka på Add New Block.
-
Ange Block Title och Identifier.
-
Välj Store View där blocket ska vara tillgängligt.
-
Bläddra nedåt och klicka på Edit with Page Builder eller i förhandsvisningsområdet för innehåll för att öppna arbetsytan i Page Builder.
-
Expandera Add Content på panelen Page Builder och dra en Products platshållare till scenen.
{width="600" modal="regular"}
Konfigurera behållaren för produktlistan
Håll pekaren över den tomma behållaren för Produkter för att visa verktygslådan och klicka på ikonen Inställningar ( {width="20"} ).
Slutför inställningarna enligt följande avsnitt:
Utseende
-
Om du vill bestämma hur produktlistan ska visas på sidan väljer du en av utseendetyperna:
table 0-row-2 1-row-2 2-row-2 layout-auto Typ Beskrivning Produktstödraster Visar produkterna i ett rutnät som visar fem produkter per rad (som standard), med så många rader som krävs för att visa numret som anges i inställningen Number of Products to Display. Product Carousel Visar produkterna i en karusell (kallas även skjutreglage). Karusellen visar upp till fem produkter per bild.
Varning!: När du väljer det här utseendet är det bäst att lägga till innehållstypen Produkter direkt i en rad-, flik- eller enkolumnslayout där den är responsiv, med färre produkter per sida på mindre skärmar. Om du lägger till den i innehållstyper som är smalare än sidans bredd (till exempel en smal kolumn), visar karusellen fler produkter per bildruta än vad behållaren tillåter, oavsett skärmstorlek.{width="300"}
Om du väljer produktkarusellen måste du även konfigurera Carousel-inställningarna.
-
För Select Products By väljer du metod för produktval:
Du kan välja produkter efter kategori, SKU eller villkor. Dessa alternativ utesluter varandra. Du kan t.ex. inte markera alternativet Kategori, använda kategoriväljaren och sedan växla till alternativet Villkor för att lägga till vissa villkor. Dina produkter väljs endast baserat på vad du ställt in för ett av dessa tre alternativ.
-
Category - Välj det här alternativet om du vill visa produkter med en vald kategori.
{width="500"}
När det här alternativet är markerat innehåller det en Category-väljare. Klicka på pilen och gå ned för att välja vilken produktkategori som ska visas. I exempeldata för Commerce visar t.ex. borrning in och val av Kvinnor > Tops > Tees alla produkter för den kategorin.
{width="500"}
-
SKU - Välj det här alternativet om du vill visa produkter med en eller flera SKU:er
När det här alternativet är markerat innehåller det en Product SKUs-textruta där du måste ange en kommaavgränsad lista med SKU:er som ska visas.
{width="500"}
-
Condition - Välj det här alternativet om du vill visa produkter enligt ett eller flera villkor som du anger.
När du väljer det här alternativet finns det verktyg som du kan använda för att lägga till villkor i produkturvalet. Du kan till exempel bara välja produkter med könet inställt på Unisex.
{width="500"}
note note NOTE Om du väljer Kategori eller SKU-alternativ får du alternativet Sort By för Position
. Med det här sorteringsalternativet visas produkterna i samma ordning som de visas i din katalog.För alternativet Kategori visas produkterna i samma ordning som de visas i katalogen när de sorteras efter position. För SKU-alternativet visas produkterna i den ordning som du anger dem i textrutan Product SKUs när du sorterar efter position.
-
-
För Sort By väljer du sorteringsordning för produkterna i listan:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 11-row-2 layout-auto Alternativ Beskrivning Position
(endast för kategori- och SKU-alternativ)När du väljer alternativet Kategori visas produkterna i samma ordning som de befinner sig i katalogen. När du väljer SKU-alternativet visas produkterna i samma ordning som SKU:erna i textrutan Produkt-SKU:er. Newest products first
Sorterar produkter efter det datum då de lades till i katalogen och visar produkterna med de senaste anmälningsdatumen först. Oldest products first
Sorterar produkterna efter det datum de lades till i katalogen och visar de produkter som har de äldsta anmälningsdatumen först. Name: A - Z
Sorterar produkterna i alfabetisk ordning. Name: Z - A
Sorterar produkterna i omvänd alfabetisk ordning. SKU: ascending
Sorterar produkter efter SKU i alfanumerisk ordning. SKU: descending
Sorterar produkter efter SKU i omvänd alfanumerisk ordning. Stock: low stock first
Sorterar produkter från det lägsta till det högsta tillgängliga lagret. Stock: high stock first
Sorterar produkter från det högsta till det lägsta tillgängliga lagret. Price: high to low
Sorterar produkter från högsta till lägsta pris. Price: low to high
Sorterar produkter från lägsta till högsta pris. {width="300"}
-
Ange Number of Products to Display i karusellen eller rutnätet.
Värden kan vara från
1
till999
. Standardvärdet är5
för ett rutnät och20
för en karusell.note note NOTE Vissa produkter i inställningarna för Kategori, SKU eller Villkor kanske inte visas i produktrutnätet eller karusellen. Till exempel visas inte inaktiverade produkter, produkter som inte är synliga, produkter som inte finns i lager och produkter som är tilldelade till en annan webbplats. note important IMPORTANT Priserna för konfigurerbara, grupperade och paketerade (dynamiskt pris) produkter är odefinierade i administratören. Därför visas dessa produkter inte i Preview om produkterna filtreras efter pris. Dessa produkter kan inte beställas korrekt i Preview om de beställs enligt pris.
Carousel-inställningar
-
Om du vill bestämma hur produkterna visas i karusellen väljer du Carousel Mode:
table 0-row-2 1-row-2 2-row-2 layout-auto Alternativ Beskrivning Default
Carousel visar som standard fem produkter per bild och minskar responsivt det antalet efter behov. Continuous
Carousel visar fem produkter per bild som standard (med hälften av en produkt till höger och vänster), men centrerar och rullar en produkt i taget i en oändlig slinga. Produkterna till höger och vänster om den centrerade produkten är nedtonade så att den centrala produkten markeras. Om du växlar mellan dessa två lägen behålls övriga Carousel-inställningar, förutom inställningen Infinite Loop som alltid är inställd på
Yes
i läget Kontinuerligt och fältet inaktiveras.{width="600" modal="regular"}
-
Ange alternativet Autoplay till
Yes
om det behövs.När automatisk uppspelning är aktiverat börjar karusellen rulla automatiskt när sidan läses in. Om du lämnar standardinställningen (
No
) måste kunden klicka på bildrutenavigeringen (punkter eller pilar) för att visa varje bildruta i sekvens.Om du aktiverar den här funktionen anger du Autoplay Speed för att ange fördröjningen i millisekunder mellan varje bildruta. Standardvärdet är
4000
(4 sekunder). -
Ange alternativet Infinite Loop till
Yes
om det behövs.När oändlig slinga är aktiverad spelas bildspelet upp oändligt när sidan är öppen. Om du lämnar standardinställningen (
No
) spelas bildspelet bara upp en gång.note note NOTE Om du anger Infinite Loop till No
och Autoplay tillYes
stoppas uppspelningen automatiskt i slutet av det antal produkter som ska visas. -
Ange alternativet Show Arrows till
Yes
om det behövs.När det här alternativet är aktiverat innehåller varje bild next och previous navigeringspilar till vänster och höger. Om du lämnar standardinställningen (
No
) visas inte navigeringspilarna i bildrutorna. -
Ange alternativet Show Dots till
No
om det behövs.När den är inställd på standardinställningen (
Yes
) visas navigeringspunkter längst ned i karusellreglaget. Om du inaktiverar den här inställningen visas inga navigeringspunkter i Carousel-reglaget.
Avancerat
-
Om du vill styra placeringen av produktlistan i den överordnade behållaren väljer du Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Alternativ Beskrivning Default
Använder den standardinställning för justering som anges i formatmallen för det aktuella temat. Left
Justerar listan längs den vänstra kanten på den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts. Center
Justerar listan i mitten av den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts. Right
Justerar listan längs den högra kanten på den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts. -
Ange det Border-format som ska användas på alla fyra sidor i produktbehållaren:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Alternativ Beskrivning Default
Använder det standardkantlinjeformat som anges av den associerade formatmallen. None
Visar inte någon synlig indikation för behållarkanterna. Dotted
Behållarramen visas som en prickad linje. Dashed
Behållarramen visas som en streckad linje. Solid
Behållarramen visas som en heldragen linje. Double
Behållarramen visas som en dubbel linje. Groove
Behållarkanten visas som en utdragen linje. Ridge
Behållarkanten visas som en rak linje. Inset
Behållarramen visas som en indragen linje. Outset
Behållarramen visas som en startrad. -
Om du anger ett annat kantlinjeformat än
None
fyller du i visningsalternativen för kantlinjen:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Alternativ Beskrivning Border Color Ange färgen genom att välja en färgruta, klicka på färgväljaren eller genom att ange ett giltigt färgnamn eller motsvarande hexadecimalt värde. Border Width Ange antalet pixlar för kantlinjens bredd. Border Radius Ange antalet pixlar för att definiera radiens storlek som används för att runda varje hörn av kanten. -
(Valfritt) Ange namnen på CSS classes från den aktuella formatmallen som ska användas för behållaren.
Avgränsa flera klassnamn med blanksteg.
-
Ange värden, i pixlar, för Margins and Padding för att bestämma de yttre marginalerna och den inre utfyllnaden för behållaren Produkter.
Ange motsvarande värden i diagrammet.
table 0-row-2 1-row-2 2-row-2 Behållarområde Beskrivning Margins Mängden tomt utrymme som används på ytterkanten på behållarens alla sidor. Alternativ: Top
/Right
/Bottom
/Left
Padding Mängden tomt utrymme som används på behållarens inre kant på alla sidor. Alternativ: Top
/Right
/Bottom
/Left
Spara och förhandsgranska på scenen
Klicka på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.
Om du har konfigurerat en karusell bör den se ut ungefär som i följande exempel:
Du kan nu använda en widget för att placera det här blocket där du vill att det ska visas i butiken. Du kan också använda Lägg till innehåll - block för att lägga till blocket på en befintlig sida, flik eller block.