Sisällön muokkaaminen rich text editorilla

Voit käyttää Shopifyn rich text editoria verkkokaupassasi näkyvän sisällön muotoiluun ja tyylittelyyn.

Missä rich text editoria voi käyttää

Voit käyttää rich text editoria tekstin lisäämiseen tai muokkaamiseen kaupassasi useissa eri paikoissa:

Jos käytät yhteensopivaa teemaa, voit lisätä rich text -osioita sivuillesi tai malleihisi teemaeditorilla.

HTML-sisällön lisääminen rich text editorilla

Voit syöttää HTML-sisältöä blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmien kuvauksiin rich text editorilla.

Napsauta Muokkaa koodia -painiketta nähdäksesi rich text editorissa olevan sisällön HTML-koodin.

HTML-näkymässä voit tehdä monia muutoksia rich text editorin sisältöön. Voit lisätä kuvia, videoita tai taulukoita HTML:n avulla ja voit korjata tai hienosäätää asettelua ja sisällön tyyliä.

Mediapienohjelman upottaminen

Jos haluat upottaa video- tai musiikkipienohjelman, sinun on ensin ylläpidettävä sitä jossakin palvelussa, kuten Youtubessa, Vimeossa tai SoundCloudissa. Nämä palvelut luovat upotuskoodin, jonka voit kopioida ja liittää Shopifyn ohjausnäkymän rich text editoriin.

Vaiheet:

  1. Etsi upotettavan median upotuskoodi.
  2. Valitse koko upotuskoodi napsauttamalla sitä ja painamalla PC-tietokoneella ctrl + A tai Mac-tietokoneella command + A.
  3. Kopioi upotuskoodi painamalla PC-tietokoneella ctrl + C tai Mac-tietokoneella command + C.
  4. Napsauta Shopifyn ohjausnäkymässä muokattavan sisällön rich text editorin Näytä HTML -painiketta.
  5. Liitä upotuskoodi painamalla PC-tietokoneella ctrl + V tai Mac-tietokoneella command + V.
  6. Napsauta Tallenna.

Tekstin muotoileminen rich text editorilla

Muotoilu-painikkeella voit luoda nopeasti kappaleita, otsikoita tai lohkositaatteja. Oikean muotoilun ja otsikkotasojen käyttäminen auttaa ihmisiä ja hakukoneita lukemaan verkkosivusi sisältöä.

Valitse tekstin muotoilu maalaamalla teksti ja napsauttamalla Muotoilu-painiketta.

Muotoiluvalinnat

  • Kappale

    Suurin osa verkkosivusi tekstisisällöstä on kappaletekstiä. Kappaletekstin fonttikoko on yleensä 10–12 pistettä, mutta jotkin teemat käyttävät eri fonttikokoja.

  • Otsikko (1–6)

    Otsikoita käytetään sisällön jäsentämiseen. Otsikkotasoja on 6. Otsikko 1 on tärkein ja Otsikko 6 vähiten tärkeä.

  • Lohkositaatti

    Lohkositaattia käytetään lainatun tekstin, kuten sitaatin tai otteen, näyttämiseen kirjasta tai verkkosivulta.

Tekstin lihavointi

Lihavoi teksti maalaamalla se ja napsauttamalla Lihavointi-painiketta.

Tekstin kursivointi

Kursivoi teksti maalaamalla se ja napsauttamalla Kursivointi-painiketta.

Tekstin alleviivaus

Alleviivaa teksti maalaamalla se ja napsauttamalla Alleviivaus-painiketta.

Luettelon luominen luettelomerkeillä

Luo luettelomerkkiluettelo napsauttamalla Luettelomerkit-painiketta.

Voit luoda ensimmäisen luettelokohdan kirjoittamalla. Voit luoda uusia luettelokohtia painamalla enter- tai return-näppäintä. Voit lopettaa luettelon painamalla enter- tai return-näppäintä kahdesti.

Luo numeroitu luettelo

Luo numeroitu luettelo napsauttamalla Numeroitu luettelo -painiketta.

Voit luoda ensimmäiset numeroidut luettelokohdat kirjoittamalla. Voit luoda uusia luettelokohtia painamalla enter- tai return-näppäintä. Voit lopettaa luettelon painamalla enter- tai return-näppäintä kahdesti.

Sisennä tekstiä

