Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Shopify
Webdesign

Apa yang Baru untuk Developers Tema Shopify di 2017

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Seperti beberapa dari Anda mungkin tahu dari artikel saya sebelumnya, Shopify adalah platform perdagangan yang berbasis tema yang memungkinkan Anda membangun toko online. Ini telah terus berkembang selama beberapa tahun terakhir dan hari ini adalah platform di balik 400.000 bisnis di sekitar 175 negara. 

Platform Shopify terus berkembang dan selama beberapa bulan terakhir, sejumlah fitur utama telah diluncurkan, yang secara khusus ditujukan untuk pengembang tema dan aplikasi. Dalam artikel ini, kita akan melihat pilihan fitur dan alat baru ini termasuk: 

  1. Pembaruan untuk manajemen gambar tema 
  2. Bagian 
  3. Blok 
  4. ThemeKit and Slate 
  5. Sistem desain Polaris 

Banyak contoh berikut akan membahas tentang Liquid. Liquid adalah bahasa template yang memungkinkan pengembang untuk menggunakan placeholder dan konstruksi dalam template yang akan digantikan dengan data live store dan halaman pesanan dan ditampilkan. Ini menggunakan sintaks sederhana yang memungkinkan output (misalnya judul for loop) dan logika (misalnya untuk loop). Saya tidak akan membahas terlalu banyak detail di sini, tetapi Anda dapat menonton screencast 25 menit saya yang lebih detail tentang cara kerja Liquid. 

Dan ketika Anda berada di sini, Anda mungkin juga tertarik dengan pos inspirasi berikut, untuk tema yang tersedia di Themeforest: 

1. Manajemen Gambar Tema Baru 

Mari kita mulai dengan melihat salah satu perubahan terkait tema utama yang terjadi baru-baru ini: filter Liquid img_url . Sampai saat ini gambar dibuat berdasarkan satu set ukuran bernama yang telah ditetapkan. Sebagai contoh: 

Di sini kami meminta gambar unggulan untuk produk dalam ukuran grande. Ini akan, dengan asumsi gambar asli memiliki satu sisi sama atau lebih besar dari 600px, membuat gambar dengan lebih lama dari dua sumbu menjadi 600px. 

Ukuran yang bernama ini sekarang tidak lagi digunakan dan sementara mereka akan tetap berfungsi mereka telah digantikan oleh seperangkat parameter baru termasuk sizecropscale , dan format . Ini sekarang memungkinkan untuk melakukan berbagai macam manipulasi terkait gambar yang sebelumnya tidak tersedia untuk pengembang tema Shopify. 

Saya akan menggunakan filter Liquid img_url dalam contoh ini tetapi tekniknya juga akan bekerja dengan objek gambar terkait berikut: 

  • product_img_url 
  • collection_img_url 
  • article_img_url 
  • asset_img_url 

Mari kita mulai dengan melihat bagaimana kita dapat mengubah ukuran suatu gambar. Untuk melakukan ini, kami mengganti nama gambar yang sekarang tidak berlaku lagi dengan ukuran tertentu dalam piksel. Inilah contohnya: 

Menggunakan sintaks di atas sekarang menempatkan kontrol dimensi gambar di tangan Anda: di sini kami telah menetapkan lebar dan tinggi (dalam urutan itu). 

Anda juga dapat menentukan hanya lebar: 

atau hanya tinggi: 

Saat menentukan nilai tunggal, Shopify akan menghitung dimensi yang tersisa berdasarkan ukuran gambar asli, menjaga rasio aspek gambar asli tetap utuh. 

Kembali ke contoh asli kami, Anda mungkin berpikir bahwa ini akan menghasilkan versi 450x450 dari gambar Anda yang dirender. Namun, ini tidak selalu terjadi.

Permintaan ini akan menghasilkan kotak sempurna, hanya jika kedua kondisi berikut terpenuhi:

  • Gambar aslinya 450px atau lebih besar pada kedua sumbu
  • Kedua sisi memiliki panjang yang sama

Jika kedua kondisi tersebut benar maka gambar persegi berukuran 450x450 akan ditampilkan. Jika tidak, Shopify akan mengubah ukurannya menggunakan logika yang sama seperti jika Anda hanya menentukan tinggi atau lebar. Sisi terpanjang menang dalam situasi ini dan diskalakan sesuai.

