Experiment
Visuell editor utan kod
Välj ett element på din egen live-webbplats och ändra det i egenskapspanelen, eller lägg in en färdig sektion. Varianten sparas, sidan rörs inte.
AI-editor
Beskriv ändringen och se den ta form
Berätta för editorn med vanliga ord vad du vill ha, eller peka på ett element och fråga. AI:n läser sidan, föreslår ändringar och förhandsvisar dem på din live-webbplats. Ingenting sparas förrän du tillämpar dem.
- Ett ord eller en hel sektionJustera en enstaka rubrik, eller bygg om en hel hero, meny eller pristabell med en enda prompt. Varje ändring listas för sig, så du behåller bara dem du vill ha.
- JavaScript bara när det behövsDe flesta tester handlar om text, formgivning och markup, och det är det AI:n skriver. När ett test ska reagera på något, till exempel ett klick eller en scroll, skriver den även koden, och koden godkänns för sig.
- Den läser sidan åt digAI:n utgår från en översikt över sidan du är på, med dess struktur och texter. Du beskriver vad du vill uppnå, och den hittar elementen som ska ändras. Inga selektorer, ingen utvecklare.
- En förhandsvisning innan något sparasDe föreslagna ändringarna visas på din live-sida, var och en med en egen kryssruta. Tillämpar du dem blir de vanliga ändringar i varianten, som du kan ångra ända tills du sparar.
- Starka experiment utan kodAlla som kan beskriva en bättre sida kan också bygga varianten. AI:n svarar på det språk du skriver på, och texterna på sidan får behålla sitt språk.
- Du vet vad det kostar i förvägVarje förfrågan drar AI-krediter, och panelen visar en uppskattning innan du skickar den. Ifyllda formulärfält och personuppgifter på sidan maskeras innan något skickas iväg.
Editorn öppnas från Chromes sidopanel och laddar din riktiga webbplats i en ram, så du pekar på det du vill ändra i stället för att beskriva det i ett ärende. När du väljer ett element öppnas egenskapspanelen: typografi, avstånd i en boxmodell som du kan dra i, storlek, layout, bakgrund och kant, och en sökning bland alla CSS-egenskaper som webbläsaren känner till. Varje ändring sparas i varianten du redigerar, aldrig på sidan.
Med växeln Normal, Hover, Focus och Active formger du ett elements interaktiva lägen utan CSS, så att en knapp kan byta färg vid hover i varianten precis som den skulle göra i din stilmall. Text redigerar du med ett dubbelklick där den står, och länkar, bilder (även de responsiva bilder som de flesta Shopify-butiker använder), alt-text och tillgänglighetsetiketter har egna fält.
Ändringarna är inte begränsade till det som redan finns på sidan. Fliken Add är ett bibliotek med block, layouter och media, från en hero eller en FAQ till en fast köplist på mobilen, och vart och ett tar efter webbplatsens egna typsnitt och färger där det hamnar. All text i en ändring kan innehålla sidans egen data, så en enda ändring kan visa varje produkts eget pris.
En ändringslista visar allt varianten gör i klartext (Moved, Added button, Heading text), med ångra och gör om som går att lita på, och ändringar du gör medan en sparning pågår behålls. Listan är varianten. Det är den som tillämpas på besökarens sida, och den som överlämningen till utveckling läser senare för att tala om för utvecklaren vad som ska hårdkodas.
Editorn i korthet
En skärm för allt som ett test ändrar
Layers och komponenter till vänster, din live-sida i mitten och egenskapspanelen till höger. Varje avsnitt nedan visar en av delarna i användning.
Chromes sidopanel
Öppna editorn från sidan du tittar på
Tillägget dockas i Chromes sidopanel, bredvid webbplatsen, och följer fliken du är på. Det hittar webbplatsen, listar dess experiment och öppnar editorn på just den här sidan, i stället för på den sida som testet startade från.
- Full höjd och justerbar storlek, och panelen stannar öppen när du klickar på sidan
- Filtrera på status, eller sök på namn eller experimentnummer
- Ber om åtkomst till en webbplats en gång, första gången du öppnar editorn där
Komponentbibliotek
Lägg till en hel sektion, inte bara en ny färg
Dra ett block från fliken Add till sidan, så visar en blå linje var det kommer att hamna innan du släpper det. Det får webbplatsens eget typsnitt och egna rubrikstorlekar, och tar sin accentfärg från platsen där du släppte det.
- Tolv block, från en hero och en FAQ till en fast list och en popup
- Sektioner, containrar och kolumner som staplas på mobilen
- Video, ett bildspel och ett galleri, där YouTube spelas upp via sin cookiefria spelare
Dynamiskt innehåll
Bygg det en gång, så fyller varje sida i sin egen data
Lägg in data från sidan i valfri text, länk eller bild, vald ur en lista med sidans riktiga värden. En banner som byggs en gång hälsar varje besökare med den kampanj som besökaren kom från; i en butik visar en fast list varje produkts eget namn och pris.
- Kampanj-, besökar- och datumdata på alla webbplatser, utan konfiguration
- Produkt-, pris- och varukorgsdata i butiker, i sidans egen valuta
- Saknas data döljs elementet, eller så visas ett reservvärde som du väljer
Dataflöden
Data från dina egna system, inne i testet
Koppla in ett flöde som webbplatsen redan publicerar, till exempel recensioner, evenemangsdatum, kampanjtexter eller ett produktflöde för Google Merchant, välj vilken post varje besökare ser och bocka i de fält som en sida får visa. Pertentos servrar hämtar det enligt ett schema, så besökarna väntar aldrig på dina servrar.
- Matcha posten mot sidadressen, en URL-parameter, kampanjen eller produkten
- Eller visa posten som är schemalagd för just nu, för tidsbegränsade kampanjer
- Bara de fält du bockar i når fram till en besökare
Egenskapspanel och lägen
Formge lägena hover, fokus och aktiv utan att skriva CSS
Egenskapspanelen redigerar det du väljer: typografi, avstånd i en boxmodell, storlek, layout, bakgrund och kant. Med växeln Normal, Hover, Focus och Active formger du de interaktiva lägena, så att en knapps färg vid hover också är en del av varianten.
- Sök bland alla CSS-egenskaper som webbläsaren känner till, med Reset på varje fält
- Länkar, responsiva bilder, alt-text och tillgänglighetsetiketter
- Varje ändring av ett läge är en vanlig ändring, med ångra och spara
Text direkt på sidan
Skriv om en rubrik där den står
Dubbelklicka på valfri text på sidan och skriv. Fetstil, kursiv och understrykning fungerar som i ett dokument, och när du klickar någon annanstans blir redigeringen en vanlig ändring som ångra återställer exakt.
- Fetstil, kursiv och understrykning från tangentbordet, Shift+Enter för radbrytning, Escape för att avbryta
- Fungerar på text och den inline-markup som finns i den
- Listas bland ändringarna i klartext, som Heading text
Varje träff
Ändra alla matchande element på en gång, även de som laddas senare
Ange en CSS-selektor och lägg till formgivning eller HTML på allt den matchar. Element som dyker upp senare via oändlig scroll, karuseller eller navigering inom appen får också ändringen, en gång vardera.
- Lägg till, infoga, före, efter eller ersätt
- Ett antal i realtid som visar hur många element som matchar
- Välj liknande gör samma sak genom att peka, för alla element som liknar det du valde
Ändringar och sparande
Varje ändring listad, i ord du förstår
Varje ändring listas i klartext, som Moved, Added button eller Heading text, med ångra och gör om som går att lita på. Ändringar som görs medan en sparning pågår behålls, en misslyckad sparning kan göras om och editorn frågar innan den stängs.
- Återställ valfri enskild ändring från listan
- Global CSS och JavaScript överst, med antal rader
- En ändring vars element saknas på sidan markeras i stället för att döljas
Förhandsvisa var som helst
Se varianten på en riktig mobil
Förhandsvisningen per enhet visar storlekarna för desktop, surfplatta och mobil i editorn. Vill du se det på riktigt ger Preview on another device en länk som öppnar den sparade varianten på valfri mobil eller i valfri webbläsare, och en andra länk som återställer webbläsaren till normalläget.
- Inloggningstoken tas bort från länken, så den är säker att dela
- Visar de sparade ändringarna medan experimentet körs på den sidan
- Öppnas i vilken webbläsare som helst, inte bara Chrome
Kod när du vill ha den
HTML, CSS och JavaScript, med samma data från sidan
Allt som de visuella verktygen inte kan uttrycka skrivs som kod på varianten. Redigera eller lägg till HTML runt ett element, eller skriv variantens globala CSS och JavaScript, och läs sidans data med pertento.data().
- Insert page data lägger till en token i HTML
- Read page data lägger till ett pertento.data()-anrop i JavaScript
- Global CSS och JavaScript kan rensas helt
Kortkommandon
Kortkommandon för det du gör om och om igen
Kortkommandona fungerar så snart du klickar på ett element på sidan, och hela listan finns bakom tangentbordsikonen i editorns verktygsfält.
- Spara
- ⌘SCtrl+S
- Ångra
- ⌘ZCtrl+Z
- Gör om
- ⇧⌘ZCtrl+Y
- Redigera HTML
- E
- Duplicera
- D
- Dölj men behåll platsen
- H
- Lägg till element
- A
- Ta bort element
- ⌫
- Välj överordnat element
- ⇧↵
- Flytta upp eller ned
- ⌥↑⌥↓
- Öppna elementmenyn
- ⇧F10
- Redigera text direkt