Med Landningssidor med AI bygger ni kampanj- och landningssidor med hjälp av er egen AI-tjänst, till exempel ChatGPT eller Claude. Appen lägger till blocktypen AI-block i sidbyggaren. Ni väljer bilder, produkter och kategorier, kopierar en färdig prompt från Ashop, låter AI:n skriva sidans kod och klistrar in svaret i blocket. Ashop kontrollerar koden och fyller i riktiga priser, lagerstatus, produktbilder och länkar när sidan visas.

Fördelen jämfört med att klistra in egen kod i ett HTML-block är att priser och lagerstatus alltid är aktuella, att länkar till produkter och kategorier inte går sönder när en adress ändras, och att koden inte kan påverka resten av butiken.

Ashop skriver ingen kod åt er. AI-tjänsten använder ni på egen hand, med ert eget konto. Ashop ger er prompten och tar emot svaret.

Kom igång

1. Fyll i butikens Grafisk profil för AI-prompten under appens inställningar (se nedan). Ni hittar inställningarna via appen under Appar i Ashop. Saknas profilen visar AI-blocket också en gul ruta med en länk dit.
2. Gå till Sidor → Sidor och öppna sidan i sidbyggaren.
3. Lägg till ett AI-block. Det ligger under Övrigt bland blocktyperna.
4. Öppna blocket och lägg till materialet under Material: bilder, produkter och kategorier.
5. Klicka Kopiera prompt. Klistra in prompten i er AI-tjänst och skriv längst ner vad sidan ska handla om: erbjudandet, fakta om produkterna och tonen.
6. Kopiera AI:ns svar och klistra in det i fältet HTML och CSS från din AI.
7. Spara och öppna sidan för att se resultatet.

Inställningar

Vilka typsnitt AI:n får använda ställer vi in när appen aktiveras, utifrån de typsnitt er sajt redan laddar. Vill ni ändra dem, hör av er till supporten. Utan inställda typsnitt använder AI:n vanliga systemtypsnitt.

Så gör ni i Ashop

Material

Allt AI:n får använda lägger ni till i blocket först. Varje bild, produkt och kategori får en nyckel, ett kort namn som koden hänvisar till. Ashop föreslår en nyckel utifrån namnet, och ni kan ändra den. Nycklar får bara innehålla små bokstäver a–z, siffror, punkt, bindestreck och understreck, och varje nyckel får bara användas en gång i blocket.

• Bilder – klicka Ladda upp bilder. JPG, PNG, WebP eller GIF. Bilder som är bredare än 1 200 px skalas ner automatiskt. Fyll gärna i Förslag på alt-text, så tar AI:n med den.
• Produkter – sök fram produkterna. För varje produkt väljer ni under Slut i lager om den ska Tona ner eller Dölj när den tar slut.
• Kategorier – välj under Lägg till kategori….

AI:n behöver inte använda allt material, men den får aldrig hitta på egna nycklar. Ändrar ni materialet, kopiera en ny prompt så att AI:n får den nya listan.

Prompten

Kopiera prompt skapar en prompt med reglerna för koden, er grafiska profil, typsnitten och materialet med nycklar, så som det ser ut i formuläret just då. Ni behöver inte spara först. Om webbläsaren inte kan kopiera automatiskt visas prompten i ett fält under knappen, så att ni kan markera och kopiera den själva.

När ni sparar

Ashop kontrollerar koden varje gång ni sparar. Det finns två sorters besked:

• Fel – koden sparas, men sidan fortsätter visa den senast godkända versionen tills felen är rättade. Felen listas överst i blocket under Koden har fel och visas inte på sidan förrän de är rättade. Det enklaste är oftast att klistra in felmeddelandena i AI-tjänsten och be den rätta koden.
• Saker att tänka på – koden publiceras, men Ashop påpekar något, till exempel bilder utan alt-text eller material som inte används i koden.

Så upplever kunden det

Besökaren ser blocket som en vanlig del av sidan, i den design AI:n har skrivit. Priser och lagerstatus är alltid de aktuella, och länkar går till rätt produkt- eller kategorisida. Blockets utseende styrs helt av koden i blocket, inte av temat.

När en produkt tar slut i lager händer det ni har valt för produkten:

• Tona ner – produkten visas fortfarande, markerad som slut i lager. Hur den ser ut beror på koden: prompten ber AI:n ge sådana produkter en egen stil, till exempel lite blekare.
• Dölj – allt i blocket som hör till produkten försvinner, till exempel både produktkortet och en knapp högre upp. Försvinner alla produkter i en sektion kan hela sektionen döljas, så att ingen rubrik står kvar över en tom yta.

YouTube-filmer i blocket visas först när besökaren har godkänt cookies, precis som i butikens vanliga videoblock.

Vad appen inte gör

• Ingen AI ingår. Ni använder er egen AI-tjänst. Ashop skapar prompten och kontrollerar svaret.
• Inget JavaScript, inga formulär och inga iframes. Interaktivitet görs med CSS, fällbara avsnitt och ankarlänkar. YouTube-filmer går bra, prompten säger hur.
• Inga typsnitt eller bilder utifrån. Blocket använder sajtens typsnitt och de bilder ni laddat upp i blocket.
• Ingen FAQ i AI-blocket. Använd butikens FAQ-block under AI-blocket, så får Google rätt märkning.
• AI-blocket finns bara i sidbyggaren, inte i den äldre blockredigeraren.

Felsökning

Bra att veta

• Läs alltid igenom texten på sidan. AI:n kan skriva sådant som låter rimligt men inte stämmer, till exempel mått eller erbjudanden. Ni ansvarar för det som publiceras.
• Gör det mobilt först. Prompten ber AI:n bygga för mobil, men titta själva på sidan i mobilen innan ni publicerar.
• Kopierar ni en sida följer AI-blocket med, med kod och material.
• Flera AI-block på samma sida går bra. Ashop varnar om två block använder samma ankare, eftersom länkar dit då kan hamna fel.
• Stänger ni av appen kan ni inte längre lägga till nya AI-block.