Page Builder Genomgång del 3: kataloginnehåll

Den här övningen visar hur enkelt det är att lägga till en produktlista på en sida, anpassa produktsidor och skapa ett anpassat attribut som lägger till Page Builder till en produktattributuppsättning.

Produktlista

Den här övningen förutsätter att du har slutfört Del 1: Enkel sida och Del 2: Block, inklusive kraven och hämtade exempelfiler. Följ de tre delarna av övningen i ordning.

Del 1: Lägg till en produktlista

Page Builder gör det enkelt att lägga till en produktlista på scenen. I det här exemplet läggs produktlistan till direkt på en sida.

Steg 1: Lägg till en produktlista på scenen

  1. Administratör sidebar, gå till Content > Elements>Pages.

  2. Hitta Enkel sida som du skapade i den första övningen och ändrade i den andra, och väljer Edit i Action ​kolumn.

  3. Expandera Expansionsväljare den Content och klicka Edit with Page Builder eller inuti förhandsvisningsområdet.

  4. I Page Builder panel under Layout, dra en Row ​längst upp på scenen.

  5. I Page Builder panel, expandera Add Content och dra en Products platshållare till den nya raden.

    Dra en produktplatshållare till raden {width="600" modal="regular"}

Steg 2: Skapa villkoret

  1. Håll muspekaren över den tomma produktbehållaren för att visa verktygslådan och välj Inställningar ( Ikonen Inställningar {width="20"} ).

    Verktygslådan Produkter {width="600" modal="regular"}

  2. För Select Products By, välja Condition.

  3. Lägg till ett villkor:

    • Klicka på Lägg till ( Ikonen Lägg till ).

    • Under Product Attribute, välja Category.

      Välja kategoriattributet för villkoret {width="600" modal="regular"}

    • Slutför Category is… en del av villkoret genom att klicka på ikonen Mer (…) och sedan klicka på Väljare ( Väljarikon ).

      Definiera villkoret {width="600" modal="regular"}

    • I kategoriträdet, gå ned till Kvinnor > Tops och väljer  Tes kryssrutan.

      Välja kategori i trädet {width="600" modal="regular"}

    • Klicka på bockmarkeringen ( Kryssmarkeringsikon ).

      Motsvarande kategori-ID visas i fältet för att slutföra villkoret.

Steg 3: Slutför inställningarna

  1. Ange Number of Products to Display.

    Som standard visas fem produkter i listan.

  2. Slutför de återstående inställningarna efter behov.

    Använd fältbeskrivningarna i slutet av Lägg till innehåll - produkter sida för referens.

  3. När du är klar klickar du på Save för att spara inställningarna och gå tillbaka till Page Builder arbetsyta.

    Produktlista på scenen {width="600" modal="regular"}

  4. Klicka på i det övre högra hörnet av scenen Stäng helskärm ( Stäng helskärmsikonen {width="20"} ).

    Om du klickar på den här ikonen återgår du till Content-avsnitt för sidan där förhandsvisningen visas.

  5. Klicka i det övre högra hörnet på Save pil och välj Save & Close.

Del 2: Anpassa produktsidan

NOTE
En administratör måste ha Content behörigheter för sina rollomfång för att se Edit with Page Builder och kan använda Page Builder.

