Data publikacji: 14 maja 2024 Aktualizacja: 15 lipca 2026

Storefront: Jak podlinkować grafikę?

W Shoper Visual Editor możesz dodać grafikę razem z hiperłączem, w którą po kliknięciu użytkownik zostanie przeniesiony w ustalone przez Ciebie miejsce w sieci. Są dwa sposoby na to, aby osiągnąć taki efekt. Z poniższego artykułu dowiesz się jak dodać link do grafiki w Shoper Storefront.

Dodawanie linka do grafiki w module Obrazek

Zaloguj się do panelu administracyjnego sklepu, a następnie:lu administracyjnego sklepu.

Przejdź do zakładki: Wygląd i treści > Wygląd sklepu > Edycja szablonu graficznego.

W poprzedniej wersji panelu: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny

Miejsce edycji aktywnego szablonu używanego w sklepie
Aktualnie wyświetlany szablon dla klientów sklepu

Kliknij: Edytuj układ i styl szablonu.

Przycisk uruchamiający edytor szablonu
Przycisk uruchamiający edytor szablonu

Przejdź do wybranej przez siebie edytowalnej strony i utwórz nową sekcję, wiersz lub kolumnę, do której dodasz obrazek.
Shoper Visual Editor > Strona: Kontakt
Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
Shoper Visual Editor > Strona: Kontakt
Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
Kliknij: Dodaj, wyszukaj i przeciągnij moduł: Obrazek (A) do przygotowanego wcześniej miejsca, a następnie w trybie edycji modułu, kliknij obszar oznaczony przerywaną linią, aby załadować obrazek z dysku Twojego komputera (B).
Shoper Visual Editor > Moduł Obrazek > Dodawanie obrazka
Załaduj grafikę z dysku swojego komputera
Shoper Visual Editor > Moduł Obrazek > Dodawanie obrazka
Załaduj grafikę z dysku swojego komputera
Po dodaniu obrazka kliknij checkbox: Obrazek jest podlinkowany (A) i wprowadź adres URL strony, do której obrazek ma przenosić po kliknięciu (B). Możesz także zdecydować czy strona podlinkowana do obrazka ma być wyświetlana w nowym oknie. Jeśli tak, to odznacz checkbox: Otwórz link w tej samej karcie (C).
Shoper Visual Editor > Moduł Obrazek > Dodawanie linka
Wprowadź adres URL docelowej strony, do której ma obrazek przenosić
Shoper Visual Editor > Moduł Obrazek > Dodawanie linka
Wprowadź adres URL docelowej strony, do której ma obrazek przenosić

Dodatkowo w ustawieniach modułu Obrazek znajdziesz następujące ustawienia:

Maksymalna szerokość obrazka: możesz ustawić maksymalną szerokość dodawanego obrazka, podając jej wartość w pikselach.

Alternatywny opis obrazka („alt”): możesz podać dodatkowy opis obrazka, który jest istotny pod kątem pozycjonowania.

Zaokrąglenie rogów obrazka: możesz podać procentową wartość zaokrąglenia narożników obrazka, gdzie 0% to obrazek prostokątny, a 100% to obrazek całkowicie okrągły.

Klasa CSS: możesz modułowi nadać klasę CSS, aby wprowadzać do niego bardziej zaawansowane zmiany w stylach CSS.

Widoczność na urządzeniach: możesz określić na jakich szerokościach ekranu, dla poszczególnych typach urządzeń, moduł obrazek ma być wyświetlany.

Po dodaniu obrazka i linka kliknij: ZAPISZ w ustawieniach modułu Obrazek, a następnie kliknij: Opublikuj w prawym górnym rogu edytora.

Dodawanie linka do grafiki w module Tekst i multimedia

Zaloguj się do panelu administracyjnego sklepu, a następnie:

Przejdź do zakładki: Wygląd i treści > Wygląd sklepu > Edycja szablonu graficznego.

W poprzedniej wersji panelu: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny

Miejsce edycji aktywnego szablonu używanego w sklepie
Aktualnie wyświetlany szablon dla klientów sklepu

Kliknij: Edytuj układ i styl szablonu.

Przycisk uruchamiający edytor szablonu
Przycisk uruchamiający edytor szablonu

Przejdź do wybranej przez siebie edytowalnej strony i utwórz nową sekcję, wiersz lub kolumnę, do której dodasz obrazek.
Shoper Visual Editor > Strona: Kontakt
Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
Shoper Visual Editor > Strona: Kontakt
Przygotuj miejsce na nowy obrazek, używając sekcji, wierszy lub kolumn
W głównym menu edytora kliknij: Dodaj, wyszukaj i przeciągnij moduł: Tekst i multimedia (A) do przygotowanego wcześniej miejsca, a następnie w trybie edycji modułu kliknij: EDYTUJ TREŚĆ (B).
Shoper Visual Editor > Moduł Tekst i Multimedia > Edytuj treść
W edycji modułu: Tekst i multimedia kliknij: EDYTUJ TREŚĆ
Shoper Visual Editor > Moduł Tekst i Multimedia > Edytuj treść
W edycji modułu: Tekst i multimedia kliknij: EDYTUJ TREŚĆ
W osobnym oknie edytora kliknij: ikonę Wstaw/edytuj obrazek (A), załaduj obraz z dysku swojego komputera (B), potwierdź jego dodanie, klikając: OK (C), a następnie kliknij: ZAPISZ (D).
Edytor tekstu > Dodawanie obrazka
Załaduj obrazek z dysku swojego komputera
Edytor tekstu > Dodawanie obrazka
Załaduj obrazek z dysku swojego komputera
Zaznacz dodany obrazek tak, aby podświetlił się na niebiesko (A), a następnie kliknij obrazek prawym przyciskiem myszy i wybierz: Wstaw/edytuj łącze (B).
Shoper Visual Editor > Edytor tekstu
Zaznacz dodany obrazek i wybierz opcję: Wstaw/edytuj łączę
Shoper Visual Editor > Edytor tekstu
Zaznacz dodany obrazek i wybierz opcję: Wstaw/edytuj łączę
W polu URL (A) podaj adres, do którego obrazek ma linkować, kliknij: OK (B), a następnie kliknij: ZAPISZ (C), aby zamknąć edytor.
Shoper VIsual Editor > Edytor tekstu
Wprowadź docelowy adres URL, kliknij: OK, a następnie kliknij: ZAPISZ
Shoper VIsual Editor > Edytor tekstu
Wprowadź docelowy adres URL, kliknij: OK, a następnie kliknij: ZAPISZ
Po dodaniu obrazka i linka kliknij: ZAPISZ w ustawieniach modułu Tekst i multimedia, a następnie kliknij: Opublikuj w prawym górnym rogu edytora.
Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • w jaki sposób dodać moduł Obrazek,
  • w jaki sposób dodać moduł Tekst i multimedia,
  • jak załadować obraz z dysku swojego komputera,
  • jak dodać link do przesłanego obrazka.
Czy ten artykuł był pomocny?
Tak
Nie
Dziękujemy za odpowiedź!
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Dane kontaktowe

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności