Använd rich text editor

Du kan använda Shopifys rich text editor för att formatera och utforma texten som visas i din webbutik.

Var ska du använda rich text editor

Du kan använda rich text editor för att lägga till eller redigera text på flera ställen i din butik:

Lägg till HTML-innehåll med rich text editor

Du kan infoga HTML-innehåll i blogginlägg, på sidor, i produktbeskrivningar och produktkollektioners beskrivningar med rich text editor.

Klicka på knappen Visa HTML för att visa HTML-koden för innehållet i rich text editor.

I HTML-vyn kan du göra många ändringar av innehållet i rich text editor. Du kan lägga till bilder, videor eller tabeller med hjälp av HTML, och du kan felsöka eller finjustera layout och innehållsstil.

Bädda in en medie-widget

Om du vill bädda in en video eller musik-widget måste du först lagra den på en tjänst som Youtube, Vimeo eller SoundCloud. Dessa tjänster genererar en inbäddad kod, som du kan kopiera och klistra in i din Rich Editor Rich Text Editor.

Steg:

  1. Hitta inbäddningskoden för den media som du vill bädda in:

  2. Välj hela inbäddningskoden genom att klicka på den och trycka på ctrl + A på en PC eller command + A på en Mac.

  3. Kopiera inbäddningskoden genom att trycka på ctrl + C på en PC eller command + C på en Mac.

  4. I din Shopify-administratör klickar du på knappen Visa HTML på rich text editor för innehållet du redigerar.

  5. Klistra in inbäddningskoden genom att trycka på ctrl + V på en PC eller command + V på en Mac:

  6. Klicka på Spara på sidan som du redigerar för att spara dina ändringar.

Formatera text med rich text editor

Med knappen Formatering kan du snabbt skapa paragrafer, rubriker eller blockcitat. Att använda rätt formatering och rubriknivåer hjälper människor och sökmotorer att läsa din webbplats innehåll.

För att välja ett textformat markerar du texten och klickar sedan på knappen Formatering:

Formateringsalternativ

  • Stycke

    Den största andelen textinnehåll på din webbplats är brödtext. Brödtext har vanligtvis en typsnittsstorlek på 10–12 pt, men vissa teman använder andra typsnittsstorlekar.

  • Rubrik (1-6)

    Rubriker används för att strukturera innehåll. Det finns 6 rubriknivåer. Rubrik 1 är den viktigaste nivån och rubrik 6 är minst viktig.

  • Blockcitat

    Ett blockcitat används för att visa text som tillskrivs någon annan, exempelvis en offert eller ett utdrag från en bok eller hemsida.

Fetstil

För att göra texten fet markerar du texten och klickar på knappen Fetstil:

Kursivera text

För att göra texten kursiv markerar du texten och klickar på knappen kursiv:

Skapa en punktlista

För att skapa en punktlista, klicka på knappen Punktlista:

Du kan skriva för att skapa punktlistor för objekt:

För att skapa nya listobjekt, tryck på enter eller return tangent. För att slutföra listan trycker du på enter eller return tangenten två gånger.

Skapa en numrerad lista

För att skapa en numrerad lista, klicka på knappen Numrerad lista:

Du kan skriva för att skapa numrerade listobjekt:

För att skapa nya listobjekt, tryck på enter eller return tangent. För att slutföra listan trycker du på enter eller return tangenten två gånger.

Indrag

Om du vill skapa indragstext för en paragraf, klicka på knappen Indrag:

Indragning av ett stycke ger det en marginal på vänster sida.

Ta bort indrag för text

För att ta bort indrag eller "minska indrag" för en paragraf, klicka på knappen Minska indrag:

Om du tar bort indrag för en paragraf raderas alla indragna marginaler som den har.

Justera text

Justera text genom att markera ett textstycke och klicka på knappen Justera. Välj Vänsterjustera, Centrera eller Högerjustera.

Ändra textfärger med den rich text editor

Steg:

  1. Markera texten och klicka på knappen Färg.

  2. Klicka på en färg för att ändra den markerade texten till den färgen.

Ändra text och bakgrundsfärger

Steg:

  1. Markera texten och klicka på knappen Färg.

  2. Klicka på Bakgrundsfärg ...:

  3. Klicka på en färg för att ändra den markerade textens bakgrund till den färgen.