Untuk membuat gambar persegi, Anda dapat menggunakan parameter pemangkasan untuk memastikan bahwa dimensi gambar yang dihasilkan sesuai dengan dimensi yang diminta. Jika seluruh gambar tidak muat dalam dimensi yang Anda minta, parameter pemangkasan menentukan bagian gambar mana yang akan ditampilkan. Ada tiga opsi yang valid:

  • top
  • center
  • bottom
  • left
  • right

Fungsionalitas ini telah tersedia sejak akhir 2016 tetapi pada awal 2017 pembaruan dirilis yang menambahkan fleksibilitas lebih banyak lagi. Tema yang tersedia di Toko Tema Shopify, termasuk tema Empire premium yang digambarkan di bawah ini, semuanya menggunakan teknik ini. Menginstal tema gratis adalah cara terbaik untuk mempelajari lebih lanjut tentang cara menerapkan ide-ide ini. 

Sekarang dimungkinkan untuk mengakses secara langsung properti height, width, dan aspect ratio dari sebuah gambar menggunakan Liquid. Pengembang tema sekarang dapat menggunakan informasi ini untuk menyajikan gambar yang berukuran tepat untuk pengguna akhir. Berikut ini contoh menggunakan srcset untuk menguraikan bagaimana Anda dapat memanfaatkan ini di tema Anda sendiri.

Dalam contoh ini, kita menggunakan assign fungsi Liquid untuk membuat sebuah variabel yang disebut image yang sama dengan produk yang sedang dilihat menampilkan gambar (yang diatur dalam admin Shopify). Kami kemudian dapat menggunakan logika Liquid untuk membuat deklarasi srcset kami menggunakan, dalam hal ini, properti width:

Kabar baiknya adalah pengembang tema tidak perlu khawatir mengunggah kembali semua gambar mereka karena Shopify telah mengindeks setiap gambar di platform.

Dua parameter lain yang patut dibahas adalah scale dan format. Parameter skala memungkinkan Anda menentukan kerapatan piksel gambar. Anda dapat meningkatkan baik 2x atau 3x tergantung pada kebutuhan Anda: 

Format parameter memungkinkan Anda menentukan apa format file yang digunakan untuk gambar. Saat ini, Anda dapat menentukan jpg atau pjpg (progresif JPEG): 

Anda juga dapat memanfaatkan teknik ini untuk gambar yang berada di folder aset tema Anda. Untuk melakukan ini, Anda menggunakan filter asset_img_url. Berikut ini contoh yang juga menggunakan filter img_tag yang akan menghasilkan elemen img yang terbentuk sepenuhnya dalam template.

Filter manipulasi gambar baru ini dan properti gambar akhirnya memungkinkan untuk menjadi fleksibel seperti yang Anda perlukan ketika berurusan dengan gambar, arahan seni, dan ramah terhadap paket data pengguna akhir. 

2. Bagian 

Di akhir 2016 Shopify memperkenalkan "Bagian". Fitur baru ini memungkinkan pengembang tema untuk membuat antarmuka admin khusus yang memungkinkan pemilik toko dengan mudah menambahkan, menyusun ulang, dan menghapus bagian konten seperti produk, rangkai slide, video, atau koleksi produk. Ini adalah kasus penggunaan umum tetapi Anda benar-benar dapat menggunakan fungsi ini untuk memungkinkan pemilik toko menambahkan dan mengedit jenis konten apa pun. Semua perubahan di admin dapat dilihat secara real-time dan sekali disimpan akan langsung di toko. 

Bagian dapat dimasukkan secara statis dalam template tema (seperti header dan footer), atau mereka dapat ditambahkan dan dihapus secara dinamis, melalui antarmuka admin, di beranda tema. Dalam contoh di atas, yang akan kita bahas segera, Anda dapat melihat bagaimana kami dapat mengedit bagian statis yang akan muncul di footer toko. Anda juga akan melihat tombol "Tambahkan Bagian" yang memungkinkan kami menambahkan bagian-bagian dinamis, lebih banyak lagi nanti, ke beranda. 

Bagian template berada di folder bagian baru dan dapat direferensikan dengan cara yang mirip dengan cuplikan. Jika file kami berada di sections/promotion.liquid. Dengan senang kami akan merujuknya sebagai berikut: 

Catatan: Anda tidak perlu ekstensi .liquid seperti biasa dengan cuplikan di tema Shopify. Mari kita lihat contoh untuk membantu memperjelas kekuatan bagian. Berikut ini adalah sections/footer.liquid:

