Wprowadzenie do edycji zaawansowanej skórki eSklepu

23 października 2023 r. usługa eSklep została zastąpiona przez sklepy Shoper od home.pl.
Załóż sklep i:

  • Wygodnie sprzedawaj w wielu kanałach, m.in. Allegro i OLX,
  • Łatwo zmieniaj jego wygląd, dzięki gotowym szablonom,
  • Zarządzaj sprzedażą z dowolnego urządzenia,
  • Docieraj z ofertą do klientów przez blog i newsletter.

Chcesz sprawdzić, jak to działa? Przetestuj sklep Shoper od home.pl przez 14 dni za darmo.

CHCĘ PRZETESTOWAĆ SKLEP ZA DARMO

Szukasz innej platformy do sprzedaży w sieci? Poznaj więcej możliwości na otwarcie sklepu internetowego.

Poniższy artykuł przedstawia przykład edycji zaawansowanej skórki sklepu, wykonanej przy pomocy zewnętrznego oprogramowania dostępnego w ramach przeglądarki Google Chrome. Zwracamy uwagę, że home.pl nie świadczy wsparcia w zakresie edycji wyglądu sklepu realizowanej przy pomocy edycji zaawansowanej oraz własnych skryptów JavaScript i stylów CSS.

Zmień wygląd sklepu internetowego

Przejdź na stronę forum.home.pl i dołącz do dyskusji z innymi użytkownikami usług home.pl, aby znaleźć najlepsze rozwiązania i uzyskać więcej informacji w zakresie, w jakim chciałbyś dokonać modyfikacji wyglądu sklepu.

Korzystając z przeglądarki Google Chrome i dostępu do panelu administracyjnego sklepu, możesz w każdej chwili dokonać niestandardowej edycji wyglądu poszczególnych jego elementów, których edycja nie jest domyślnie dostępna w panelu administracyjnym.

Edytowany w ten sposób wygląd sklepu, możesz jeszcze bardziej dopasować do swoich potrzeb. Pamiętaj, aby wykonywaną edycję realizować na kopii skórki, z której aktualnie korzystasz. Dzięki temu, w przypadku nadmierne modyfikacji, zawsze będziesz mógł powrócić do pierwotnych ustawień lub wprowadzić nowe.

  • Kliknij tutaj aby dowiedzieć się więcej o edycji zaawansowanej oraz tworzeniu kopii skórek sklepu.

Podgląd stylu CSS w przeglądarce Google Chrome

  1. Pobierz, zainstaluj i uruchom przeglądarkę Google Chrome,
  2. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować,
    Sklep internetowy - Strona główna - Odszukaj element, który chcesz edytować
  3. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj,Sklep internetowy - Strona główna - Element Menu Promocje - Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj
  4. W kolejnym kroku uruchomiony zostanie tryb debugowania, umożliwiający podgląd aktualnie aktywnego kodu HTML, JavaScript strony a także utworzonych stylów CSS, których edycja umożliwia wprowadzanie dodatkowych zmian w wyglądzie stron WWW, lokalizacji jej elementów, wyglądu, kolorów itp.Sklep internetowy - Strona główna - Element Menu Promocje - Zbadaj - Podgląd aktualnie aktywnego kodu HTML, JavaScript strony a także utworzonych stylów CSS

Więcej informacji o samym narzędziu, możesz znaleźć w sieci Internet np. wpisując w wyszukiwarce Google frazę: „Google Chrome zbadaj element”

Narzędzie Zbadaj element, nie tylko daje fragmentaryczny podgląd do kodu i stylu strony WWW, ale umożliwia ich edycję bezpośrednio w przeglądarce, bez ingerencji w pierwotny kod strony. W praktyce, możemy w tej chwili dokonać edycji poszczególnych fragmentów kodu i stylu, obserwując efekty tych działań na żywo. Zamknięcie przeglądarki czy odświeżenie strony, spowoduje przywrócenie pierwotnych ustawień.

