Moje zakázka na “Vylepšení vzhledu eshopu”

Dostal se mi pod ruku eshop od klienta, který ho chtěl oživit a poslal mi základ informace, oživit eshop, udělat hezčí HP, na šabloně mít 3 produkty vedle sebe. Pustil jsem se do práce a v průběhu jsem s klientem ladil co by rád upravil nebo přidal, z pohledu klienta se ledasco může zdát banálním zákrokem, ale mnohdy se musí zasáhnout do struktury CSS, která pak ovlivňuje jiná zobrazení.

Začal jsem tedy studovat eshop a našel jsem několik nedostatků, tady popíši co jsem s nimi dělal.

Na homepage eshopu je slider s bannery, ty jsem musel všechny sjednotit, měly totiž každý jinou výšku a při střídání tak rozhazovaly vzhled, bohužel se ke mě nedostaly zdrojové obrázky, na které byla použita zřejmě špatná komprese a tak jsem se je snažil lehce opravit chytrým doostřením a doplněním výšky retuší. Vždy je totiž potřeba nahrát všechny slidery ve stejném rozměru, šířka je stanovená a to 1200px, na výšce tolik nezáleží, ale když bude mít jeden slider 300px a druhý 500px, bude to nepříjemně přeskakovat.

Další čeho jsem se chytl, bylo barevně sjednotit funkční prvky a konverzní tlačítka přidání do košíku a objednávky.

Změnil jsem šablonu, na které je pro tento projekt lépe situované záhlaví a zápatí. Na Šabloně je defaultně nastaveno zobrazení 4 produktů na řádek, klientův požadavek byl dostat na řádek pouze tři. Změnil jsem tedy CSS kód, načež se rozhodily veškeré další informace (Název, popisek, cena, ikona košíku a text kolik je ks skladem) ty jsem v CSS stylování opravil – tím byl základ šablony pro PC hotov, poté jsem musel upravit ještě stylování pro mobilní rozhraní. Každá úprava v CSS, kdy například posunu text o xy pixelů doprava, posune text i u mobilu, jenže tam máme displej daleko menší a tudíž by byl text imaginárně zobrazen někde vedle telefonu, proto se musí napsat kódy dva, jeden pro PC a druhý pro mobil.

Po rozkliknutí kategorie se objeví její podkategorie vypsané na řádku což vypadá poměrně suše. Ke každé kategorii a podkategorii jsem proto nastavil obrázek jejího zástupce, eshop se tím okamžitě oživil. Člověk v mozku zpracovává mnoho informací a při procházení eshopu se zaměří jako první na obrázek, teprve potom na text.

Dalším požadavkem bylo nějak zákazníkovi sdělit, že klient vyrábí produkty, odesílá do druhého dne a dává poštu zdarma od, umístil jsem tedy na HP tento banner v barvách eshopu.

Eshop jsem propojil s jeho facebookovou stránkou, aby zákazníci mohli okamžitě dát like. Jak si propojit eshop s FB se dozvíte v tomto článku.

V kategoriích na eshopu si klient zapomněl odstranit defaultní texty nebo místo nich měl napsané námi všemi dobře známe testovací texty “dfdfdfd”, které jsem samozřejmě odstranil.

Patička neměla žádné podbarvení, proto jsem jí dal background jako je v záhlaví, čímž se hezky sjednotil produktový obsah.

Celý tento proces včetně komunikací s klientem, kdy jsem se mu snažil vyjít maximálně vstříc vyšel na 5000Kč.

Podnikám naplno!
Honza Pokštefl

Autor: Jan Pokštefl

Jsem agentem v ExitShopu. Připravím Vám kompletně eshop, včetně pomoci nebo zaučení přímo u Vás ve firmě.