Jika Anda akrab dengan pengaturan tema Shopify beberapa ini mungkin terlihat cukup akrab. Ini terdiri dari campuran HTML, placeholder Liquid dan JSON mirip dengan yang ditemukan di settings_schema.json. Kebetulan, fungsi settings_schema.json masih tetap: bagian hanya menambahkan lapisan fungsional tambahan. 

Di bagian atas template adalah output HTML yang saya ingin dihasilkan ketika template menemukan bagian pada waktu render. Di dalam masing-masing elemen h1 dan p adalah placeholder Liquid menggunakan sintaks output {{section.settings. [X]}} yang baru. Dalam contoh kami, template bagian kami akan mencari data yang terkait dengan {{section.settings.title}} dan {{section.settings.description}}.

Sejauh ini bagus dan mudah tetapi bagaimana Shopify tahu apa yang harus ditempati oleh placeholder ini? Ini semua bermuara pada JSON yang saya sebutkan sebelumnya di antara tagpembuka dan penutup {% schema%}.

Agar bagian kami muncul di area "Customize Theme" dari admin toko, kami harus memberikannya pengenal: kami melakukan ini dengan menentukan nilai "nama" di tingkat atas JSON. 

Selanjutnya, kita memiliki simpul pengaturan yang memiliki, dalam contoh ini, dua sub-node. Keduanya mengandung properti idtypelabel, dan default. Masing-masing ini, tergantung pada nilainya, akan mengatur bagaimana antarmuka admin ditampilkan. Mari kita lihat masing-masing secara bergiliran: 

id

String teks yang akan digunakan secara internal. Perlu dicatat bahwa meskipun ID harus unik di seluruh file bagian, mereka tidak harus unik di semua bagian file.  Dengan demikian itu sangat OK untuk memiliki id dari title di beberapa file bagian. Pengaturan bagian juga tidak akan bertentangan dengan pengaturan di settings_schema.json.

type

Ini mewakili kontrol yang akan diberikan di dalam admin. Opsi yang paling umum digunakan adalah sebagai berikut: 

  • text : Bidang teks satu baris 
  • textarea: Area teks multi-garis 
  • richtext : A rich text editor 
  • image_picker : Unggahan gambar 
  • radio: Tombol radio 
  • select : Pilihan drop-down 
  • checkbox : Kotak centang 

Beberapa di antaranya membutuhkan JSON tambahan untuk bekerja. Sebagai contoh, kontrol pilih membutuhkan opsi untuk mengisinya. Informasi lebih lanjut tentang cara kerja ini, serta kontrol lain yang mungkin ingin Anda pertimbangkan, tersedia di dokumentasi Shopify.

label

Ini mewakili label HTML yang akan dibuat di admin di atas kontrol Anda. 

default 

Pengaturan ini memungkinkan Anda menambahkan nilai placeholder ke kontrol. Perlu dicatat bahwa ini adalah nilai yang akan digunakan hingga bagian tersebut diperbarui oleh pemilik toko. 

Contoh saya cukup sederhana dan akan membuat dua kontrol.Yang pertama adalah bidang teks baris tunggal yang akan diberikan dalam elemen h1 dalam template, yang kedua adalah kotak teks kaya yang memberikan opsi tebal, miring, dan URL.

Ada banyak opsi lain yang dapat Anda gunakan untuk membuat admin toko Anda termasuk menambahkan kontrol dipesan lebih dahulu untuk URL, koleksi, dan daftar produk, serta HTML khusus. Kami tidak akan melihat semuanya dalam artikel ini, tetapi saya mendorong Anda untuk menyelidiki kemungkinannya.

Anda juga akan melihat bahwa Anda dapat menambahkan CSS dan JavaScript khusus ke file bagian menggunakan tag Liquid berikut: 

Anda mungkin berpikir bahwa ini dapat menambahkan banyak CSS dan JavaScript yang berpotensi membengkak ke tema Anda. Kabar baiknya adalah Shopify menggabungkan semua CSS dan JS ke dalam satu file yang disuntikkan melalui placeholder liquid content_for_header. Platform memastikan bahwa hanya satu instance yang pernah disertakan, bahkan jika bagian itu digunakan beberapa kali pada halaman. Informasi lebih lanjut tentang bagaimana skrip dieksekusi tersedia dalam dokumentasi Shopify.

