Korzystanie z edytora tekstu sformatowanego dla zawartości

Możesz użyć edytora tekstu sformatowanego Shopify, aby sformatować i opracować styl treści, które pojawią się w Twoim sklepie online.

Gdzie używać edytora tekstu sformatowanego

Edytora tekstu sformatowanego możesz używać, aby dodać lub edytować tekst w kilku miejscach w sklepie:

Jeśli korzystasz z szablonu Online Store 2.0, możesz dodać sekcje tekstu sformatowanego do swoich stron lub wzorców za pomocą edytora szablonów.

Dodaj zawartość HTML za pomocą edytora tekstu sformatowanego

Możesz wprowadzić zawartość HTML dla swoich postów na blogu, stron, opisów produktów i opisów kolekcji za pomocą edytora tekstu sformatowanego.

Kliknij przycisk </> Pokaż HTML, aby wyświetlić kod HTML zawartości w edytorze tekstu sformatowanego.

W widoku HTML można wprowadzić wiele zmian zawartości w edytorze tekstu sformatowanego. Możesz dodawać obrazy, filmy lub tabele za pomocą HTML oraz możesz debugować lub dostosowywać układ i styl zawartości.

Osadź widżet mediów

Jeśli chcesz osadzić widżet wideo lub widżet muzyczny, musisz najpierw umieścić go w serwisie takim jak Youtube, Vimeo lub SoundCloud. Te usługi generują kod do osadzania, który można skopiować i wkleić do edytora sformatowanego tekstu panelu administracyjnego Shopify.

Kroki:

  1. Znajdź kod osadzania dla multimediów, które chcesz osadzić.

  2. Wybierz cały kod do osadzenia, klikając go i naciskając ctrl + A na komputerze PC lub command + A na komputerze Mac.

  3. Skopiuj kod osadzenia, naciskając ctrl + C na komputerze PC lub command + C na komputerze Mac.

  4. W panelu administracyjnym Shopify kliknij przycisk Pokaż HTML w edytorze tekstu sformatowanego dla zawartości, którą chcesz edytować.

  5. Wklej kod osadzenia, naciskając ctrl + V na komputerze PC lub command + V na komputerze Mac.

  6. Kliknij opcję Zapisz.

Formatuj tekst za pomocą edytora tekstu sformatowanego

Za pomocą przycisku Formatowanie można szybko tworzyć akapity, nagłówki lub cytaty blokowe. Użycie odpowiednich poziomów formatowania i nagłówków ułatwia użytkownikom i wyszukiwarkom czytanie zawartości strony internetowej.

Aby wybrać format tekstu, zaznacz tekst, a następnie kliknij przycisk Formatowanie.

Opcje formatowania

  • Akapit

  • Nagłówek (1-6)

  • Cytat blokowy

Pogrubiony tekst

Aby pogrubić tekst, zaznacz go i kliknij przycisk Pogrubienie.

Pisanie tekstu kursywą

Aby uzyskać kursywę, zaznacz tekst i kliknij przycisk Kursywa.

Podkreśl tekst

Aby podkreślić tekst, zaznacz go i kliknij przycisk Podkreśl.

Utwórz wypunktowaną listę

Aby utworzyć listę z wypunktowaniem, kliknij przycisk Lista wypunktowana.

Pierwszą pozycję listy punktowanej możesz utworzyć, wpisując ją. Aby utworzyć nowe pozycje listy, naciśnij klawisz enter lub return. Aby zakończyć listę, naciśnij dwukrotnie klawisz enter lub return.

Utwórz listę numerowaną

Aby utworzyć listę numerowaną, kliknij przycisk Lista numerowana.

Pierwszą pozycję listy numerowanej możesz utworzyć, wpisując ją. Aby utworzyć nowe pozycje listy, naciśnij klawisz enter lub return. Aby zakończyć listę, naciśnij dwukrotnie klawisz enter lub return.

Wcięcie tekstu

Wcięcie akapitu powoduje utworzenie marginesu po lewej stronie. Aby wciąć akapit, kliknij przycisk Wcięcie.

Tekst bez wcięcia

Anulowanie wcięcia akapitu powoduje usunięcie marginesu. Aby anulować wcięcie akapitu, kliknij przycisk Anulowanie wcięcia.

Wyrównaj tekst

Aby wyrównać tekst, zaznacz tekst, kliknij przycisk Wyrównanie i wybierz Wyrównaj do lewej, Wyrównaj do środka lub Wyrównaj do prawej.

