Szablony Shoper od GrowCommerce
Koszyk
Zamknij
Kontynuuj zakupy ZAMAWIAM
suma: 0,00 zł
Ulubione produkty
Lista ulubionych jest pusta.

Wybierz coś dla siebie z naszej aktualnej oferty lub zaloguj się, aby przywrócić dodane produkty do listy z poprzedniej sesji.

Szukaj
Menu

Ruszyła nowa szata graficzna naszego sklepu! ❤️ Modern w wersji 3.0 jest live

Nowy produkt: Optymalizacja Shoper Google PageSpeed Insights

Sklep, który obecnie oglądasz oparty jest o szablon Modern 3.0

Edycja szablonu Shopera: Jak zmienić zaczytywane zdjęcie bloga przy udostępnianiu na Facebooku?

W dzisiejszym wydaniu pod tytułem "darmowy szablon Shoper" rozwiniemy jeden ze stosunkowo prostych błędów do naprawy, jakim jest błędne zaczytywanie losowego obrazu z artykułu jako obraz główny. 

W tym momencie mamy dwa zagadnienia - sam Shoper, który w swoich szablonach nie zaimplementował znacznika, by wyeliminować taki problem oraz Facebook, który po przeanalizowaniu całego bloga nie chce zaczytać obrazu artykułu (otwierającego) tylko czyta najczęściej pierwsze zdjęcie występujące we wpisie.

Przejdźmy zatem do roboty.

 

Jak zmienić zdjęcie udostępniania na Facebooku w sklepie Shoper?

Przed przystąpieniem do modyfikacji w swoim sklepie, pamiętaj o wykonaniu kopii zapasowej obecnego szablonu. Jeśli nie wiesz jak to zrobić, sprawdź ten artykuł.

Po wykonaniu kopii zapasowej masz dwie opcje: używasz wykonanej kopii jako zapasówki i jej nie ruszasz działając na oryginalnej wersji, albo na odwrót. Wybór pozostawiam Tobie.
W panelu sklepu przejdź pod "Wygląd i treści" -> "Wygląd sklepu" -> "Twoje szablony graficzne". W tym miejscu najedź na szablon, który chcesz edytować (kopię lub oryginał) i znajdź drugi z kolei ołówek. Pierwszy oznacza same "Edytuj", za to drugi otworzy nam bezpośrednio edytor plików TPL i CSSa. 

Edytor HTML / CSS w Shoperze

 

Po kliknięciu otworzy Ci się nowe okno edytora. Po lewej stronie nawiguj kolejno z otwartego folderu "Scripts" -> "News" -> "Index.tpl"
W sklepie masz łącznie kilka plików o nazwie index.tpl więc nie idź na łatwiznę korzystając z wyszukiwarki w lewym górnym rogu i nie klikaj losowo znalezionego pliku o tej nazwie. Kliknij dokładnie ten opisany w ścieżce powyżej, w końcu edytujemy blog, a nie stronę główną sklepu.

Teraz musimy trochę nadpisać / oszukać to, w jakiej kolejności są zaczytywane elementy sklepu. Musisz postawić entery przed pierwszym znakiem w tym pliku. Zróbmy sobie miejsce.

 

Modyfikacja pliku index.tpl w news w szablonie Shoper

 

Nic nie usuwamy, nic nie modyfikujemy poza wstawieniem enterów. W tak przygotowanym miejscu wklej nasz kod:


<meta property="og:url" content="{$request_uri}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{$article->article->name|escape}" />
<meta property="og:description" content="{$seo_description|escape}" />
<meta property="og:image" content="{$shop_url}{baseDir}/{$article->image}" />
 

Kliknij zapisz w prawym górnym rogu.

Zapisz zmiany szablonu Shoper

 