Setelah Anda mengatur kontrol dan nama Anda di file JSON Anda dapat menyertakan bagian di setiap template yang relevan.Bagian dapat ditambahkan ke file layout (kulit luar halaman) atau file template individu. Admin Shopify akan menampilkan kontrol secara kontekstual: yaitu hanya ketika melihat template yang relevan dalam editor "menyesuaikan tema". Mengubah nilai akan menghasilkan pembaruan waktu nyata di admin: ini adalah cara yang bagus untuk melihat bagaimana perubahan akan mempengaruhi tata letak sebelum memperbarui dan mendorong langsung. 

Jika Anda melihat pada HTML yang dirender Anda akan melihat bahwa bagian dibungkus dalam elemen div:

Id dari div mengambil format shopify-section- [id], di mana id adalah id unik untuk elemen tersebut untuk halaman, dan tanpa menentukan menambahkan kelas shopify-section. Anda dapat menambahkan kelas Anda sendiri ke elemen div juga dengan menentukan nilai class di pengaturan Anda. Begini caranya mencari contoh di atas: 

Penambahan ini akan menghasilkan hal-hal berikut: 

Bagian adalah tambahan yang bagus untuk tema Shopify karena memungkinkan pengembang tema untuk mengaktifkan pengaturan kontekstual di seluruh toko. Namun, mereka benar-benar datang ke mereka sendiri ketika bekerja bersama-sama dengan fungsi blok baru. 

3. Blocks

Blok membangun di atas konsep bagian dan memungkinkan pemilik toko untuk menambahkan beberapa bagian ke halaman rumah toko. Mari kita lihat bagaimana kita dapat menggunakan blok untuk menambahkan kemampuan untuk menambahkan sejumlah kotak promosi ke halaman beranda. Berikut contoh file yang akan kami kerjakan:

Saya akan jujur, butuh waktu lebih dari beberapa saat untuk memahami bagaimana cara kerja blok. Namun, setelah Anda memahami bagaimana bagian-bagian tersebut cocok bersama, ini akan membuka serangkaian kemungkinan baru untuk pengembangan tema Anda. 

Pada dasarnya halaman rumah dapat terdiri dari beberapa bagian dengan setiap bagian yang mampu memuat beberapa blok. Pemilik toko kemudian dapat mengatur ulang blok-blok ini untuk membuat tata letak yang paling sesuai dengan kebutuhan mereka. Mari kita lihat bagaimana hal ini berbeda dari contoh sebelumnya untuk membantu memperjelas beberapa konsep.

Pertama Anda akan melihat bahwa ada Liquid for loop di bagian atas template: 

Karena beberapa elemen ini bergantung pada pemilik toko, kami, sebagai pengembang tema, tidak memiliki cara untuk mengetahui apa yang perlu kami hasilkan. Oleh karena itu, kita perlu menggunakan struktur loop Liquid, dalam hal ini for loop, yang memungkinkan kita untuk mengulang semua blok yang ada dalam bagian tertentu pada gilirannya dan menghasilkan data yang relevan. 

Dalam potongan di atas Anda akan melihat saya menggunakan pernyataan if/elsif sederhana yang memeriksa jenis blok saat ini. Kita dapat mengatur jenis dalam skema itu sendiri seperti yang akan kita lihat sebentar lagi. Dalam contoh ini, kami menggunakan elsif untuk memastikan dua kali lipat dari jenis yang kami periksa. Jika Anda hanya memiliki dua jenis blok yang berbeda, seperti yang kita lakukan dalam contoh ini, Anda bisa saja else karena Anda tahu itu satu-satunya alternatif lain: yang mengatakan tidak ada salahnya untuk menjadi lebih defensif.

Bergantung pada jenis kami, bagian HTML yang berbeda akan dihasilkan. Untuk menampilkan nilai yang terkait dengan blok, kami menggunakan sintaks berikut: 

[id] mewakili id ​​yang diberikan kepada elemen tertentu dalam skema kami yang akan kami bahas selanjutnya.

Pindah ke skema Anda akan melihat beberapa elemen yang akrab, dan beberapa yang tidak dikenal. Mari kita mulai dengan melihat bagian pembukaan: 

