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

Sebuah Tinjauan untuk Alat Alur Kerja Shopify Saya

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Bersamaan dengan publikasi yang terbaru oleh Shopify Theme Series beberapa orang mencoba menghubungi saya tentang alat alur kerja saya yang saya gunakan untuk mebuat tema. Mari mulai dengan melihat Desktop Theme Editor untuk Mac.

Desktop Theme Editor untuk Mac

Berhubung Shopify merupakan platform yang dikelola, maka Anda perlu untuk mengunggah file tema anda untuk melihat perubahan tema pada penyimpanan Anda. Sementara Anda juga dapat menggunakan tema editor di area admin, kebanyakan dari kita suka (dan lebih memilih) untuk bekerja secara local untuk file tema menggunakan editor teks yang kita pilih – yang saya pilih adalah Sublime Text 2.

The Desktop Theme Editor untuk Mac membuat sinkronisasi tidak terlihat antar file lokal dan tema Shopify Anda

Agak membuang waktu memang jika harus membuka ZIP tema Anda kemudian menunggu proses pengunggahan selesai hanya untuk melihat perbedaan yang tidak begitu signifikan, tetapi untunglah ada alat untuk menyelesaikan permasalahan ini. Yang pertama akan kita bicarakan adalah Desktop Theme Editor untuk Mac.

Aplikasi ini gratis untuk didownload pada toko aplikasi Shopify, bekerja di latar belakang untuk melakukan sinkronisasi perubahan tak terlihat pada folder tema lokal untuk pengembangan atau live toko Shopify. Ini artinya, Anda tetap dapat bekerja secara lokal di teks editor favorit Anda, merubah ini dan itu, menambah/menghapus file, kemudian dapat kembali dengan mudah ke toko Anda – tekan refresh – lihat perubahannya.

Melakukan setting Desktop Theme Editor sangatlah mudah:

  • Unduh aplikasinya di Shohpify App store, install dan kemudian buka.
  • Login ke aplikasi menggunakan detail Shopify store Anda.
  • Pilih tema yang relevan yang Anda sukai untuk dapat bekerja secara lokal.
    Catatan: temanya harus tersedia pada toko. Jika Anda memulai dengan coretan unggahlah tema boilerplate Anda via area admin toko kemudian pilihlah dari list tersebut.
  • Pilih lokasi penyimpanan tema paling tepat.
  • Buka tema Anda di editor teks favorit Anda.
  • Buatlah perubahan kemudian tunggu hingga ada pemberitahuan yang muncul bahwa perbuhana telah diterapkan di toko Anda.
  • Refersh browser toko Anda untuk melihat perubahan

Ini adalah aplikasi yang luar biasa, sangat mudah untuk digunakan dan tentu mempersingkat pengembangan tema Anda. Detail penuh tentang aplikasi termasuk screencast tersedia di situs Shopify docs.

Shopify Gem

Jika Anda tidak menggunakan ac, atau memiliki preferensi untuk garis komando/command-line, Anda mungkin tertarik menggunakan SHopify Theme Gem tersedia di GitHub. Aplikasi ini akan menghasilkan tema dan cara kerja yang sama dengan Desktop Theme Editor, tetapi bedanya tidak ada install untuk aplikasi lokal, Anda perlu menginstall Ruby Gem.

The Shopify Theme Gem adalah alat command-line paling baik untuk mengerjakan file tema Anda.

Sekali Anda telah menginstal Gem (Instruksi lengkap tersedia di GitHub) Anda akan memiliki akses yang luas terhadap fitur command-line sebagai tambahan dari yang ditawarkan Desktop Theme Editor. Kemampuan ini termasuk di dalamnya: 

  • Mengunduh seluruh file tema
  • Mengunggah sebuah file tema
  • Menghapus tema
  • Mengganti keseluruhan tema toko dengan tema simpanan lokal
  • Mengakses toko menggunakan browser default

Dua aplikasi ini membuat tema menjadi lebih mudah. Sinkronisasinya cepat dan singkat serta tentu saja mempercepat proses kerja Anda.

Timber

Saya yakin saya bukanlah satu-satunya orang yang memiliki boilerplate untuk pengembangan tema saya. Saya mengelola milik saya di GitHub dan menggunakan ini sebagai tema dasar yang sedang saya kerjakan.

Timber — Cara yang lebih cepat dan lebih mudah untuk membuat tema Shopify

Tema boilerplate saya sangat biasa dan sementara ia bekerja Anda mungkin suka yang lebih berbentuk seperti Timber. Tema starter ini baru saja diluncirkan oleh tim Shopify dan menjelaskan dirinya sebagai “Tema Shopify yang lebih cepat serta lebih mudah”. Ini lebih seperti kerangka daripada yang sama miliki dan banyak fitur berguna di dalamnya. 

Berikut kelebihannya:

  • Required Templates – Setiap template tema, baik wajib maupun pilihan
  • Basic Markup – Semua HTML penting dan output Liquid dan tag logis untuk masing-masing template
  • CSS Framework – Seperangkat model computer setengah jadi (barebones) yang dapat Anda atur sesuai kebutuhan Anda, termasuk kerangka grid yang sangat responsif.
  • Snippets – Segmen yang dapat digunakan ulang umumnya menggunakan kode seperti kode blok halaman, remah roti dan formulir laporan.

Timber sangat bagus untuk dicoba. Anda juga dapat mencoba demo store untuk melihat bagaimana Timber bekerja pada bentuk dasarnya.

Sass Support

Sedikit yang mengetahui bahwa Shopify juga mendukung Sass, walaupun dengan sedikit peringatan. Kompilasi file *.scss.liquid Anda terjadi di server Shopify sehingga Anda tidak perlu khawatir tentang menjalankan prosesor lokal untuk pengembangan tema Shopify Anda. Hasii output dari CSS akan terkompres dan komentar akan dihapus. 

Saya menyebut ada satu peringatan. Saat ini Anda tidak dapat menggunakan @imports pada file Sass Anda, dikarenakan implikasi keamanan pada platform Shopify. Hal ini mencegah Anda menggunakan bantuan seperti Compass dan Bourbon, tetapi berita baiknya adalah ada solusi untuk bisa ditilik.

Bagaimanapun itu bukan merupakan berita buruk sepenuhnya. Timber memasukkan beberapa useful mixins pada Sass file nya dan Anda tentu saja dapat menggunakan milik Anda – hanya saja ingagt bahwa mereka harus berada di file yang sama denga model deklarasi Anda.

Alur Kerja yang Lebih Baik

The Desktop Theme Editor, Shopify Gem, Timber dan Sass mendukung semua cara yang dengan sedikit usaha, kita dapat mulai memperbaiki bagaimana cara kita membuat tema Shopify kita.

Di luar yang dijelaskan di atas ada banyak pengembang berbakat untuk tema Shopify yang menggunakan peralatan mereka sendiri serta ide sendiri untuk alur kerja hariannya. Jika Anda memiliki teknik Anda sendiri kemudian ingin berbagi saya sangat senang mendengarnya. Silakan tinggalkan catatan Anda di kolom komentar.

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.