Zmień kolory tekstu za pomocą edytora tekstu sformatowanego

Kroki:

  1. Zaznacz tekst i kliknij przycisk Kolor.

  2. Kliknij kolor lub wprowadź kod szesnastkowy, aby zmienić wyróżniony tekst na ten kolor.

Zmień kolory tła tekstu

Kroki:

  1. Zaznacz tekst i kliknij przycisk Kolor.

  2. Kliknij kartę Tło.

  3. Kliknij kolor lub wprowadź kod szesnastkowy, aby zmienić tło wyróżnionego tekstu na ten kolor.

Wyczyść formatowanie w edytorze tekstu sformatowanego

Aby usunąć formatowanie z tekstu lub obrazów, zaznacz zawartość, a następnie kliknij przycisk Wyczyść formatowanie.

Wstaw tabele za pomocą edytora tekstu sformatowanego

Możesz dodawać tabele do postów na blogu, stron, opisów produktów i opisów kolekcji za pomocą edytora tekstu sformatowanego. W utworzonej tabeli możesz umieścić tekst, obrazy lub nawet filmy.

Kroki:

  1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw tabelę.

  2. Kliknij Wstaw tabelę, aby wstawić tabelę. Spowoduje to utworzenie tabeli z jednym wierszem i jedną kolumną.

Po utworzeniu tabeli kliknij ponownie przycisk Wstaw tabelę, aby zmodyfikować wiersze i kolumny tabeli:

  • Wstaw wiersz powyżej: Umieść kursor w rzędzie i kliknij ten przycisk, aby wstawić powyżej nowy wiersz.
  • Wstaw wiersz poniżej: Umieść kursor w rzędzie i kliknij ten przycisk, aby wstawić poniżej nowy wiersz.
  • Wstaw kolumnę przed: Umieść kursor w kolumnie i kliknij ten przycisk, aby wstawić nową kolumnę przed tą kolumną.
  • Wstaw kolumnę po: Umieść kursor w kolumnie i kliknij ten przycisk, aby wstawić nową kolumnę po tej kolumnie.
  • Usuń wiersz: Umieść kursor w wierszu, który chcesz usunąć, a następnie kliknij ten przycisk.
  • Usuń kolumnę: Umieść kursor w kolumnie, którą chcesz usunąć, a następnie kliknij ten przycisk.
  • Usuń tabelę: Umieść kursor w dowolnym miejscu tabeli, a następnie kliknij ten przycisk, aby usunąć całą tabelę.

Wstaw linki za pomocą edytora tekstu sformatowanego

Możesz dodawać linki (hiperlinki) w postach na blogu, stronach, opisach produktów i opisach kolekcji za pomocą edytora tekstu sformatowanego. Dodawane przez Ciebie linki mogą kierować klientów do stron w Twoim sklepie Shopify i do innych stron internetowych. Ponadto możesz dodawać linki, które otwierają wiadomości e-mail lub wykonują połączenia telefoniczne, aby pomóc klientom skontaktować się z Tobą.

Kroki:

  1. Zaznacz tekst lub obraz, który chcesz zamienić w link.
  2. Kliknij Wstaw link.
  3. Wprowadź docelowy adres URL linku w polu Link do:

    • Aby połączyć się z zewnętrzną stroną internetową poza sklepem Shopify, wprowadź https:// oraz adres internetowy, np. https://www.example.com.
    • Aby utworzyć link do strony sklepu online Shopify, wprowadź krótki adres URL, na przykład /collections/summer-collection.
    • Aby utworzyć link otwierający wiadomość e-mail, wprowadź mailto: oraz adres e-mail, np. mailto:example@example.com.
    • Aby utworzyć link, który wykonuje połączenie telefoniczne, wprowadź tel: a następnie numer telefonu, np. tel:+0-123-456-7890.
  4. Wprowadź krótki opis linku w polu Tytuł linku.

  5. Wybierz sposób otwierania linku za pomocą menu Otwórz ten link w:

    • to samo okno: link otworzy się w istniejącej karcie lub oknie przeglądarki użytkownika.
    • nowe okno: link otworzy się w nowej karcie lub oknie przeglądarki.
  6. Kliknij Wstaw link, aby przekształcić podświetlony tekst w link.

Dodaj wewnętrzne i zewnętrzne linki za pomocą edytora tekstu sformatowanego