Mari kita lihat setiap bagian secara bergiliran: 

  • "name": "Promotional Blocks": Nama yang akan muncul untuk grup kontrol ini di admin Shopify 
  • "max_blocks": 5 : Jumlah total blok yang dapat muncul di bagian ini. Ini bekerja bersama-sama dengan pengaturan batas masing-masing blok yang akan kita bahas nanti.  Setelah jumlah blok maksimum tercapai, Anda tidak dapat menambahkan lagi di admin. 
  • "preset" : Array pengaturan default untuk bagian dinamis. Dalam contoh di atas, kami ingin elemen dinamis kami muncul dengan judul "Blok Promosi" dan dalam kategori "Konten Beranda Khusus"  Nilai kategori memungkinkan kami mengelompokkan beberapa bagian ke dalam grup di admin.

Setelah kami mendefinisikan namamax_blocks, dan nilai preset, kami dapat mengalihkan perhatian kami ke kontrol yang ingin kami tampilkan di admin. Ini didefinisikan di bagian blok skema: 

Setiap blok memiliki sejumlah nilai yang telah ditentukan: 

  • "type" : Nama yang diberikan kepada kelompok kontrol khusus ini. Ini bisa menjadi apa pun yang Anda inginkan tetapi idealnya sesuatu yang cukup jelas.
  • "name" : Nama grup kontrol khusus yang Anda inginkan untuk muncul di admin 
  • "limit" : Frekuensi Anda ingin kelompok kontrol tertentu, yaitu blok ini, muncul di bagian. Kita akan segera melihat ini. 

Setelah Anda mendefinisikan preset ini Anda dapat pindah ke menentukan kontrol yang Anda inginkan untuk muncul di admin.Ini didefinisikan dalam pengaturan: 

Dalam contoh kami, kami memiliki dua jenis blok potensial yang dapat kami tambahkan ke bagian ini. Yang pertama adalah jenis blok promo-box dan yang kedua adalah tipe blok promo-image : keduanya kami definisikan sendiri. 

Setiap blok juga dapat menentukan set pengaturannya sendiri yang dapat terdiri dari satu atau lebih kontrol. Pada contoh di atas, blok tipe promo-box memiliki dua kontrol yang akan muncul ketika ditambahkan ke bagian. Yang pertama adalah bidang teks dan yang kedua adalah textarea. Untuk beberapa alasan, pencekalan tidak dapat menggunakan editor richtext yang kami gunakan di contoh sebelumnya, tetapi textarea akan memungkinkan Anda menambahkan HTML sesuai kebutuhan. Seperti bagian statis, kami juga harus menentukan danid , jenis , label , dan deskripsi . 

Ada beberapa jenis yang tersedia termasuk: 

  • text : Bidang teks satu baris 
  • textarea : Area teks multi-garis 
  • image_picker : Unggahan gambar 
  • radio : Tombol radio 
  • select : Pilihan drop-down 
  • checkbox : Kotak centang 
  • range : Range slider 

Dalam contoh di atas, kami juga mendefinisikan kontrol gambar menggunakan nilai image_picker. Ini akan memungkinkan pemilik toko untuk mengunggah gambar atau memilih salah satu yang sudah diunggah ke toko.   Karena ini memiliki jenis, nama, dan pengaturan sendiri, pemetik gambar akan muncul sebagai opsi lain yang dapat ditambahkan pemilik toko ke bagian dinamis ini.

Saya telah menyebutkan sebelumnya bahwa blok promo-box memiliki nilai batas 1. Mudah-mudahan Anda juga akan ingat bahwa kami mendefinisikan jumlah blok maksimum di bagian ini menjadi 5. Oleh karena itu dalam skenario ini, dimungkinkan untuk memiliki bagian yang terdiri dari :

  • 1 "promo-box" dan 4 "promo-images"
  • 5 “promo-images” 

Setelah kombinasi keduanya tercapai, Anda tidak akan dapat menambahkan blok tambahan ke bagian kecuali Anda menghapus blok yang ada. 

Setelah Anda memiliki template dan skema siap, dan CSS tambahan dan JavaScript, Anda harus menambahkan satu potongan terakhir kode ke template index.liquid tema Anda untuk mengaktifkan fungsi blok. Dengan menambahkan content_for_index ke index.liquid Shopify tahu untuk memasukkan bagian yang memiliki satu atau lebih preset yang ditentukan. Setiap preset kemudian menjadi bagian dinamis yang kemudian dapat ditambahkan oleh merchant ke beranda tema mereka.

Pada gambar di bawah ini Anda akan melihat hasil akhirnya. Setelah mengeklik ke admin, kami dapat menambahkan Tautan atau Blok Promosi ke bagian dinamis. Dalam contoh ini saya memilih Blok Promosi dan kemudian dapat menambahkan blok tambahan - tetapi hanya gambar Promo karena kami menetapkan batas 1 dalam skema kami untuk jenis "Promotional Box". 

