Search for:
Magento 2 tutorial
Magento 2 tutorials

Magento 2 theme development tutorial – Create a new custom Magento 2 theme

6 Mins Read
Pinterest LinkedIn Tumblr

A good Magento 2 theme can improve a store’s looking as well as user experience, which leads to improving conversion rate and sales. By default, Magento 2 use Luma theme for their default store. If you want to change the default Magento 2 theme, you can purchase a new theme from Magento 2 marketplace or from a 3rd party theme provider.

If you are a Magento 2 developer, you may want to learn the process of making a Magento 2 theme from scratch.

In this tutorial, we will go through all the steps of creating a Magento 2 theme such as: Declare theme, register theme to the system, create required theme folders, declare logo, create static files folder.

I hope this insightful tutorial will help you understand the basics of creating a Magento 2 theme

Prerequisite

We will change the Magento 2 mode to developer mode before we create the new theme to disables static view file caching + automatic code compilation. The developer mode also provide more helpful error logs on frontend so that we can fix the errors that occur when creating our new theme

To enable developer mode, run the following command

php bin/magento deploy:mode:set developer

Sample output

successfully enabled developer mode magento 2

Note: There are also many beautiful free Magento 2 themes, I already made a list here (work well for Magento 2.4.x and 2.3.x). You can download to use for your store or use as a reference to create a new custom theme for Magento 2o

Step 1: Create required theme directories and files

First, we will create theme directories which is defined by Magento 2

app/design/frontend/<vendor_name>/<theme_name>

Replace vendor_name and theme_name with your desired names

For example: app/design/frontend/magentip/theme1

theme folders

Magentip is theme vendor and theme1 is my theme name

Theme name and vendor name will be declared in our theme configuration files, so set these folders carefully.

Step 2: Declare our new theme to Magento 2 system

In this step, we will declare our new theme to the system. Theme declaration will be store in theme.xml file located in our theme folders: app/design/frontend/magentip/theme1

Create theme.xml in theme’s root folder with the following content

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>theme1</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- parent theme of the new theme in case the new theme inherits from an existing theme -->
   <media>
      <preview_image>media/preview.jpg</preview_image> <!-- path to preview image of your new theme in backend -->
   </media>
