DocumentatieCommercePage Builder

Inhoud toevoegen - Producten

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Beginner
  • tussenpersoon
  • Gebruiker

Gebruik het inhoudstype van Producten om een lijst van producten aan het Page Builder stadiumtoe te voegen, gebruikend of een net of carrousellay-out. Gebruik toevoegen Inhoud - het hulpmiddel van het Blokom het blok op het Page Builder stadium te plaatsen en dan een productlijst binnen het blok te plaatsen. U kunt de productlijst ook rechtstreeks in een rij op een pagina toevoegen.

Richtlijnen voor het gebruik van de productcarrousel

De productcarrousel biedt een krachtige en boeiende manier om uw producten te laten zien. Om er het beste uit te halen, worden de volgende richtlijnen geadviseerd:

  • Voeg productcarrousels rechtstreeks toe aan containers met paginabreedte, zoals rijen, tabbladen of lay-outs met één kolom. Door lay-outs met paginabreedte kunt u uw producten het beste weergeven. Page Builder vermindert het aantal producten dat wordt weergegeven, afhankelijk van de breedte van de pagina, niet de breedte van de container.

  • Voeg geen productcarrousel aan een smalle kolom toe. Zoals vermeld, bepaalt Page Builder, door gebrek, het aantal producten aan vertoning gebaseerd op de paginabreedte, niet de kolombreedte.

  • Stel zowel Autoplay als Infinite Loop in op Yes als u wilt dat de productcarrousel continu automatisch schuift. Als Automatisch afspelen is ingesteld op Yes maar de optie Oneindige lus is ingesteld op No , stopt automatisch schuiven aan het einde van de lijst met producten.

  • Stel Carousel Mode in op Continuous om één product tegelijk in de carrousel te markeren, centreren en schuiven. De andere producten zijn zichtbaar in de lijst, maar transparant om het gecentreerde product te benadrukken.

    lijst van het Product op ononderbroken carrouselwijze {width="600"}

  • Als u in de carrousel maximaal vijf producten tegelijk wilt weergeven en schuiven, stelt u de Carousel Mode in op Default .

    lijst van het Product op standaardcarrouselwijze {width="600"}

De volgende instructies tonen hoe te om een lijst van Producten aan een blok toe te voegen. U kunt a widgetdan gebruiken om het blok bij een specifieke plaats op om het even welke pagina in uw opslag te plaatsen.

NOTE
Als u significante veranderingen in Page Builder inhoud aanbrengt, adviseert men dat u het Levenslang van de Zitting Adminverhoogt om de zitting te verhinderen uit timing terwijl u werkt.

De werkset Producten

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {width="25"}
Hiermee verplaatst u de productcontainer en de inhoud ervan naar een andere positie in het werkgebied.
Instellingen
pictogram van Montages {width="25"}
Opent uitgeeft Producten pagina, waar u de productlijst kunt kiezen en de eigenschappen van de container veranderen.
Verbergen
het pictogram van de Huid {width="25"}
Verbergt de huidige productcontainer en de inhoud ervan.
Tonen
toon pictogram {width="25"}
Toont de container van de verborgen producten en zijn inhoud.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van de container met producten en de inhoud ervan.
Verwijderen
verwijder pictogram {width="25"}
Hiermee verwijdert u de productcontainer en de inhoud ervan uit het werkgebied.
NOTE
Verborgen elementen worden opgeslagen in de database en onzichtbaar voor klanten. Deze elementen zijn echter zichtbaar voor zoekmachines en andere bots die uw site kruipen. Ze worden ook geretourneerd als onderdeel van de inhoud als ze worden opgevraagd via een API-aanroep met een kenmerk van onzichtbaarheid, tenzij u ze uit het werkgebied verwijdert.

