Hoe om 'n by te voeg Shopify Gunsteling vir jou Shopify Store

Leer die basiese beginsels van wat 'n Shopify Favicon en hoe om een โ€‹โ€‹in u aanlynwinkel te plaas.

As jy inteken op 'n diens vanaf 'n skakel op hierdie bladsy, kan Reeves and Sons Beperk 'n kommissie verdien. Sien ons etiese verklaring.

Die identiteit van u e-handelswinkel versamel verskeie elemente soos die logo, werfkleure en u bemarking materiaal. Hierdie identiteit versterk jou algehele handelsmerk en skep 'n gesonde herinnering vir jou kliรซnte, wat gevoelens van gemak en betroubaarheid ontlok wanneer hulle jou handelsmerkbeelde en -kleure sien.

Alhoewel klein in grootte, sluit die Favicon ook aan by daardie handelsmerkstrategie. In hierdie tutoriaal sal ons jou wys hoe om 'n favicon by jou te skep en by te voeg Shopify stoor, om u aanlyn voorkoms af te rond en dit makliker te maak om u winkel te herken wanneer klante besoek.

Wat is 'n Shopify Gunsteling?

A Shopify Favicon, of enige Favicon, is 'n klein ikoon vir u webwerf wat op die blaaier-oortjie langs u webwerfnaam verskyn.

Die blaaier-adresbalk is die mees algemene gebied om die webwerf Favicon te sien, maar dit kom ook op die volgende plekke voor:

  • Toolbar-programme
  • Boekmerke
  • Geskiedenis resultate
  • Soek bars
  • Soms as dit op sosiale media gedeel word

In wese, wanneer die blaaier 'n skakel na u webwerf moet wys en daar nie veel ruimte vir ander inhoud is nie, vervang dit u gewone, volledige grootte logo met die Favicon.

Shopify Favicon voorbeelde

By verstek, Shopify voeg die Shopify logo vir u Favicon, daarom moet ons dit verander.

'N Goeie favicon is dikwels 'n kleiner weergawe van u logo, maar soms wissel dit 'n bietjie omdat u wil verseker dat dit sigbaar is, al die toegewysde ruimte in beslag neem en 'n bietjie kleur by u webwerfnaam wil voeg.

By verstek ondersteun alle blaaiers Favicons van 32 ร— 32 pixels. Dit is nogal 'n klein prentjie, maar met behulp van sommige aanlynopwekkers kan u dit self maak Shopify Favicon vir u webwerf. Groter beelde word in elk geval afgeskaal, sodat u dit nie noodwendig op presies 32 ร— 32 hoef te kry nie.

'N Favicon maak nogal sin vir aanlynwinkels Shopify aangesien dit maklik is om by te voeg, en dit belangrik is om u handelsmerkidentiteit as 'n aanlynverkoper te versterk. Sommige voer ook aan dat dit help met SEO.

Lees verder om meer te wete te kom oor hoe u Favicon by u Shopify winkel.

Hoe om 'n Favicon by u Shopify Winkel โ€“ Vinnige stapgids

Soos genoem, wanneer u 'n webwerf bestuur Shopify dit voeg outomaties 'n by Shopify logo as jou webwerf se Favicon. Daar is niks daarmee verkeerd nie, maar dit is baie meer professioneel en handelsmerkgeoriรซnteerd om jou eie logo in te sluit. Hier is die stappe wat jy moet volg:

Stap 1: Gaan na Jou Shopify Dasbord

Gaan daarom na u Shopify paneelbord en klik op Aanlynwinkel onder Verkoopskanale.

Stap 2: Gaan na Tema-instellings

Navigeer na u temas en klik op die Aanpas-knoppie langs u huidige tema. Alhoewel instellings van tema na tema verander, is dit die mees onlangse Shopify temas het 'n gedeelte om die Favicon te verander.

aanlyn winkel

In die Shopify aanpas, blaai na die onderkant van die lys aan die linkerkant en klik op Tema-instellings.

tema-instellings

Stap 3: Kies die Favicon-knoppie

Soek en kies die Favicon-knoppie in die nuwe afdeling.

favicon - Shopify Favicon