Rensa formatering i rich text editor

Om du vill ta bort formatering från text eller bilder markerar du innehållet och klickar sedan på knappen Rensa formatering:

Infoga tabeller med rich text editor

Du kan infoga tabeller i dina blogginlägg, på sidor, i produktbeskrivningar och produktkollektioners beskrivningar med rich text editor. Du kan placera text, bilder eller till och med videor i en tabell efter att du skapat den.

Steg:

  1. I rich text editor klickar du på knappen Infoga tabell:

  2. Klicka på Infoga tabell för att infoga en tabell.

    Då skapas en tabell med en rad och en kolumn.

När du har skapat en tabell klickar du på knappen Infoga tabell igen för att ändra tabellens rader och kolumner.

  • Infoga rad nedan: Placera markören i en rad och klicka på den här knappen för att infoga en ny rad ovanför.
  • Infoga rad nedan: Placera markören i en rad och klicka på den här knappen för att infoga en ny rad nedanför.
  • Infoga kolumn före: Placera markören i en kolumn och klicka på den här knappen för att infoga en ny kolumn före den kolumnen.
  • Infoga kolumn efter: Placera markören i en kolumn och klicka på den här knappen för att infoga en ny kolumn efter den kolumnen.
  • Radera rad: Placera markören i en rad som du vill radera och klicka sedan på den här knappen.
  • Radera kolumn: Placera markören i en kolumn som du vill radera och klicka sedan på den här knappen.
  • Radera tabell: Placera markören någonstans i tabellen och klicka sedan på den här knappen för att radera hela tabellen.

Infoga länkar med rich text editor

Du kan infoga länkar (hyperlänkar) i blogginlägg, sidor, produktbeskrivningar och produktseriebeskrivningar med rich text editor. Du kan lägga till länkar som leder kunder till sidor i din Shopify-webbutik och på andra webbplatser. Du kan också lägga till länkar som öppnar e-postmeddelanden eller ringa telefonsamtal, för att hjälpa kunder att kontakta dig.

Steg:

  1. Markera texten eller bilden som du vill omvandla till en länk.

  2. Klicka på Infoga länk.

  3. Ange destinationens URL för länken i Länka till fält:

- För att länka till en extern webbplats som ligger utanför din Shopify-butik, anger du http:// följt av webbadressen, till exempel http://www.example.com. - För att länka till en sida i din Shopify-webbutik anger du den korta URL-adressen, till exempel /collections/summer-collection. - För att skapa en länk som öppnar ett e-postmeddelande anger du mailto: följt av e-postadressen, till exempel mailto:example@example.com. - Om du vill skapa en länk som gör ett telefonsamtal anger du tel:, följt av telefonnumret, till exempel tel:+0-123-456-7890.

  1. Ange en kort beskrivning av länken i länkrubrikens ruta.

  2. Välj hur länken ska öppnas med menyn Öppna den här länken i:

- samma fönster: Länken öppnas i en användares befintliga webbläsarflik eller fönster. - ett nytt fönster: Länken öppnas i en ny webbläsarflik eller fönster.

  1. Klicka på Infoga länk för att konvertera din markerade text till en länk.

Lägg till interna och externa länkar med rich text editor

Länkar till sidor inom din Shopify-butik kallas interna länkar. Du kan använda korta webbadresser för att skapa interna länkar. Till exempel kommer URL:en /collections att peka på din butiks produktseriesida.

För att länka till en specifik sida i din webbutik, t.ex. en kollektion eller en produktsida använder du URL-formatet /page-type/page-handle. För att till exempel länka till en kollektion du har skapat som kallas för Summer Collection använder du URL:en /collections/summer-collection.

Länkar till webbplatser som ligger utanför din Shopify-butik kallas för externa länkar. Externa länkar måste anges fullständigt och börja med http://.

Länk till en fil i sidinnehållet

När du har laddat upp en fil kan du länka den till innehåll i rich text editor för att göra den tillgänglig för nedladdning från en produkt- eller kollektionsbeskrivning, webbsida eller blogginlägg.

