This exam consists primarily of scenario-based questions in a multiple-choice format. Sample questions are included at the end of this guide. Test time: 90 minutes. Passing score: 63% or above, 60 questions. Available to take remotely or at a test center.
- 1. Create Themes 7%
- 2. Magento Design Configuration System 7%
- 3. Layout XML in Themes 18%
- 4. Create and Customize Template Files 8%
- 5. Static Asset Deployment 5%
- 6. Customize and Create JavaScript 17%
- 7. Use LESS/CSS to Customize Magento Look and Feel 8%
- 8. Customize the Look and Feel of Specific Magento Pages 22%
- 9. Implement Internationalization of Frontend Pages 5%
- 10. Magento Development Process 3%
devdocs, mageplaza, meetanshi, templatetoaster, devdocs1, devdocs, github, meetanshi, belvg, devdocs
- In which folders can themes be located?
- What determines where a theme is installed?
- What is the difference if a theme is installed in one or the other of the possible directories?
- Which folders can exist within a theme?
- Which folders are optional and which are required?
- What is the purpose of each of the folders?
devdocs, bssthemes, amasty, cloudways
- Which files are required to be present in a theme?
- Which files are optional?
- What is the purpose of each of the different file types?
belvg, stackexchange,alanstorm, devdocs, devdocs2, mageplaza, dckap, belvg
- Which design areas exist?
- What is the difference between them, and what do design areas have in common?
- What are design areas used for?
- How can design areas be utilized for custom themes or customizations?
devdocs, belvg, stackexchange, icecubedigital, swissuplabs
- What type of relationships can exist between themes?
- What is the difference between a parent theme and a child theme?
- How can the relationship between themes be defined and influenced?
- How is that taken into account when creating a custom theme or customizing an existing theme?
magento, devdocs, belvg, inviqa
- Content > Design > Configuration
- How do the configuration settings affect theme rendering? What happens if a theme is added or removed?
- What common mistakes can be made in regard to these settings?
belvg, devdocs, github, amasty
- temporary theme configuration to a store view using the options found in the Admin UI under Content > Design > Schedule?
- What is the purpose of this feature? How does it influence rendering if a design change is scheduled?
- What happens at the end of a scheduled design?
- How is full page caching involved?
- Content > Design >Configuration and > Schedule to configure the design fallback
- What is the effect if both options are used at the same time? docs-ce, docs-ce, devdocs, mageplaza, mageplaza, stackexchange, belvg, belvg2, magestore, stackoverflow
devdocs, belvg, danielnavarroymas, alanstorm, gordonlesti
- What layout XML elements exist and what is their purpose?
- What is the purpose of the attributes that are available on blocks and other elements?
belvg, devdocs, stackexchange, mage2, 1, stackoverflow, mageplaza
- How can the page layout be specified?
- What is the purpose of page layouts?
- How can a custom page layout be created?
- Where are the existing page layouts used?
- How can the root page layout be specified for all pages and for specific pages?
devdocs, belvg, stackexchange, rakeshjesadiya, knightdale, emiprotechnologies, alanstorm, meetanshi, scommerce
- How can the available layout handles for a given page be determined?
- How do you add a new layout handle?
- What is the purpose of layout handles?
- What are the most commonly used layout handles?
- How can layout handles be used during theme customization?
belvg, devdocs, stackexchange, alankent, awaredigital, ostraining, webkul
- What is the purpose of blocks? What is the purpose of containers?
- How can containers be used in theming?
- How can blocks be used in theming?
- What is the default block type?
- How can the order of rendered child blocks be influenced both in containers and in blocks?
devdocs, stackexchange, magecomp, inchoo, classyllama, belvg, magenticians, magenest, mageplaza
- How can layout XML be overridden?
- How can layout overriding be used in theming?
- What are consequences of layout overrides during upgrades?
- What is the effect of layout overrides on compatibility?
belvg, devdocs, magento, magentoextensions, mirasvit, stackoverflow
- What is layout merging?
- How do design areas influence merging?
- How can merging remove elements added earlier?
- What are additive changes and what are overriding changes during layout merging?
stackexchange, ipfs, belvg, belvg2, alanstorm, inviqa
- In what order are layout handles processed?
- In what order is layout XML merged within the same handle?
- How can the processing order be influenced?
- What are common problems arising from the merge order of layout declarations?
stackexchange, belvg, belvg, jamersan, mage2, magecomp
- How can arguments be set on blocks?
- Which data types are available?
- What are common arguments for blocks?
dev, devdocs, devdocs, magestore, bizspice
- What is the etc/view.xml file used for?
- How can it be used to customize a theme?
- How can values from etc/view.xml be used during theming?
- How does theme inheritance influence values from etc/view.xml?
devdocs, devdocs, cloudways, qaisarsatti
- How can a customized template file be assigned to a block using layout XML?
- How does overriding a template affect upgradability?
- What precautions can be taken to ease future upgrades when customizing templates?
- How can the design fallback be used to render customized templates?
- How does that influence upgradability?
- How can you determine which template a block renders?
devdocs, devdocs, devdocs, belvg, mageants
- What conventions are used in PHP templates?
- Why aren’t the common PHP loop and block constructs used?
- Which common methods are available on the $block variable?
- How can a child block be rendered?
- How can all child blocks be rendered?
- How can a group of child blocks be rendered?
- How can values set on a block in layout XML be accessed and rendered in a template?
devdocs, belvg, kinsta, stackexchange, devdocs, devdocs, stackoverflow, codextblog
- How can dynamic values be rendered securely in HTML, HTML attributes, JavaScript, and in URLs?
devdocs, devdocs2, amasty, github, stackexchange
- What commands must be executed to deploy static file types?
- What are common mistakes during the process?
devdocs, amasty, digitalstartup, dzone, goivvy
- What are the differences between development and production mode in regard to frontend development?
devdocs, belvg, magenticians, stackexchange, meetanshi, weltpixel, astrio
- Which LESS compilation options are available in Magento?
- How are they different?
- How do they influence the developer workflow during theming?
belvg, devdocs, stackexchange, choosepizzi, jamersan, amasty, weltpixel, mageplaza, magentodeveloper, magecomp, algolia, jason
- What options exist to include custom JavaScript on a page?
- What are the advantages and disadvantages of inline JavaScript?
- How can JavaScript be loaded asynchronously on a page?
- How can JavaScript on a page be configured using block arguments in layout XML?
- How can it be done directly in a .phtml template?
devdocs, devdocs, stackexchange, stackoverflow, webkul, paulmestereaga, jamersan, magestore, sherocommerce, rakeshjesadiya, meetanshi
- Demonstrate understanding of jQuery and jQuery UI widgets.
- Demonstrate understanding of how to use Magento core jQuery widgets.
- How can jQuery UI Widget methods be instantiated?
- How can you call jQuery UI Widget methods?
- How can you add new methods to a jQuery UI Widget?
- How can a jQuery UI Widget method be wrapped with custom logic?
jamersan, devdocs, devdocs, devdocs, belvg, stackexchange, stackoverflow, magestore, magebay, meetanshi, magentoway, webnexs, toweringmedia
- How do you load a file with require.js?
- How do you define a require.js module?
- How are require.js module dependencies specified?
- How are module aliases configured in requirejs-config.js?
- How do you regenerate the compiled requirejsconfig.js file after changes?
- How do you configure module aliases in requirejs-config.js?
- How do you debug which file a requireJS alias refers to?
- Demonstrate that you understand how to create and configure Magento JavaScript mixins.
belvg, devdocs, devdocs1, devdocs2, devdocs3, servebolt
- What options are available to configure JavaScript minification and bundling?
- How does Magento minify JavaScript?
- What is the purpose of JavaScript bundling and minification?
devdocs, devdocs, devdocs, magently, stackexchange, dmytropoperechnyy, mageworx
- How can you specify configuration options on a UiComponent widget in JSON and in Layout XML?
- What configuration options are available on UiComponents?
- How do you specify the ko template for a UiComponent?
- Demonstrate an understanding of default.tracks
belvg, bizspice, magenest, rohanhapani, magestore, codilar, sohel, devdocs, webnexs, jason, meetanshi, devdocs, magecomp
- How do you use knockout.js bindings?
- How do you bind a ko view model to a section of the DOM with the scope binding?
- How do you render a ko template of a UiComponent?
- Demonstrate an understanding of the different types of knockout observables.
- What common ko bindings are used?
- Demonstrate an understanding of ko virtual elements.
devdocs, community, devdocs, stackexchange, magenest
- Demonstrate an understanding of the links, imports, exports, and listens UiComponent configuration directives.
devdocs, devdocs, devdocs2, stackexchange, belvg, hexascholars, magenest
- Demonstrate an understanding of ES5 string literal templates like
${$ .provider}. - What does
$. Inside of $ { } resolve to?
belvg, belvg2, devdocs, devdocs2, training, firebearstudio
- Describe features like file import via @import directive, reusable code sections via mixins together with parameters and the usage of variables.
- Demonstrate your understanding of the special variable @arguments.
- Demonstrate how to use the nesting code formatting, and the understanding of media queries together with nesting.
- Describe how the & (Ampersand) works and its function.
- Describe how calculations are possible as well.
devdocs, devdocs2, devdocs3, devdocs4, belvg, belvg, weltpixel
- Demonstrate the process from magento-less files via php preprocessing into real LESS files with extracted @import directives.
- Where can the intermediate files be found?
- What do you have to remember, when you change a less file?
- Which files will be re-processed on file changes?
- Are the original files copied or symlinked in developer environments?
devdocs, devdocs, devdocs2, magenest, ipfs, weltpixel, amasty, dsanderson
- Demonstrate LESS has no fallback capabilities and therefor
- magento created @magento_import directives to enable FE devs to inject or replace parts of existing less structures of modules and themes.
devdocs, weltpixel, medium, atwix, emizentech, mageworx, toptal, olegnax, onilab
- Demonstrate the primary use case for merging and minifaction.
- Determine how these options can be found in the backend.
- Understand the implications merging has in respect to folder traversal.
devdocs, devdocs2, devdocs3, belvg, belvg2, magenest, magently, algolia, astrio, magenticians, emiprotechnologies, magestore
- Demonstrate your understanding of magento's UI library, a LESS-based library of mixins and variables for many different standard design elements on websites.
- How can you take advantage of the UI library?
- What do you have to do to enable it in your theme?
- Which file is primarily used for basic setup of variables?
- Where can UI library files be found? How can it be extended?
- How can you change specific parts of the UI library?
devdocs, devdocs2, devdocs3, stackexchange, stackexchange, markshust, belvg, etatvasoft, itnext, codextblog1
- Demonstrate an understanding of customizing generic page elements that can be found on most pages:
magestore, atwix, ubertheme, webkul, bizspice, belvg, magezon, magesolution, magecomp, meetanshi, mageplaza, magenest
- How can design changes (page layout) be configured on product detail pages?
- How can design changes be configured for specific product types?
- How can you use custom layout updates for specific product pages?
- Demonstrate an understanding of how to use the container blocks provided by Magento to display additional information on category pages.
weltpixel, atwix, weltpixel, metagento, belvg
-
How can design changes (page layout) be configured on category pages? magestore, weltpixel, fishpig
-
How can the layered navigation be configured? magestore, docs, mageplaza, mageplaza2, firebearstudio, amasty, amasty2, magecomp
-
Demonstrate an understanding of configuring design inheritance for category pages.belvg, devdocs1, devdocs, stackexchange, magestore, magenest
-
How can a CMS block be configured as a category landing page? stackexchange, amasty, belvg, meetanshi, firebearstudio, blogtreat, stackexchange
-
How can design changes (page layout) be configured on CMS pages? devdocs, devdocs2, jason, magecomp, weltpixel
-
Demonstrate an understanding of static variables in CMS blocks and pages.
belvg, rakeshjesadiya, stackexchange, bizspice, docs, devdocs, magecomp, webnexs -
Demonstrate an understanding of the use of CMS template directives (var, store, block, …).
atwix, stackexchange, jamersan, stackexchange, inchoo, stackoverflow
-
How is a widget instance created? toptal ,magestore, magenticians, hostadvice, magehit
-
Where can widgets be used? classyllama, meetanshi, devdocs
-
How can a custom widget target be created? mageplaza , magenest, cloudways
-
Demonstrate an understanding of configuring a widget instance. magestore, meetanshi, rakeshjesadiya, meganmosehauer, ubertheme, jason
8.6 Customizing CMS blocks stackexchange, devdocs, devdocs, magenticians
-
How do you create and insert CMS blocks? meetanshi, ibnab, tigrensolutions
-
Demonstrate an understanding of the use of CMS template directives (var,store, block, …). meetanshi, chapagain, belvg, amasty, javatpoint, stackexchange
-
How do you remove or add an item from the customer account navigation using layout XML? stackexchange, zemez, aureatelabs, inchoo, mage2
-
Demonstrate an understanding of formatting customer addresses. magento, mageplaza, bsscommerce, mageguides, rakeshjesadiya, firebearstudio
- Demonstrate an understanding of the container blocks provided in the Magento checkout to display additional information. belvg, mageplaza ,inviqa ,inchoo
-
How do you create and assign custom transactional email templates? magefan, webkul, magestore
-
How do you use template variables available in all emails? mageplaza, meetanshi, nwdthemes, magenticians , amasty, stackexchange
-
How do you access properties of variable objects (for example, var order.getCustomer.getName)? inchoo, stackexchange chapagain
-
How can you create a link to custom images from transactional email templates? devdocs ,
-
How do you create links to store pages in transactional email templates? devdocs , amasty ,belvg, themes, firebearstudio, magestore
-
Demonstrate an understanding of internationalization (i18n) in Magento. devdocs,commerce,nwdthemes
-
What is the role of the theme translation dictionary, language packs, and database translations? appjetty, appjetty
-
Understand the pros and cons of applying translations via the translate.csv file versus the core_translate table.devdocs
-
In what priority are translations applied? webinterpret, atwix, belvg,stackexchange
-
Translate theme strings for .phtml, emails, UI components, .js files? belvg, magestore
-
Demonstrate an understanding of string translation in JavaScript? devdocs,firebearstudio,mrvts,webnexs,integer
- Determine ability to manage cache? devdocs
- Demonstrate an understanding of configuring the Magento cache types for development and production. mageworx
-
What bin/magento commands are commonly run during frontend development? devdocs,mageplaza,emiprotechnologies
Example Questions See the Answer Key following the questions for answers.
Question 1: You are developing a German language theme for the Magento Marketplace named mytheme. In your Magento installation you have a third-party German language package installed. The theme “mytheme” already contains a mytheme/i18n/de_DE.csv file. The graphic designer wants you to rename the Add to Cart button to make the text shorter. Keeping upgradability in mind, where do you add the new string?
- A. Override the Magento_Catalog/view/frontend/templates/product/view/addtocart.phtml template in mytheme and replace the string.
- B. Add the string to mytheme/i18n/de_DE.csv
- C. Add the string to the third-party German language package.
- D. Add the translation to the core_translate database table. Reference: Magento Dev Docs: Use translation dictionary to customize strings https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/translations/theme_dictionary.html
- A. Title of a theme
- B. Composer package version
- C. Theme area: frontend or adminhtml
- D. Theme preview image
- E. Parent theme Reference: Magento Dev Docs: Create a new storefront theme http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/themes/theme-create.html
Question 3: You need to add a custom block of HTML to the header of every page using a layout file in MyCompany/mytheme. Keeping upgradability in mind, how do you add the block?
- A. Put your customization in MyCompany/mytheme/layout/extend.xml
- B. Include in your MyCompany/mytheme/Magento_Theme/layout/default.xml
- C. Put your customization in MyCompany/mytheme/Magento_Theme/layout/default.xml
- D. Keep track of your changes and apply them to Magento/Theme/layout/default.xml after upgrade
Reference: Magento Dev Docs: Extend a layout http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/layouts/layout-extend.html
Question 4: A merchant asks you to add frontend validation to their newsletter form. You notice the form has the following attributes: <form class="form newsletter” novalidate id="newsletter-validate-detail"> Which of the following choices will add frontend validation?
- A. Add form_key input inside of form.
- B. Remove the novalidate attribute from form.
- C. Add a validation object using data-mage-init attribute.
- D. Add the class mage-validate to form.
Reference: Magento Dev Docs: Calling and initializing JavaScript https://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_init.html
- Question 1 Answer: B
- Question 2 Answers: A, D, E
- Question 3 Answer: C
- Question 4 Answer: C