Begin met het bouwen van een Shopify-thema: de themacommando's van Shopify CLI, wat elke themamap bevat, de basis van Liquid en JSON-templates, met commando's om te kopiëren.
Installeer Shopify CLI, voer shopify theme init uit om het Skeleton-starterthema te klonen, en daarna shopify theme dev --store your-store om het te bekijken op http://127.0.0.1:9292 met hot reload in Chrome. Bewerk Liquid, CSS en JSON-templates lokaal, voer shopify theme check uit om fouten te vinden en shopify theme push om te uploaden.
Themacommando's van Shopify CLI die u het meest gebruikt
Thema-ontwikkeling betekent het ontwerp van een winkel bewerken als echte bestanden op uw computer, met uw eigen editor en versiebeheer, in plaats van in de admin. Klik door de mappenverkenner hieronder om te leren wat waar staat, en kopieer dan de commando's om een preview te laten draaien.
Liquid is de templatetaal van Shopify. Dubbele accolades geven een waarde weer, zoals een producttitel, en tags met accolade en procentteken bevatten logica zoals if-statements en loops. Filters veranderen hoe een waarde wordt getoond.
Ontwikkelaars bouwen meestal op een ontwikkelwinkel die is aangemaakt vanuit een Shopify Partner-account. Controleer de actuele voorwaarden in het Partner-dashboard, want die kunnen veranderen.
Een gegevensbestand dat de secties opsomt die een pagina rendert, met hun instellingen. Het heeft een sections-object met minstens één sectie nodig en een order-array met sectie-ID's.
De startgids van Shopify zegt dat de preview met hot reload alleen in Google Chrome werkt. Ververs in andere browsers handmatig.
Het init-commando van de CLI kloont Skeleton, een minimale basis voor een thema dat u vanaf nul bouwt. Begin met een volledig gratis thema als u vooral een bestaand ontwerp wilt aanpassen.
Vervang my-store door de myshopify-naam van uw winkel. Voer ze uit vanuit een lege map.
init kloont de Skeleton-starter; dev toont een lokaal adres dat uw wijzigingen in CSS en secties herlaadt.
Voer check uit vóór elke upload. share maakt een nieuwe ongepubliceerde kopie, wat het veiligst is voor beoordeling door een klant.
Output-tags tonen waarden, logic-tags bepalen wat er wordt gerenderd, en filters vormen een waarde om.
De if-tag verbergt de regel met de vergelijkingsprijs als er geen uitverkoop is; het money-filter formatteert de prijs in de valuta van de winkel.
Elke map in een standaardthema en wat erin staat. Kies er een om hem te markeren.
Afbeeldingen, CSS- en JavaScript-bestanden die het thema gebruikt.
Theme blocks, het nieuwere soort blok waar thema's zoals Horizon omheen zijn gebouwd.
Configuratiebestanden voor het thema, waaronder settings_schema.json.
Vertaalbestanden, zodat de eigen teksten van het thema in andere talen kunnen verschijnen.
De secties en sectiegroepen van het thema.
Kleine herbruikbare stukjes Liquid-code.
Templates voor de oude pagina's voor klantaccounts.
Gratis beginnen · Geen creditcard nodig