Een productlijstblok maken

  1. Voor Admin sidebar, ga Content > Elements>Blocks.

  2. Klik op Add New Block.

  3. Voer de Block Title en Identifier in.

  4. Kies de locatie Store View waar het blok beschikbaar moet zijn.

  5. Schuif omlaag en klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud om de werkruimte van Page Builder te openen.

  6. Vouw Add Content uit in het deelvenster Page Builder en sleep een tijdelijke aanduiding Products naar het werkgebied.

    voeg het inhoudstype van Producten {width="600" modal="regular"} toe

De container voor de lijst met producten configureren

Beweeg over de lege container van Producten om toolbox te tonen en te klikken Montages ( pictogram van Montages {width="20"}).

Toolbox van Producten

Voltooi de Montages volgens de volgende secties:

Weergave

  1. Om te bepalen hoe de lijst met producten op de pagina wordt weergegeven, kiest u een van de weergavetypen:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Type Beschrijving
    Productraster Geeft de producten weer in een raster met standaard vijf producten per rij, met zoveel rijen als nodig zijn om het getal weer te geven dat u hebt ingevoerd in de instelling Number of Products to Display .
    Product Carousel Geeft de producten in een carrousel weer (ook wel schuifregelaar genoemd). De carrousel bevat maximaal vijf producten per dia.

    Alarm van de Reactie: Wanneer u deze verschijning selecteert, is het best om het inhoudstype van Producten aan een rij, een lusje, of een-kolomlay-out direct toe te voegen waar het ontvankelijk is, tonend minder producten per kant op kleinere schermen. Als u het aan inhoudstypes toevoegt die smaller zijn dan de breedte van de pagina (zoals een smalle kolom), toont de carrousel meer producten per dia dan de container toestaat, ongeacht de schermgrootte.

    de verschijning van het Product {width="300"}

    Als u de productcarrousel kiest, moet u ook de Montages van de Carrouselvormen.

  2. Kies bij Select Products By de methode voor productselectie:

    U kunt uw producten op categorie, SKU, of voorwaarde selecteren. Deze opties sluiten elkaar uit. U kunt bijvoorbeeld niet de optie Categorie selecteren, de Categoriekiezer gebruiken en vervolgens overschakelen op de optie Voorwaarde om enkele voorwaarden toe te voegen. Uw producten worden geselecteerd gebaseerd slechts op wat u voor één van deze drie opties plaatst.

    • Category - Kies deze optie om producten met een geselecteerde categorie weer te geven.

      de selectie van het Product door categorie {width="500"}

      Als deze optie is geselecteerd, beschikt u over een Category kiezer. Klik op de pijl en boor omlaag om de productcategorie te kiezen die u wilt weergeven. Bijvoorbeeld, in de Commerce steekproefgegevens, het borstelen binnen en het selecteren van de Vrouwen > Tops > Tees toont alle producten voor die categorie.

      Selecterend een cataloguscategorie {width="500"}

    • SKU - Kies deze optie om producten weer te geven met een of meer SKU's

      Als deze optie is geselecteerd, wordt in het tekstvak Product SKUs een lijst met SKU's met komma's weergegeven.

      selectie van het Product door SKU {width="500"}

    • Condition - Kies deze optie om producten weer te geven onder een of meer voorwaarden die u definieert.

      Als deze optie is geselecteerd, zijn er gereedschappen beschikbaar waarmee u voorwaarden kunt toevoegen aan de selectie van uw producten. U kunt bijvoorbeeld alleen producten selecteren waarvoor de optie Geslacht is ingesteld op Unisex.

      selectie van het Product door voorwaarde {width="500"}

      note note
      NOTE
      Als u de optie Categorie of SKU selecteert, kunt u de optie Sort By van Position kiezen. Met deze sorteeroptie, verschijnen de producten in de zelfde orde dat zij in uw catalogus verschijnen.
      Als u voor de optie Categorie sorteert op positie, worden de producten in dezelfde volgorde weergegeven als in de catalogus. Bij de optie SKU worden de producten weergegeven in de volgorde waarin u ze invoert in het tekstvak Product SKUs .

  3. Kies bij Sort By de sorteervolgorde voor de producten in de lijst:

    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
    Optie Beschrijving
    Position (alleen voor opties voor Categorie en SKU) Als u de optie Categorie selecteert, worden de producten in dezelfde volgorde weergegeven als de positie in de catalogus. Wanneer u de optie SKU selecteert, toont de Positie producten in de zelfde orde zoals SKUs binnen het van het Product SKUs textbox.
    Newest products first Sorteert producten door de datum dat zij aan de catalogus werden toegevoegd, tonend de producten met de meest recente ingangsdata eerst.
    Oldest products first Sorteert producten door de datum dat zij aan de catalogus werden toegevoegd, tonend de producten met de oudste ingangsdata eerst.
    Name: A - Z Sorteert producten in alfabetische volgorde.
    Name: Z - A Sorteert producten in omgekeerde alfabetische volgorde.
    SKU: ascending Sorteert producten op SKU in alfanumerieke orde.
    SKU: descending Sorteert producten door SKU in omgekeerde alfanumerieke orde.
    Stock: low stock first Sorteert producten van de laagste tot de hoogste beschikbare voorraad.
    Stock: high stock first Sorteert producten van de hoogste aan de laagste beschikbare voorraad.
    Price: high to low Sorteert producten van hoogste aan laagste prijs.
    Price: low to high Sorteert producten van laagste tot hoogste prijs.

    de sorteeropties van het Product {width="300"}

  4. Voer de Number of Products to Display in de carrousel of het raster in.

    Waarden kunnen variëren van 1 tot 999 . De standaardwaarde is 5 voor een raster en 20 voor een carrousel.

    note note
    NOTE
    Sommige producten in de instellingen Categorie, SKU of Voorwaarde worden mogelijk niet weergegeven in het raster of de carrousel van uw producten. Bijvoorbeeld, gehandicapte producten, producten die als niet zichtbaar worden gemerkt, uit-van-voorraad producten, en producten die aan een andere website worden toegewezen worden niet getoond.
    note important
    IMPORTANT
    De prijzen voor configureerbare, gegroepeerde en gebundelde (dynamische prijs) producten zijn ongedefinieerd in Admin. Deze producten worden daarom niet weergegeven in Preview als de producten op prijs worden gefilterd. Deze producten kunnen niet correct in Preview worden bevolen als bevolen door prijs.

  1. Kies de optie Carousel Mode om te bepalen hoe de producten in de carrousel worden weergegeven:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Optie Beschrijving
    Default In de carrousel worden standaard vijf producten per dia weergegeven en wordt dit aantal indien nodig responsief verlaagd.
    Continuous De carrousel geeft standaard vijf producten per dia weer (met de helft van een product rechts en links), maar centreert en verschuift één product tegelijk in een oneindige lus. De producten aan het recht en de linkerzijde van het gecentreerde product worden verduisterd zodat het centrumproduct wordt benadrukt.

    Als u tussen deze twee modi schakelt, blijven de andere carrouselinstellingen behouden, behalve de instelling Infinite Loop , die altijd is ingesteld op Yes in de modus Doorlopend en het veld is uitgeschakeld.

    de Montages van Carousel {width="600" modal="regular"}

  2. Stel indien nodig de optie Autoplay in op Yes .

    Wanneer Automatisch afspelen is ingeschakeld, wordt automatisch door de carrousel geschoven wanneer de pagina wordt geladen. Als u het gebrek plaatst (No) verlaat, moet de klant de dianavigatie (punten of pijlen) klikken om elke dia in opeenvolging te tonen.

    Als u deze functie inschakelt, voert u Autoplay Speed in om de vertraging in milliseconden tussen elke dia op te geven. De standaardwaarde is 4000 (4 seconden).

  3. Stel indien nodig de optie Infinite Loop in op Yes .

    Als een oneindige lus is ingeschakeld, wordt de presentatie eindeloos opnieuw afgespeeld terwijl de pagina is geopend. Als u de standaardinstelling (No) verlaat, wordt de presentatie slechts eenmaal afgespeeld.

    note note
    NOTE
    Als u Infinite Loop instelt op No en Autoplay instelt op Yes , stopt het automatisch afspelen aan het einde van het aantal producten dat moet worden weergegeven.

  4. Stel indien nodig de optie Show Arrows in op Yes .

    Wanneer deze optie wordt toegelaten, omvat elke dia volgende en vorige navigatiepijlen op de linker en juiste kant. Als u het gebrek het plaatsen (No) verlaat, tonen de dia's geen navigatiepijlen.

  5. Stel indien nodig de optie Show Dots in op No .

    Wanneer ingesteld op de standaardinstelling (Yes), worden navigatiepunten weergegeven onder aan de schuifregelaar carrousel. Als u deze instelling uitschakelt, geeft de schuifregelaar carrousel geen navigatiepunten weer.