Linki do stron w Twoim sklepie Shopify nazywane są linkami wewnętrznymi. Możesz użyć krótkich adresów URL, aby utworzyć linki wewnętrzne. Na przykład adres URL /collections wskaże stronę kolekcji Twojego sklepu.

Aby połączyć się z określoną stroną sklepu online, taką jak strona kolekcji lub produktu, użyj formatu adresu URL /page-type/page-handle. Na przykład, aby połączyć się z utworzoną kolekcją o nazwie Summer Collection, użyj adresu URL /collections/summer-collection.

Linki do stron internetowych znajdujących się poza sklepem Shopify nazywane są linkami zewnętrznymi. Linki zewnętrzne należy wprowadzić w całości i zacząć od http://.

Link do pliku w treści strony

Po załadowaniu pliku możesz połączyć go z zawartością w edytorze tekstu sformatowanego, aby udostępnić go do pobrania z opisu produktu lub kolekcji, strony internetowej lub wpisu na blogu.

Kroki:

Wstaw obrazy za pomocą edytora tekstu sformatowanego

Istnieją trzy sposoby wstawiania obrazu za pomocą edytora tekstu sformatowanego. Możesz:

Załaduj zdjęcia

Kroki:

  1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.

  2. W oknie dialogowym Wstaw obraz kliknij kartę Załadowane obrazy.

  3. Naciśnij Załaduj plik.

  4. Wybierz z komputera plik obrazu WebP, HEIC, SVG, GIF, JPEG lub PNG.

  5. Kliknij załadowany obraz, aby go wybrać.

  6. Z menu Rozmiar wybierz rozmiar wyświetlanego obrazu. Możesz wybrać Oryginał, aby wstawić obraz bez zmiany rozmiaru wyświetlania.

  7. Kliknij Wstaw obraz, aby umieścić obraz w edytorze tekstu sformatowanego.

Wybierz spośród obrazów produktów

Kroki:

  1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.

  2. W oknie dialogowym Wstaw obraz kliknij kartę Obrazy produktu.

  3. Kliknij obraz, który chcesz wstawić.

  4. Z menu Rozmiar wybierz rozmiar wyświetlanego obrazu. Możesz wybrać Oryginał, aby wstawić obraz bez zmiany rozmiaru wyświetlania.

  5. Kliknij Wstaw obraz, aby umieścić obraz produktu w edytorze tekstu sformatowanego.

Użyj adresu URL obrazu

Aby wstawić obraz przy użyciu publicznego adresu URL:

  1. W edytorze tekstu sformatowanego kliknij przycisk Wstaw obraz.

  2. W oknie dialogowym Wstaw obraz kliknij kartę URL.

  3. Wprowadź publicznie dostępny adres URL pliku obrazu.

  4. Kliknij Wstaw obraz, aby wstawić obraz w edytorze tekstu sformatowanego w oryginalnym rozmiarze.

Przesuń obraz i zmień jego rozmiar w edytorze tekstu sformatowanego

Po dodaniu obrazu do opisu produktu lub kolekcji, strony internetowej lub blogu możesz przenieść go do innej lokalizacji w zawartości.

Kroki:

  1. W panelu administracyjnym Shopify kliknij produkt, kolekcję, stronę internetową lub wpis na blogu zawierający obraz, którego rozmiar chcesz zmienić lub który chcesz przenieść.
  2. W edytorze tekstu sformatowanego kliknij obraz.
  3. Wykonaj jedną z następujących czynności:

    • Aby przenieść obraz, kliknij i przeciągnij go do innej lokalizacji w polu Zawartość.
    • Aby zmienić rozmiar obrazu, kliknij i przeciągnij jeden z rogów.
  4. Kliknij opcję Zapisz.

Edytuj obraz w edytorze tekstu sformatowanego

Możesz zmienić rozmiar, zawijanie tekstu i wyrównanie obrazu w edytorze tekstu sformatowanego. Ponadto możesz edytować adres URL obrazu lub dodawać bądź edytować tekst alternatywny.

Kroki:

  1. Kliknij dwukrotnie obraz w edytorze tekstu sformatowanego, aby otworzyć okno dialogowe Edytuj obraz.
  2. Użyj opcji rozmiaru i wyrównania, aby edytować obraz:

    • Aby zmienić rozmiar obrazu, wybierz opcję rozmiaru.
    • Aby poprawić pozycjonowanie stron (SEO) i dostępność swojego sklepu online, dodaj lub edytuj alternatywny tekst obrazu.
    • Aby dodać odstępy, wprowadź liczbę pikseli odstępu po każdej stronie.
    • Aby zmienić wyrównanie obrazu, wybierz ikony reprezentujące wyrównanie do lewej, do prawej lub do środka.
    • Aby dodać zawijanie tekstu, zaznacz opcję Zawijaj tekst wokół obrazu.
  3. Kliknij Edytuj obraz, aby zapisać zmiany.