Dit wys 'n knoppie om beeld te kies of gratis beelde te verken. Ek kan my nie voorstel dat daar gratis beelde is wat by u logo pas nie, daarom is dit die beste om op Select Image te klik om 'n aangepaste prentjie vanaf u rekenaar op te laai.

kies beeld

Stap 4: Laai jou gunstelinge op

Kies die Favicon-lรชer en laai dit op Shopify.

Daarna sien u 'n voorskou van u Favicon-ikoon. Om die veranderinge permanent te maak, kies die Stoor-knoppie in Shopify.

stoor-knoppie

Om u Shopify favicon in aksie, gaan na die voorkant van u webwerf en kyk na die huidige blaaier-oortjie. U moet die Favicon langs u titel van die webwerf sien.

byvoorbeeld Shopify Favicon

Wenke om u Favicon te skep

Alhoewel dit maklik lyk om 'n klein ikoon te genereer, is dit belangrik om dit reg te stel, aangesien klante die Favicon sien wanneer hulle na u webwerf kom. Dit is ook maklik om 'n Favicon te maak wat vaag is of nie die hele ruimte vul nie, wat die doel van die Favicon verslaan, aangesien dit nie so sigbaar is vir die oog nie.

Hier is 'n paar wenke om probleme op te los Shopify Gunsteling:

  • Begin u ontwerp groter as 32 ร— 32 en verklein dit indien nodig. As u probeer om 'n kleiner beeld in die ruimte uit te rek, sal u 'n vaagere beeld hรช. As u byvoorbeeld 'n 32 ร— 32-afbeelding van Hatchful neem en dit probeer uitrek om van die geskrewe gedeelte van die logo ontslae te raak, kan dit probleme veroorsaak.
  • U kan gewoonlik nie net u huidige logo neem en verwag dat dit perfek as 'n Favicon sal werk nie.
  • Favicon lyk baie goed as u elke pixel van die beskikbare ruimte bedek. U het nie veel ruimte nie, dus moet u elke voordeel trek square pixel in die 32 ร— 32-spasie.
  • Verwyder alle teks, want dit is moeilik om in 'n Favicon te lees. Die uitsondering is as u hoofletter-element 'n groot letter het.
  • Skiet vir soliede, helder kleure. Eenvoudige, spotprentagtige logo's werk die beste.
  • Kyk na die Favicons van u gunsteling handelsmerke. Wat het hulle gedoen om te verseker dat hul aanlynbeeld met 'n favicon deurkom?
  • Oorweeg dit om die hele ruimte vol te maak met 'n effekleurige agtergrond of om 'n deursigtige agtergrond te maak met die voorgrondelement gerek sodat dit net aan die kante raak. U sal sien dat baie groter handelsmerke deursigtige agtergronde vir hul Favicons het.
  • Die ICO-lรชer format werk goed vir kleiner beelde. As jy nie bekend is nie, gebruik 'n PNG vir deursigtige agtergronde of 'n JPG vir hoรซ-resolusie Favicons met soliede agtergronde.

Hoe om 'n Favicon vir u te genereer Shopify Store

U het die opsie om 'n Favicon te ontwerp in enige ontwerpsoftware van u keuse. As u Photoshop verkies, gaan daarmee saam. As u liewer 'n gratis sagteware soos GIMP of Pixlr wil hรช, werk hulle almal solank u by die vereiste afmetings van 32 ร— 32 hou.

U het ook die opsie om 'n Favicon mee te maak Shopify's Hatchful Logo en gratis Favicon - kragopwekker. Kyk na ons hele gids oor die gebruik Gelukkig om 'n logo te bou.

aflaai logo

Sodra die logo-skepper sy werk doen, bied dit u 'n lรชer gevul met verskeie logo's formats, waarvan een 'n Favicon is.

Shopify Favicon-lรชer

Hou in gedagte dat baie van die logo's waarmee u maak Gelukkig (lees ons Broederige resensie) gebruik wit spasies rondom die logo, dus sal u dit miskien moet aanpas vir die afbeelding om die grootste deel van die spasie te dek. Oor die algemeen het ek gevind dat u die Hatchful-favicon slegs moet gebruik as dit al goed lyk (dit vul die grootste deel van die ruimte en het nie klein elemente soos teks nie).

