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

Mari Mendesain Tema Shopify

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Themeforest baru saja membuka bagian baru di mana Anda dapat membeli atau menjual tema untuk Shopify! Shopify adalah solusi hosted e-commerce yang memudahkan memulai bisnis online. Anda dapat memiliki toko dan aktif dalam beberapa menit.

Untuk memulai katalog ThemeForest's Shopify, penulis dari setiap template yang diterima akan menerima bonus $100 - sampai ada sepuluh template dalam kategori ini.

Shopify dikenal karena fleksibilitas desainnya. Lihat beberapa contoh. Shopify dibuat (dan kemudian dilepas sebagai open source) Liquid Templating Engine. Liquid memungkinkan kebebasan desain lengkap untuk desainer.

Dalam tutorial ini saya akan menunjukkan bagaimana merancang sebuah tema Shopify menggunakan Liquid. Setelah Anda memiliki dasar-dasarnya, Anda dapat merancang sebuah tema, dan mengirimkannya ke Themeforest.

Mari Mendesain tema Shopify

Apa itu Liquid ?

Liquid adalah templating engine yang dikembangkan untuk dan digunakan oleh Shopify. Ini memproses file template liquid, yang memiliki ekstensi ".liquid". File liquid hanyalah file HTML dengan kode tertanam. Karena Liquid memungkinkan penyesuaian penuh dari HTML Anda, Anda benar-benar dapat merancang toko agar terlihat seperti apa adanya.

Liquid awalnya dikembangkan di Ruby untuk digunakan dengan Shopify dan dirilis sebagai proyek open source. Sejak itu, telah digunakan di proyek Ruby on Rails lainnya, dan telah di porting ke PHP dan javascript.

Prantinjau Singkat dari Liquid

Mari kita lihat apa yang diperlukan untuk memulai dengan liquid.

Seperti yang bisa Anda lihat, Liquid hanya HTML dengan beberapa kode tertanam. Inilah sebabnya mengapa Liquid begitu powerful, ini memberi Anda kekuatan penuh atas kode Anda dan memudahkan untuk bekerja dengan variabel yang Anda miliki.

Apa yang terjadi di atas?

Shopify banner

Di Liquid, ada dua jenis markup: Output dan Tags. Tags Liquid dikelilingi oleh kurung kurawal dan tanda persen; output dikelilingi oleh dua kurung kurawal.

Dalam cuplikan di atas, baris pertama Liquid adalah: {% for product in products %} .... {% endfor %} Ini adalah contoh Tag Liquid. Tag for mekukan pengulangan di koleksi item dan memungkinkan Anda bekerja pada masing-masing. Jika Anda pernah menggunakan loop di PHP, Ruby, javascript, atau (masukkan bahasa pemrograman di sini), cara kerjanya sama dengan Liquid

Baris berikutnya Liquid dalam cuplikan di atas adalah {{ product.title }}. Ini adalah contoh Output Liquid. Ini akan meminta judul produk dan menampilkan hasilnya ke layar.

Baris berikutnya Liquid memperkenalkan sesuatu yang baru: {{ product.price | money_with_currency }} Di sini kita memiliki contoh Liquid Filter. Denganya memungkinkan Anda memproses string atau variabel tertentu. Filter mengambil nilai di sebelah kiri diri mereka sendiri dan melakukan sesuatu dengannya. Filter khusus ini disebut format_as_money; dibutuhkan sejumlah, menambahkannya dengan tanda dolar dan membungkusnya dengan simbol mata uang yang benar.

Contoh sederhana:

bisa menghasilkan HTML berikut

Baris terakhir Liquid diatas: {{ product.description | prettyprint | truncate: 200 }} menunjukkan bagaimana Anda bisa menyatukan filter. Filter bertindak berdasarkan nilai yang ada di sebelah kiri, bahkan jika nilai itu kebetulan hasil filter lain. Jadi potongan yang dimaksud akan menerapkan filter prettyprint ke product.description, dan kemudian akan menerapkan filter truncate ke hasil prettyprint. Dengan cara ini, Anda bisa menggabungkan filter liquid sebanyak yang Anda butuhkan!

Apakah ada Penawaran Lain dari Liquid?

Dari sisi Liquid Tags, selain tag for, ada beberapa lainnya. Yang paling umum adalah:

Comment:

If/Else:

Case:

Lihat daftar lengkap Tag.

Liquid juga menawarkan banyak filter yang bisa Anda gunakan untuk mengolah data Anda. Beberapa yang umum adalah:

Capitalize:

Join:

Date:

Lihat daftar lengkap filter yang tersedia.

Anatomi dari sebuah Tema Shopify

