Download next shopify starter - Download Kode Sumber next shopify starter

next shopify starter

Kode Sumber AI

1.0.0

Unduh

Next.js + Tailwind CSS + Starter Shopify

Demo langsung • Lihat lebih banyak starter • Ikuti saya di Twitter

Ini adalah toko eCommerce yang berfungsi penuh yang menggunakan Next.js + Tailwind CSS di ujung depan dan memanfaatkan API toko Shopify untuk berinteraksi dengan backend Shopify Anda. Anda dapat melihat demo langsung di sini.

Kami menggunakan GraphQL untuk menanyakan data Shopify kami dan menyimpan informasi keranjang di LocalStorage untuk bertahan sesi pengguna. Akhirnya - kami menggunakan Checkout Shopify untuk membiarkan pengguna membeli item. Anda dapat melihat ini bermain di toko contoh. Ya - Toko berfungsi dan Anda dapat membeli stiker. ?

Kinerja tinggi

Desktop	Mobile

Responsif seluler

Daftar	Keranjang

Tech

Next.js + Tailwind CSS
Graphql
LocalStorage untuk bertahan sesi pengguna
Shopify
Vercel
Font Ikon Luar Biasa
Josefin sans google font

Cara menggunakan

Secara default, toko diatur untuk meminta dan menunjukkan semua produk dalam satu koleksi. Anda dapat memperpanjang ini untuk menanyakan beberapa koleksi atau seluruh toko Anda.

Catatan tentang pagination dalam kueri GraphQL

Kueri GraphQL semuanya hardcoded untuk menarik jumlah maksimum produk/varian/gambar yang diatur ke 250 oleh Shopify. Saya melakukan ini untuk menjaga hal -hal sederhana. Pagination akan membuat pertanyaan rumit dan 250 item sudah cukup untuk sebagian besar kasus penggunaan.

Jika Anda memerlukan pagination, Anda harus melacak bidang kursor dan terus meminta data sampai Anda mengambil semua item.

Pengaturan Variabel Lingkungan

Buat file .env.local di direktori root. Anda perlu menambahkan 4 variabel ini:

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

The next_public_shopify_store_front_access_token dan next_public_shopify_store_domain (itu akan menjadi sesuatu seperti domain_name.myshopify.com) diperlukan untuk mengakses toko toko Shopify (pastikan Anda telah mengaturnya di toko Shopify Anda. Lihat dokumen untuk informasi lebih lanjut.

Next_public_shopify_collection adalah nama koleksi yang ingin Anda tarik dan next_public_local_storage_name adalah nama kunci pengguna Anda akan menyimpan informasi keranjang mereka di bawah. Nama persis tidak begitu penting meskipun saya sarankan Anda membuatnya unik sehingga cenderung berbenturan dengan benda -benda tersimpan lainnya. Sesuatu seperti YourStoreNameshotifyStore di mana Anda nama Anda adalah nama toko Shopify Anda sudah cukup.

Instalasi

Ubah ke direktori proyek dan jalankan perintah berikut:

 yarn && yarn dev

Perbarui Situs Metadata

Anda dapat memperbarui metadata situs Anda di file next.config.js.

 env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
}

Perbarui warna

Anda dapat memperbarui palet warna di file tailwind.config.js.

 colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

Perbarui Data Aplikasi Web Progresif (PWA)

Perbarui file manifest.json dan ikon di bawah folder publik/gambar/ikon.

Anda dapat menggunakan alat gratis secara online seperti https://realfavicongenerator.net/ untuk dengan cepat menghasilkan semua ukuran ikon yang berbeda dan file favicon.ico.

Penyebaran

Anda dapat menggunakan ini menggunakan sejumlah layanan. Vercel dan Netlify adalah yang saya sukai dan sangat mudah diatur dan disinkronkan dengan repo github Anda.

Kredit

Toko ini terinspirasi oleh toko Swag Gatsby yang mengagumkan serta banyak devs lain yang jauh lebih mampu daripada saya yang mengeluarkan pekerjaan luar biasa mereka secara gratis.

Lisensi

Saya telah membuka sumber kode ini di bawah lisensi MIT dengan harapan bahwa jika ini membantu orang menavigasi jalan mereka di toko -toko ECOMMERCE JAMSTACK seperti yang dilakukan toko barang gerbang Gatsby untuk saya ketika saya pertama kali memulai.