Steg:

  1. Kopiera URL-adressen för filen som du vill länka.

  2. I din Shopify-administrator klickar du på produkten, kollektionen, webbsidan eller blogginlägget där du vill lägga till en bild.

  3. I rich text editor skriver du in eller väljer länktext. Till exempel, du kan lägga till en länk till ett PDF-storleksdiagram från länktexten, Click here to download our sizing chart.

  4. Välj länktexten.

  5. Klicka på Infoga länk:

  6. I fältet Länka till klistrar du in URL-adressen för filen som du vill länka.

Obs! Webbadressen måste börja med http://cdn.shopify.com/. Om du ser http://static.shopify.com, ersätt den med http://cdn.shopify.com.

  1. Klicka på Infoga länk. I rich text editor visas länkad text i blått och är understruken.

Infoga bilder med rich text editor

Det finns tre sätt att infoga en bild med rich text editor. Du kan:

  • ladda upp bilder
  • välj från dina produktbilder
  • använd en offentlig bild-URL.

Ladda upp bilder

Steg:

  1. I rich text editor klickar du på knappen Infoga bild:

  2. Klicka på fliken Uppladdade bilder i dialogrutan Infoga bild.

  3. Klicka på Ladda upp fil.

  4. Välj en JPG- eller PNG-bildfil från din dator.

  5. Klicka på bilden som du laddat upp för att välja den:

  6. Välj skärmstorlek för bilden från menyn Storlek att infoga. Du kan välja Original för att infoga bilden utan att ändra dess skärmstorlek.

  7. Klicka på Infoga bild för att placera bilden i rich text editor.

Välj från dina produktbilder

Steg:

  1. I rich text editor klickar du på knappen Infoga bild:

  2. Klicka på fliken Produktbilder i dialogrutan Infoga bild.

  3. Klicka på bilden som du vill infoga:

    Om du inte ser produktbilden du vill infoga kan du använda pilknapparna för att titta på olika sidor:

  4. Välj skärmstorlek för bilden från menyn Storlek att infoga. Du kan välja Original för att infoga bilden utan att ändra dess skärmstorlek.

  5. Klicka på Infoga bild för att placera produktbilden i rich text editor.

Använd en bild-URL

Så här sätter du in en bild med en offentlig URL:

  1. I rich text editor klickar du på knappen Infoga bild:

  2. Klicka på fliken URL i dialogrutan Infoga bild.

  3. Ange din bildfils offentligt tillgängliga URL-adress:

  4. Klicka på Infoga bild för att infoga bilden i rich text editor i ursprunglig storlek.

Flytta och ändra storlek på en bild i rich text editor.

När du har lagt till en bild i en produkt- eller kollektionsbeskrivning, på en webbsida eller en blogg kan du flytta den till en annan plats i innehållet.

Steg:

  1. I din Shopify-administratör klickar du på produkten, kollektionen, webbsidan eller bloggposten som innehåller den bild som du vill flytta eller ändra storlek på.

  2. Klicka på bilden i rich text editor.

  3. Gör dina ändringar:

- Flytta bilden genom att klicka på den och dra den till en annan plats i fältet Innehåll. - För att ändra storlek på bilden, klicka och dra i ett av hörnen.

  1. Klicka på Spara.

Redigera en bild i rich text editor.

Du kan ändra storlek, textförpackning och justering av en bild i rich text editor. Du kan också redigera bildens URL-adress, eller lägga till eller redigera bild alt text.

Steg:

  1. Dubbelklicka på bilden i rich text editor för att öppna dialogrutan Redigera bild.

  2. Använd storleks- och justeringsalternativ för att redigera bilden.

- Om du vill ändra bildens storlek väljer du en storlek. - För att ändra bilden, en ny bild-URL. - För att förbättra din webbutiks SEO och tillgänglighet, lägg till eller redigera bild alt text. - För att lägga till mellanslag anger du antalet pixlar mellanslaget ska ha på varje sida. - För att ändra bildens justering, väljer du från ikonerna som representerar vänster-, center- eller högerjustering. - För att lägga till textomslag, markera Omslut bilden med text.

  1. Klicka på Redigera bild för att spara dina ändringar.

Infoga videor med rich text editor

Du kan infoga eller bädda in videor i blogginlägg, på sidor och i beskrivningar av produkter och kollektioner med rich text editor.

Om du vill bädda in en video som du har skapat måste du först ladda upp den till en sida för videostreaming såsom YouTube eller Vimeo.

