Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man skapar en affiliate-produkt box (ingen kodning obligatorisk)

En produktruta gör att du kan visa upp dina affiliate-produkter på ett mer attraktivt och iögonfallande sätt. Den låter dig inkludera extra information om produkterna, tillsammans med bilder och länkar, för att göra dem mer tilltalande för din publik.

Detta fångar dina användares uppmärksamhet och ökar deras chanser att klicka på dina affiliatelänkar, vilket hjälper dig att tjäna lite passiv inkomst från din blogg.

På WPBeginner har vi använt hänvisningslänkar för att generera intäkter i över ett decennium. Under den här tiden har vi märkt att marknadsföring av affiliateprodukter i relevanta artiklar samtidigt som vi ger extra information om dem och inkluderar deras webbplatsbild konsekvent har resulterat i fler klick för oss.

Affiliate-produktboxar uppnår i princip samma sak, så de kommer sannolikt att ha en liknande, positiv inverkan på dina affiliate-konverteringar.

I den här artikeln visar vi dig hur du enkelt skapar en affiliate-produkt box i WordPress.

Creating an affiliate product box in WordPress

Varför skapa en box för affiliate-produkter i WordPress?

En affiliate-produktruta används av marknadsförare på deras WordPress-webbplatser för att visa upp och marknadsföra specifika produkter för läsarna.

Denna box innehåller vanligtvis en produktrubrik, images, description och en call-to-action (CTA) för att främja clicks och köp.

Affiliate product box preview

Det är en populär strategi för affiliate-marknadsföring som kan öka konverteringsgraden, öka varumärkesexponering och spara tid och resurser, vilket gör det till ett bra sätt att tjäna pengar online.

Du kan enkelt add to en affiliate produkt box till ett blogginlägg för att locka potentiella customers och tjäna en provision på alla resulterande försäljningar.

Med detta sagt, låt oss se hur du enkelt skapar en affiliate-produkt box i WordPress utan att använda någon kod:

Du kan enkelt skapa en produkt affiliate box med hjälp av Pretty Links. Det är det bästa affiliate-marknadsföringsverktyget som gör det superenkelt att skapa och hantera affiliate-links på din WordPress website.

Först måste du installera och aktivera pluginet Pretty Links. För mer instruktioner, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Notera: Pretty Links har också en gratis version. Du måste dock köpa pro-planen för att använda Product Displays addon.

Efter aktivering, besök Pretty Links ” Ut ökningar page från WordPress admin sidebar.

Härifrån installerar och aktiverar du bara addon ’Product Displays’ genom att klicka på knappen ’Install Addon’.

Install and activate the Product Displays addon

När addon har aktiverats, gå bara över till Pretty Links ” Add New page för att börja skapa en affiliate-länk.

Först måste du skriva in affiliate-produktens namn i fältet ”Add Rubrik” högst upp. Denna rubrik kommer att visas som en heading i din produkt affiliate box.

Därefter går du vidare och skriver in affiliate URL i boxen ”Target URL”.

Skriv sedan in länkens slug i boxen ”Pretty Links”. Detta kommer att vara den sista delen av affiliate URL.

Create an affiliate link by typing the target URL

Därefter byter du till tabben ”Product Display” från sidebaren till vänster.

När du väl är där kan du börja med att välja ett tema för din produkt affiliate box från dropdown-menyn ”Theme”.

Klicka sedan på knappen ”Update Image” för att uppladare produktbilden från mediabiblioteket i WordPress eller från din dator.

Choose a theme and upload product image

När du har gjort det skriver du in produktbeskrivningen i boxen ”Description”.

Gå sedan vidare och ställ in ett pris för produkten bredvid alternativet ”Pris”.

Add product description and price

Du kan också lägga till ett märke högst upp i din produkt affiliate box. Till exempel, om objektet du främjar för närvarande är till salu, kan du visa detta för customers.

För att add to ett märke skriver du helt enkelt in texten för det bredvid alternativet ”Badge Text”.

Därefter enter du en CTA för affiliate-produkten bredvid alternativet ”Primary Button Text”. Detta kommer att vara den text som visas på knappen i produktens affiliate box.