I den här delen av övningen får du lära dig hur enkelt det är att anpassa en produktsida genom att placera en video under flikarna på produktsidan. Uppdateringsprocessen kategorisida innehållet är i stort sett detsamma.

  1. Administratör sidebar, gå till Catalog > Products.

  2. Hitta en enkel produkt som du kan använda i det här exemplet och öppna den i redigeringsläge.

  3. Rulla ned och expandera Expansionsväljare den Content -avsnitt.

  4. Nästa till Description, klicka Edit with Page Builder.

    Produktbeskrivningsinnehåll {width="600" modal="regular"}

    Om produktbeskrivningen har angetts tidigare utan Page Buildervisas den aktuella beskrivningen som HTML i en HTML Code behållare. Med Luma-temat visas produktbeskrivningen på fliken Detaljer.

  5. I Page Builder panel under Layout, dra en Row ​till scenen och placera den nedanför kodbehållaren HTML.

    Leta efter den röda stödlinjen som ska visas när raden är i rätt position.

    Dra en rad till scenen {width="600" modal="regular"}

  6. I Page Builder panel, expandera Media och dra en Video platshållare till den nya raden.

    Platshållare för video på raden {width="600" modal="regular"}

  7. Håll pekaren över den tomma videobehållaren för att visa verktygslådan och välj Inställningar ( Ikonen Inställningar {width="20"} ).

    Videoverktygslåda {width="500" modal="regular"}

  8. Ange Video URL.

    Videon kan lagras på någon av YouTube eller Vimeo. Videon i det här exemplet finns på YouTube på följande URL:

    https://www.youtube.com/watch?v=ZpFrNyD4100

    Redigera videon {width="500" modal="regular"}

  9. Ange Maximum Width i pixlar för videovisningen.

    Om du lämnar det här alternativet tomt fyller videon det tillgängliga utrymmet.

  10. Klicka Save för att spara inställningarna och gå tillbaka till Page Builder arbetsyta.

    Video i innehållsscenen {width="600" modal="regular"}

  11. Klicka på i det övre högra hörnet av scenen Stäng helskärm ( Stäng helskärmsikonen {width="20"} ).

    Om du klickar på den här ikonen återgår du till Content-avsnitt för sidan där förhandsvisningen visas.

  12. Klicka i det övre högra hörnet på Save pil och välj Save & Close.

I butiken visas videon under flikuppsättningen. Om du vill se hur sidan ser ut på en mobil enhet kan du ändra storlek på fönstret.

Video som visas på produktsidan

Grattis! Du har avslutat den andra delen av självstudiekursen om kataloginnehåll. Behåll det du skapat så att du kan hänvisa till det senare.

Del 3: Lägga till anpassade attribut

Använd Page Builder anpassat attribut för att lägga till en fullt fungerande Page Builder till en produktsida, som du kan använda för att skapa engagerande innehåll. I den här delen av övningen får du lära dig att skapa ett anpassat attribut med Page Builder indatatyp och använd den på produktsidor i katalogen. Mer information om dessa attribut finns i Produktattribut.

Steg 1: Skapa en produkt

Om du vill undvika ändringar i din livebutik skapar du en produkt med de beskrivna egenskaperna.

  1. Administratör sidebar, gå till Catalog > Products.

  2. Klicka på i det övre högra hörnet Add Product.

  3. Skapa produkten med följande egenskaper:

    • -attributuppsättning: Default

    • Product Name: Min produkt

    • SKU: Tutorial

    • Price: 75.00

    • Quantity: 100

    • Stock Status: I Stock

    • Weight: 1

    • Categories: Kvinnor > Tops > Tes

  4. Klicka i det övre högra hörnet på Save pil och välj Save & Close.

Steg 2: Skapa anpassade attribut

I det här steget skapar du två nya anpassade attribut som visar hur Page Builder och textredigerarens indatatyper kan användas.

  1. Administratör sidebar, gå till Stores > Attributes>Product.

  2. Klicka på i det övre högra hörnet Add New Attribute.

  3. Ange en Default Label för attributet.

    Använd följande exempel: My Page Builder Attribute för etiketten.

  4. Ange Catalog Input Type for Store Owner till Page Builder.

    När du skapar ett anpassat attribut kan du ange vilken redigerare som passar bäst för programmet som antingen Page Builder eller standarden WYSIWYG Text Editor.

    Page Builder Indatatyp {width="600" modal="regular"}

  5. Expandera Expansionsväljare den Advanced Attribute Properties och gör följande inställningar:

    • Attribute Code: Ange en attributkod med små bokstäver, med bindestreck i stället för mellanslag. Använd följande exempel: my_page_builder_attribute.

    • Scope: Acceptera standardvärdet, Store View.

    • Default Value: Ange ett standardvärde för attributet.

    • Unique Value: No

    • Add to Column Options: No

    • Use in Filter Options: Yes

  6. I Attribute Information ​till vänster väljer du Storefront Properties ​och gör följande inställningar:

    • Use for Promo Rule Conditions: Yes

    • Visible on Catalog Pages on Storefront: Yes

    • Used in Product Listing: Yes

  7. När du är klar klickar du på Save Attribute.

  8. Upprepa föregående steg för att skapa ett andra attribut med samma grundläggande egenskaper, men med textredigerarens indatatyp enligt följande:

    • Default Label: Mitt textredigeringsattribut

    • Catalog Input Type for Store Owner: Textredigerare

    • -attributkod: my_text_editor_attribute

