next shopify starter Download - next shopify starter Quellcode Download

next shopify starter

AI-Quellcode

1.0.0

Herunterladen

Weiter.js + Tailwind CSS + Shopify Starter

Live -Demo • Weitere Starter finden • Folgen Sie mir auf Twitter

Dies ist ein voll funktionsfähiger E -Commerce -Store, in dem Next.js + Tailwind CSS im vorderen Ende verwendet wird und die Shopify StoreFront -API nutzt, um mit Ihrem Shopify -Backend zu interagieren. Hier können Sie eine lebende Demo sehen.

Wir verwenden GraphQL, um unsere Shopify -Daten abzufragen und die CART -Informationen in LocalStorage zu speichern, um die Benutzersitzung bestehen zu können. Schließlich verwenden wir Shopify Checkout, um den Benutzer die Artikel zu erwerben. Sie können dieses Spiel im Beispiel -Laden sehen. Ja - Der Laden ist funktional und Sie können die Aufkleber kaufen. ?

Hohe Leistung

Desktop	Mobile

Mobile Responsive

Listings	Wagen

Die Technologie

Weiter.js + Tailwind CSS
Graphql
LOCALSTORAGE, um die Benutzersitzung zu bestehen
Shopify
Vercel
Schriftart großartige Symbole
Josefin ohne Google -Schriftart

Wie man benutzt

Standardmäßig ist das Geschäft auf Abfragen und Anzeigen aller Produkte in einer Kollektion eingestellt. Sie können dies auf mehrere Sammlungen oder Ihren gesamten Geschäft verlängern.

Ein Hinweis zur Paginierung in den GraphQL -Abfragen

Die GraphQL -Abfragen sind alle festcodiert, um die maximale Anzahl von Produkten/Varianten/Bildern zu ziehen, die von Shopify auf 250 eingestellt sind. Ich habe das getan, um die Dinge einfach zu halten. Die Paginierung hätte die Anfragen kompliziert gemacht, und 250 Elemente sind für die meisten Anwendungsfälle ausreichen.

Wenn Sie Pagination benötigen, müssen Sie das Feld Cursor im Auge behalten und die Daten weiter abfragen, bis Sie alle Elemente abrufen.

Setup -Umgebungsvariablen

Erstellen Sie eine .env.local -Datei im Stammverzeichnis. Sie müssen diese 4 Variablen hinzufügen:

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

Die Next_Public_Shopify_Store_Front_access_Token und Next_Public_Shopify_Store_Domain (es wird so etwas wie domain_name.myshopify.com sein) ist benötigt, um auf die Shopify -StoreFront -API zuzugreifen (stellen Sie sicher, dass Sie in Ihrem Shopify -Store eingerichtet haben. Weitere Informationen finden Sie in Ihren Shopify -Store.

NEXT_PUBLIC_SHOPIFY_Collection ist der Name der Sammlung, die Sie anziehen möchten, und Next_public_local_Storage_Name ist der Name des Schlüssels, unter dem Ihre Benutzer ihre Cart -Informationen unterspeichern. Der genaue Name ist nicht so wichtig, obwohl ich vorschlage, dass Sie ihn einzigartig machen, sodass es weniger wahrscheinlich ist, dass es mit anderen gespeicherten Objekten zusammenspricht. So etwas wie YourStorenAmeshopifyStore, bei dem Ihr Shopify -Shop -Name ist, reicht aus.

Installation

Wechseln Sie in das Projektverzeichnis und führen Sie den folgenden Befehl aus:

 yarn && yarn dev

Aktualisieren Sie die Site -Metadaten

Sie können Ihre Site -Metadaten in der nächsten.config.js -Datei aktualisieren.

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

Farben aktualisieren

Sie können die Farbpalette in der Datei tailwind.config.js aktualisieren.

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

Aktualisieren Sie die Daten zur Progressive Web App (PWA)

Aktualisieren Sie die Manifest.json -Datei und die Symbole im Ordner Public/Images/Icons.

Sie können kostenlose Tools online verwenden, z. B. https://realfavicongenerator.net/, um schnell alle verschiedenen Symbolgrößen und die favicon.ico -Datei zu generieren.

Einsatz

Sie können dies mit einer beliebigen Anzahl von Diensten bereitstellen. Vercel und Netlify sind diejenigen, die ich bevorzuge, und sehr einfach zu richten und mit Ihrem Github -Repo zu synchronisieren.

Kredit

Der Laden wurde vom fantastischen Gatsby Swag -Laden sowie unzählige andere Entwickler inspiriert als ich, die ihre großartige Arbeit kostenlos herausgebracht haben.

Lizenz

Ich habe diesen Code unter der MIT -Lizenz in der Hoffnung, dass dies den Menschen hilft, sich in den Jamstack -E -Commerce -Stores zu navigieren, wie es der Gatsby Swag Store für mich war, als ich anfing.