As dit nie die geval is nie, gebruik 'n derdeparty-redigeringsagteware soos Photoshop of Pixlr om die onnodige elemente uit te sny.

Belangrike: U moet 'n groter weergawe van die prent gebruik as u van plan is om dit oor 'n doek te rek om teks en wit spasie uit te sny. Hiervoor het ek Hatchful gebruik om logo's te genereer, maar het ek een van die groot logo's geneem (nie die Favicon-lรชer nie), aangesien ek nie wil hรช dat dit vervaag wanneer ek dit oor die 32 ร— 32 doek rek nie.

Kies 'n nuwe doek in u redigeringsagteware met die breedte en hoogte op albei 32.

32 deur 32

Maak 'n laag vir die nuwe prentjie en sorg dat die prentjie groter is as die 32 ร— 32-doek, want u kan dit uitrek. Laai die prentjie dan op of plaas dit in die doek.

In die volgende kiekie het die Favicon-ontwerp ingezoem sodat ek kan seker maak dat dit by die pasvorm pas square behoorlik. Dit is vaag, maar ek weet dat dit baie beter sal lyk as ek uitzoom.

groot weergawe

Soos u kan sien, lyk die uitgezoomde weergawe van die Favicon in die Pixlr-ontwerper goed. Ek het die grootste deel van die toegewese ruimte bedek, gekies vir 'n helder en soliede kleurikoon en alle tekens van kleiner teks verwyder.

kleiner weergawe

Die laaste stap is om die lรชer af te laai. U kan op hierdie punt kies om dit 'n deursigtige PNG te maak. Maar vir hierdie handleiding hou ek 'n hoรซ resolusie JPG sodat dit so skerp as moontlik lyk. En ek gee nie om om 'n agtergrond met 'n soliede kleur te hรช nie.

Aflaai - Shopify Favicon

Gaan terug na jou Shopify paneelbord. Klik op Aanlynwinkel> Temas> Pas aan.

Gaan dan na Tema-instellings> Favicon.

Laai die nuwe Favicon op en klik op die Save-knoppie in die Shopify redakteur.

beeldvoorskou

Weereens, die primรชre manier om u Favicon te toets en te sien, is deur eenvoudig 'n oortjie met u tuisblad-URL oop te maak. Soos u kan sien, verskyn die Favicon mooi en is dit eintlik 'n bietjie beter as my vorige Favicon, aangesien die een nie die hele 32 ร— 32-ruimte wat voorsien is, gevul het nie.

die finale produk - Shopify Favicon

Ten slotte

A Shopify Favicon neem nie meer as 'n paar minute om u webwerf te ontwerp en toe te voeg nie, maar dit bied u besoekers 'n wonderlike herinnering op watter webwerf hulle besoek. Daarbenewens kan dit dien as 'n manier vir mense om u webwerf in hul boekmerke en blaaiergeskiedenis te vind, aangesien hulle waarskynlik deur 'n lang lys ander webwerwe gaan soek as hulle deur die afdelings gaan.

Hou in gedagte dat u nie vaag of onleesbaar moet wees nie Shopify Favicon-beeld. As u agterkom dat die eerste Favicon nie heeltemal reg lyk nie, of as u 'n teks wil uitknip of 'n deursigtige agtergrond wil byvoeg, gaan terug na die begin en maak dit reg. Alhoewel dit glad nie 'n goeie idee is om geen Favicon te hรช nie, laat 'n vaag of moeilik sienbare Favicon u handelsmerk onprofessioneel en ietwat dom lyk.

As u enige vrae het oor die toevoeging van Favicons aan Shopify, of om jou eie te maak Shopify Favicon, laat weet ons in die onderstaande kommentaar.

Joe Warnimont

Joe Warnimont is 'n in Chicago gevestigde skrywer wat fokus op e-handelsinstrumente, WordPress en sosiale media. As hy nie visvang of joga beoefen nie, versamel hy seรซls op nasionale parke (alhoewel dit veral vir kinders is). Kyk na Joe se portefeulje om hom te kontak en vorige werk te sien.

Kommentaar Kommentaar

Lewer Kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *

Gradering *

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.