Share
Jag använde först Shopify inte långt efter det lanserades 2006. Jag älskade att det var en enkel att använda och konkurrenskraftigt prissatta värdbaserad e-handelsplattform. Men framför allt är dess temafunktion det jag gillade mest. Låt oss titta på några enkla tekniker som ger dig kontroll över dina Shopify-teman och levererar en ännu mer utformad upplevelse till dina kunder.
Shopify-teman (nedan kallade teman som tema) är lätta att konstruera. Förutom våra dagliga verktyg av HTML, CSS, JavaScript, teman använder ett mall språk som heter Liquid. Jag vill flytta bortom grunderna i den här artikeln för att visa dig några tekniker som jag nyligen anställde för att ladda upp din Shopify-temautveckling. Om du inte känner till teman kan du lära dig mer på Shopify Wiki.
Alla Shopify-kassan är säkert värd på Shopify-domänen.
Teman låter dig styra ditt hem, samlingar och enskilda produktsidor. Här är en typisk Shopify-URL som visar en enda produkt:
http://store.theheadsofstate.com/products/chicago-travel-poster
"Heads of State" är en kärleksfullt producerad Shopify-webbplats som visar sina produkter väldigt bra. Ovanstående URL tar dig till sin Chicago Travel Poster, men om du, som jag, är en bit av en URL-pedant, så kan du bli frestad att hacka tillbaka till:
http://store.theheadsofstate.com/products/
Den här URL-adressen tar dig till en sida som inte är utformad i jämförelse med resten av webbplatsen. Jag tvivlar mycket på att detta beror på brist på tankar från designarna. Det är faktiskt Shopifes fel; teman stöder för närvarande inte en inbyggd mall för sidan tillgänglig på /Produkter (eller / samlingar - de två är utbytbara i detta sammanhang). Istället ger standard layoutfilen en lista över tillgängliga samlingar.
Tack och lov kan man snabbt återfå kontrollen över den här sidan och använda den till sin fördel. I tematets layout.liquid fil, du kan ersätta content_for_layout med följande kodbit:
% om mall == 'list-samlingar'% % include 'samlingsnotering'% % else% content_for_layout % endif%
Skapa sedan en fil som heter samling-listing.liquid och spara det i mappen med snippets. Om någon besöker / samlingar eller /Produkter sida, gör vår layoutfil och innehåller vårt eget utdrag istället för standardlistan.
Här är ett snabbt exempel på hur du kan återställa samlingslistan med din egen markup. Observera att vi har tillgång till Shopify samlingar identifierare på denna sida:
Produktsamlingar
% för samling i samlingar% % såvida inte collection.handle == 'frontpage'%
- collection.title % endunless% % endfor%
Du kan hitta mer information om de variabler som finns tillgängliga i samlingar samling på det utmärkta Shopify fuskarket. Observera hur vi använder Liquid logic för att utesluta samlingen med en hantera av fronptage. Det här är en ofta använd samling i teman för att visa objekt på hemsidan, men vi utesluter det eftersom det används mer för administrativa ändamål än en logisk gruppering av relaterade produkter. Med den här tekniken kan du hålla stilen konsekvent och lägga till extra data eller designelement som du tycker är lämplig.
... ordsnusar är kända som handtag.
När du först börjar med teman presenteras du för konceptet layouter. Som standard söker Shopify efter en standard layoutfil som heter layout.liquid, som bor i den lämpliga namnet layout mapp.
Det kan finnas tillfällen då din design kräver en alternativ layout. Ett tillvägagångssätt är att använda villkorliga uttalanden för att visa / dölja innehåll beroende på en variabel, t.ex. en viss produkt eller insamlingssida. Men ett annat alternativ är att använda en helt annan layoutfil. Det kan vara en mycket enklare lösning om ditt behov skiljer sig åt. Allt du behöver för att genomdriva en alternativ layout lägger till följande kod till toppen av din mall:
% layout "produkt"%
Detta tvingar din mall att använda en layoutfil som heter product.liquid ligger i ditt temas layouter mapp.
Du kan också ange att ingen layout ska användas genom att ange ingen, så här:
% layout "none"%
Om du har använt WordPress kommer du troligen att känna till tanken på a snigel. Det är ett unikt namn som ges till ett specifikt inlägg eller en sida som används i en webbadress. Till exempel: "min första sida". I Shopify är ordsnalar kända som handtag. Dessa skapas automatiskt när du skapar en produkt, men det kan du självklart ändra om du vill göra det. Våra produkthandtag är också tillgängliga för oss i vår product.liquid mall. Vi kan använda handtag att diktera vår produktmall. Här kan vi göra det här:
% if product.handle == 'my-new-t-shirt'% % inkludera 'my-new-t-shirt'% % else% // Din standardprodukt.liquid-kod går här % endif%
I det här exemplet kontrollerar vi om produkthandtaget för den aktuella förfrågan är "my-new-t-shirt" och inkludera ett stycke som heter "my-new-t-shirt" om det är sant. Detta motsvarar att inkludera en fil som heter my-nytt-t-shirt.liquid som finns i snippets-mappen.
För att ta ett steg längre kan du vrida standarden product.liquid in i ett utdrag. Jag gillar det här tillvägagångssättet eftersom det håller din huvudmall som en logisk kontroller, och isolerar tydligt presentationsmarkeringen i sina egna filer.
Detta mönster kan ändras något för att använda tilldela och fall metoder, så här:
% tilldela handtag = product.handle% % fallhandtag% % när "big-shirt"% % inkluderar "big-t-shirt"% % när "småtröja" % % inkluderar 'liten-t-shirt'% % else% % include 'produktstandard'% % endcase%
Du kan också använda produkthandtaget för att tilldela olika CSS-klasser till tagga i dina layoutfiler. Till exempel:
% fallmall% % när "produkt"% % else% % endcase%
Du kan naturligtvis förlänga den här tekniken för att anpassa taggen baserat på ett antal kriterier.
Alla Shopify-kassan är säkert värd på Shopify-domänen. För vissa kan man rikta sig till en generell kassaskrivning när det gäller användarupplevelsen. Du kan dock ställa in din kassa med hjälp av CSS. Här är vad du behöver göra:
Accentsconagua
checkout.css i tematets aktivmapp.!Viktig reglera för att uppnå de önskade resultaten.
Se till att du kolla in wikien för fullständiga exempel.
Du kan också använda Vätska i din checkout.css fil. Först byt namn på din CSS-fil till checkout.css.liquid. Då kan du börja använda Liquid-filter. Här är ett exempel:
/ * Sätt in din egen logotyp (ladda upp separat till din aktivmapp) * / #logo height: 65px; bakgrund: url ('logo-checkout.png' | asset_url | ersätt: 'http: //', 'https: //') center no-repeat; Det är fantastiskt hur några förändringar i den grundläggande CSS kan anpassa den generiska kassan med din egen design. Se till att du checkar ut alla mallar i kassan. Din CSS kommer att tillämpas på ett antal skärmar.
Temainställningar tillåter oss att använda Shopify-administratören för att kontrollera data som vi kan använda i våra teman. Allmänna användningsfall är remlinjer, breda färgscheman över hela världen och val av skräddarsydda bilder som ska visas i bildgallerier runt webbplatsen. För att aktivera inställningar i ditt tema skapar du bara en settings.html fil (anmärkning nr. flytande tillägg) och börja lägga till relevanta formulärelement. Till exempel kan du inkludera följande i din settings.html fil tillåter redigering av webbplatsens bandlinje:
Lägg märke till hur jag anger standardvärdet. Detta är viktigt, särskilt när det gäller CSS-värden. För att få tillgång till detta värde i vårt tema, hänvisar vi det enkelt till Vätska enligt följande:
settings.site_strapline
Vi kan också utnyttja temainställningar i våra huvudsakliga CSS-filer genom att lägga till .flytande förlängning till vår huvudsakliga CSS-fil. Till exempel:
kropp färg: settings.text_color; bakgrundsfärg: settings.bg_color;
Det är väldigt viktigt att ge standardvärden för dessa färger i din settings.html fil. Om du inte gör det får din standard CSS-fil skapas utan ett värde. Läs mer på wiki: http://wiki.shopify.com/Theme_Settings
Shopify tillhandahåller också ett JavaScript-API, och "cart" -informationen för den nuvarande användaren är direkt tillgänglig för oss via en mycket enkel URL. Lägg bara till .js förlängning till kundvagnens URL för att få en JSON-representation av vagnen. Här är ett exempel:
"token": "7b0f09aca710a4ce688325a8add36c6b", "notera": null, "attribut": null, "total_pris": 0, "totalvikt": 100,0, "item_count": 1, "items": ["id": 229848636 "title": "Insites: The Tour Coasters", "pris": 0, "line_price": 0, "quantity": 1, "sku": "", "gram": 100, "leverantör": "Viewport Industries "," Properties ": null," variant_id ": 229848636," url ":" / products / insites-the-tour "," image ":" http://cdn.shopify.com/s/files/1 /0151/6407/products/png_1.png?783 "," handle ":" insider-the-tour "," requires_shipping ": true]," requires_shipping ": true
Detta ger dig en extrem mängd flexibilitet och kreativ kraft. Du kan skapa en JavaScript-popup som visar innehållet i vagnen eller injicera ett bildspel som markerar de valda produkterna. Naturligtvis kan du göra dessa saker i dina mallar, men det ger dig fler alternativ för att ge en bättre användarupplevelse.
Som med alla plattformar finns det många olika sätt att närma sig samma problem, men jag hoppas att dessa sex tips är användbara och användbara för dig när du utvecklar ditt nästa Shopify-tema.