Perlu dicatat bahwa Anda tidak hanya dapat menyusun ulang blok dinamis dalam suatu bagian tetapi Anda juga dapat menyusun ulang bagian induk di beranda sesuai keinginan Anda. Satu hal yang perlu diingat adalah bahwa ada batas keras dari 25 bagian yang dapat ditambahkan ke beranda. 

Bagian statis dan dinamis, dan blok selanjutnya adalah alat yang sangat kuat. Butuh beberapa waktu bagi saya untuk benar-benar memahami konsepnya tetapi setelah diklik Anda mulai benar-benar menghargai potensi yang mereka tawarkan. 

4. Tema Kit dan Slate 

Satu pertanyaan yang sering saya tanyakan oleh pengembang tema pertama Shopify adalah cara terbaik untuk mengatur lingkungan pengembangan agar bekerja dengan platform: hari ini ada dua opsi bagus yang akan membantu Anda untuk terus bekerja. 

Tahun lalu tim tema Shopify merilis Kit Tema Shopify. Theme Kit adalah alat baris perintah biner tunggal (berfungsi pada Windows, Linux, dan macOS) yang, setelah diinstal, akan memungkinkan Anda untuk: 

  • Unggah tema ke beberapa lingkungan  
  • Unggah dan unduh aset tema 
  • Tonton perubahan lokal dan unggah secara otomatis ke platform Shopify 

Theme Kit memungkinkan pengembang tema untuk bekerja dengan alat yang mereka kenal (editor teks, preprocessors, dll) dan memiliki perubahan yang disinkronkan di latar belakang ke toko pengembangan Shopify. Jika Anda belum melihat Shopify dari perspektif bangunan tema sebelum itu Anda mungkin tidak menyadari development store. 

Pada dasarnya mereka adalah toko Shopify berfitur lengkap dengan satu perbedaan: Anda tidak dapat mengambil pembayaran nyata. Namun, agar Anda dapat mendemonstrasikan aliran pembayaran penuh kepada klien, Anda dapat menambahkan "gerbang pembayaran tiruan". Anda dapat membuat banyak toko pengembangan sesuai kebutuhan melalui akun mitra gratis. Setelah siap diluncurkan, Anda cukup meningkatkan versi toko ke paket berbayar, atau menerapkan tema ke toko lain.

Tema Kit menawarkan sejumlah perintah yang berguna yang memungkinkan Anda untuk berinteraksi dengan tema saat bekerja di lingkungan pengembangan lokal. Setelah pengaturan Anda dapat menggunakan perintah watch yang akan memulai proses untuk memantau direktori Anda untuk perubahan dan mengunggahnya ke Shopify. 

Shopify tidak bisa benar-benar "lokal" (karena itu tanda kutip) karena Anda memerlukan koneksi internet untuk bekerja dengan toko pengembangan, tetapi integrasi Theme Kit ke dalam alur kerja Anda membuatnya terasa "lokal". Digunakan bersama dengan alat seperti Prepros Anda juga dapat mengambil keuntungan dari reload langsung toko pengembangan Anda serta file minification dan penggabungan. 

Pada 2017 Shopify juga meluncurkan Slate : perancah tema open source dan alat baris perintah untuk mengembangkan tema-tema Shopify. Ini dirancang untuk membantu alur kerja pengembangan Anda dan mempercepat proses pengembangan, pengujian, dan penerapan tema ke toko Shopify. 

Sedangkan ThemeKit membantu Anda dalam satu area Slate berjalan lebih jauh. Selain menyediakan kemampuan sinkronisasi tema dari ThemeKit (ThemeKit sebenarnya adalah bagian dari Slate) itu juga memungkinkan Anda untuk menyebarkan ke beberapa lingkungan pada saat yang sama, membuat kerangka kerangka untuk tema baru, dan mengatur stylesheet dan skrip.

Kerangka perancah Slate "sengaja dikosongkan" (halaman beranda gambar di bawah): standar Tag dan logika Liquid yang cenderung digunakan pada setiap template telah disertakan dengan sedikit atau tanpa markup, kelas, atau kode lain yang perlu Anda hapus.   Ini dimaksudkan sebagai titik awal yang berfungsi penuh: semua yang perlu Anda lakukan adalah mengisi bagian yang kosong dan Anda mulai bekerja.