Wstaw filmy za pomocą edytora tekstu sformatowanego

Możesz dodawać lub wstawiać filmy w postach na blogu, stronach, w opisach produktów i opisach kolekcji za pomocą edytora tekstu sformatowanego.

Jeśli chcesz osadzić utworzony film, musisz najpierw przesłać go do witryny strumieniowej transmisji wideo, takiej jak YouTube lub Vimeo.

YouTube nie zezwala na wyłączenie powiązanych filmów, ale możesz ustalić, że powiązane filmy powinny pochodzić z tego samego kanału, co właśnie odtwarzany film.

Kroki:

  1. Skopiuj adres URL filmu, naciskając ctrl + C na komputerze PC lub command + C na komputerze z Mac.
  1. Odwiedź Embed Responsively. Embed Responsively to narzędzie tworzące ulepszony kod do osadzania Twojego filmu.
  1. Na stronie Embed Responsively wybierz witrynę wideo, w której znajduje się Twój film.

  2. Wklej adres URL filmu, który skopiowałeś(-aś) do pola URL strony na Embed Responsively, naciskając ctrl + V na komputerze PC lub command + V na komputerze Mac.

  3. Kliknij opcję Osadź. Embed Responsively utworzy dla Ciebie kod do osadzenia.

  4. Jeśli film pochodzi z YouTube i chcesz wyświetlić tylko powiązane filmy z tego samego kanału YouTube, znajdź adres URL filmu w kodzie osadzenia. Skopiuj i wklej na końcu ?rel=0 w cudzysłowie.

  5. Skopiuj cały kod w polu Osadź kod.

  6. W panelu administracyjnym Shopify kliknij przycisk Wstaw film w edytorze tekstu sformatowanego.

  7. Wklej kod do osadzenia w polu w oknie dialogowym Wstaw film.

  8. Kliknij Wstaw film.

  9. Po zakończeniu kliknij Zapisz, aby zapisać zmiany w edytowanej pozycji.

Wstaw pliki audio za pomocą edytora tekstu sformatowanego

Możesz użyć edytora tekstu sformatowanego do wstawienia lub osadzenia plików audio na stronach, w postach na blogu, opisach produktów i opisach kolekcji.

Kroki:

  1. W panelu administracyjnym Shopify kliknij Ustawienia, a następnie Pliki.
  2. Kliknij Załaduj pliki, aby przesłać plik audio, który chcesz wstawić lub osadzić w swoim sklepie.
  3. W sekcji Sklep online otwórz edytor tekstu sformatowanego dla strony lub wpisu na blogu, w którym chcesz umieścić plik audio.
  4. Skopiuj <div id="player"><audio controls="controls">, a następnie wklej kod w edytorze tekstu sformatowanego, aby osadzić odtwarzacz audio na swojej stronie.
  5. Skopiuj następujący kod:

    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  6. Wklej ten kod w edytorze tekstu sformatowanego po kodzie dla odtwarzacza audio, a następnie zastąp adres https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 adresem URL utworzonym dla Twojego pliku audio po przesłaniu go do Shopify. Adres URL pliku audio można znaleźć w dowolnym momencie na stronie Pliki.

  7. Kliknij opcję Zapisz.

  8. Kliknij Widok, aby upewnić się, że plik audio odtwarza się poprawnie.

Dodaj lub usuń komentarze wewnętrzne w edytorze tekstu sformatowanego

Możesz użyć tagów komentarza <!-- i --> dla tekstu wewnętrznego, którego nie chcesz opublikować w swoim sklepie.

Kroki:

  1. W edytorze tekstu sformatowanego kliknij przycisk Pokaż HTML.

  2. Aby dodać komentarz wewnętrzny, umieść tekst, który chcesz ukryć między <!-- i -->. Na przykład: <!--yourtext-->.

  3. Kliknij opcję Zapisz.

Tagi HTML zawarte w tagach komentarza są zapisywane jako tekst wewnętrzny. Aby tagi takie działały poprawnie, musisz usunąć tagi komentarza <!-- i --> wokół nich.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo