Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Mag-Disenyo Tayo ng Tema sa Shopify Mag-Disenyo Tayo ng Tema sa Shopify

by
Difficulty:IntermediateLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Mag-Disenyo Tayo ng Tema sa Shopify

Themeforest kamakailan lang ay nagbukas ang isang bagong lugar kung saan pwede kang magbenta at bumili ng mga tema para sa Shopify! Ang Shopify ay isang napapamahalaang solusyong pang-e-commerce na nagpapadali sa pagsisimula ng online na negosyo.  Maaari kang magtayo ng pamilihan at magsimula sa loob lamang ng ilang minuto.

Para sa mabilis na pagsisimula ThemeForest's Shopify catalog, ang mga may-akda ng bawat natanggap na template ay makakatanggap ng $100 na bayad – hanggang sa meron nang sampung template sa bawat kategorya.

Ang Shopify ay kilala sa kakayahang umangkop ng disenyo nito. Tignan ang ilang halimbawa. Nilikha ng Shopify (at di kalaunan ay inilabas bilang libreng mapagkukunan) ang Liquid Templating Engine. Binibigyang laya ng Liquid ang mga gagamit nito na gumawa ng sariling disenyo.

Sa pagtuturong ito ay ipapakita ko kung paano mag-disenyo ng tema sa Shopify gamit ang Liquid. Kapag nakuha mo na ang batayan, maaari ka nang mag-disenyo ng tema, at ipasa ito sa Themeforest.

Mag-Disenyo Tayo ng Tema sa Shopify

Ano ang Liquid?

Ang Liquid ay ang gamit sa paggawa ng template na nilikha para sa at gamit ng Shopify. Pinoproseso nito ang mga files na pang-Liquid template, na mayroong “.liquid” na ekstensyon. Ang mga Liquid files ay mga HTML files lamang na may nakatanim na kodigo. Dahil hinahayaan ng Liquid na baguhin ang iyong HTML ng buong-buo, ibig sabihin nito ay makakapagdisenyo ka ng pamilihan sa kahit anong itsurang nais mo.

Ang Liquid ay orihinal na binuo sa Ruby para magamit sa Shopify at inilabas bilang libreng mapagkukunan. Simula noon, ginamit na ito sa iba pang proyekto sa Ruby on Rails, at naisalin sa PHP at javascript.

Isang Mabilis na Paunang Sulyap sa Liquid

Tignan natin kung ano ang dapat gamitin para makapagsimula sa Liquid.

Makikita niyo na ang Liquid ay HTML lamang na may nakatanim na kodigo.  Ito ang dahilan kung bakit napakabisa ng Liquid, binibigyan ka nito ng ganap na kontrol sa iyong mga kodigo at pinapadali ang pagmanipula ng mga variables na maaaring gamitin.

Ano ang nangyayari sa itaas?

Shopify banner

Sa Liquid, mayroong dalawang uri ng markup: Output at Tags. Ang Liquid Tags ay napapaligiran ng mga kulot na braket at mga tanda ng porsyento; ang Output ay napapaligiran ng dalawang kulot na braket.

Sa ipinakitang maliit na bahagi sa itaas, ang unang linya ng Liquid ay: {% for product in products %} .... {% endfor %} Ito ay isang halimbawa ng Liquid Tag. Ang for Tag ay sumisilo sa ibabaw ng koleksyon ng mga aytem at pinapayagan kang gawin ang bawat isa.  Kung gumamit ka na ng “loops” sa PHP, Ruby, javascript, o (ipasok ang anumang programming language dito), gagana rin ito sa parehong paraan sa Liquid.

Ang susunod na linya sa Liquid na ipinakita sa itaas ay {{ product.title }}.  Ito ay isang halimbawa ng Liquid Output.  Manghihingi ito ng pangalan ng produkto at ipapakita ang resulta sa screen.

Ang susunod na linya ng Liquid ay magpapakilala ng bagong bagay: {{ product.price | money_with_currency }} Dito ay mayroong tayong halimbawa ng Liquid Filter.  Hahayaan ka nitong magproseso ng string o variable. Ang mga Filter ay kumukuha ng halaga sa kaliwa nito at gagawa ng isang bagay dito.  Ang particular na Filter na ito ay tinatawag na format_as_money; kukuha ito ng numero, kakabitan ng simbolo ng dolyar sa unahan at babalutin ito ng tamang simbolo ng pera.

Isang simpleng halimbawa:

maaaring lumikha ng sumusunod na HTML

Ang huling linya ng Liquid sa itaas: {{ product.description | prettyprint | truncate: 200 }} ay nagpapakita kung paano pagsasamahin ang mga filter. Ang mga filter ay rumeresponde sa halaga sa kaliwa nila, kahit na ang halagang iyon ay mangayaring resulta din ng iba pang filter. Kaya naman, ang ipinakitang maikling bahagi na paksa ngayon ay gagamit ng prettyprint na filter sa product.description, pagkatapos ay gagamit ng truncate na filter sa resulta ng prettyprint.  Sa ganitong paraan, mapagsasama-sama natin ang mga Liquid filter ayon sa iyong pangangailangan!

Ano pa ang Mai-aalok ng Liquid?

Pagdating sa Liquid Tags, bukod sa for tag, meron pang iba.  Ang pinaka-pangkaraniwan ay ang mga sumusunod:

Comment:

If/Else:

Case:

Tignan ang buong listahan ng Tags.

Ang Liquid ay nag-aalok ng marami pang filter na maaari mong gamitin sa pagsasa-ayos ng iyong data. Ang ilan sa mga karaniwan ay ang mga sumusunod:

Capitalize:

Join:

Date:

Tignan ang buong listahan ng mga filter na maaaring gamitin.

Anatomya ng Tema sa Shopify

Ang lahat ng mga tema sa Shopify ay may simpleng sangguniang pang-istraktura. Ito ay binubuo ng mga polder ng assets, layout at templates. Tignan natin kung ano ang napupunta sa bawat isa.

  1. polder ng assets: Sa polder ng asset, inilalagay mo lahat ng dokumento na gusto mong gamitin sa iyong tema. Kasama dito ang mga stylesheet, scripts, imahe, audio files, at iba pa na iyon gagamitin. Sa iyong mga template, magagamit mo ang mga dokumentong ito sa pamamagitan ng asset_url Filter.
  2. polder ng layout: Ang polder na ito ay dapat na naglalaman lamang ng isang dokumento na tinatawag na theme.liquid.  Ang theme.liquid ang humahawak sa mga pangkalahatang elemento ng iyong tema sa Shopify. Ang kodigong ito ay babalot sa lahat ng iba pang template sa iyong pamilihan.  Ito ang isang halimbawa ng isang simpleng theme.liquid:

    Mga Kinakailangang Elemento

    Mayroong dalawang napaka-imporanteng elemento na dapat kasama sa isang file na theme.liquid. Ang una ay {{ content_for_header }}.  Ang variable na ito ay dapat na naka-pwesto sa tuktok ng iyong theme.liquid. Hinahayaan nito ang Shopify na magpasok ng mga kinakailangang kodigo sa tuktok ng dokumento, tulad ng mga script sa pagsubaybay sa istatistika. Para sa mga pamilyar sa WordPress, ito ay kagaya ng wp_head().

    Ang isa pang napakaimportanteng element ay ang {{ content_for_layout }}.  Ang variable na ito at nakapuwesto dapat sa katawan ng iyong theme.liquid; ito ang pwesto kung saan lahat ng iyong iba pang mga Liquid template ay gagana.

  3. templates folder: Ang polder na ito ang lalagyan ng natitirang bahagi ng iyong mga template sa Shopify. Binubuo ito ng:
    1. index.liquid: Pinapakita bilang pangunahing pahinang pang-talatuntunan ng iyong pamilihan.
    2. product.liquid: Ang bawat produkto ay gagamit ng template na ito para ipakita ang kanilang sarili.
    3. cart.liquid: Nagpapakita ng kasalukuyang pinamili ng gumagamit.
    4. collection.liquid: Pinapakita para sa koleksyon ng mga produkto.
    5. page.liquid: Nagpapakita ng anumang istatik na pahina na nalikha sa pamilihan.
    6. blog.liquid: Nagpapakita ng anumang blog sa Shopify para sa pamilihan.
    7. article.liquid: Nagpapakita ng kahit anong artikulo o blog kung saan pwede kang magpasa ng komento.
    8. 404.liquid: Nagpapakita para sa kahit anong pagkakataon na ang pamilihan nagbabalik ng 404.
    9. search.liquid: Pinapakita para sa mga resulta ng paghahanap sa pamilihan.

Kagaya ng iyong hinala, ang bawat isa sa template na ito ay may daan patungo sa iba’t ibang variable. Halimbawa, ang product.liquid ay may daan patungo sa isang product variable na naglalaman ng sa kasalukuyang produktong ipinapakita, ang blog.liquid ay may daan patungo sa isang variable na pang-blog, at ang index.liquid ay may daan patungo sa lahat. Kung interesado ka kung anong mga variable ang maaari mong gamitin sa kung saan template, pakibalikan ang dokumentasyon sa Liquid.

Pangunahing Balangkas Para Makapagsimula

Ang pinakamagandang bagay tungkol sa pagdidisenyo para sa Shopify ay magagamit mo ang lahat ng kasanayan na mayroon ka:  HMTL, CSS, JS, etc. Ang tanging hadlang sa proseso ay ang pagiging pamilyar sa kung anong mga Liquid Variable ang maaaring gamitin sa bawat template.

Dito papasok ang Vision.

Vision – Shopify sa loob ng isang Kahon

Ano ang Vision?

Ang Vision ay isang instrumento na maaari mong gamitin sa paglikha ng mga tema sa mga pamilihan sa Shopify gamit ang iyong lokal na kompyuter ng hindi na kinakailangan mgparehistro ng pamilihan o gumawa ng database o ng iba pang pang-matalinong mga bagay.

Ano ang kailangan ko para paganahin ang Vision?

Ang Vision ay meron na ng lahat ng kinakailangan para gumana diretso mula sa pagkakabukas.  Kung meron ka nang text editor at web browser, maaari ka nang magsimula.

At kung di pa ito sapat, ang Vision ay meron na ring mga nakahanda at gawa nang tema ng Shopify. Pinapayagan ng Shopify ang mga tao na gamitin ang mga temang ito bilang pundasyon, para makapagsimula ka gamit ang isa sa mga ito at pagandahin ito!

Buod

Ang Shopify ay isang mabilis na lumalagong platapormang pang-e-commerce na meron nang libo-libong tagapagtinda na naghahangad na ipakita ang kanilang mga produkto. Gamit ang Vision, maaari kang magsimula agad-agad. Ang unang sampung template na mailalagay sa Themeforest’s Shopify na kategorya ay makakatanggap ng karagdagang $100. Kaya’t simulan na!

Kung nais mo ng karagdagang impormasyon tungkol sa pagdidisenyo gamit ang Shopify, mayroon silang malawak na dokumentasyon sa kanilang wiki. Tignan ang The Shopify Theme Guide, Using Liquid, at Getting Started with Vision.

Ang mga Pinakamahusay na Template ng Shopify galing sa ThemeForest.... Sa Ngayon!

  • Drifter

    Drifter

    “Ang makinis na tema ng Shopify na ito ay nagtatampok ng malinis na mga linya at makabagong mga puntos na nagbibigay-kinang sa iyong mga produkto. Tinutulungan ng mga pasadyang jQuery lightboxes na makita ang buong detalye ng iyong produkto.”

    Tingnan ang Tema

  • Drifter

    Fancy Pink

     “Isang tema sa Shopify na may makabago at magarang web 2.0 na disenyo.”

    Tingnan ang Tema

  • Lumagda sa NETTUTS RSS Feed para araw-araw na bagong artikulo at balita tungkol sa web.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.