Kappaleen sisentäminen lisää vasemmanpuoleisen marginaalin. Sisennä kappale napsauttamalla Sisennä-painiketta.

Poista tekstin sisennys

Kappaleen sisennyksen poistaminen poistaa sen mahdolliset sisennykset. Voit poistaa kappaleen sisennyksen tai ”ulontaa” sen napsauttamalla Ulonna-painiketta.

Tasaa teksti

Tasaa teksti valitsemalla se, napsauttamalla Tasaus-painiketta ja valitsemalla Tasaa vasemmalle, Tasaa keskelle tai Tasaa oikealle.

Vaihda tekstin väriä

  1. Korosta teksti ja napsauta Väri-painiketta.
  2. Vaihda korostetun tekstin väri napsauttamalla väriä tai antamalla heksakoodi.

Vaihda tekstin taustaväriä

  1. Korosta teksti ja napsauta Väri-painiketta.
  2. Napsauta Tausta-välilehteä.
  3. Vaihda korostetun tekstin taustaväri napsauttamalla väriä tai antamalla heksakoodi.

Poista muotoilu rich text editorissa

Voit poistaa tekstin tai kuvien muotoilun korostamalla sisällön ja napsauttamalla sitten Poista muotoilu -painiketta.

Lisää taulukoita rich text editorilla

Voit lisätä taulukoita blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmakuvauksiin rich text editorilla. Kun olet luonut taulukon, voit sijoittaa siihen tekstiä, kuvia tai jopa videoita.

Vaiheet:

  1. Napsauta rich text editorissa Lisää taulukko -painiketta.
  2. Lisää taulukko napsauttamalla Lisää taulukko. Tämä luo taulukon, jossa on yksi rivi ja yksi sarake.

Kun olet luonut taulukon, napsauta Lisää taulukko -painiketta uudelleen muokataksesi taulukon rivejä ja sarakkeita:

  • Lisää rivi yläpuolelle: Aseta kohdistin riville ja lisää uusi rivi sen yläpuolelle napsauttamalla tätä painiketta.
  • Lisää rivi alapuolelle: Aseta kohdistin riville ja lisää uusi rivi sen alapuolelle napsauttamalla tätä painiketta.
  • Lisää sarake ennen: Aseta kohdistin sarakkeeseen ja lisää uusi sarake sen eteen napsauttamalla tätä painiketta.
  • Lisää sarake jälkeen: Aseta kohdistin sarakkeeseen ja lisää uusi sarake sen jälkeen napsauttamalla tätä painiketta.
  • Poista rivi: Aseta kohdistin poistettavalle riville ja napsauta sitten tätä painiketta.
  • Poista sarake: Aseta kohdistin poistettavaan sarakkeeseen ja napsauta sitten tätä painiketta.
  • Poista taulukko: Aseta kohdistin mihin tahansa kohtaan taulukossa ja poista koko taulukko napsauttamalla tätä painiketta.

Voit lisätä linkkejä (hyperlinkkejä) blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmakuvauksiin rich text editorilla. Voit lisätä linkkejä, jotka ohjaavat asiakkaita Shopify-verkkokauppasi sivuille ja muille verkkosivustoille. Voit myös lisätä linkkejä, jotka avaavat sähköpostiviestejä tai soittavat puheluita, jotta asiakkaiden on helpompi ottaa sinuun yhteyttä.

Vaiheet:

  1. Korosta teksti tai kuva, jonka haluat muuttaa linkiksi.
  2. Napsauta Lisää linkki.
  3. Anna linkin kohteen URL-osoite Linkki kohteeseen -kenttään:
    • Jos haluat luoda linkin Shopify-kauppasi ulkopuoliseen verkkosivustoon, anna https:// ja sen jälkeen verkko-osoite, esimerkiksi https://www.example.com.
    • Jos haluat luoda linkin Shopify-verkkokauppasi sivulle, anna lyhyt URL-osoite, esimerkiksi /collections/summer-collection.
    • Jos haluat luoda linkin, joka avaa sähköpostiviestin, anna mailto: ja sen jälkeen sähköpostiosoite, esimerkiksi mailto:example@example.com.
    • Jos haluat luoda linkin, joka soittaa puhelun, anna tel: ja sen jälkeen puhelinnumero, esimerkiksi tel:+0-123-456-7890.
  4. Anna linkistä lyhyt kuvaus Linkin otsikko -kenttään.
  5. Valitse, miten linkki avataan Avaa tämä linkki -valikosta:
    • samassa ikkunassa: Linkki avautuu käyttäjän olemassa olevaan selaimen välilehteen tai ikkunaan.
    • uudessa ikkunassa: Linkki avautuu uuteen selaimen välilehteen tai ikkunaan.
  6. Napsauta Lisää linkki, jos haluat muuttaa korostetun tekstin linkiksi.