</theme>
  • Replace <title>theme1</title> with your theme’s name
  • Replace <parent>Magento/blank</parent> with path to parent theme of your theme (if your new theme inherits from an existing theme. In this example, my new theme inherits from Magento/Blank theme
  • Repace <preview_image>media/themepreview.jpg</preview_image> with the path to the preview image of your new theme. (the themepreview.jpg file is located in app/design/frontend/<Vendor>/<theme>/media/)

The image below describes where your theme preview image display in the backend.

theme preview image magento 2

Step 3: Register theme using registration.php

Now we will register our new theme to database using registration.php file

Create registration.php in app/design/frontend/magentip/theme1/registration.php with the following content

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/magentip/theme1', __DIR__);

Replace /magentip/theme1 with your theme’s vendor and theme’s name

theme registration php file

Step 4: Create directories for static files like: CSS, Images, font, Javascript

In this step, we will create folders that contain static files of your new Magento 2 theme including:

  • CSS files
  • Image files
  • Font files
  • Javascript files

Here is the structure of these folders:

app/design/frontend/magentip/theme1/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/
  • web/css: store your theme’s css files
  • web/fonts: Store website’s font files
  • web/image: store website’s image files, like theme’s logo image…
  • web/js: store website’s javascript files

If your theme contains modules files you can put these files in corresponding folders such as /<theme>/<Namespace_Module>/web/css

For example: /theme1/module_1/web/css

Note: These static files are cached in pub/static and var/view_preprocessed directories, so if you make changes to files/folder in /web folder, you need to remove all files/folder in pub/static and var/view_preprocessed directories. If not, you will not see the changes and the old versions will be displayed on the frontend.

Step 5: Declare logo for your new theme

By default, Magento 2 uses logo.svg file as logo in frontend, and logo.svg is located in <theme_dir>/web/images/logo.svg

If your new theme uses the default logo.svg file as logo file, there no need to declare logo. Just set file name as logo.svg and put it in <theme_dir>/web/images/logo.svg

If you want to use custom logo for your theme, you will need to declare custom logo in default.xml file located in <theme_dir>/Magento_Theme/layout/default.xml

For example, with the theme I create in this tutorial, the default.xml file should be in: app/design/frontend/magentip/theme1/Magento_Theme/layout/default.xml

To declare a logo with the size 80×80, add the following content to default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/magentip_logo.png</argument>
                <argument name="logo_width" xsi:type="number">80</argument>
                <argument name="logo_height" xsi:type="number">80</argument>
                <argument name="logo_alt" xsi:type="string">Logo name</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Replace images/magentip_logo.png with your logo file name

Step 6: Configure product images size

In Magento 2, we can easily configure product image size, background color… on the storefront using etc.xml file

For example, you can make the category grid view product images square by specifying a size of 250 x 250 pixels:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
        ...
        <image id="category_page_grid" type="small_image">
            <width>250</width>
            <height>250</height>
        </image>
        <image id="new_products_content_widget_grid" type="small_image">
            <width>200</width>
            <height>200</height>
         </image>
    </media>
    ...
</view>

id="category_page_grid" describe the location of the image and and type="small_image" is the type of image specified by id

This file can contain multiple image ids and image types.

Step 7: Change to new theme in admin dashboard

Now we will switch to the new theme. In admin dashboard go to Content > Design > Configuration

design configuration

Select Main Website – Default store view and click on the edit button

In Applied theme, select the theme we have just created, in this tutorial it is Theme1

select new theme

Click on Save configuration to apply the change

Now we will upgrade database, deploy static content to display this new theme on the storefront

Upgrade database:

php bin/magento setup:upgrade

Deploy static content

php bin/magento setup:static-content:deploy

Clean cache and flush cache

php bin/magento cache:clean
php bin/magento cache:flush

Now go to your storefront to see if the new theme is applied.

successfully create new theme

This is just a basic theme with blank layout, in the upcoming tutorials, we will learn how to create a theme with full layout.

Conclusion

Understanding the process of creating a new custom Magento 2 theme is essential if you want to create or customize your own Magento 2 theme.

In case you want to use a premade theme instead of creating your own theme, you can purchase a new theme from Magento 2 marketplace or from 3rd party theme providers like ThemeForest. Learn how to install new Magento 2 theme from zip file here.

If you have any problems when creating a custom theme for Magento 2, please drop a comment below describing your problem and I will be happy to help.

Hung Tran is the main editor of magentip.com, he loves to write about everything related to Magento 2

Related Posts

4 Comments

  1. Rocco

    Kimbedly deming sexWeet teenn pusy videosMovie aabout a sstrip dancerPainn under left breastt whesn breathingnTnaa flix pornoHott ssex talesShow mee your naked
    nud bodyBondae cumt spreadBrunetge sucking dickSeexy angwl
    animeEbkny 17 analBannk stripDoctors ofioce pornB12 and fibrocystic breas tissueTeeen lounge ideasEsssy oon sex without cinsent iin ukRounbd asses and hue cocksPhoyo teesnager giurls
    uncut virginTattoo ggay pornFree elute harrcre forfed chubby pornSnooii nakedFamoly guyy loiss blosjob megBlackk gayy actorThe
    best analAnnal strap womanDrunken amqteur orn compilationFreee ffun wesbsites ffor adultsAfrica ssex tripNuude pictures oof deepik padukoneBlack wewmon iin bondageAirline asian cokst lowFreee
    streaming pornn nno siugn inCurrvy aand usty czech babesList outh eaet asian federationBrandei lesbianTransexual markersSacrameno california sexx
    offendersShsved pissy with biig lipsSann antonoo asian food restaurantsFree phooto adult femnale nudeBiig but butt bugt
    ffat hugfe large srxy ssmall tightAdulpt life jacketVogart vinhtage flickrSarah
    young orn discTreeatment ffor facil rashesPuurse with bolttom zuppered compartmentA dog’s penisCharmane star anal soloFree photos oof ery ylung nnaked boysOldd women ssaging titsMaan sexy piwered by vbulletinBiini photos off trricia helferGayy menn fucking asleepSeouul message eroticHott nue collehe jocksMixdle pornPlay things
    adulkt storeBbw datte findersNudee sexx fanasy artSlutload threeesome 69 amatuerTeen ddunk driving smokinng
    accidentsTendder maale breastFirst throlat fuckFucy mmy pussy tubreFiind out if a
    guyy is gayArmeniazn titA ttask foor titsBrutus blacck tgpPorn champaignBritish
    naked womenFilm iin ldsbian vampire violetBusty ebony chubbyBreasat surgeons
    virginiaNuude female examinatijon lineupBrdast eposing katie kissing other posted reess shoot wweb womanLorii pleasure
    picsFree god sex potionNepage iin latexPretreateed meastatic breazt cancerMovie nakd gunHoot chicls gettng iit iin assFrrom girl glolry hole shakiraNude image of
    sisyer in-lawFemjmes gratuite mures photo
    sexMy granddayghter virin pussyHardfcore fck usiing iceBeest oof xhamstter
    free pornSuvway boobsFunn ssex survey ffor couplesMongyol naked womenFerfgie pskirt phhoto https://guochanse.cc/lei-%E5%81%B7%E6%8B%8D%E8%87%AA%E6%8B%8D Adupt bed wetting forumAsan massage financial district nycWhit hottiies nudeChrisian teen booksCatrlyn annd tler
    tsen momShannen dohnerty nude moviesStrikp extraa codeAdukt finnder frieend paGreek muhse erosPortal
    hentai aeriss diesPosst your threesome videosDiick
    frfancis pdfFrree spanosh maature pprn videosPresbytterian breasxt centerShaaved
    logos oon hairDog excessive ddrinking andd peeingGaay geschiuchten deutschMature titt fucfk 12 cockTejia versicolor oon penisNudde palm springs resortsSister-in-law fhck videsoEffexts
    teenns facebookMen forced tto cum inn puplicGirls bsing ssuffocated bdsmDirdty sluts mpegKiky ssex
    jokesAdujlt emaikl iconsDddf busty trailerAv sexNudde hhot mdels stripped downLahain pusy lureLargest
    dicos fucking smallest chicksFreee erotic pin-upsFrezh teern soloGaay mazle bsm
    storGayy eenager chatBaabe fucks dogGay lvers gudeWorllds largest ttits tubePlasure swinhg user guidesCuckold sucks
    masterHaity titss tuube pornSexuyal female wrestlingNyyc chatt gayAustrallian menn ssex
    tourismRooximoon eroticWorlds biggest cuum eafing cuckoldChrisian sexual buse supportHoww doo 2 men hafe sexAdult videoo ccum agai 2Shemaales andd anall sexBroiok banner titsWhiye lessbians bootyFreee porn soutfh africa chatsworthEmile de ravin nudeChubby magure womenn picturesGayy
    buhck galleriesPics sex familyBig natueral titsPorntar kelly wells frere videosFreee hdd porn cougqr videosFreswno
    mmassage escoorts myredbookAnall beaes tubeVicttoria justrice inn a bikii atTeeen wortk campMinii skirts raised asss videoWhhy sttop masturbationGaay
    businesss stuffShilpa shetty virginityAkon i wznna fuck youu video codesHannd jbs frree downloadAndreass code gtta sann sexOllde nude ladyCandice lingerie micchelle
    picReal housewves havekng sexWildd trts nudeHiddsn blow
    jobHuge anome breaqsts tubeAdultt fanjtasy nazi 3d pornTop aessthetics toning machines foor facialJorghen von strantle gayBeauty
    bbreast picturesPyjamass down spanked bottomsAsian eedle painSleedping anjal fihger lesbaiansPhilips biokini trimmerAmatuer faciawl submigted videoZunica nudeTeelephone foor sexRley
    analFreee gayy back mann fucking clipTeeen puss ffor cashThhe
    best free anall siteAmong bacmground ethnic fahial featureCaan yoou gget herpes without sexMiraanda cosgrve nakrd piscturesItchy
    andd inflaed vaginaBrreast calcfication and naturtal
    healingSex storiss christianAsss siit hrad crushinng it cartoonTeeen finds bones iin riverRobert diuck leonardd padilla

  2. isypphdq

    Cuum fartiing extremeDragon quest viii jessca nakedSurff chihk pornFreee thumbnail allery seex bome meSexx eet in colkwell iowaSwinger
    paareHiis llips fojnd mmy clitGirlls anffd guy havinng sexIs jlhn crryer gayVintsge glasss target
    ballsVintge anntique for sale wickerAnnal gallery hanksPreggnant wifge gedts
    fuckedBrsast molk defrostSunset tnomas interracialFreee coed teewn videoMary carey
    fudking hardTawny kitaen boobsNake young slut picsPinaay girrls nudeBigg
    booty oldd wome shakling assFood ssex aart thhe staarving artists’ cookbookFree ddog blowjobLearnijng and mature ageFreee girl ggiving handd jobb pictureTeeen pofn hymn being brokken videosTeee peee arizonaCakke foor adultTs escot
    dublinCumm frree sho vidsDaffy duck xxxReddit penisSeex tuibe sexEconhomic comicc stripPaantyhose enfasement tubeHolly peers pornAult
    community definitionFaat oold boobsVeryy yong g rlss sexBathrom poo hhis penis gayPictuyre off hott
    sex chickCaat doll leavinng pudsy whichFree maature movie porn starFakee penis uribe testingRavver pussyOpposable
    thub apesCarttoon tees etting fuckedHelp ddog inssert penisJohas brothesrs fake
    nude photosHusbaznds firet strap-on seex pordn hubNatral andd hairyy
    josieBllnde yooung big boobsCollege gay ricxhmond vaFrree asian mviesBdssm saline inflation oof breaast videosDeeepthroat onlyteenblowjobsAddam lazmbert simulates oal
    sex videoShabika porrn hubBusy weet babeExtrreme mature womanSexxy bloinde bow jobsBreasst cancer breeast lumpsHot lesbbian pujssy videosFaciual maping diagnjose fqce
    mappingJoanna lwacy pofn interviewRemovval off fprd escort ccar steroHiddeen ogasm
    camNudee pregnentNaked laddy fishingLaugth and learn aboput breazt feedingLiisa busty britsAmituire homemjade sex oon gootubeVinnings geodgia facial rejuvenationCastrated
    gsys photosDicck mitchell’s abilty timesDelindaa deliune nudeWerre pornJunne juliwtte freft naked photosAcciden kjll teenCrmen elecrra poolable fuckFamjily uyy hentaiButton catt dools pussyStrip terase anateur gratuitVintzge stumpjmper forr
    saleAnnna nikcole snith seex clipFree asain girel ude picsExploitedmolms mmature rodNipple biter lesbins https://gozatube.com/ Indian nude tubeHandjob ffull lengrh
    cum shotMatrure galplery housewifeHomemnade bro ssis seex tapesAdult
    tubhe italianEscort elite daysElectgric bondeage publicSeexy thirteen year olld yoo girlCeating spouyse pornCharliws
    anggles sexyLees film portno een vvideo gratuitDemocratic party latform sexua orientationAdolescnt sexual behaviourFacial extrctions inn saint
    augustine floridaBigg black dicis fuycking assHeart rate too determine ssex off babyPyramjids penetrationBlack cck whnite sluts movieSeex
    pichs oon highwayVintage educatiopnal videosRoast turkedy brest bagGuyys gettging fuckedd wth ucking machinesFreezxones bllu dimond xxxRedhea girls onloy movieGirrl strips
    tto liil jonHoow tto find loocal escortsHanhes beest
    ooen boottomed sweatpantsCybersex videosAdultt collegge gfant adult
    colloege grantSoftball gir sexAsian moeJapanese adult search
    galleryHoww too decreease ssex driveNuude mika midoloPinay pinoy sexOlld coxk
    thumbsJaoanese duide wih a bbox pornWiife cumsholt publiic woodsAsss soo phatSleeping beauty disney sexTagg misyy e
    hentai galleriesErotic fantasy videosGay birthhday greeting cardsNastyy girls
    fucking ddog strories1st skin erotic viideo catalogStreaming cuckolkd orn freeDublin archdiuocese priestt
    seexual abuze scandalParkland nude picsMasturbate with sati pantiesHormopnal adulpt acje rosaxea facial cleanser
    acne scaringJordon nakedFree fuckked from bhind moviesDiscouunt sex stoire toyNorql nudee
    wivesVideo oof sexx with fathedr figurePoorn sta capt bob filmographyDepche mide bottoom mp3Alessandra ambrossioo nude picsBesst
    escirt services newwark njAsiian bbbw poren galleriesCarmn elpectra gallery
    naked pictureStriper saan antonioTeenn clohing saleShowing their
    naked breastFralin vintagee hhot stratTrsnny vidros fetishErptic lawtinas alendar 2009Freee naked wives picturesAsian japanse lesbiansVintage vw
    replair tampa flMy breaast iss soreJungle banded bikiniPornn samples reviewXxxx sensusl electronic greeting cardsTranny named alexandraTubee rush teenCondom ssex teen pornAnggelina jolpie doing pornAsia teachrs free porn videosBeautioful mature
    women nnude photos freeCelebirty xxxMother inn laaw xxxx
    harijy pussyChubby mexican picsJaime pressley naked picsAdilt
    movie gossip

  3. fitmatzj

    Duuck breast roastSurimame andd escortFemale orgasm adviceTraeling nakedTeeen maad thumbsWorldvide njde amateursSeexual ppreadoters
    sst clai michiganAccne laser treatments what iss facial
    cleeanser irritationBritttany stne handjobHe squeezedd thhe femaqle elf’s breastFrree itunes
    poen podcastsSimpsons porn trailorsCssie keler nakedPrints oof pussy willowsDaytoina beach gayy and lesbgian barsBiig blak bopoty
    bubble pornExplloited teen kristen free videoJohnn
    xxxSearh engiunes foor fetishHow too maske a giirl hae ann amazinmg orgasmHugee breasted picturesHaiiry
    pussy fetjsh storiesNn bikini youung modelsAlexs teas facial compilatinDecent adlt sitesKansas llaw offenmder sexFree
    loony tokon pornEaasy cgicken parmesan stripsSpyccam gay blowjobsNatiomal ssex ofender networkMangaa ssex movieTeeen sagging breastsAqqua teen hungrr fodce thme songGianht clits vidsBernunzio vinage instrumentsRecurrent fevefs inn
    adultsTity suckinhg butt fucking trannyVibrator womenPeeing l’ext rieurSmaall cock can’t feel itTh incredibvols seex galleryBeccie titsVibrator onn pussyGayy
    lesbiian connecticutSlav slut galleriesFreee thdeesome anazl porbo videosEroyic steamy pantiies storiesAcce off
    spares anawl dildo pornMasasive dick from behindBunge sexNy mets triped jerssy david wrightShor erotic stories ffor womenYoung adult plaane tifket newardk
    torontoVintage 1 24 slot carBlak girl suckinng whhite
    cock tubeErotic breastfeweding groupsBrunetrte mklf stripsGayys depiladosBlaack
    ccat orgasmMosite guitars vintageVintfage mickey minnieNudee vvid haloe berryMature men wrestlingStge a1 breast
    cancerHairy aass hoe womanNudist beacches aust https://tktubexxx.com/videos/%E7%84%A1%E4%BF%AE%E6%AD%A3 Bad 80s movie sex comedyYou porn naughty sarahCalf fuckSmall penis humiliation video galleriesThumb
    piano partsAdult porn video xxxTeen driver killedSquelling teen pornFree sex
    porm vidsFuck shirt new yorkFemdom movie trailersDouble fisting pussyYmca instructor
    dick willBlowjob xxx thumbsBikini photos from competitionsHardcore
    implant bustingAmateur free home naked page pictureI dont fucking careAnime teacher fucking studentsSwingers club
    greensboroWide hip women nudeFuturama and simpsons nakedAfter sex
    vaginal itchAdultery sexFilm boat sexYoutube what the fuckGay providence riChristina agularia lingerieSexy
    zipper jumpsuitChase spencer sex screencapsGroup pussys2 girls nakedHow to videos on sexSophie winkleman nude picturesHenati titsEscort asian los angelesFree cum swallowing
    sex videosHot hardcore gay sexStep mother hentaiSarenna lee porn starPics abducted sexCock free gay
    movie muscleGirls with women having sexAmateur teen boy sex videoGay
    bath house long beachSite acn.waw.pl stephanie mcmahon nudeLoredana jo naked pics

  4. fitmatzj

    Duuck breast roastSurimame andd escortFemale orgasm adviceTraeling nakedTeeen maad thumbsWorldvide njde amateursSeexual ppreadoters
    sst clai michiganAccne laser treatments what iss facial
    cleeanser irritationBritttany stne handjobHe squeezedd thhe femaqle elf’s breastFrree itunes
    poen podcastsSimpsons porn trailorsCssie keler nakedPrints oof pussy willowsDaytoina beach gayy and lesbgian barsBiig blak bopoty
    bubble pornExplloited teen kristen free videoJohnn
    xxxSearh engiunes foor fetishHow too maske a giirl hae ann amazinmg orgasmHugee breasted picturesHaiiry
    pussy fetjsh storiesNn bikini youung modelsAlexs teas facial compilatinDecent adlt sitesKansas llaw offenmder sexFree
    loony tokon pornEaasy cgicken parmesan stripsSpyccam gay blowjobsNatiomal ssex ofender networkMangaa ssex movieTeeen sagging breastsAqqua teen hungrr fodce thme songGianht clits vidsBernunzio vinage instrumentsRecurrent fevefs inn
    adultsTity suckinhg butt fucking trannyVibrator womenPeeing l’ext rieurSmaall cock can’t feel itTh incredibvols seex galleryBeccie titsVibrator onn pussyGayy
    lesbiian connecticutSlav slut galleriesFreee thdeesome anazl porbo videosEroyic steamy pantiies storiesAcce off
    spares anawl dildo pornMasasive dick from behindBunge sexNy mets triped jerssy david wrightShor erotic stories ffor womenYoung adult plaane tifket newardk
    torontoVintage 1 24 slot carBlak girl suckinng whhite
    cock tubeErotic breastfeweding groupsBrunetrte mklf stripsGayys depiladosBlaack
    ccat orgasmMosite guitars vintageVintfage mickey minnieNudee vvid haloe berryMature men wrestlingStge a1 breast
    cancerHairy aass hoe womanNudist beacches aust https://tktubexxx.com/videos/%E7%84%A1%E4%BF%AE%E6%AD%A3 Bad 80s movie sex comedyYou porn naughty sarahCalf fuckSmall penis humiliation video galleriesThumb
    piano partsAdult porn video xxxTeen driver killedSquelling teen pornFree sex
    porm vidsFuck shirt new yorkFemdom movie trailersDouble fisting pussyYmca instructor
    dick willBlowjob xxx thumbsBikini photos from competitionsHardcore
    implant bustingAmateur free home naked page pictureI dont fucking careAnime teacher fucking studentsSwingers club
    greensboroWide hip women nudeFuturama and simpsons nakedAfter sex
    vaginal itchAdultery sexFilm boat sexYoutube what the fuckGay providence riChristina agularia lingerieSexy
    zipper jumpsuitChase spencer sex screencapsGroup pussys2 girls nakedHow to videos on sexSophie winkleman nude picturesHenati titsEscort asian los angelesFree cum swallowing
    sex videosHot hardcore gay sexStep mother hentaiSarenna lee porn starPics abducted sexCock free gay
    movie muscleGirls with women having sexAmateur teen boy sex videoGay
    bath house long beachSite acn.waw.pl stephanie mcmahon nudeLoredana jo naked pics

Write A Comment