Den affiliate-länk vi skapade kommer automatiskt att läggas till CTA-knappen.

Add a badge and CTA text

Om du har skrivit en recension av affiliate-produkten på din blogg kan du add to inläggets URL i boxen ”Review URL”. Läsare som klickar på den kommer att tas till din review post.

För att add to en CTA för knappen review skriver du helt enkelt in lite text i alternativet ”Review Button Text”.

När du är klar klickar du på knappen ”Update” eller ”Publicera” högst upp.

Add the Product Affiliate Box till en page eller ett post

Nu måste you add the product affiliate box till en page eller post på din WordPress website. För denna tutorial kommer vi att lägga till affiliate-produktboxen i ett post.

Först öppnar du ett nytt eller befintligt post från WordPress admin sidebar.

Klicka sedan på knappen ”Add Block” (+) högst upp i vänstra hörnet för att hitta och lägga till PL Product Display-blocket i post editor.

Därefter klickar du på knappen ”Add Display”.

Add the PL Product Display box

Detta kommer att öppna en ”Product Display”-prompt. Här väljer du alternativet ”Single Link” i dropdown-menyn.

När du har gjort det måste du söka efter den affiliate-länk du skapade i sökrutan.

Add the affiliate product box

När du klickar på affiliate-länken kommer produktvisningsboxen automatiskt att läggas till i ditt post eller page.

Slutligen klickar du på knappen ”Update” eller ”Publicera” för att save your changes.

Nu kan du besöka din website för att kontrollera produktens affiliate box i action.

Product box preview

Metod 2: Skapa en affiliate-produktbox i Block Editor (gratis)

För den här metoden visar vi dig hur du enkelt skapar en affiliate-produkt box med hjälp av Block Editor.

Först måste du öppna ett befintligt eller new post från WordPress admin sidebar.

När du är där klickar du på knappen Add Block ’(+)’ högst upp till vänster för att öppna menyn med block. Leta sedan efter och lägg till blocket Columns i posten.

När du har gjort det visas en lista med olika varianter av Column. För att fortsätta klickar du helt enkelt på 50/50-variationen.

Add the Columns block in the block editor

Detta kommer att lägga till två block sida vid sida till din post.

Du kan börja med att klicka på knappen ”+” till vänster på vyn för att öppna menyn för block.

Välj sedan blocket Image och add to din affiliate-produkt image från mediabiblioteket i WordPress.

Add the image block and then add product image from the media library

Efter det måste du klicka på knappen ”+” i den högra columnen.

När menyn med block öppnas, add to blocket Heading och skriv in produkttiteln.

Add the Heading block and type product title

Klicka sedan på ikonen ”Select Column” i blockets toolbar och klicka sedan på knappen ”+” längst ner. Då öppnas menyn för blocken igen.

Härifrån letar du upp och addar blocket Paragraph och skriver in en produktbeskrivning i boxen.

Add the Paragraph block to type product descriptions

Nu, för att slutföra din produkt affiliate box, måste du lägga till en CTA tillsammans med en affiliate länk för produkten.

För att göra det måste du lämna block editor.

Glöm inte att klicka på knappen ”Save Draft” för att spara dina settings innan du går tillbaka till WordPress dashboard.

Skapa en affiliate-länk

Det finns många verktyg för affiliate-marknadsföring för att skapa och hantera affiliate links på din WordPress website.

För denna tutorial kommer vi att använda Pretty Links, som är den bästa WordPress affiliate marknadsföring plugin.

Först måste du installera och aktivera pluginet Pretty Links. För mer instruktioner, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Efter aktivering, head till Pretty Links ” Add New page från WordPress dashboard. När du är där måste du skriva in produktnamnet i fältet ”Add Rubrik”.

Därefter kopierar du och klistrar in din affiliate-produkt URL bredvid alternativet ”Mål URL”.

Create pretty link

Du kan nu enter en custom URL slug i ”Pretty Links” boxen. Pretty Links kommer att använda detta i slutet av affiliate URL som den skapar för you.

När du är klar klickar du på knappen ”Update” för att generera din affiliate-länk.