Shopify-kauppasi sisäisiin sivuihin johtavia linkkejä kutsutaan sisäisiksi linkeiksi. Voit luoda sisäisiä linkkejä lyhyillä URL-osoitteilla. Esimerkiksi URL-osoite /collections osoittaa kauppasi kokoelmasivulle.

Jos haluat linkittää verkkokauppasi tietylle sivulle, kuten kokoelma- tai tuotesivulle, käytä URL-muotoa /sivutyyppi/sivun-käsittelytunnus. Jos esimerkiksi haluat linkittää luomaasi kokoelmaan, jonka nimi on Summer Collection, käytä URL-osoitetta /collections/summer-collection.

Shopify-kauppasi ulkopuolisiin verkkosivustoihin johtavia linkkejä kutsutaan ulkoisiksi linkeiksi. Ulkoiset linkit on annettava kokonaisuudessaan, ja niiden on alettava merkkijonolla http://.

Kun olet ladannut tiedoston palveluun, voit linkittää sen rich text editorin sisältöön, jotta sen voi ladata tuote- tai kokoelmakuvauksesta, verkkosivulta tai blogipostauksesta.

Vaiheet:

Tietokone
  1. Siirry Shopifyn ohjausnäkymässä kohtaan Sisältö > Tiedostot.

  2. Kopioi linkitettävän tiedoston URL-osoite.

  3. Klikkaa Shopifyn ohjausnäkymässä tuotetta, kokoelmaa, verkkosivua tai blogipostausta, johon haluat lisätä tiedoston.

  4. Kirjoita tai valitse linkkiteksti rich text -editorissa.

  5. Valitse linkkiteksti.

  6. Klikkaa Lisää linkki.

  7. Liitä linkitettävän tiedoston URL-osoite Linkki-kenttään.

  8. Klikkaa Lisää linkki. Linkitetty teksti näkyy rich text -editorissa sinisenä ja alleviivattuna.

Mobiili
  1. Napauta Shopify app ‑sovelluksessa Menu ‑kuvaketta.

  2. Napauta Sisältö-valikossa nuoli alas -kuvaketta ja napauta sitten Tiedostot.

  3. Kopioi linkitettävän tiedoston URL-osoite.

  4. Napauta Shopifyn ohjausnäkymässä tuotetta, kokoelmaa, verkkosivua tai blogipostausta, johon haluat lisätä tiedoston.

  5. Kirjoita tai valitse linkkiteksti rich text -editorissa.

  6. Valitse linkkiteksti.

  7. Napauta Lisää linkki.

  8. Liitä linkitettävän tiedoston URL-osoite Linkki-kenttään.

  9. Napauta Lisää linkki. Linkitetty teksti näkyy rich text -editorissa sinisenä ja alleviivattuna.

Kuvien lisääminen rich text -editorilla

Voit lisätä kuvan rich text -editorin avulla kolmella tavalla:

Kuvien lataaminen

Vaiheet:

  1. Klikkaa rich text -editorissa Lisää kuva -painiketta.

  2. Klikkaa Lisää kuva -valintaikkunassa Ladatut kuvat -välilehteä.

  3. Klikkaa Lataa tiedosto.

  4. Valitse tietokoneeltasi WebP-, HEIC-, SVG-, GIF-, JPEG- tai PNG-kuvatiedosto.

  5. Valitse lataamasi kuva klikkaamalla sitä.

  6. Valitse kuvan näyttökoko Koko-valikosta. Voit valita Alkuperäinen, jos haluat lisätä kuvan muuttamatta sen näyttökokoa.

  7. Aseta kuva rich text -editoriin klikkaamalla Lisää kuva.

Valitseminen tuotekuvista