Po tak przygotowanych modyfikacjach natychmiast możesz przejść do weryfikacji. 
Z łatwych rozwiązań, po prostu dostępnij wpis na Facebooku (uwaga, przy pobieraniu podglądu Facebook może zaczytać stary obraz bez zmian. Dobrze jest użyć innego, nowego postu do testów, żeby mieć pewność).

Z profesjonalnych narzędzi Facebook daje Ci do użytkowania https://developers.facebook.com/tools/debug/

Meta Business do weryfikacji zmian Shopera

Tu możesz zaczytać dany URL (adres do naszego bloga - artykułu) i kliknąć "Debug" aby zmusić Facebooka, by ten ponownie zaczytał nasze zmiany. Na czerwono pojawia się ostrzeżenie (w sumie to po co?), że naszego świeżego artykułu nikt jeszcze nie udostępnił (właśnie go piszę...). 

Klikamy "Fetch new information" i Facebook pobierze sobie najnowsze dane prosto z naszej strony. Pamiętaj, że jeśli masz Facebooka w innym języku, to komunikaty mogą brzmieć podobnie, ale przycisk powinien być w tym samym miejscu. Klikaj śmiało, w tym narzędziu od Facebooka nic nie zepsujesz.

Po chwili Facebook wypluje taki oto raport.

 

Raport z Meta Business Sharing Debug

 

Jak widać bez problemu zaczytał opis (jako nagłówek SEO z ustawień Shopera), zaczytał tytuł artykułu i nasze zdjęcie otwierające. Jeśli od razu po podaniu URL wyskoczyła Ci ta karta, to może ona zawierać stare dane. Kliknij w takim przypadku na "Scrape Again".

Na górze zdjęcia widać jeden "błąd", który wprowadza odrobinę zamieszania. Tak długo jak nie tworzysz nowej super mega aplikacji działającej z API Facebooka (A gdzie tam my żywi będziemy takie rzeczy robić?!), tak długo nie musisz nic z tym komunikatem robić. Nie jest to błąd krytyczny i nie powoduje żadnych problemów.

Jeśli mimo szerokiego opisu będą jakieś błędy z wykonaniem instrukcji z tego poradnika - daj nam znać w komentarzu poniżej lub na biuro@growcommerce.pl

W formie autoreklamy dodam, że te i wiele więcej elementów schemy (bo tak profesjonalnie nazywa się edycja kodu jaką wykonaliśmy) są od razu zaszyte w naszym szablonie Modern 3.0, na którym przeglądasz obecnie tego bloga. Kliknij tutaj jeśli chcesz poczytać więcej o szablonie.

Powodzenia w waszych modyfikacjach!

 

Komentarze do wpisu (0)

Hot items!
Szablon Shoper Modern™ | Standard
Szablon Shoper Modern™ | Standard
1 659,99 zł 982,77 zł 1 349,59 zł 799,00 zł
szt.
Szablon Shoper -  Modern™ 3.0
Szablon Shoper - Modern™ 3.0
2 952,00 zł 2 214,00 zł 2 400,00 zł 1 800,00 zł
szt.
Wymagalny checkbox z regulaminem do Newslettera
Wymagalny checkbox z regulaminem do Newslettera
1,00 zł 0,81 zł
szt.
 Licencja Shoper Platynowy  (12 miesięcy)
Licencja Shoper Platynowy (12 miesięcy)
313,65 zł 255,00 zł
 Licencja Shoper Diamentowy (12 miesięcy)
Licencja Shoper Diamentowy (12 miesięcy)
313,65 zł 255,00 zł
Optymalizacja Shoper Google PageSpeed Insights
Optymalizacja Shoper Google PageSpeed Insights
1 107,00 zł 900,00 zł
szt.
Powiązane w formie slidera - Upsell i Crossell
Powiązane w formie slidera - Upsell i Crossell
196,80 zł 160,00 zł
szt.
Holder do góry
Szablon Shoper Modern 3.0™ od GrowCommerce
Sklep jest w trybie podglądu
Pokaż pełną wersję strony
Sklep internetowy Shoper.pl