Steg:

  1. Kopiera videons URL genom att trycka på ctrl + C på en PC eller command + C på en Mac.

  2. Besök Embed Responsively. Embed Responsively är ett verktyg som ger dig en förbättrad inbäddningskod för din video.

  3. På Embed Responsively, klicka för att välja videowebbplatsen där din video är belägen.

  4. Klistra in videons URL-adress som du kopierade till URL-sidans ruta på Embed Responsively genom att trycka på ctrl + V på en PC eller command + V på en Mac.

  5. Klicka på Bädda in. Embed Responsively kommer att skapa inbäddningskoden för dig.

  6. Om din video är från YouTube och du inte vill att den ska visa relaterade videor när den är färdig, kan du hitta videons URL-adress i inbäddningskoden och sedan kopiera och klistra in ?rel=0 i slutet inom citatmärkena:

  7. Kopiera hela koden i rutan Bädda in kod.

  8. I din Shopify-admin klickar du på knappen Infoga video i rich text editor:

  9. Klistra in inbäddningskoden i rutan Infoga video.

  10. Klicka på Infoga video.

  11. Klicka på Spara när du är redo att spara dina ändringar till det objekt du redigerade.

Infoga ljudfiler med rich text editor

Du kan använda rich text editor för att infoga eller integrera ljudfiler i blogginlägg, på sidor, i produktbeskrivningar och kollektionsbeskrivningar.

Steg:

  1. Från ditt Shopify-administratörskonto klickar du på Inställningar och sedan på Filer.

  2. Klicka på Ladda upp filer för att ladda upp ljudfilen du vill infoga eller bädda in i din butik.

  3. Från avsnittet Webbutik, öppna rich text editor för den sida eller bloggpost som du vill ha ljudfilen på.

  4. Kopiera <div id="player"><audio controls="controls">, klistra sedan in koden i rich text editor för att bädda in en ljudspelare på din sida.

  5. Kopiera följande kod:

    <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

    Klistra in den här koden i din rich text editor efter koden för ljudspelaren och ersätt sedan https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 med URL-adressen du skapade för din ljudfil när du laddade upp den på Shopify. Du kan hitta din ljudfils URL-adress när som helst på sidan Filer.

  6. Klicka på Spara.

  7. Klicka på Visa för att se till att din ljudfil spelas korrekt.

Lägg till eller ta bort interna kommentarer i rich text editor

Du kan använda kommentar-taggar <!-- och --> för intern text som du inte vill publicera i din butik.

Steg:

  1. I din rich text editor klickar du på knappen Visa HTML.

  2. Om du vill lägga till en intern kommentar bifogar du texten som du vill hålla gömd inom <!-- och -->. Till exempel <!--yourtext-->.

  3. Klicka på Spara.

HTML-taggar som bifogas kommentar-taggar sparas som intern text. För att dessa HTML-taggar ska fungera korrekt måste du ta bort kommentar-taggarna <!-- och --> runt dem.

Ta bort kommentar-taggar

Var ska du använda rich text editor

Du kan för närvarande använda rich text editor i Shopify-appen för att lägga till beskrivningar för dina produkter. Om du vill lägga till text på sidor, bloggar eller kollektioner måste du göra det från din Shopify-administrator i en webbläsare.

Formatera text med rich text editor

Du kan använda rich text editor för att formatera din text på flera olika sätt:

  • Fetstil
  • Kursivera text
  • Stryk under text
  • Justera text
  • Skapa listor

Fetstil

För att ändra texten till fetstil markerar du texten och trycker sedan på knappen Fetstil:

Kursivera text

För att kursivera din text markerar du texten och trycker sedan på kursivknappen:

Stryk under text

För att stryka under din text markerar du texten och trycker sedan på understrykningsknappen:

Justera text

Steg:

  1. Markera texten som du vill justera i textredigeraren.
  2. Tryck på justeringsknappen:
  3. Tryck på ett av justeringsalternativen för att välja vänsterjustering, centrering eller högerjustering.

Skapa listor

Du kan använda textredigeraren för att lägga till punktlistor och numrerade listor i din text.