Vaiheet:

  1. Klikkaa rich text -editorissa Lisää kuva -painiketta.

  2. Klikkaa Lisää kuva -valintaikkunassa Tuotekuvat-välilehteä.

  3. Klikkaa kuvaa, jonka haluat lisätä. Jos et löydä tuotemediaa, jonka haluat lisätä, voit selata eri sivuja nuolipainikkeilla.

  4. Valitse kuvan näyttökoko Koko-valikosta. Voit valita Alkuperäinen, jos haluat lisätä kuvan muuttamatta sen näyttökokoa.

  1. Aseta tuotekuva rich text -editoriin klikkaamalla Lisää kuva.

Kuvan URL-osoitteen käyttäminen

Voit lisätä kuvan julkisen URL-osoitteen avulla seuraavasti:

  1. Klikkaa rich text -editorissa Lisää kuva -painiketta.
  2. Klikkaa Lisää kuva -valintaikkunassa URL-välilehteä.
  3. Anna kuvatiedostosi julkisesti saatavilla oleva URL-osoite.
  4. Lisää kuva rich text -editoriin sen alkuperäisessä koossa klikkaamalla Lisää kuva.

Kuvan siirtäminen ja koon muuttaminen rich text -editorissa

Kun olet lisännyt kuvan tuote- tai kokoelmakuvaukseen, verkkosivulle tai blogiin, voit siirtää sen toiseen paikkaan sisällössä.

Vaiheet:

  1. Klikkaa Shopifyn ohjausnäkymässä tuotetta, kokoelmaa, verkkosivua tai blogipostausta, joka sisältää kuvan, jota haluat siirtää tai jonka kokoa haluat muuttaa.
  2. Klikkaa kuvaa rich text -editorissa.
  3. Tee jompikumpi seuraavista:
    • Voit siirtää kuvan klikkaamalla ja vetämällä sen toiseen paikkaan Sisältö-kentässä.
    • Voit muuttaa kuvan kokoa klikkaamalla ja vetämällä yhdestä kulmasta.
  4. Napsauta Tallenna.

Kuvan muokkaaminen rich text -editorissa

Voit muuttaa kuvan kokoa, tekstin rivitystä ja tasausta rich text -editorissa. Voit myös muokata kuvan URL-osoitetta tai lisätä tai muokata kuvan vaihtoehtoista tekstiä.

Vaiheet:

  1. Kaksoisklikkaa kuvaa rich text -editorissa avataksesi Muokkaa kuvaa -valintaikkunan.
  2. Muokkaa kuvaa koon ja tasauksen asetuksilla:
    • Voit muuttaa kuvan kokoa valitsemalla kokovaihtoehdon.
    • Paranna verkkokauppasi SEO:ta ja saavutettavuutta lisäämällä tai muokkaamalla kuvan vaihtoehtoista tekstiä.
    • Jos haluat lisätä välistystä, syötä haluamasi tyhjän tilan pikselimäärä kuvan kullekin sivulle.
    • Voit muuttaa kuvan tasausta valitsemalla vasenta, keskelle tai oikealle tasausta edustavista kuvakkeista.
    • Lisää tekstin rivitys valitsemalla Rivitä teksti kuvan ympärille.
  3. Tallenna muutokset klikkaamalla Muokkaa kuvaa.

Videoiden lisääminen rich text -editorilla

Voit lisätä tai upottaa videoita blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmakuvauksiin rich text -editorin avulla.

Jos haluat upottaa luomasi videon, sinun on ensin ladattava se videon suoratoistosivustolle, kuten YouTubeen tai Vimeoon.

YouTube ei salli aiheeseen liittyvien videoiden poistamista käytöstä, mutta voit määrittää, että aiheeseen liittyvien videoiden on oltava samalta kanavalta kuin juuri toistettu video.

Vaiheet:

  1. Kopioi videon URL-osoite painamalla PC-tietokoneella ctrl + C tai Mac-tietokoneella command + C.
  1. Siirry osoitteeseen Embed Responsively. Embed Responsively on työkalu, jolla saat parannetun upotuskoodin videollesi.
  1. Valitse Embed Responsively -sivustolla videosivusto, jolla videosi sijaitsee.
  2. Liitä kopioimasi videon URL-osoite Embed Responsively -sivuston Page URL -kenttään painamalla PC:llä ctrl + V tai Macilla command + V.
  3. Klikkaa Embed. Embed Responsively luo sinulle upotuskoodin.
  4. Jos video on YouTubesta ja haluat näyttää vain samaan YouTube-kanavaan liittyviä videoita, etsi videon URL-osoite upotuskoodista. Kopioi ja liitä ?rel=0 sen loppuun lainausmerkkien sisälle.
  5. Kopioi kaikki koodi Embed code -kentästä.
  6. Klikkaa Shopifyn ohjausnäkymässä rich text editorin Lisää video -painiketta.
  7. Liitä upotuskoodi Lisää video -valintaikkunan kenttään.
  8. Klikkaa Lisää video.
  9. Kun olet valmis, tallenna muutokset muokkaamaasi kohteeseen klikkaamalla Tallenna.