You will then be redirected to the ’Links’ page. Härifrån kopierar du helt enkelt affiliate-länken från kolumnen ”Pretty Links”.

Copy the affiliate link

Add to en affiliate link till produkt boxen

Nu, head tillbaka till blogginlägget där du skapade affiliate-produktboxen.

När du är där klickar du bara på den högra colonnen i ditt Columns-block för att öppna blockets toolbar, följt av knappen ”Select Columns”. Detta öppnar menyn för blocket.

Därefter lägger du bara till blocket Buttons.

Add the buttons block in the right column

För att add a link, click on the ’Link’ icon in the ’Buttons’ block toolbar. Detta öppnar en popup box där du måste klistra in affiliate-länken som du kopierade från Pretty Links page.

Du kan också söka efter affiliate-länken med hjälp av sökfältet i boxen.

Add an affiliate link

Slutligen måste du lägga till lite text till din CTA-knapp.

Se till att lägga till en spännande fras som din CTA för att uppmuntra customers att clicka på länken.

Type CTA text

Du kan också styla din affiliate produkt box med hjälp av block settings. För att göra detta, växla till ”Styling” icon i block panelen.

Härifrån kan du välja bakgrundsfärg och textfärg för din affiliate-produkt box med hjälp av Color Picker.

Choose a background color for the product affiliate box

Slutligen klickar du på knappen ”Publicera” eller ”Update” för att save your changes.

Så här såg boxen för affiliate-produkter ut på vår demo website.

Product affiliate box preview

Metod 3: Skapa en produktbox för affiliate Landing Pages med SeedProd

Om du vill skapa en estetiskt tilltalande produkt box för custom affiliate landing pages, då är den här metoden för dig.

Du kan använda SeedProd, som är den bästa WordPress page builder tillägg på marknaden. Det hjälper dig att skapa en visuellt tilltalande website utan någon kod.

Först måste du installera och aktivera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Note: SeedProd erbjuder också en gratis version. Vi kommer dock att använda premium-versionen eftersom den erbjuder fler designfunktioner.

Vid aktivering, besök SeedProd ” Settings page för att enter plugin license key.

You can find this information in your account on the SeedProd website.

Paste license key in the field

Därefter, head to the SeedProd ” Landing Pages section from the WordPress admin dashboard and click on the ’Add New Landing Page’ button.

För denna tutorial kommer vi att lägga till en affiliate produkt box till en landing page.

Click the Add New Landing Page button

Du kommer nu till vyn ”Välj en template för en ny page”.

Härifrån kan du välja någon av de färdiga templates som SeedProd erbjuder.

När du har gjort ditt val kommer du att bli ombedd att enter ett namn på page och välja en URL. Gå vidare och klicka på knappen ”Save and Start Editing the Page” när du har enterat detaljerna.

Enter your page details

Detta kommer att starta SeedProd’s drag and drop page builder.

Här hittar du blocket Column i den vänstra sidebaren och drar det till designgränssnittet till höger.

När du lägger till blocket kommer du att bli ombedd att välja en column layout. Om du vill lägga till två block sida vid sida klickar du bara på 50/50-varianten.

Add the Column Block in SeedProd

Du kan nu börja med att dra and drop blocket Image till den vänstra colonnen.

Klicka sedan på blocket Image för att öppna blockinställningarna i sidebaren. Härifrån klickar du helt enkelt på knappen ”Use Your Own Image” för att selecta affiliate-produktens image från mediabiblioteket eller uppladare den från din dator.

Choose an affiliate product image from the media library

Efter det är det bara att dra and drop blocket Heading till den högra columnen och add to affiliate-produktens titel.

Du kan justera inriktningen och storleken på fonten med hjälp av inställningarna i den vänstra colonnen.

Add the heading block and type product title

När du har gjort det måste du drag and drop blocket Text under produkttiteln. Du kan add to en description för den affiliate-produkt som du främjar.

Därefter klickar du på knappen ”Save” för att lagra dina ändringar.

Add product description and click Save button

Nu är det dags för dig att skapa en affiliate link.

Skapa en affiliate-länk