Steg 3: Uppdatera produktattributuppsättningen

  1. Administratör sidebar, gå till Stores > Attributes>Attribute Set.

    I det här exemplet lägger du tillfälligt till de nya attributen i default attributuppsättning. När du är klar med övningen tar du bort attributen från attributuppsättningen så att katalogen inte påverkas.

    note note
    NOTE
    Om du inte vill ändra din live-butik kan du följa med utan att uppdatera attributuppsättningen.
  2. Hitta Default ​attributuppsättningen i listan och dubbelklicka på den för att öppna den i redigeringsläge.

  3. I Ej tilldelade attribut söker du efter de nya attributen som du har skapat och drar vart och ett till Groups ​kolumn, under Content.

    Attributets plats i Groups -kolumnen avgör var den visas på sidan.

    Nya attribut har lagts till i innehållsgruppen {width="600" modal="regular"}

  4. Klicka Save för att återgå till listan Attributuppsättningar.

  5. När du uppmanas till det klickar du på Cache Management överst på sidan och uppdatera eventuell ogiltig cache.

Steg 4: Uppdatera produkten

  1. Administratör sidebar, gå till Catalog > Products.

  2. I rutnätet Produkter hittar du Min produkt och öppna den i redigeringsläge.

  3. Rulla ned och expandera Expansionsväljare den Content -avsnitt.

    Överst i avsnittet finns det två standardattribut för produktinnehåll:

    • Kort beskrivning, som använder WYSIWYG-standarden redigerare.
    • Beskrivning, som visar Page Builder förhandsgranska.

    Produktinnehåll {width="600" modal="regular"}

    När du bläddrar till den nedre halvan av avsnittet finns det två attribut som du har skapat och tilldelat:

    • Min Page Builder Attribut, som visar Page Builder förhandsgranska.
    • Mitt textredigeringsattribut, som använder WYSIWYG-standardredigeraren.

    Redigera produktinnehåll {width="600" modal="regular"}

  4. I Mitt textredigeringsattribut redigerare, ange Text Editor Attribute placeholder text.

    • Klicka i det övre högra hörnet på Save pil och välj Save & Close.
  5. För Mitt Page Builder-attribut, klicka Edit with Page Builder och lägga till beskrivningstexten:

    • I Page Builder panel, expandera Elements och dra en Text object till scenen.

    • Retur Page Builder attribute placeholder text.

    • Klicka på i det övre högra hörnet av scenen Stäng helskärm ( Stäng helskärmsikonen {width="20"} ).

      Anpassade attribut med platshållartext {width="600" modal="regular"}

  6. Bläddra upp till Description, klicka Edit with Page Builder och lägg till text som du gillar med samma metod som i föregående steg.

  7. Klicka på i det övre högra hörnet av produktsidan på Save pil och välj Save & Close.

  8. Klicka på knappen Cache Management i meddelandet längst upp på sidan och uppdatera eventuell ogiltig cache.

Steg 5: Visa resultatet

  1. Navigera till exempelproduktsidan i butiken.

    I det här exemplet finns produkten i den övre navigeringen under Kvinnor > Tops > Tees.

  2. Bläddra nedåt till Mitt Page Builder-attribut information.

    Attributens position på produktsidan bestäms av temat. I Luma-temat finns de nya attributen precis efter produktbeskrivningen.

    Page Builder och textredigeringsattribut i butiken {width="600" modal="regular"}

Du har slutfört Page Builder Kataloginnehåll. Behåll det du skapat så att du kan hänvisa till det senare.

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