Äänitiedostojen lisääminen rich text editorilla

Voit käyttää rich text editoria äänitiedostojen lisäämiseen tai upottamiseen blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmakuvauksiin.

Vaiheet:

  1. Siirry Shopifyn ohjausnäkymässä kohtaan Sisältö > Tiedostot.

  2. Klikkaa Lataa tiedostoja ladataksesi äänitiedoston, jonka haluat lisätä tai upottaa kauppaasi.

  3. Avaa Verkkokauppa-osiosta sen sivun tai blogipostauksen rich text editor, jolla haluat esittää äänitiedoston.

  4. Kopioi koodi <div id="player"><audio controls="controls"> ja liitä se sitten rich text editoriin upottaaksesi soittimen sivullesi.

  5. Kopioi seuraava koodi:

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. Liitä tämä koodi rich text editoriisi soittimen koodin jälkeen ja korvaa sitten https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 URL-osoitteella, jonka loit äänitiedostollesi ladatessasi sen Shopifyhin. Löydät äänitiedostosi URL-osoitteen milloin tahansa Tiedostot-sivulta.
  2. Napsauta Tallenna.
  3. Varmista klikkaamalla Näytä, että äänitiedostosi toistuu oikein.

Sisäisten kommenttien lisääminen tai poistaminen rich text editorissa

Voit käyttää kommenttitunnisteita <!-- ja --> sisäiselle tekstille, jota et halua julkaista kaupassasi.

Vaiheet:

  1. Klikkaa rich text editorissasi Näytä HTML -painiketta.
  2. Lisää sisäinen kommentti sulkemalla piiloon jätettävä teksti tunnisteiden <!-- ja --> väliin. Esimerkki: <!--tekstisi-->.
  3. Napsauta Tallenna.

Kommenttitunnisteiden sisällä olevat HTML-tunnisteet tallennetaan sisäisenä tekstinä. Jotta kyseiset HTML-tunnisteet toimisivat oikein, sinun on poistettava niiden ympärillä olevat kommenttitunnisteet <!-- ja -->.

Tietoja rich text editorista

Rich text editor on integroitu TinyMCE-järjestelmään, joka on kolmannen osapuolen sisällönjakeluverkko (CDN). Tällä integraatiolla on joitakin tärkeitä vaikutuksia:

  • Sisältörajoitus: Rich text editoriin syötettävän sisällön yläraja on 64 kt. Tämä koskee Sivuja, Blogipostauksia ja lisäskriptejä.
  • HTML-puhdistus: TinyMCE sisältää sisällön suodatuslogiikan, joka korjaa HTML-muotoilun automaattisesti estääkseen myyntipaikan toimintahäiriöitä ja tietoturvariskejä. Vaikka voit muokata HTML-koodin manuaalisesti takaisin alkuperäiseen muotoonsa, on suositeltavaa hyväksyä nämä automaattiset muutokset mahdollisten ongelmien ehkäisemiseksi.

Rich text editorin vianmääritys

Jos kohtaat ongelmia rich text editorin kanssa, tarkista seuraavat vianmääritysvaiheet ja yleiset ongelmat.

Muotoiluongelmien vianmääritys

Kopioidun sisällön muotoiluongelmat

Teksti perii aina sen editorin tai verkkosivun muotoilun, josta se on peräisin. Jos kirjoitat sisältöä Microsoft Wordissa ja kopioit ja liität sen sitten rich text editoriin, se säilyttää saman värin, koon, sisennyksen ja välityksen, mukaan lukien <div>-tunnisteet.

Muokkaa ja muotoile sisältösi aina kun mahdollista suoraan rich text editorissa.