Tema Shopify semuanya memiliki struktur direktori yang sederhana. Ini terdiri dari folder assets, layout, dan templates. Mari kita lihat apa yang terjadi di sana:

  1. folder assets: Di assets folder Anda menyimpan semua file yang ingin Anda gunakan dengan tema Anda. Ini termasuk semua stylesheet, skrip, gambar, file audio, dll yang akan Anda gunakan. Dalam template Anda, Anda dapat mengakses file-file ini dengan filter asset_url.
  2. folder layout: Folder ini hanya berisi satu file bernama theme.liquid. theme.liquid tersebut memegang elemen global untuk tema Shopify Anda. Kode ini akan dibungkus semua template lain di toko Anda. Berikut adalah contoh yang sangat mendasar dari theme.liquid:

    Elemen yang Dibutuhkan

    Ada dua unsur yang SANGAT penting yang harus ada dalam file theme.liquid. Yang pertama adalah {{ content_for_header }}. Variabel ini harus ditempatkan di kepala theme.liquid. Hal ini memungkinkan Shopify untuk memasukkan kode yang diperlukan di kepala dokumen, seperti script untuk pelacakan statistik. Untuk yang akrab dengan WordPress, ini sangat mirip dengan fungsi wp_head().

    Elemen penting lainnya adalah {{ content_for_layout }}. Variabel ini harus ditempatkan di badan tema Anda. Ini adalah tempat di mana semua template Liquid lainnya akan diberikan.

  3. folder templates: Folder ini menyimpan sisa template Shopify Anda. Terdiri dari:
    1. index.liquid: Ditampilkan sebagai halaman indeks utama toko Anda.
    2. product.liquid: Setiap produk akan menggunakan template ini untuk menampilkan dirinya sendiri.
    3. cart.liquid: Menampilkan keranjang belanja pengguna saat ini.
    4. collection.liquid: Ditampilkan untuk koleksi produk.
    5. page.liquid: Ditampilkan untuk halaman statis yang mungkin dibuat oleh toko itu.
    6. blog.liquid: Ditampilkan untuk setiap blog Shopify untuk toko.
    7. article.liquid: Ditampilkan untuk artikel blog dan menyertakan formulir untuk mengirimkan komentar.
    8. 404.liquid: Ditampilkan untuk kapan saja ketika toko mengembalikan 404.
    9. search.liquid: Ditampilkan untuk hasil pencarian toko.

Seperti dugaan Anda, masing-masing template memiliki akses ke variabel yang berbeda. Misalnya, product.liquid memiliki akses ke variabel product yang berisi produk saat ini sedang ditampilkan, blog.liquid memiliki akses ke variabel blog, dan index.liquid memiliki akses ke semuanya. Jika Anda tertarik dengan variabel mana yang dapat Anda gunakan di template mana, silakan tinjau dokumentasi Liquid.

Kerangka Dasar untuk Memulai

Hal terbaik tentang merancang untuk Shopify adalah Anda bisa menggunakan semua keterampilan yang sudah Anda miliki: HTML, CSS, JS, dll. Satu-satunya penghalang jalan dalam proses membiasakan diri dengan variabel Liquid mana yang tersedia di setiap template.

Di sinilah Vision masuk.

Vision - Shopify in a Box

Apa itu Vision?

Vision adalah aplikasi yang berdiri sendiri yang memungkinkan Anda membuat tema untuk Shopify store di komputer lokal Anda tanpa harus mendaftar ke toko atau menyiapkan database atau semua hal geeky lainnya.

Apa yang saya butuhkan untuk menjalankan Vision?

Vision hadir lengkap dengan segala yang dibutuhkan untuk berjalan langsung secara out of the box. Jika Anda memiliki editor teks dan browser web terpasang, Anda siap untuk memulai.

Seakan itu tidak cukup, Vision hadir dengan pre-loaded dengan tema siap pakai Shopify. Shopify telah memungkinkan orang untuk menggunakan tema ini sebagai blok bangunan, jadi Anda dapat memulai dengan salah satu tema yang ada ini sebagai dasar dan mengembangkannya!

Kesimpulan

Shopify adalah platform e-commerce yang berkembang pesat dengan ribuan penjual yang ingin memamerkan produk mereka. Dengan menggunakan Vision, Anda bisa mencapai landasan dan mulai berkembang dalam waktu singkat. Sepuluh template pertama yang diposkan ke kategori Shopify di Themeforest mendapatkan tambahan $100. Jadi mulailah!

Jika Anda memerlukan informasi lebih lanjut tentang mendesain dengan Shopify, mereka memiliki dokumentasi ekstensif di wiki mereka. Simak The Shopify Theme Guide, Menggunakan Liquid, dan Memulai dengan Vision.

Template Shopify Terbaik dari ThemeForest .... Sejauh ini!

  • Drifter

    Drifter

    "Fitur Shopify yang ramping ini memiliki garis bersih dan aksen desain modern yang menampilkan produk Anda. Kustom lightboxes jQuery memungkinkan produk Anda dilihat secara detail."

    Lihat Tema

  • Drifter

    Fancy Pink

    "Tema shopify yang modern, dengan gaya web 2.0 yang keren"

    Lihat Tema

  • Berlangganan RSS Feed NETTUTS untuk pembuatan dan artikel pengembangan harian lainnya.


Advertisement
Did you find this post useful?
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.