Steg:

  1. Från textredigeraren trycker du på listningsknappen för att visa de två listalternativen:

  2. Tryck på punktlistan eller den numrerade listan för att välja vilken lista du vill lägga till.

  3. Ange dina listobjekt. Efter varje objekt, tryck på Retur för att flytta till nästa rad och ange ett annat objekt.

  4. När du är färdig med att ange din lista trycker du på enter två gånger.

Infoga länkar med rich text editor

Du kan använda textredigeraren för att lägga till länkar till din text:

  1. Från textredigeraren väljer du de ord som du vill skapa en länk av.

  2. Tryck på länkknappen:

  3. Fr`ån skärmen Infoga länk, ange länkens URL-adress.

  4. Ange en länktitel, som används för tillgänglighet och SEO.

  5. Som standard öppnas länkens destination i samma fönster. För att ställa in länken på att öppna i ett annat fönster, aktivera alternativet Öppna länk i ett nytt fönster.

  6. Klicka på Spara.

Skapa interna och externa länkar

Länkar till sidor inom din Shopify-butik kallas interna länkar. Du kan använda korta webbadresser för att skapa interna länkar. Till exempel kommer URL:en /collections att peka på din butiks produktseriesida.

För att länka till en specifik sida i din webbutik, t.ex. en kollektion eller en produktsida använder du URL-formatet /page-type/page-handle. För att till exempel länka till en kollektion du har skapat som kallas för Summer Collection använder du URL:en /collections/summer-collection.

Länkar till webbplatser som ligger utanför din Shopify-butik kallas för externa länkar. Externa länkar måste börja med http://.

Var ska du använda rich text editor

Du kan för närvarande använda rich text editor i Shopify-appen för att lägga till beskrivningar för dina produkter. Om du vill lägga till text på sidor, bloggar eller kollektioner måste du göra det från din Shopify-administrator i en webbläsare.

Formatera text med rich text editor

Du kan använda rich text editor för att formatera din text på flera olika sätt:

  • Fetstil
  • Kursivera text
  • Stryk under text
  • Justera text
  • Skapa listor

Fetstil

För att ändra texten till fetstil markerar du texten och trycker sedan på knappen Fetstil:

Kursivera text

För att kursivera din text markerar du texten och trycker sedan på kursivknappen:

Stryk under text

För att stryka under din text markerar du texten och trycker sedan på understrykningsknappen:

Justera text

Steg:

  1. Markera texten som du vill justera i textredigeraren.
  2. Tryck på justeringsknappen:
  3. Tryck på ett av justeringsalternativen för att välja vänsterjustering, centrering eller högerjustering.

Skapa listor

Du kan använda textredigeraren för att lägga till punktlistor och numrerade listor i din text.

Steg:

  1. Från textredigeraren trycker du på listningsknappen för att visa de två listalternativen:

  2. Tryck på punktlistan eller den numrerade listan för att välja vilken lista du vill lägga till.

  3. Ange dina listobjekt. Efter varje objekt, tryck på Retur för att flytta till nästa rad och ange ett annat objekt.

  4. När du är färdig med att ange din lista trycker du på enter två gånger.

Infoga länkar med rich text editor

Du kan använda textredigeraren för att lägga till länkar (hyperlänkar) till din text:

  1. Från textredigeraren väljer du de ord som du vill skapa en länk av.

  2. Tryck på länkknappen:

  3. Fr`ån skärmen Infoga länk, ange länkens URL-adress.

  4. Ange en länktitel, som används för tillgänglighet och SEO.

  5. Som standard öppnas länkens destination i samma fönster. För att ställa in länken på att öppna i ett annat fönster, aktivera alternativet Öppna länk i ett nytt fönster.

  6. Klicka på kryssrutan för att spara dina länk.

Skapa interna och externa länkar

Länkar till sidor inom din Shopify-butik kallas interna länkar. Du kan använda korta webbadresser för att skapa interna länkar. Till exempel kommer URL:en /collections att peka på din butiks produktseriesida.

För att länka till en specifik sida i din webbutik, t.ex. en kollektion eller en produktsida använder du URL-formatet /page-type/page-handle. För att till exempel länka till en kollektion du har skapat som kallas för Summer Collection använder du URL:en /collections/summer-collection.

Länkar till webbplatser som ligger utanför din Shopify-butik kallas för externa länkar. Externa länkar måste börja med http://.

Är du redo att börja sälja med Shopify?

Prova gratis