Jos tarvitset monimutkaisempia sivupohjia, harkitse sivunmuodostinsovellusten, kuten Shogun Drag & Drop Page Builder, käyttämistä.

Muotoiluongelmien tunnistaminen

Yleisin syy rich text editorin ongelmiin on upotettu tyyli tai muotoilu, joka siirtyy sisällön mukana, kun kopioit ja liität sitä toisesta lähteestä.

Tämä voi ilmetä eri tavoin, mutta se on yleensä syynä, kun Shopifyn ohjausnäkymässä näkyvän ja aktiivisessa kaupassasi näkyvän välillä on eroavuuksia. Tämä voi tarkoittaa esimerkiksi sitä, että tiedot eivät päivity tai tyyli näyttää erilaiselta.

Muotoiluongelmien vianmääritys

Voit testata kahdella tavalla, johtuvatko ongelmat muotoilusta: käyttämällä Poista muotoilu -painiketta tai ajamalla rich text editorin sisällön HTML-koodinpoistajan läpi.

Testausta varten luo kaksoiskappale tuotteesta tai sivusta, jossa ongelma esiintyy, ja tee sitten kaksoiskappaleella jompikumpi seuraavista testeistä.

Testi 1: Poista muotoilu

  1. Maalaa kaikki rich text editorin sisältö.
  2. Klikkaa Poista muotoilu -painiketta.
  3. Klikkaa Tallenna ja testaa.

Testi 2: HTML-koodinpoistaja

  1. Kopioi kaikki sisältö rich text editorista.
  2. Liitä se HTML-koodinpoistajaan, kuten striphtml.com.
  3. Kopioi kaikki puhdistettu sisältö.
  4. Liitä se takaisin rich text editoriin ja korvaa alkuperäinen sisältö.
  5. Klikkaa Tallenna ja testaa.

Jos jompikumpi näistä vaiheista ratkaisee ongelman, se johtuu muotoilusta, joka siirtyi sisällön mukana, kun se alun perin lisättiin rich text editoriin. Voit korjata alkuperäisen sisällön samoilla menetelmillä.

Väärin tasatun kuvakoodin vianmääritys

Jos sinulla on vaikeuksia saada teksti asettumaan oikein kuvan viereen rivitysasetusta käyttäessäsi, sinun on ehkä siirrettävä koodia niin, että kuvatunniste on kappaleen alussa eikä keskellä.

  1. Napsauta rich text editorin **Muokkaa koodia** -painiketta.
  2. Etsi kuvakoodi ja siirrä koko ``-tunniste kappaleen alkuun `

    `-kappaletunnisteiden ulkopuolelle.

  3. Poista kaikki ``-tunnisteet kuvan alapuolella olevista kappaleista.
  4. Napsauta Tallenna.

Esimerkki väärin tasatusta kuvakoodista:

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

Korjattu koodi:

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
Vianmääritys: mailto-linkit eivät toimi

Jos `mailto:`-linkit eivät toimi (lataavat tyhjän sivun tai eivät avaa sähköpostiohjelmaa), tarkista, että linkin rakenne on seuraavanlainen:

mailto:email@example.com

Jos linkki vastaa yllä olevaa muotoa, mutta ei silti toimi odotetulla tavalla, ongelma saattaa olla selaimen tai sähköpostiohjelman asetuksissa. Tarkista selaimesi ja sähköpostiohjelmasi asetuksista, että ne on määritetty käsittelemään `mailto:`-linkkejä oikein.

Vianmääritys: sivun kuvat palautuvat alkuperäiseen kokoonsa koon muuttamisen jälkeen

Kun kuvia lisätään sivulle, luotu HTML sisältää sekä `src`- että `data-mce-src`-parametrin. Jos nämä kaksi eivät vastaa toisiaan, `src` päivitetään lopulta vastaamaan `data-mce-src`-parametria.

Kun kuitenkin muutat kuvan kokoa rich text editorilla, vain `src` päivittyy, ja `data-mce-src` jää alkuperäisen kokoiseksi URL-osoitteeksi. Muutaman lisänapsautuksen jälkeen `src` palautuu vastaamaan `data-mce-src`-URL-osoitetta.