WAŻNE! Wprowadzane zmiany za pomocą narzędzia Zbadaj element, nie są zapisywane na serwerze, na którym strona jest zlokalizowana. Rozwiązanie jest bezpieczne i nie powoduje stałych zmian w wyglądzie stron WWW.

Przykład edycji stylu CSS za pomocą narzędzia Zbadaj element

W poniższym przykładzie, znajdziemy oraz edytujemy już istniejący styl, który standardowo jest domyślnie ustalony wspólnie dla całego sklepu i wszystkich jego elementów. Zmiana obejmie powiększenie czcionki, która odpowiada za wyświetlanie nazwy produktu na liście produktów.

Rozwiązanie tego problemu oraz setki innych gotowych rozwiązań, znajdziesz na stronie forum dyskusyjnego naszej firmy – forum.home.pl
  1. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować.
  2. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element.
    Sklep internetowy - Strona sklepu - Nazwa produktu - Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.
    Sklep internetowy - Strona sklepu - Nazwa produktu - Zbadaj element - Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować
  4. Wskaż element.Sklep internetowy - Strona sklepu - Nazwa produktu - Zbadaj element - Oznaczenie obiektu - Właściwości klasy CSS dla wybranego elementu
  5. Po prawej stronie pojawi się wybrana klasa CSS dla wybranego kontenera. Zobaczysz także jego własności np. font-size, oraz ich właściwości, np. 1.6em.
  6. Dokonaj edycji właściwości wpisując nowy rozmiar.Sklep internetowy - Strona sklepu - Nazwa produktu - Zbadaj element - Oznaczenie obiektu - Dokonaj edycji właściwości wpisując nowy rozmiar
  7. Wprowadzone zmiany zostaną od razu uwzględnione w podglądzie strony WWW.
  8. Skopiuj wybraną klasę wraz z właściwościami które chcesz edytować (możesz zaznaczyć całość lub jej fragment, dokonując ostatecznej selekcji podczas wklejania kodu w panelu sklepu.Sklep internetowy - Strona sklepu - Nazwa produktu - Zbadaj element - Oznaczenie obiektu - Skopiuj wybraną klasę wraz z właściwościami które chcesz edytować
  9. Zaloguj się do Panelu sklepu, przejdź do sekcji Konfiguracja –> Wygląd –> Aktywny styl graficzny –> Własny styl CSS
    Sklep internetowy - Konfiguracja - Wygląd - Aktywny styl graficzny - Przejdź do sekcji Własny styl CSS
  10. Wklej skopiowany fragment stylu CSS i dokonaj odpowiednich modyfikacji.Sklep internetowy - Konfiguracja - Wygląd - Aktywny styl graficzny - Własny styl CSS - Wklej skopiowany fragment stylu CSS
  11. Zapisz zmiany i przejdź na stronę sklepu. Wciśnij CTRL + F5 na klawiaturze. Zmiany powinny być widoczne.
WAŻNE! Edycja poszczególnych klas może mieć wpływ na wygląd także innych elementów sklepu, jeśli np. wybrana klasa odnosi się także do nich. Po zapisaniu zmian warto sprawdzić inne strony sklepu, czy nie uległy modyfikacji dodatkowe elementy. W przypadku klas rozpoczynających się od nazwy obiektu np. #box_productfull, edycja klasy zwykle obejmuje tylko i wyłącznie wybrany obiekt i nie powinna modyfikować dodatkowych elementów, z nim nie związanych.

Przykład 2: dodawanie właściwości stylu i ich wartości

Jednym z dodatkowych elementów jakie posiada narzędzie Zbadaj element, jest możliwość nie tylko edycji wybranych klas i ich właściwości, ale także dodawanie nowych, za pomocą autosugestii. W ten sposób odnajdując interesującą nas klasę, możemy dodać nową właściwość, a narzędzie samo podpowie nam jakie są możliwe opcje.

Analogicznie dodając wartości właściwości, będziemy mogli skorzystać z dedykowanych podpowiedzi, czy to w formie gotowych wpisów czy palety kolorów (umożliwi wybór koloru bez znajomości jego kodu).

W ten sposób przygotowany i sprawdzony fragment stylu, umieszczasz w konfiguracji skórki, własnym stylu CSS, zgodnie z powyższym przykładem.

Poniższej przedstawiamy przykład, w którym domyślnie, tylko po najechaniu kursorem myszy na podkategorię, podświetla się ona. Chcielibyśmy aby podświetlenie było stałe. W tym celu konieczne będzie dodanie nowej właściwości, odpowiedzialnej za nadanie koloru.

Rozwiązanie tego problemu oraz setki innych gotowych rozwiązań, znajdziesz na stronie forum dyskusyjnego naszej firmy – forum.home.pl
  1. Przejdź na stronę swojego sklepu internetowego i odszukaj element, który chcesz edytować.
  2. Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Kliknij prawym przyciskiem myszy, a następnie wybierz Zbadaj element
  3. Skorzystaj z przycisku oznaczania obiektu, wskazując element który chcesz edytować.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Skorzystaj z przycisku oznaczania obiektu
  4. Wskaż element.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Wskaż element
  5. Po prawej stronie pojawi się wybrana klasa CSS dla wybranego kontenera. Zobaczysz także jego własności już istniejące,Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Zobacz istniejące już własności wskazanego obiektu
  6. Kliknij w puste pole pod ostatnią właściwością aby dodać nową, a następnie rozpocznij wpisywanie frazy background… (właściwość odpowiedzialna za dodanie tła). Narzędzie podpowie Ci dostępne właściwości, odpowiedzialne za ustalenie tła, wśród nich będzie także dostępna background-color. Nadaje ona kolor.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Wpisz frazy background...
  7. Zatwierdź właściwość przyciskiem Enter, a następnie wprowadź wartość właściwości. W przypadku kolorów, możesz podawać ich wybrane nazwy i kody.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Zatwierdź właściwość przyciskiem Enter, a następnie wprowadź wartość właściwości
  8. Jeśli nie jesteś pewny koloru, jego nazwy czy kodu, skorzystaj z palety kolorów wskazując kursorem myszy interesujący Cię kolor. Zatwierdź zmiany klikając przycisk Enter.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - background-color - Skorzystaj z palety kolorów wskazując kursorem myszy interesujący Cię kolor
  9. Zmiany zostały zapamiętane, a po lewej stronie ekranu widać ich podgląd na żywo. Podkategorie są podświetlone trwale, podobnie jak nazwa wybranej kategorii.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Zapisz zmiany, a po lewej stronie ekranu widać ich podgląd na żywo
  10. Zaznacz wybrany fragment stylu CSS, np. trzymając lewy przycisk myszy, a następnie naciśnij na klawiaturze Ctrl + C lub prawym przyciskiem myszki i Kopiuj.Sklep internetowy - Strona sklepu - Wybrana podkategoria - Zbadaj - Oznaczanie obiektu - Zaznacz wybrany fragment stylu CSS i go skopiuj
  11. Zaloguj się do panelu sklepu, przejdź do sekcji Wygląd i treści > Wygląd sklepu > Obecny szablon sklepu lub Twoje szablony graficzne (jeśli korzystasz z nieaktywnej kopii skórki) .Następnie wybierz Własny styl CSS i wklej wcześniej skopiowany kod.
  12. Zapisz zmiany i przejdź na stronę sklepu. Wciśnij CTRL + F5 na klawiaturze. Zmiany powinny być widoczne.
  13. Edycję kodu (np. usunięcie zbędnych właściwości, padding-left, border itp.) możesz wykonać bezpośrednio w panelu sklepu. Wprowadzając własny styl CSS, możesz ograniczyć się do wprowadzania tylko właściwości które edytujesz lub dodajesz.
  • Czy artykuł był pomocny ?
  • Tak   Nie