Geavanceerd

  1. Kies de optie Alignment als u de plaatsing van de lijst Producten in de bovenliggende container wilt bepalen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Optie Beschrijving
    Default Hiermee past u de standaardinstelling voor uitlijning toe die is opgegeven in het stijlblad van het huidige thema.
    Left Hiermee lijnt u de lijst uit langs de linkerrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Center Hiermee lijnt u de lijst in het midden van de bovenliggende container uit, rekening houdend met de opgegeven opvulling.
    Right Hiermee lijnt u de lijst uit langs de rechterrand van de bovenliggende container, waarbij rekening wordt gehouden met de opgegeven opvulling.

  2. Stel de stijl Border in die wordt toegepast op alle vier zijden van de container met producten:

    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
    Optie Beschrijving
    Default Past de standaardrandstijl toe die door het bijbehorende stijlblad wordt gespecificeerd.
    None Geeft geen zichtbare indicatie van de containerranden.
    Dotted De containerrand wordt weergegeven als een stippellijn.
    Dashed De containerrand wordt weergegeven als een onderbroken lijn.
    Solid De containerrand wordt weergegeven als een effen lijn.
    Double De containerrand wordt weergegeven als een dubbele lijn.
    Groove De containerrand wordt weergegeven als een gegroefde lijn.
    Ridge De containerrand wordt weergegeven als een afgeronde lijn.
    Inset De containerrand wordt weergegeven als een inzetlijn.
    Outset De containerrand wordt weergegeven als een omtreklijn.

  3. Als u een andere randstijl dan None instelt, voert u de weergaveopties voor de rand in:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Border Color Geef de kleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren.
    Border Width Voer het aantal pixels in voor de lijnbreedte van de rand.
    Border Radius Voer het aantal pixels in om de grootte te bepalen van de straal die wordt gebruikt om elke hoek van de rand te afronden.

  4. (Optioneel) Geef de namen van CSS classes op uit de huidige stijlpagina die u op de container wilt toepassen.

    Scheid meerdere klassennamen met een spatie.

  5. Voer in pixels waarden in voor de Margins and Padding om de buitenste marges en binnenopvulling van de container met producten te bepalen.

    Voer de overeenkomende waarden in het diagram in.

    table 0-row-2 1-row-2 2-row-2
    Containergebied Beschrijving
    Margins De hoeveelheid lege ruimte die wordt toegepast op de buitenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left
    Padding De hoeveelheid lege ruimte die wordt toegepast op de binnenrand van alle zijden van de container. Opties: Top / Right / Bottom / Left

Opslaan en voorvertonen in het werkgebied

Klik in de rechterbovenhoek op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .

Als u een productcarrousel vormde, zou het aan het volgende voorbeeld gelijkaardig moeten kijken:

carrousel van het Product op het stadium

U kunt a widgetnu gebruiken om dit blok te plaatsen waar u het in de opslag wilt verschijnen. Of, kunt u gebruiken voeg Inhoud - Bloktoe om het blok aan een bestaande pagina, een lusje, of een blok toe te voegen.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d