Tämän välttämiseksi päivitä `data-mce-src`-URL-osoite manuaalisesti vastaamaan haluamaasi kuvakokoa:

  1. Napsauta rich text editorin **Muokkaa koodia** -painiketta.
  2. Etsi kuvatunniste, jonka kokoa olet muuttanut.
  3. Etsi sekä `src`- että `data-mce-src`-parametrit.
  4. Päivitä `data-mce-src`-URL-osoite vastaamaan `src`-URL-osoitetta.
  5. Napsauta Tallenna.
Vianmääritys: automaattiset HTML-muutokset (sanitointi)

Saatat huomata, että kun teet muutoksia rich text editorissa, vastaava HTML-koodi muuttuu automaattisesti.

Miksi näin tapahtuu?

Shopifyn rich text editor on integroitu TinyMCE-järjestelmään, joka on kolmannen osapuolen sisällönjakeluverkko (CDN). Tämä CDN tarjoaa laajan ja luotettavan sisällönsuodatuslogiikan, joka korjaa automaattisesti sellaisten HTML-rivien muotoilun, jotka saattavat aiheuttaa toimintahäiriöitä myyntipaikassa tai altistaa sen tietoturvariskeille. Tätä prosessia kutsutaan nimellä HTML-sanitointi.

Mitä minun pitäisi tehdä?

Vaikka voit kiertää sisällönsuodatuslogiikan muokkaamalla HTML-koodin manuaalisesti takaisin ennalleen, on suositeltavaa noudattaa automaattisia muutoksia. Nämä automaattiset korjaukset ovat odotettua toimintaa, ja niiden tärkeä tarkoitus on estää myyntipaikkaasi tehtävät muutokset, jotka voivat johtaa ongelmiin.

Jos yrität saavuttaa tiettyjä tavoitteita kirjoittamalla HTML-koodia, jota CDN yrittää korjata, harkitse, onko tavoitteiden saavuttamiseen parempia tapoja, kuten teemasi koodin muuttaminen niin, että se tukee odotettua HTML-muotoilua.

Vianmääritys: linkit ohjaavat asiakkaat pois heidän valitsemaltaan markkina-alueelta

Jos käytät Shopify Markets -palvelua alikansioiden ja Geolocation-sovelluksen kanssa, tuotekuvauksissa, blogipostauksissa, sivuilla ja kokoelmakuvauksissa olevat linkit saattavat uudelleenohjata asiakkaat ensisijaiseen verkkotunnukseesi sen sijaan, että he pysyisivät valitsemallaan alueella.

Miksi näin tapahtuu?

Rich text editor tukee sekä suoria linkkejä (koko URL-osoitteita) että sisäisiä linkkejä (lyhyitä URL-osoitteita). Jos käytät suoraa linkkiä, joka sisältää koko URL-osoitteen (esimerkiksi `https://yourstore.com/collections/summer`), asiakkaat ohjataan kyseiseen URL-osoitteeseen, eikä heidän valitsemaansa markkina-aluetta huomioida.

Näin korjaat ongelman

Varmistaaksesi, että linkkisi ovat aluetietoisia ja pitävät asiakkaat valitsemallaan markkina-alueella, käytä täysien URL-osoitteiden sijaan sisäisiä linkkejä, jotka alkavat `/`-merkillä.

  • Suora linkki (ei aluetietoinen): `https://yourstore.com/collections/summer`
  • Sisäinen linkki (aluetietoinen): `/collections/summer`

Näin päivität olemassa olevat linkit:

  1. Siirry Shopifyn ohjausnäkymässä siihen tuotteeseen, kokoelmaan, sivuun tai blogipostaukseen, jonka linkit haluat päivittää.
  2. Napsauta rich text editorin Muokkaa koodia -painiketta nähdäksesi HTML-koodin.
  3. Etsi kaikki linkit, jotka alkavat merkkijonolla `https://` ja sisältävät kauppasi verkkotunnuksen.
  4. Korvaa koko URL-osoite lyhyellä URL-muodolla. Vaihda esimerkiksi `https://yourstore.com/pages/about` muotoon `/pages/about`.
  5. Napsauta Tallenna.

Jos sinulla on päivitettävänä useita tuotteita, kokoelmia, blogeja tai sivuja, voit viedä ne CSV-tiedostoihin, etsiä verkkotunnustasi tai merkkijonoa `http` tunnistaaksesi suorat linkit, päivittää ne sisäisiksi linkeiksi ja tuoda sitten päivitetyt CSV-tiedostot takaisin kauppaasi.