Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Build A Shopify Theme With The Liquid Engine - Web Design - Creative Bloq

    Hochgeladen von

    Yunior Rahmawan Usop
    111 Ansichten4 Seiten
    Build a Shopify Theme With the Liquid Engine in web design to create beautiful website and ecommerce

    Originaltitel

    Build a Shopify Theme With the Liquid Engine _ Web Design _ Creative Bloq

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    Build a Shopify Theme With the Liquid Engine in web design to create beautiful website and ecommerce

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    111 Ansichten4 Seiten

    Build A Shopify Theme With The Liquid Engine - Web Design - Creative Bloq

    Hochgeladen von

    Yunior Rahmawan Usop
    Build a Shopify Theme With the Liquid Engine in web design to create beautiful website and ecommerce

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 4

    creativebloq.

    com

    http://www.creativebloq.com/webdesign/buildshopifythemeliquidengine9134531

    BuildaShopifythemewiththeLiquidengine
    Overthepastfewweeks,IhavebeenbuildingtheShopifythemeforViewportIndustries,thecompanyElliotJayStocksandI
    formedlastyear.WechoseShopifyforseveralreasons:
    1. Itallowsustosellbothdigitalandphysicalproducts
    2. Itsfullyhosted,meaningnoserverstoworryabout
    3. Itsupportsanumberofpaymentgatewaysthatintegratenicelywithourbank
    4. Itsthemebased,whichmeanswecaneasilyreuseourexistingsitesHTML,CSSandJavaScript
    ShopifyusesatemplateenginecalledLiquidtooutputdatafromyourstoreintoyourtemplates.Liquidisperhapstheone
    ingredientofaShopifythemeyouhaventusedbeforeanditcanbeoffputting.Butthegoodnewsisthatitsreallynotthathard
    togetstartedwith.
    IfyouhaveeverusedSmarty,ERBorTwig,whatfollowswillbefamiliartoyou.Ifnot,dontworry:itsjustamatteroflearninga
    fewsimplerules.OnceyouhaveaddedLiquidskillstoyourwebdevelopmenttoolkit,youllbeabletostartbuildingthemesfor
    clientsinnotime.

    Themefilesandfolders
    Shopifythemesarenothingmorethananumberoffiles(HTMLfileswitha.liquidextension,CSS,JS,images,andsoon)and
    folders.Themescanlookandworkhoweveryouwant:therereallyarenorestrictions.Heresthebasicstructureofatheme:
    assets
    config
    layouts
    theme.liquid
    snippets
    templates
    404.liquid
    article.liquid
    blog.liquid
    cart.liquid
    collection.liquid
    index.liquid
    page.liquid
    product.liquid
    search.liquid
    Withthesefiles,youcancreatethemostbasicofthemes.Ofcourse,youwouldprobablywanttoaddinsomeCSS,JavaScript
    andafewimages.Youdputtheseintheassetsfolder.(Itsworthnotingthatyouarentcurrentlyallowedsubfolderswithinyour
    assetfolder.)
    Formoreonhowthemeswork,andtofindoutabouttheconfigandsnippetsfolders,IwouldrecommendreadingThemefrom
    ScratchandThemeSettingsontheShopifyWiki.
    AlternativelyyoucansignuptothefreePartnerprogramme,createatestshopandinspectoneofthemanyfreethemes
    availablefromyourtestshopsadminareajustgotothethemeeditorlocatedintheThemesmenu.

    MappingURLstotemplates
    ShopifythemesworkbymappingthecurrentURLtoaspecifictemplate.Forexample,ifweareviewingaproductthathasthe
    followingURL...
    http://www.unitedpixelworkers.com/products/indianapolis
    ...thenShopifywillknowtouseyourproduct.liquidtemplate.Itsforthisreasonthatyoushouldonlyeverusethefilenames
    listedaboveforyourtemplates.
    InadditiontoShopifyknowingwhichtemplatetodisplayinrelationtothecurrentURL,itmakesanumberofveryspecific
    variablesavailabletous.Theseareknownas'templatevariables'andenableustodisplaydatainourtemplates.
    Forexampleinourproduct.liquidtemplate,wehaveaccesstotheaptlynamedproductvariable.Thismeanswecanoutputthe

    name,description,priceandtheavailabilityofourproductinourtemplate.WellusethecombinationofLiquidandtemplate
    variablestopopulateourtemplateswithdatarelatingtoourproducts.
    Forafulllistoftheavailabletemplatevariables,visitMarkDunkleysShopifyCheatSheet.

    Liquid:thebasics
    Liquidisheretomakeourlivesasthemedesignerseasier.Oneofthemainwaysitdoesthisiswiththeuseoflayouts.Layouts
    areidealforincludingcommonpageelementssuchasaheader,mainnavigation,footer,andsoon.
    Inmyfolderstructureabove,youllnoticeafilecalledtheme.liquidinthelayoutsfolder.Youcanthinkoftheme.liquidasour
    mastertemplate.Allofourothertemplates,suchasproduct.liquid,arerenderedinsidethismastertemplate.Youcanhavemore
    thanonelayoutifyouwish,butthedefaultoneshouldalwaysbecalledtheme.liquid.
    IhaventseenUnitedPixelworkers'theme.liquidfile,butyoucouldimagineitcontainingthemarkupfortheareasoutlinedinred
    below.

    Shopify'stheme.liquidfilesetsouttheconstituentpartsofalayout
    Hereswhatabasictheme.liquidlayoutmightlooklike:
    Youllnoticetwophraseswrappedindoublecurlybraces:{{content_for_header}}and{{content_for_layout}}.Theseare
    ourfirstexamplesofLiquidinaction.
    Shopifyoftenuses{{content_for_header}}toaddspecificfilestothe<head>sectionofadocument:forexample,addingin
    trackingcode.{{content_for_layout}}iswhereourURLmappedtemplatescontentwillappear.Forexample,ifweareviewinga
    productpage,ourproduct.liquidfilewillreplace{{content_for_layout}}inourlayoutfile.

    Understandingproduct.liquid
    Nowthatwe'verunthroughthebasicsoflayouts,itstimetolookatatemplate.Shopsareallabouttheproducts,soletslookat
    product.liquid.

    Heresaverysimplebutfunctionalexampleofaproduct.liquidtemplate.
    1. <h2>{{product.title}}</h2>
    2. {{product.description}}
    3. {%ifproduct.available%}
    4. <formaction="/cart/add"method="post">
    5. <selectid="productselect"name='id'>
    6. {%forvariantinproduct.variants%}
    7. <optionvalue="{{variant.id}}">{{variant.title}}{{variant.price|money}}</option>
    8. {%endfor%}
    9. </select>
    10. <inputtype="submit"name="add"value="Addtocart"id="purchase"/>
    11. </form>
    12. {%else%}
    13. <p>Thisproductisnotavailable</p>
    14. {%endif%}
    ThereareanumberofkeyLiquidconceptsatworkhere.Letslookattheminorder.
    Output
    Thefirstlineofcodecontainsthephrase{{product.title}}.Whenrendered,thiswilloutputthetitleoftheproduct,whichasyou
    nowknowisdeterminedbytheURL.IntheUnitedPixelworkersexamplebelow,theproducttitleissimply'Indianapolis'.

    Liquid's{{product.title}}phraseatworkintheUnitedPixelworkersstore
    Liquidusesthedotsyntaxformat.Inthisinstance,{{product.title}}equatestotheproducttemplatevariableanditstitleattribute.
    Wecanoutputtheproductdescriptioninthesamewayusing{{product.description}}.
    ThisisknowninLiquidtermsasoutput.Alloutputisdenotedbydoublecurlybraces,asfollows:{{your_output}}.

    Logic
    Onthenextlineofthecode,youllnoticeastatementinacurlybracefollowedbya%:inthiscase,{%ifproduct.available%}.
    ThisisanotherimportantconceptinLiquidknownaslogic.Furtherdown,youllnotice{%else%}andfinallythe{%endif%}
    statements.
    Thisifstatementenablesustodictatewhatourtemplatedisplays,basedoneormoreconditions:inthiscase,whetherornot
    ourproductisavailable.Effectivelythisissaying,ifourproductisavailable,showtheinformationrelatingtoitotherwiseshowa
    messagelettingtheuserknowitisoutofstock.
    AlllogicstatementsinLiquidusethecurlybracepercentagenotation,i.e.{%if%}.Justremembertocloseyourstatements

    appropriately,oryoullrunintotrouble.Forexample:
    1. {%ifproduct.available%}
    2. ShowAddtocartbuttonhere
    3. {%else%}
    4. Displaymessageaboutwhentheproductwillbenextavailable
    5. {%endif%}

    Filters
    Liquidenablesustomanipulateouroutputinseveralways.Oneoftheseistousefilters.Thecontentthatgoesintothefilterwill
    comeouttheotherendalteredinaspecificway.
    Lookingattheproduct.liquidexampleabove,youllnotice{{variant.price|money}}.Avariantisatermusedtodescribea
    variationofaproduct:forexample,differentcoloursandsizes.Whatsinterestinghereisthatweuseafiltertochangetheprice
    outputinthiscase,byusingthemoneyfilter.Thiswillresultintheshop'scurrencysymbolbeingaddedtothefrontoftheprice.
    Otherfiltersincludestrip_html,whichwillstripoutanyHTMLtagsfromagivenpieceoftextanducase,whichwillconvertitto
    uppercase.
    Youcanalsojoinfilterstogether.Forexample:
    1. {{article.content|strip_html|truncate:20}}
    Inthisinstance,wearetakingthecontentattributeofthearticletemplatevariableandpassingittothestrip_htmlfilterandfinally
    tothetruncatefilter.Youllnoticethatthetruncatefilterallowsustospecifyhowlongwewantthefinaloutputtobe:inthiscase,
    20characters.
    Filtersalsoallowustomakequickworkofcreatingscriptandimageelementsintemplates.Heresaveryquickwayofusinga
    filtertooutputanimagewithanassociatedalttag:
    1. {{'logo.png'|asset_url|img_tag:'SiteLogo'}}
    UsingthisinourShopifythemewillresultinthefollowingimgelementbeingrenderedinourtemplate:
    1. <imgsrc="/files/shops/your_shop_number/assets/logo.png"alt="SiteLogo"/>
    Theasset_urlfilterisveryusefulasitreturnsthefullpathtothecurrenttheme'sassetsfolder.Usingthisfiltermakesitpossible
    foryoutoapplyyourthemeacrossmultipleshopsandnothavetoworryaboutpaths.

    Whatsnext?
    Hopefully,thesefewexampleshaveshownyouthatLiquidisntthatcomplicated.Ofcourse,thereismuchmoreyoucanwithdo
    withit,butbymasteringoutput,logicandfilters,youarewellonthewaytounderstandingmostofwhatyouwillneedtobuilda
    Shopifytheme.

    Furtherresourcesandinspiration

    Das könnte Ihnen auch gefallen