Accentsconagua
Share
Som några av er kanske vet från mina tidigare artiklar är Shopify en temabaserad värdplattform som gör att du kan bygga onlinebutiker. Det har varit stadigt växande de senaste åren och idag är plattformen bakom 400 000 företag i cirka 175 länder.
Shopify-plattformen utvecklas ständigt och under de senaste månaderna har ett antal nyckelfunktioner lanserats, särskilt för tematillverkare och apputvecklare. I den här artikeln tittar vi på ett urval av dessa nya funktioner och verktygssatser, inklusive:
Många av följande exempel kommer att diskuteras Flytande. Vätska är mallens språk som gör att temutvecklare kan använda platshållare och logikkonstruktioner i sina mallar som kommer att ersättas med direktbutiksdata när en sida begärs och återges. Den använder en enkel syntax som tillåter utmatning (t ex en produkttitel) och logik (t ex a för slinga). Jag kommer inte att gå in på för många detaljer här men du kan titta på min 25 minuters skärmdump som går in i mycket mer detaljer om hur Liquid fungerar.
Och medan du är här kanske du också är intresserad av följande inspirationspost, för teman som finns på Themeforest:
Låt oss börja med att titta på en av de viktigaste temanelaterade ändringarna som skedde nyligen: img_url Vätskefilter. Fram till nyligen gjordes bilder baserade på en uppsättning fördefinierade namngivna storlekar. Till exempel:
product.featured_image | img_url: 'grande'
Här begär vi den utvalda bilden för produkten i storlek grande. Detta skulle, förutsatt att den ursprungliga bilden hade en sida lika med eller större än 600px, gör bilden med desto längre av de två axlarna är 600px.
Dessa namngivna storlekar avlägsnas nu och medan de fortfarande kommer att fungera har de ersatts av en ny uppsättning parametrar inklusive storlek, beskära, skala, och formatera. Detta gör det nu möjligt att göra en hel mängd bildrelaterade manipuleringar som tidigare inte var tillgängliga för Shopify-temaprojektorer.
Jag ska använda img_url Flytande filter i dessa exempel men teknikerna kommer också att fungera med följande andra bildrelaterade objekt:
Låt oss börja med att titta på hur vi kan ändra storlek på en bild. För att göra detta ersätter vi den nu avskilda bilden namn med en viss storlek i pixlar. Här är ett exempel:
product.featured_image | img_url: '450x450'
Med hjälp av ovanstående syntax läggs nu kontrollen av bilddimensionerna i dina händer: Här har vi angett både bredd och höjd (i den ordningen).
Du kan också ange endast en bredd:
product.featured_image | img_url: '450x'
eller bara en höjd:
product.featured_image | img_url: 'x450'
När du anger ett enda värde, beräknar Shopify den återstående dimensionen baserat på den ursprungliga bildstorleken, så att originalbildens bildförhållande är intakt.
Återgå till vårt ursprungliga exempel kan du tro att det skulle resultera i en 450x450-version av din bild som gjordes. Detta är emellertid inte alltid fallet.
Denna förfrågan skulle resultera i en perfekt kvadrat, endast om båda följande villkor är uppfyllda:
Om båda villkoren är sanna skulle en 450x450 kvadratisk bild göras. Om inte, kommer Shopify att ändra storlek på den med samma logik som om du bara har angivit höjd eller bredd. Den längsta sidan vinner ut i denna situation och skalas därefter.
För att skapa kvadratiska bilder kan du utnyttja grödorparametern för att säkerställa att den resulterande bildens dimensioner matchar de begärda dimensionerna. Om hela bilden inte passar in i dina begärda dimensioner, anger grödsparametern vilken del av bilden som ska visas. Det finns tre giltiga alternativ:
Denna funktionalitet har varit tillgänglig sedan slutet av 2016, men i början av 2017 släpptes en uppdatering som gav ännu mer flexibilitet. Teman som finns i Shopify Theme Store, inklusive premium Empire-temaet nedan, använder alla dessa tekniker. Installera ett gratis tema är ett bra sätt att lära dig mer om hur du implementerar dessa idéer.
srcset för att beskriva hur du kan dra nytta av detta i dina egna teman:
% för produkten i collection.products% % assign image = product.featured_image%% endfor%
I det här exemplet använder vi tilldela Flytande funktion för att skapa en variabel som heter bild det är lika med den aktuella produkten som visas i bilden (som är inställd i Shopify-administratören). Vi kan sedan använda Liquid logic för att skapa vår srcset deklarationer som använder, i det här fallet, bredd fast egendom:
% om image.width> 640% image.src | img_url: '640x' 640w % endif%
Den goda nyheten är att temutvecklare inte behöver oroa sig för att ladda upp alla sina bilder, eftersom Shopify har indexerat varje bild på plattformen.
Två andra parametrar som är värda att diskutera är skala och formatera. Skalparametern gör att du kan ange bildpunktens densitet. Du kan skala upp antingen 2x eller 3x beroende på dina behov:
product.image | img_url: '400x400', skala: 2
De formatera parameter kan du ange vilket filformat som ska användas för bilden. För närvarande kan du ange antingen jpg eller pjpg (progressiv JPEG):
product.image | img_url: '400x400', format: 'pjpg'
Du kan också dra nytta av den här tekniken för bilder som finns i tematets tillgångsmapp. För att göra detta använder du asset_img_url filtrera. Här är ett exempel som också använder sig av img_tag filter som kommer att resultera i en helt formad img element som görs i mallen:
logo.jpg '| asset_img_url: '300x' | img_tag
Dessa nya bildhanteringsfilter och bildegenskaper gör det möjligt att vara så flexibelt som du behöver när det gäller att hantera bilder, konstriktningar och vara vänliga för slutanvändarnas dataplaner.
I slutet av 2016 introducerade Shopify "Sections". Den här nya funktionen gör det möjligt för utvecklare att skapa ett anpassat admingränssnitt som gör det möjligt för butikseägare att enkelt lägga till, omorganisera och ta bort innehållsavsnitt som produkter, bildspel, videor eller produktsamlingar. Det här är vanliga fall, men du kan bokstavligen använda den här funktionaliteten så att butiksägare kan lägga till och redigera vilken typ av innehåll som helst. Alla ändringar i admin kan ses i realtid och en gång sparad kommer att vara live i butiken.
Sektioner kan inkluderas statiskt i temat mallar (som sidhuvud och sidfot), eller de kan läggas till dynamiskt och tas bort via admingränssnittet på temat hemsida. I det ovanstående exemplet, som vi går in på kort tid, kan du se hur vi kan redigera en statisk sektion som kommer att visas i butikens sidfot. Du kommer också att märka knappen "Lägg till avsnitt" som gör att vi kan lägga till dynamiska sektioner, mer om dem senare, till hemsidan.
Sektionsmallar finns i mappen Ny avsnitt och kan hänvisas på samma sätt som snippets. Om vår fil var placerad på sektioner / promotion.liquid skulle vi referera till det på följande sätt:
% avsnitt "marknadsföring"%
Notera: du behöver inte .flytande förlängning som är vanligt med utdrag i Shopify-teman. Låt oss titta på ett exempel som hjälper till att klargöra kraften i avsnitt. Följande är innehållet i sektioner / footer.liquid:
section.settings.title
section.settings.description
% schema% "namn": "Footer Promotion", "inställningar": ["id": "title", "type": "text", "label": "Promotion Title", "default" "Titel", "Id": "Beskrivning", "Typ": "Richtext", "Etikett": "Lägg till din beskrivning nedan", "Standard": "Lägg till din beskrivning här
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Om du känner till Shopify-temainställningar kan det hända att vissa av detta ser ganska bekant ut. Den innehåller en blandning av HTML, Liquid Placeholders och JSON som liknar den som finns i settings_schema.json. Förresten funktionaliteten hos settings_schema.json återstår fortfarande: sektioner lägger bara till ett extra lager av funktionalitet.
Överst i mallen är HTML-utmatningen som jag skulle vilja generera när mallen möter avsnittet vid återställningstid. Inuti var och en av h1 och p element är flytande platshållare med hjälp av det nya section.settings. [x] utgående syntax. I våra exempel kommer vår sektionsmall att leta efter data som motsvarar section.settings.title och section.settings.description.
Hittills trevligt och enkelt, men hur vet Shopify vad man ska fylla i dessa platshållare med? Allt detta kommer ner till JSON som jag nämnde tidigare inbäddat mellan öppning och stängning % schema% taggar.
"namn": "Footer Promotion", "settings": ["id": "title", "type": "text" "id": "beskrivning", "typ": "richtext", "label": "Lägg till din beskrivning nedan", "standard": "Lägg till din beskrivning här
"]
För att vår avsnitt ska visas i "Anpassa tema" -området i butikens admin behöver vi ge det en identifierare: Vi gör det genom att definiera "namn" -värdet på översta nivån på JSON.
Därefter har vi inställningsnoden som i det här exemplet har två delnoder. Båda innehåller egenskaper hos id, typ, märka, och standard. Var och en av dessa, beroende på deras värde, kommer att styra hur admingränssnittet görs. Låt oss ta en titt på var och en i sin tur:
En textsträng som används internt. Det är värt att notera att även om ID: erna måste vara unika över en sektionsfil, behöver de inte vara unika i alla sektionsfiler. Som sådan är det helt okej att ha en id av titel i flera sektionsfiler. Sektioninställningar kommer inte heller att stämma överens med inställningarna i settings_schema.json.
Detta representerar kontrollen som kommer att göras inom administratören. De vanligaste alternativen är följande:
% endfor% text: Enstaka textfälttextarea: Flervals textområdenrik text: En rik textredigerareimage_picker: Bildöverföringarradio: RadioknapparVälj: Val av rullgardinsmenyercheckbox: KryssrutorNågra av dessa kräver ytterligare JSON att fungera. Till exempel kräver valkontrollen alternativ för att fylla den. Mer information om hur dessa fungerar, liksom andra kontroller som du kanske vill överväga, finns i Shopify-dokumenten.
Detta representerar HTML-etiketten som kommer att genereras i administratören ovanför din kontroll.
Med denna inställning kan du lägga till platshållarens värden i kontrollen. Det är värt att notera att dessa är de värden som kommer att användas tills sektionen har uppdaterats av butiksägaren.
Mitt exempel är ganska enkelt och kommer att skapa två kontroller. Den första är ett textfält med en rad som kommer att göras i h1 element i mallen, den andra är en rik textruta som ger alternativen med fet, kursiv och URL.
Det finns många andra alternativ som du kan använda för att pimp ut din butiks admin, inklusive att lägga till skräddarsydda kontroller för webbadresser, samling och produktförteckningar, samt anpassad HTML. Vi kommer inte att titta på dem alla i den här artikeln men jag uppmuntrar dig att dyka in i möjligheterna.
Du märker också att du kan lägga till anpassad CSS och JavaScript till sektionsfiler med följande Liquid-taggar:
% stylesheet% % endstylesheet%
% javascript% % endjavascript%
Du kanske tror att det här kan lägga till mycket potentiellt uppblåst inline CSS och JavaScript till ditt tema. Den goda nyheten är att Shopify sammanför alla CSS och JS till en enda fil som injiceras via vätskan content_for_header platshållare. Plattformen säkerställer att endast en enda instans alltid ingår, även om den delen används flera gånger på en sida. Mer information om hur skript körs finns i Shopify-dokumenten.
När du har ställt in dina kontroller och namn i JSON-filen kan du inkludera avsnittet i vilken relevant mall som helst. Sektioner kan läggas till i en layoutfil (den yttre huden på en sida) eller en individuell mallfil. Shopify admin visar kontrollerna kontextuellt: det vill säga endast när du tittar på den relevanta mallen i redigeringsverktyget "Anpassa teman". Ändra värden kommer att resultera i en realtidsuppdatering i admin: det här är ett bra sätt att se hur förändringar påverkar layouten innan du uppdaterar och trycker på live.
Om du tittar på den gjorda HTML-filen märker du att avsnitt är inslagna i en div element:
Divets id har formatet av
Shopify-section [id], där id är ett unikt id för det elementet för sidan, och utan att ange lägger till en klass avShopify sektion. Du kan också lägga till din egen klass i div-elementet genom att ange ett klassvärde i dina inställningar. Så här ser det ut för vårt exempel ovan:"id": "titel", "typ": "text", "klass": "titel", "etikett": "kampanjtitel", "standard": "titel"Detta tillägg skulle resultera i följande:
Sektioner är ett utmärkt komplement till Shopify-teman, eftersom de tillåter temoutvecklare att aktivera kontextuella inställningar över en hel butik. Men de kommer verkligen till sin egen när de arbetar i takt med den nya blockfunktionaliteten.
3. Block
Block bygger på toppen av avsnittskonceptet och tillåter butikseägare att lägga till flera sektioner på en butiks hemsida. Låt oss ta en titt på hur vi kan använda block för att lägga till möjligheten att lägga till ett antal kampanjer till hemsidan. Här är exempelfilen vi arbetar med:
% för block i section.blocks% % om block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "bildväljaren"%% endif% % endfor% % schema% "namn": "Promotional Blocks", "max_blocks": 5, "förinställningar": ["name": "Promotional Blocks", "category" "Anpassad hemsida innehåll"], "block": ["typ": "promo-box", "namn": "Promotional Box", "limit": 1, "inställningar": ["id" titel "," typ ":" text "," etikett ":" Titel "," standard ":" din titel här ", " id ":" beskrivning "," typ ":" textarea " : "Beskrivning", "standard": "din beskrivning här"], "typ": "bildväljare", "namn": "Promo Image", "Settings": ["id" -image "," type ":" image_picker "," label ":" Promo Image "] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Jag är ärlig, det tog mig lite mer än en stund att ta mitt huvud runt hur det går att arbeta. Men när du förstår hur bitarna passar ihop kommer det att öppna upp en helt ny uppsättning möjligheter för din temat utveckling.
Huvudsidan kan huvudsakligen bestå av flera sektioner med varje sektion som kan innehålla flera block. Butiksägaren kan sedan ombeställa dessa block för att skapa en layout som bäst passar deras behov. Låt oss se hur detta skiljer sig från föregående exempel för att klargöra vissa begrepp.
Först märker du att det finns en vätska
förslingan längst upp i mallen:% för block i section.blocks% % om block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "promo-image"%Eftersom dessa multipla element är tillägnad affärsägaren har vi, som temaboutvecklare, ingen möjlighet att veta vad vi behöver skriva ut. Vi behöver därför använda en flytande slingstruktur, i det här fallet a
förslinga, vilket gör att vi kan iterera över alla block som finns i en viss sektion i sin tur och mata ut relevanta data.I biten ovan ser du att jag använder en enkel
om / elsifuttalande som kontrollerar för aktuella block typ. Vi kan ställa in typen i schemat själva som vi kommer att se inom kort. I det här exemplet använder vielsifatt vara dubbelt säker på vilken typ vi söker efter. Om du bara hade två olika blocktyper, som vi gör i det här exemplet, kan du baraannansom du vet att det är det enda andra alternativet: det sa att det inte skadar sig för att vara mer defensiv.Beroende på vår typ kommer en annan del av HTML att matas ut. För att mata ut värdet associerat med blocket använder vi följande syntax:
block.settings. [id]
[Id]representerar det id som ges till det särskilda elementet i vårt schema som vi kommer att täcka nästa.Att flytta till schemat kommer du att märka några bekanta och några obekanta element. Låt oss börja med att titta på öppningsdelen:
"namn": "Reklamblocks", "max_blocks": 5, "förinställningar": ["namn": "Reklamblock", "kategori": "Anpassat hemsidainnehåll"]Låt oss ta en titt på varje del i sin tur:
"namn": "Promotional Blocks": Namnet som kommer att visas för den här kontrollgruppen i Shopify-administratören"max_blocks": 5: Det totala antalet block som kan visas i det här avsnittet. Detta fungerar i samklang med varje blockets gränsvärde som vi kommer att täcka senare. När det maximala antalet block har uppnåtts kan du inte lägga till mer i administratören."förinställningar": En rad standardinställningar för den dynamiska sektionen. I exemplet ovan vill vi att vårt dynamiska element ska visas under titeln "Promotional Blocks" och i kategorin "Custom Homepage Content". Kategorivärdet tillåter oss att gruppera olika avsnitt i en grupp i admin.När vi har definierat
namn,max_blocks, och förinställda värden kan vi uppmärksamma de kontroller som vi skulle vilja se i admin. Dessa definieras i blockdelen av schemat:"block": "" type ":" promo-box "," namn ":" Promotional Box "," limit ": 1," inställningar ": [" id ":" title " text "," etikett ":" Titel "," standard ":" din titel här ", " id ":" beskrivning "," typ ":" textarea " : "din beskrivning här"], "typ": "promo-bild", "namn": "Promo Image", "Settings": ["id": "promo-image" "image_picker", "label": "Promo Image"]]Varje block har ett antal fördefinierade värden:
"typ": Ett namn som ges till denna särskilda grupp av kontroller. Detta kan vara allt du vill, men helst något självförklarande."namn": Namnet på den här särskilda kontrollgruppen som du vill se i administratören"begränsa": Antalet gånger du vill ha den här kontrollgruppen, dvs det här blocket, visas i avsnittet. Vi ska titta på detta ytterligare inom kort.När du har definierat dessa förinställningar kan du flytta till definiera de kontroller du vill se i admin. Dessa definieras i inställningar:
"inställningar": ["id": "titel", "typ": "text", "etikett": "Titel", "standard": "din titel här", "id": "beskrivning" "typ": "textarea", "label": "Beskrivning", "standard": "din beskrivning här"]I vårt exempel har vi två potentiella blocktyper som vi kan lägga till i det här avsnittet. Den första är blocktypen
promo-boxoch den andra är blocktypenpromo-bild: Vi båda definierade oss själva.Varje block kan också definiera sin egen uppsättning inställningar som kan bestå av en eller flera kontroller. I ovanstående exempel, typ av block
promo-boxhar två kontroller som kommer att visas när de läggs till i avsnittet. Den första är ett textfält och det andra är atextarea. Av någon anledning kan block inte användarik textredaktör vi använde i vårt tidigare exempel men atextareakommer att tillåta dig att lägga till HTML efter behov. Som med statiska sektioner måste vi också definiera ochid,typ,märka, ochbeskrivning.Det finns ett antal typer tillgängliga, inklusive:
text: Enstaka textfälttextarea: Flervals textområdenimage_picker: Bildöverföringarradio: RadioknapparVälj: Val av rullgardinsmenyercheckbox: Kryssrutorräckvidd: RäckviddenI ovanstående exempel har vi också definierat en bildkontroll med hjälp av
image_pickervärde. Detta gör det möjligt för butiksägaren att ladda upp en bild eller välja en som redan har laddats upp i affären. Eftersom detta har sin egen typ, namn och inställningar kommer bildväljaren att visas som ett annat alternativ som butiksägaren kan lägga till i denna dynamiska sektion.Jag nämnde tidigare att
promo-boxblock har ett gränsvärde på 1. Du kommer förhoppningsvis också att komma ihåg att vi definierade det maximala antalet block i detta avsnitt för att vara 5. Därför är det möjligt att ha en sektion som består av:
- 1 "promo-box" och 4 "promo-bilder"
- 5 "promo-bilder"
När endera kombinationen har uppnåtts kommer du inte att kunna lägga till ytterligare block i sektionen om du inte tar bort ett befintligt block.
När du har din mall och schema klar och eventuella ytterligare CSS och JavaScript måste du lägga till ett sista stycke kod till ditt temas index.liquid-mall för att aktivera blockens funktionalitet. Genom att lägga till
content_for_indextill index.liquid Shopify vet att det finns några avsnitt som har en eller flera förinställningar definierade. Varje förinställd blir då en dynamisk sektion som en handlare kan lägga till på deras temaplan.I bilden nedan ser du slutresultatet. Efter att ha klickat på admin kan vi lägga till våra länkar eller kampanjbloggar till den dynamiska sektionen. I det här fallet valde jag Promotional Blocks och kan sedan lägga till ytterligare block - men bara Promo-bilder som vi angav en gräns på 1 i vårt schema för typen "Promotional Box".
Det är värt att notera att du inte bara kan omordna dynamiska block i en sektion men du kan också ordna överordnade sektioner på hemsidan som du tycker är lämplig. En sak att komma ihåg är att det finns en hård gräns på 25 sektioner som kan läggas till hemsidan.
Statiska och dynamiska sektioner, och deras efterföljande block är ett mycket kraftfullt verktyg. Det tog mig ett tag att verkligen förstå koncepten men när den klickade på dig börjar du verkligen uppskatta den potential de erbjuder.
4. Tema Kit och Slate
En fråga som jag oftast blir frågad vid första gången Shopify-temautvecklare är hur bäst man kan skapa en utvecklingsmiljö för att arbeta med plattformen: idag finns det två bra alternativ som får dig att komma igång.
Förra året släppte Shopify teman laget Shopify Theme Kit. Theme Kit är ett enda binärt kommandoradsverktyg (fungerar på Windows, Linux och MacOS) som, när installerat, kommer att göra det möjligt för dig att:
- Ladda upp teman till flera miljöer
- Ladda upp och ladda ner tematillgångar
- Titta på lokala ändringar och ladda upp automatiskt till Shopify-plattformen
Tema Kit gör det möjligt för utvecklare av temat att arbeta med sina välkända verktyg (textredigerare, förbehandlare etc) och har ändrats synkroniserat i bakgrunden till en Shopify utvecklingsbutik. Om du inte har tittat på Shopify från ett temaparkeringsperspektiv innan du kanske inte är medveten om utvecklingsbutiker.
I huvudsak är de fullt utrustade Shopify-butiker med en skillnad: du kan inte ta riktiga betalningar. För att du ska kunna visa hela kassaflödet till en klient kan du dock lägga till en "Dummy Payment Gateway". Du kan skapa så många utvecklingsbutiker som du behöver via ett gratis partnerkonto. När du är redo att starta kan du helt enkelt uppgradera butiken till en betald plan eller distribuera temat till en annan butik.
Theme Kit erbjuder ett antal användbara kommandon som låter dig interagera med teman medan du arbetar i en lokal utvecklingsmiljö. När du har installerat kan du använda
Kolla påkommando som kommer att starta en process för att övervaka katalogen för ändringar och ladda upp dem till Shopify.Shopify kan inte vara riktigt "local" (därav citat) eftersom du behöver en internetuppkoppling för att arbeta med en utvecklingsbutik, men integrationen av temakit i ditt arbetsflöde gör det att känna sig "lokal". Används i kombination med verktyg som Prepros kan du också dra nytta av att du direkt laddar upp din utvecklingsbutik, liksom filminifiering och sammanlänkning.
I 2017 lanserade Shopify Slate: ett open source-temaplacement och kommandoradsverktyg för att utveckla Shopify-teman. Den är utformad för att hjälpa ditt utvecklingsarbete och påskynda processen att utveckla, testa och distribuera teman till Shopify-butiker.
Medan ThemeKit hjälper dig på ett område Slate går mycket längre. Förutom att tillhandahålla tematynkroniseringsfunktionerna i ThemeKit (ThemeKit är faktiskt en del av Slate) kan du också distribuera till flera miljöer samtidigt, skapa skelettmallar för ett nytt tema och organisera stilark och skript på ett flexibelt sätt.
Skifferets byggnadsmallar är "avsiktligt tomma" (hemsida bilden nedan): standard Vätsketiketter och logik som kan användas på varje mall har inkluderats med liten eller ingen markering, klasser eller annan kod som du behöver ta bort. Det är tänkt som en fullt fungerande utgångspunkt: allt du behöver göra är att fylla i ämnena och du är igång.
Slutligen finns det en massa JavaScript och Sass-hjälpare som du kan använda, eller inte om du behöver inkludera:
JavaScript
- Fällningsfokus
- Responsiva tabeller och videor
- Formatera valuta
- Bildhjälpmedel
- Produktvarianter
- Varukorgshjälpmedel
- Avsnittshändelser
CSS
- Brytpunkter och mediafrågor
- Rutnät
- SVG-ikoner
- Responsiva tabeller
- Tomma stater
- Sass mixins
5. Polaris
I maj 2017 uppdaterade Shopify utseendet på alla dess applikationer: både på skrivbordet och mobilen. För att kunna uppnå detta ambitiösa mål utvecklade UX-teamet på Shopify ett nytt designsystem som heter Polaris. Det är ett fullt utrustat system som inte bara är avsett för användning internt på Shopify utan även för Shopify Partners som bygger gränssnitt för appar som integreras via Shopify API. Syftet är att ge någon byggstenarna för att skapa gränssnitt som verkar sömlösa med den centrala Shopify-administratören.
En av huvuddragen i Polaris är det omfattande komponentbiblioteket. Varje komponent innehåller förklaringar om det problem det löser, rekommendationer om bästa praxis, användarriktlinjer och exempelkod för både HTML och React. Alla komponenter är också tillgängliga som en Sketch-fil.
Biblioteket innehåller komponenter för:
- Åtgärder: Knappar, åtgärder och växlar
- Bilder och ikoner: märken, avatarer, ikoner och miniatyrbilder
- Feedback indikatorer: Banners
- Struktur: Kallkort, sidlayout och tomma tillstånd
- Titlar och text: Bildtext, text, rubrik och underrubriker
- Blanketter: kryssrutor, färg och datumplockare, formulärlayouter och vallistor
- Beteende: Fällbara och rullbara element
- Listor: Beskrivning och resurslistor
- Navigering: Länkar, pagination och flikar
- Överlägg: Popovers och verktygstips
- Inbäddad: Varningar, modaler och resursplockare
Förutom komponentbiblioteket finns omfattande dokumentation som täcker de designriktlinjer och principer som har informerat skapandet om elementen. Den tillhörande stilguiden går också in i detalj om hur Shopify UX-teamet tycker om typografi, färg och UX. Det finns också mycket användbara avsnitt som är dedikerade till illustration och datavisualisering, inklusive detaljerade beskrivningar som beskriver när man ska använda standardavatars och ikoner för att mäta diagram på lämpligt sätt.
Tillsammans med komponentbiblioteket kan du och ditt team använda stilguiden för att lära dig om de designriktlinjer och principer som har väglett inrättandet av dessa element. Detta ger dig en förstahandsvisning av hur Shopifes användarupplevelse team tycker om design och gränssnittsutveckling.
Polaris är avsett att inte bara skapa gränssnitt för Shopify-appar, som är mer ujämna och enklare för utvecklare av frontend utan också att skapa kända erfarenheter för butikseägare som installerar din app. Språk är ett enormt element i något gränssnitt och innehållsriktlinjerna innehåller råd om hur du planerar hur du kommunicerar. Det finns också exempel som lyfter fram hur du kan ändra din röst och ton beroende på butikens ägares behov och känslor.
Polaris är ett open source-projekt och finns tillgängligt på GitHub. Teamet på Shopify stöder aktivt projektet och kan du skapa ett problem eller göra en funktionsförfrågan.
Slutsats
Vi har täckt en hel del mark i den här artikeln men förhoppningsvis ger den dig några insikter i några senaste utvecklingar till Shopify-plattformen som hjälper dig att bygga bättre teman och appar för dig och dina kunder.
% endif% % endfor% % schema% "namn": "Promotional Blocks", "max_blocks": 5, "förinställningar": ["name": "Promotional Blocks", "category" "Anpassad hemsida innehåll"], "block": ["typ": "promo-box", "namn": "Promotional Box", "limit": 1, "inställningar": ["id" titel "," typ ":" text "," etikett ":" Titel "," standard ":" din titel här ", " id ":" beskrivning "," typ ":" textarea " : "Beskrivning", "standard": "din beskrivning här"], "typ": "bildväljare", "namn": "Promo Image", "Settings": ["id" -image "," type ":" image_picker "," label ":" Promo Image "] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