Först måste du installera och aktivera pluginet Pretty Links. För mer detaljerade instruktioner, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Efter aktivering, gå till Pretty Links ” Add New page från admin sidebar.

Här kan du börja med att skriva in produktnamnet i fältet ”Add Rubrik” för att göra det enkelt att hitta affiliate-länken. Ange bara namnet på affiliate-företaget eller själva produkten.

Lägg sedan till affiliate-länken bredvid alternativet ”Target URL”.

Därefter skriver du in en slug i boxen ”Pretty Links”. Denna slug kommer att visas i slutet av din affiliate länk.

Create an affiliate link

Slutligen, gå vidare och klicka på knappen ”Update” för att generera länken.

Du kommer nu att redirectas till sidan ”Links”. Härifrån kopierar du helt enkelt affiliate-länken från kolumnen ”Pretty Links”.

Copy the affiliate link

Add the Affiliate Link till SeedProd Product Box

När du har kopierat affiliate-länken måste du öppna SeedProd landing page där du utformar affiliate-produktboxen.

När du är där drar och släpper du helt enkelt blocket Button under produktbeskrivningen.

Drag and drop the Button block in the product box

Därefter måste du klicka på knappen för att öppna dess blockinställningar i vänster sidebar. Här måste du copy and paste affiliate-länken i rutan ”Link”.

Efter det är det bara att enter lite text för CTA i boxen ”Button Text”.

Add the affiliate link and CTA text

För att utforma affiliate-produktboxen måste du välja blocket Column för att öppna dess inställningar i den vänstra kolumnen.

Härifrån kan du välja en bakgrundsfärg eller till och med add to en bakgrundsbild till din produkt box. Du kan också justera bredden och inriktningen av blocket Column efter vad du gillar.

Change the affiliate product box background color in SeedProd

När du är klar klickar du på knappen ”Save” för att spara dina Settings.

Så här såg boxen för affiliate-produkter ut på vår demo website.

SeedProd preview of the affiliate product box

Bonus: Skapa ett affiliate-program på din website

Förutom att främja produkter från andra företag kan du också skapa ditt eget affiliate-program för att öka försäljningen för din online-verksamhet.

Det är en kostnadseffektiv marknadsföringsstrategi som allowar andra företag att gå med i ditt program och främja dina tjänster på sina websites för att tjäna en liten provision.

Genom att starta ett program för referral kan you nå en bredare publik, bygga upp förtroende bland potentiella köpare och i slutändan öka konverteringen på your website.

Om du till exempel har en butik för e-handel kan du genom att starta ett affiliateprogram ge dina klienter, fans och andra digitala marknadsförare ett incitament att marknadsföra dina produkter mot en liten provision per försäljning.

Du kan enkelt starta ett program för referral på din website med AffiliateWP. Det är den bästa WordPress-programvaran för affiliate tracking och hantering på marknaden som ger you fullständig control över your affiliate-program.

AffiliateWP website

Det kommer med en enkel installation, avancerad affiliate länkspårning, detaljerade rapporter, flexibla utbetalningsalternativ och integration med populära plugins som MemberPress, Easy Digital Downloads och WooCommerce.

För mer information kan du se vår kompletta AffiliateWP review.

Tilläggen gör det superenkelt att starta ett affiliate-program och tapa in på nya marknader för att öka varumärkeskännedomen och generera leads. För detaljerade instruktioner kan du se vår tutorial om hur du skapar ett referral-program i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar en affiliate-produkt box i WordPress. Du kanske också vill se vår artikel om hur man döljer affiliate-länkar på din WordPress-webbplats och vår jämförelse mellan Pretty Links och Thirsty Affiliates för att hitta rätt plugin för hantering av affiliate för din webbplats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

2 kommentarerLämna ett svar

  1. Dennis Muthomi

    hi, is there a way to add a rating system (like a 5-star rating) to the affiliate product box? I think it would be cool to show my visitors how I rate the products I recommend. If there’s a way to do this, I’d love to know

    • WPBeginner Support

      For something like that we would recommend taking a look at SeedProd and that should allow you what you’re wanting :)

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.