Share
Ik heb Shopify eerst gebruikt niet lang nadat het in 2006 werd gelanceerd. Ik vond het een eenvoudig te gebruiken en concurrerend geprijsd gehost e-commerceplatform. Maar vooral, de thema-functie is wat ik het leukst vond. Laten we eens kijken naar een paar eenvoudige technieken die u controle geven over uw Shopify-thema's en uw klanten een nog mooiere ervaring bieden.
Shopify-thema's (hierna simpelweg thema's genoemd) zijn eenvoudig te construeren. Naast onze dagelijkse hulpmiddelen voor HTML, CSS en JavaScript, gebruiken thema's een sjabloondocument met de naam Vloeistof. Ik wil verder gaan dan de basis in dit artikel om je een paar technieken te laten zien die ik onlangs heb gebruikt om je Shopify-thema-ontwikkeling super op te laden. Als u niet bekend bent met thema's, kunt u meer informatie vinden op de Shopify Wiki.
Alle Shopify-kassa's worden veilig gehost in het Shopify-domein.
Met thema's kunt u uw huis, collecties en afzonderlijke productpagina's beheren. Hier is een typische Shopify-URL die een enkel product weergeeft:
http://store.theheadsofstate.com/products/chicago-travel-poster
'The Heads of State' is een liefdevol geproduceerde Shopify-site die hun producten heel goed laat zien. De bovenstaande URL neemt je mee naar hun Chicago Travel Poster, maar als je, net als ik, een beetje een URL-pedant bent, kom je misschien in de verleiding om terug te hacken naar:
http://store.theheadsofstate.com/products/
Deze URL brengt u naar een pagina die er niet-ontworpen uitziet in vergelijking met de rest van de site. Ik betwijfel ten zeerste dat dit te wijten is aan een gebrek aan denken van de ontwerpers. Het is eigenlijk de schuld van Shopify; thema's ondersteunen momenteel geen native sjabloon voor de beschikbare pagina op / producten (of / collecties - de twee zijn in deze context uitwisselbaar). In plaats daarvan wordt in het standaardlay-outbestand een lijst met beschikbare collecties weergegeven.
Gelukkig kan men snel de controle over deze pagina terugkrijgen en deze in zijn voordeel gebruiken. In de thema's layout.liquid bestand, kunt u vervangen content_for_layout met het volgende codefragment:
% if template == 'list-collections'% % include 'collection-listing'% % else% content_for_layout % endif%
Maak vervolgens een bestand met de naam collection-listing.liquid en sla het op in de map met fragmenten. Als iemand de website bezoekt / collecties of / producten pagina, ons lay-outbestand wordt gerenderd en bevat ons eigen fragment in plaats van de standaardvermelding.
Hier is een kort voorbeeld van hoe u de collectielijst kunt restylen met uw eigen markup. Merk op dat we toegang hebben tot de Shopify verzamelingen ID op deze pagina:
Productcollecties
% voor verzameling in collecties% % tenzij collectie.handle == 'voorpagina'%
- collection.title % endunless% % endfor%
U kunt meer informatie vinden over de variabelen die beschikbaar zijn in de verzamelingen verzameling op het uitstekende Shopify-spiekbriefje. Merk op hoe we de logica van Liquid gebruiken om de verzameling uit te sluiten met een handvat van fronptage. Dit is een vaak gebruikte verzameling in thema's voor het weergeven van items op de startpagina, maar we sluiten deze uit omdat deze meer voor administratiedoeleinden wordt gebruikt dan een logische groepering van gerelateerde producten. Met deze techniek kunt u de styling consistent houden en extra gegevens of ontwerpelementen toevoegen zoals u wilt.
... woordslakken staan bekend als handgrepen.
Wanneer u voor het eerst aan de slag gaat met thema's, maakt u kennis met het concept lay-outs. Standaard zoekt Shopify naar een standaard lay-outbestand met de naam layout.liquid, die in de toepasselijke naam woont lay-out map.
Er kunnen zich situaties voordoen waarin uw ontwerp een alternatieve lay-out vereist. Eén benadering is om voorwaardelijke instructies te gebruiken om inhoud weer te geven / te verbergen, afhankelijk van een variabele, zoals een bepaald product of een verzamelpagina. Maar een ander alternatief is om een heel ander lay-outbestand te gebruiken. Dit kan een veel eenvoudigere oplossing zijn als je een andere markering nodig hebt. Alles wat u nodig hebt om een alternatieve lay-out af te dwingen, is de volgende code toe te voegen aan de bovenkant van uw sjabloon:
% layout "product"%
Dit dwingt je sjabloon om een lay-outbestand genaamd te gebruiken product.liquid gelegen in uw thema's lay-outs map.
U kunt ook opgeven dat er geen lay-out wordt gebruikt door op te geven geen, zoals dit:
% layout "none"%
Als u WordPress hebt gebruikt, zult u waarschijnlijk bekend zijn met het idee van een naaktslak. Het is een unieke naam voor een specifieke post of pagina die in een URL wordt gebruikt. Bijvoorbeeld: "mijn-eerste-pagina". In Shopify staan woordslakken bekend als handgrepen. Deze worden automatisch gegenereerd wanneer u een product maakt, maar u kunt deze natuurlijk wijzigen als u dat wilt. Onze productgrepen zijn ook beschikbaar voor ons in onze product.liquid sjabloon. We kunnen gebruiken handgrepen om onze productsjabloon te dicteren. Dit is een manier om dit te doen:
% if product.handle == 'my-new-t-shirt'% % include 'my-new-t-shirt'% % else% // Uw standaardcode voor product.liquid gaat hier % stop als %
In dit voorbeeld controleren we of het product van het huidige verzoek 'mijn nieuwe t-shirt' is en een fragment bevat dat 'mijn nieuwe t-shirt' wordt genoemd als dit waar is. Dit komt neer op het opnemen van een bestand met de naam mijn-nieuwe-t-shirt.liquid die zich in de map met fragmenten bevindt.
Om nog een stap verder te gaan, zou je de standaard kunnen veranderen product.liquid in een fragment. Ik vind deze benadering leuk omdat het je hoofdsjabloon als een logische controller houdt, en mooi presentatie-opmaak in hun eigen bestanden isoleert.
Dit patroon kan enigszins worden aangepast om het te gebruiken toewijzen en geval methoden, zoals dit:
% assign handle = product.handle% % case handle% % when 'big-t-shirt'% % include 'big-t-shirt'% % when 'small-t-shirt' % % include 'small-t-shirt'% % else% % include 'product-standaard'% % endcase%
U kunt ook de producthendel gebruiken om verschillende CSS-klassen toe te wijzen aan de tag in uw layoutbestanden. Bijvoorbeeld:
% casussjabloon% % wanneer 'product'% % else% % endcase%
Je zou deze techniek natuurlijk kunnen uitbreiden om de tag op basis van een aantal criteria.
Alle Shopify-kassa's worden veilig gehost in het Shopify-domein. Voor sommigen kan een verwijzing naar een algemene kassa-pagina een beetje schokkend zijn in termen van de gebruikerservaring. Je kunt je checkout echter wel opmaken met CSS. Dit is wat u moet doen:
Accentsconagua
checkout.css in de activamap van uw thema.!belangrijk regel om de gewenste resultaten te bereiken.
Zorg ervoor dat je de wiki bekijkt voor complete voorbeelden.
U kunt ook Liquid gebruiken in uw checkout.css het dossier. Ten eerste, hernoem je CSS-bestand in checkout.css.liquid. Dan kunt u Liquid-filters gaan gebruiken. Hier is een voorbeeld:
/ * Voeg uw eigen logo in (upload afzonderlijk naar uw activamap) * / #logo height: 65px; achtergrond: url ('logo-checkout.png' | asset_url | replace: 'http: //', 'https: //') center no-repeat; Het is verbazingwekkend hoe een paar wijzigingen in de standaard CSS de generieke kassa kunnen afstemmen op uw eigen ontwerp. Zorg ervoor dat u alle sjablonen van het afrekenproces bekijkt; uw CSS is van toepassing op een aantal schermen.
Met thema-instellingen kunnen we de Shopify-beheerder gebruiken om gegevens te beheren die we in onze thema's kunnen gebruiken. Gangbare use-cases zijn strap-lijnen, kleurschema's voor de hele site en het selecteren van op maat gemaakte afbeeldingen die in schuifregisters op de site worden weergegeven. Als u instellingen voor uw thema wilt inschakelen, maakt u eenvoudig een settings.html bestand (let op geen .liquid-extensie) en begin met het toevoegen van de relevante formulierelementen. U kunt bijvoorbeeld het volgende opnemen in uw settings.html bestand kunt bewerken van de riem van de site:
Merk op hoe ik de standaardwaarde instel. Dit is belangrijk, vooral als het gaat om CSS-waarden. Om toegang te krijgen tot deze waarde in ons thema, verwijzen wij het eenvoudig in Liquid als volgt:
settings.site_strapline
We kunnen ook de thema-instellingen gebruiken in onze belangrijkste CSS-bestanden door de .vloeistof uitbreiding naar ons belangrijkste CSS-bestand. Bijvoorbeeld:
body kleur: settings.text_color; achtergrondkleur: settings.bg_color;
Het is erg belangrijk om standaardwaarden voor deze kleuren in uw settings.html het dossier. Als u dit niet doet, wordt uw standaard CSS-bestand gemaakt zonder een waarde. Lees meer op de wiki: http://wiki.shopify.com/Theme_Settings
Shopify biedt ook een JavaScript-API en de "winkelwagen" -informatie voor de huidige gebruiker is direct voor ons beschikbaar via een zeer eenvoudige URL. Voeg gewoon de .js uitbreiding naar de winkelwagen-URL om een JSON-weergave van de winkelwagen te krijgen. Hier is een voorbeeld:
"token": "7b0f09aca710a4ce688325a8add36c6b", "note": null, "attributes": null, "total_price": 0, "total_weight": 100.0, "item_count": 1, "items": ["id": 229848636 , "title": "Insites: The Tour Coasters", "price": 0, "line_price": 0, "quantity": 1, "sku": "", "grams": 100, "vendor": "Viewport Industrieën "," eigenschappen ": 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 ":" insites-the-tour "," require_shipping ": true]," require_shipping ": true
Dit geeft je een extreme hoeveelheid flexibiliteit en creatieve kracht. U kunt een pop-up met JavaScript maken die de inhoud van het winkelwagentje laat zien of een diavoorstelling injecteert waarin de gekozen producten worden gemarkeerd. Natuurlijk kunt u deze dingen in uw sjablonen doen, maar dit geeft u meer opties om een betere gebruikerservaring te bieden.
Zoals met alle platforms, zijn er veel verschillende manieren om hetzelfde probleem aan te pakken, maar ik hoop dat deze zes tips nuttig en nuttig voor u zijn bij het ontwikkelen van uw volgende Shopify-thema.