Akhirnya, ada banyak pembantu JavaScript dan Sass yang dapat Anda gunakan, atau tidak jika Anda perlu menyertakan: 

JavaScript 

  • Trap focus
  • Tabel dan video yang responsif 
  • Format mata uang 
  • Image helpers
  • Varian produk 
  • Cart helper 
  • Section events

CSS

  • Breakpoint dan media queries
  • Grid
  • SVG icons
  • Tabel responsif 
  • Blank states 
  • Sass mixins

5. Polaris 

Pada Mei 2017, Shopify memperbarui tampilan dan nuansa semua aplikasinya: baik di desktop maupun seluler. Untuk dapat mencapai tujuan ambisius ini, tim UX di Shopif mengembangkan sistem desain baru yang disebut Polaris. Ini adalah sistem berfitur lengkap yang tidak hanya dimaksudkan untuk digunakan secara internal di Shopify tetapi juga untuk Mitra Shopify yang sedang membangun antarmuka untuk aplikasi yang terintegrasi melalui API Shopify. Tujuannya adalah untuk memberi siapa pun blok bangunan untuk membuat antarmuka yang tampak mulus dengan admin Shopify inti. 

Salah satu fitur utama Polaris adalah pustaka komponen yang luas. Setiap komponen memberikan penjelasan tentang masalah yang dipecahkannya, rekomendasi praktik terbaik, panduan penggunaan dan kode contoh untuk HTML dan Bereaksi. Semua komponen juga tersedia sebagai file Sketch .

Perpustakaan termasuk komponen untuk: 

  • Actions: Tombol, tindakan, dan matikan 
  • Images dan icons: Badges, avatar, icons, dan thumbnail 
  • Indikator umpan balik: Banners
  • Struktur: Kartu keterangan, tata letak halaman, dan status kosong 
  • Judul dan teks: Keterangan, teks tampilan, heading, dan subpos 
  • Forms: Kotak centang, pemilih warna dan tanggal, tata letak formulir, dan daftar pilihan 
  • Behaviour: Elemen yang dapat dilipat dan digulir 
  • Lists: Deskripsi dan daftar sumber daya 
  • Navigasi: Tautan, paginasi, dan tab 
  • Overlays: Popovers dan tooltips 
  • Embedded: Lansiran, modals, dan pemilih sumber daya 

Selain pustaka komponen, ada banyak dokumentasi yang mencakup pedoman desain dan prinsip-prinsip yang telah menginformasikan penciptaan pada elemen. Panduan gaya terkait juga menjelaskan secara detail tentang bagaimana tim Shopify UX berpikir tentang tipografi, warna, dan UX.   Ada juga bagian yang sangat berguna yang didedikasikan untuk ilustrasi dan visualisasi data termasuk deskripsi terperinci yang menguraikan kapan harus menggunakan avatar dan ikon default untuk memberi label pada grafik dengan tepat.

Bersama dengan pustaka komponen, Anda dan tim Anda dapat menggunakan panduan gaya untuk mempelajari tentang pedoman desain dan prinsip-prinsip yang telah membimbing penciptaan elemen-elemen ini. Ini memberi Anda pandangan langsung tentang bagaimana tim pengalaman pengguna Shopify berpikir tentang desain dan pengembangan antarmuka. 

Polaris dimaksudkan untuk tidak hanya membuat antarmuka untuk aplikasi Shopify dan lebih mudah untuk pengembang frontend tetapi juga memungkinkan Anda untuk menciptakan pengalaman yang familiar bagi pemilik toko yang menginstal aplikasi Anda. Bahasa adalah elemen besar dari setiap antarmuka dan panduan konten termasuk saran tentang cara merencanakan cara Anda berkomunikasi. Ada juga contoh yang menyoroti bagaimana Anda dapat mengubah suara dan nada Anda tergantung pada kebutuhan dan emosi pemilik toko. 

Polaris adalah proyek open source dan tersedia di GitHub. Tim di Shopify secara aktif mendukung proyek dan Anda dapat membuat masalah atau membuat permintaan fitur. 

Kesimpulan 

Kami telah membahas banyak hal dalam artikel ini, tetapi semoga, ini memberi Anda beberapa wawasan tentang beberapa perkembangan terkini ke platform Shopify yang akan membantu Anda membangun tema dan aplikasi yang lebih baik untuk Anda dan klien Anda. 

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.