Adobe Certification
609 practice questions with correct answers and detailed explanations. Use this guide to review concepts before taking the practice exam.
The Adobe Adobe Commerce Front-End Developer Professional (AD0-E726) certification validates professional expertise in Adobe technologies. This study guide covers all 609 practice questions from our AD0-E726 practice test, complete with correct answers and explanations to help you understand each concept thoroughly.
Review each question and explanation below, then test yourself with the full interactive practice exam to measure your readiness. For a condensed overview of key domains and exam tips, see the AD0-E726 cheat sheet.
In Adobe Commerce, what is the recommended approach when customizing the behavior of a default JS component?
The recommended practice is to never modify the source code of default components or widgets. Instead, all customizations must be implemented in custom modules or themes. This keeps your code upgrade-safe and maintainable.
What is the purpose of the `shim` configuration in RequireJS?
The `shim` configuration is used specifically when a third-party library does not follow the AMD (Asynchronous Module Definition) format and cannot be modified. It tells RequireJS what dependencies that library has.
In the Blank and Luma themes, which file is used to generate desktop-specific styles (viewport width higher than 767px)?
`styles-l.less` is responsible for generating desktop-specific styles for viewports wider than 767px. The 'l' stands for 'large' and targets higher breakpoints.
What does the `map` configuration do in RequireJS?
The `map` configuration connects (maps) real AMD modules — those that call `define()` — to a specified alias. The `*` wildcard means the alias is available to all loaded RequireJS modules.
When extending a layout in Adobe Commerce, where should the extending layout file be placed?
To extend a layout, the file must be placed at `/_/layout/` with the same name as the original layout file. The application will then merge the files automatically.
In Adobe Commerce responsive design, what does the `.media-width()` mixin's `@extremum` parameter control?
The `@extremum` parameter accepts either `max` or `min`, determining whether the generated media query uses `min-width` or `max-width`. If `max` is used, the styles compile into `styles-m.css`; if `min` is used, they go into `styles-l.css`.
What is a JavaScript mixin in Adobe Commerce?
A JavaScript mixin is a class whose methods are mixed in to another class — the base class includes those methods without inheriting from the mixin in the traditional sense. This allows augmenting behavior in a non-destructive, modular way.
How should jQuery UI components be referenced in frontend and base area JS widgets for best performance?
For frontend and base areas, individual jQuery UI components should be referenced via the `jquery-ui-modules/` path (e.g., `jquery-ui-modules/widget`, `jquery-ui-modules/slider`). This avoids loading the entire monolithic library and improves storefront performance.
To replace a default JS component in Adobe Commerce with a custom one, which configuration key in requirejs-config.js should be used?
The `map` key is the correct way to redirect all references to a default component to your custom one. Using `"*"` as the scope ensures every module that tries to load the original will get your custom version instead.
When using the `@media-common` style group in LESS, where are the resulting styles compiled?
The `@media-common` group is used when you want styles to apply to all screen widths, with no media query condition. The compiled output lands in `styles-m.css` without a wrapping `@media` rule.
What notation should be used in a PHTML template when a JS component requires initialization?
Declarative notation is required when a component needs initialization because it prepares the configuration on the backend and outputs it cleanly to the page. The two options are `data-mage-init` (targets a specific element) and `` (can target any selector or `*`).
What is the key difference between `data-mage-init` and ``?
`data-mage-init` is placed directly on an HTML element and initializes a component on that specific element only — it is great for concise, direct access. `` is more flexible: it can target any element via CSS selectors or use `*` to run without binding to any element at all.
When dynamic content is injected via AJAX, how should data-mage-init and x-magento-init be re-triggered on the new elements?
After injecting dynamic HTML, you must trigger `.trigger('contentUpdated')` on the element that received the content. This signals the framework to re-parse any `data-mage-init` or `x-magento-init` declarations present in the new markup.
In Adobe Commerce, where should JS mixin files be placed to affect only the storefront (frontend area)?
A mixin's scope is determined by its directory location. Files in `view/frontend/` affect the storefront only. Files in `view/adminhtml/` affect the admin panel, and `view/base/` affects all areas unless overridden by a more specific location.
What is the correct way to declare a JS mixin in requirejs-config.js?
Mixins are declared under `config.mixins`, which is nested inside the `config` property. This is distinct from `map`, `shim`, and `paths` which are top-level properties.
What happens when a mixin is overwritten by another mixin in Adobe Commerce?
When overwriting a mixin, the overwriting mixin replaces the original one. To ensure correct load order, you must add the origin module as a dependency using the `` tag in `etc/module.xml`. Without this, the overwrite may not behave predictably.
Which `` selector is used to run a JS component without binding it to any HTML element?
Using `*` as the selector means the component is initialized without binding to any DOM element — it runs once with the HTML DOM as its target. This is useful for page-level scripts that do not need a specific element.
What is the recommended compilation mode for active theme development in Adobe Commerce?
Client-side compilation mode is recommended during theme development because LESS files are compiled in the browser on every page load, so style changes are visible immediately after saving — no need to clear caches or run CLI commands for each change.
What is the purpose of the @magento_import directive in LESS files?
`@magento_import` is an Adobe Commerce-specific LESS directive that allows including multiple files matching a name pattern across different module locations. For example, it can pull in `_module.less` from every enabled module automatically.
In which LESS files can @magento_import be used?
`@magento_import` can only be used in the root source files of a theme (such as `styles-l.less` and `styles-m.less`). Using it elsewhere is not supported and won't work as expected.
What must be done when using @magento_import to avoid LESS syntax conflicts?
To prevent the standard LESS preprocessor from trying to interpret `@magento_import` as regular LESS syntax, it must be prefixed with `//` (commented out). The Commerce preprocessing system recognizes and processes it, while LESS itself ignores the commented line.
When creating a new storefront theme, which file is mandatory for theme declaration?
`theme.xml` is the required declaration file for any theme. It must contain at least the theme title and optionally a parent theme reference. Without it, the theme will not be recognized by the system.
How is a new custom theme registered in the Adobe Commerce system?
After creating the theme files (including `registration.php`), the theme gets automatically registered in the database when an Admin page is opened or reloaded. No CLI command is needed specifically for theme registration.
What must be done after applying a new theme in Admin if caching is enabled?
After applying a theme, if caching is enabled, you must clear the cache to ensure the new theme is rendered. A system message will notify you that cache types are invalidated. Navigate to System > Cache Management and clear the invalid types.
What is the purpose of the `cacheable="false"` attribute on a layout block?
Setting `cacheable="false"` on any block in a layout causes the entire page to be marked as uncacheable. This is a powerful setting that should be used carefully, as it disables full page caching for that page and can significantly impact performance.
Which cache type stores compiled page layouts (layout components from all modules)?
The `layout` cache type stores compiled page layouts — the merged result of all layout XML files from all modules. It should be flushed after modifying any layout files.
What CLI command is used to clean a specific cache type in Adobe Commerce?
The correct command is `bin/magento cache:clean `. This cleans the specified cache type (or all types if no type is given).
How do you make a layout change available on every page of a store?
Changes placed in `default.xml` are loaded on all pages because it is the base layout handle that all pages inherit. Any block or container modification there will apply globally.
What is the correct layout instruction to remove a block from a page?
To remove a block, you use `<referenceBlock name="block.name" remove="true"/>`. This references the existing block and marks it for removal. The `<remove>` tag (Option C) is only for removing static resources from the `<head>` section, not blocks.
What is the difference between `remove="true"` and `display="false"` on a block reference?
`remove="true"` fully removes the block and its children — no PHP object is created. `display="false"` hides the block from rendering but still instantiates the PHP object, making it available for other code to interact with.
What happens if both `before` and `after` attributes are set on the same layout element?
According to layout processing rules, when both `before` and `after` are present, `after` takes precedence. The element is positioned after the specified sibling.
In layout XML, what is a `` element?
A `` is a structural element in layout that holds other blocks and containers but has no content of its own and no associated PHP class. It exists purely to organize child elements in the layout tree.
What is the recommended way to pass parameters to a block from a layout XML file?
The recommended way to pass parameters to a block in layout XML is by using the <arguments> node inside the <block> declaration. This allows you to define data in a structured and declarative way that is compatible with Magento’s dependency injection system. The <action> tag (method calls) is deprecated and should be avoided in modern implementations. Example: <block class="Vendor\Module\Block\Example" name="example.block"> <arguments> <argument name="my_param" xsi:type="string">value</argument> </arguments> </block> So: ✅ Use <arguments> ❌ Avoid <action> (deprecated) ❌ Never modify the PHP class just to pass layout data
In email templates, which directive is responsible for applying inline CSS styles?
The `{{inlinecss}}` directive tells the application which CSS file to apply as inline styles on the email HTML elements. This is handled by the Emogrifier library, which takes the CSS and injects it into `style` attributes.
Which file should be edited in a custom theme to add new email styles without copying the full base email stylesheet?
`_email-extend.less` is specifically designed to be copied into custom themes and edited directly. It allows adding or overriding email styles without modifying `_email-base.less`, which would be overwritten during upgrades.
How are email templates overridden using a theme-based approach?
Theme-based email template overrides are placed at `/_/email/` using the same filename as the original. Template fallback is supported, so parent themes are also searched.
Which email template customization method has the highest priority?
Templates configured in the Admin take precedence over both default (module-level) and theme-based templates. Admin-configured templates override everything else.
What image formats are supported for email logos in Adobe Commerce?
Email logos must be in standard web raster formats: JPG, GIF, or PNG. SVG is explicitly not supported because many email clients cannot render vector formats.
For an email logo area of 200px × 100px, what image size is recommended for high pixel density displays?
Because emails are viewed on devices with varying pixel densities (including high-DPI/Retina screens), you should use a logo that is 3× the display size. For a 200×100 display area, the logo image should be 600px × 300px.
What translation directive must be used to support multi-language emails in Adobe Commerce?
The `{{trans}}` directive marks strings for translation and replaces them with the locale configured for the store view sending the email. It also supports named parameters with the format `%parameter_name`.
In the `{{trans}}` directive, what is the correct syntax for variable assignment?
Variable assignments in `{{trans}}` must not contain spaces around the `=` sign. The correct format is `store_name=$store.getFrontendName()`. Adding spaces causes the directive to fail silently.
Where are the default breakpoint variables for the Blank and Luma themes stored?
The default breakpoint variables (`@screen__xxs`, `@screen__xs`, `@screen__m`, etc.) are defined in `lib/web/css/source/lib/variables/_responsive.less`. These can be overridden in a custom theme.
In the Blank and Luma themes, at what viewport width does the layout switch from mobile to desktop view?
The breakpoint `@screen__m` is set to 767px. When the viewport width is more than 767px, the themes switch to the desktop view. This is the key breakpoint that separates `styles-m.css` behavior from `styles-l.css` behavior.
Which CSS selector pattern correctly uses .media-width() to add tablet styles (min 768px, max 1440px)?
For tablet-specific styles (between desktop min and a large max), the recommendation is to wrap native `@media` queries inside `& when (@media-target = 'desktop')` or `'all'`. This properly scopes them without creating conflicts with the `.media-width()` mixin system.
What is the result of setting `@media-common = true` in a LESS file?
The `@media-common` group produces styles without a media query wrapper, meaning they apply to all screen sizes. They are compiled into `styles-m.css` which is loaded on all devices.
Where should custom JS component source files be placed if they should be available only within a specific theme?
Custom JS files intended for a specific theme and its child themes must be placed in `/web/js/` or `/_/web/js/`. This scopes them to the theme.
What does the `deps` configuration in requirejs-config.js do?
The `deps` configuration causes the listed modules to be loaded on every page regardless of whether anything else requires them. It can be used at the top level or inside a `shim` block to declare a module's dependencies.
What is the `paths` configuration in RequireJS used for?
The `paths` configuration can alias any JavaScript file or URL, including HTML templates and external libraries — not just AMD modules (which is what `map` is specifically for). It can also accept an array of sources for fallback loading.
Which RequireJS config property is nested inside `config: {}` rather than at the root level of the config object?
The `mixins` property is unique in that it must be placed inside `config: {}`, making it `config: { mixins: {...} }`. All other main properties (`map`, `shim`, `paths`, `deps`) sit at the root of the configuration object.
How does the assets fallback mechanism work when resolving a JS script with no module context?
When no module context is specified, the fallback order is: current theme → parent theme → `lib/web`. For example, `knockoutjs/knockout` resolves to `lib/web/knockoutjs/knockout.js` only after checking both theme directories first.
What tool can be used to debug which JS components are used on a specific page element in Adobe Commerce?
The correct process is: use browser developer tools to identify the element's `id` or `class`, then search the page source for `data-mage-init` or `` calls on that element. Then look up the script path in `requirejs-config.js`.
Which of the following is a valid customization mistake when overriding layouts?
Changing a block name or alias while keeping it in the same parent is considered a customization mistake because it can break other modules or themes that reference the original name. The block name should remain stable.
What is the key characteristic of a <container> that has no children and no child <block> available?
An empty container with no child blocks available will not appear in the HTML output at all. This is by design — containers exist to organize structure, and if they have nothing to render, they are invisible.
What is the file `registration.php` responsible for in a custom theme?
`registration.php` calls `ComponentRegistrar::register()` to register the theme with the Commerce framework. It identifies the theme as a frontend component so the system recognizes it. Without this file, the theme won't appear in the Admin.
What is the `view.xml` file used for in a custom theme?
`view.xml` in the theme's `etc/` directory configures product image sizes and properties used on the storefront. It is required for themes that define different image dimensions than their parent theme.
After making changes to theme LESS files during development, what is the fastest way to clean only static view files without affecting other caches?
When working on styles, you specifically need to clear preprocessed and published static view files — not all caches. Running `grunt clean:` or manually deleting the relevant `pub/static` and `var/view_preprocessed` subdirectories is the targeted approach.
What does the <remove> instruction do in layout XML?
The <remove> instruction in layout XML is used to remove blocks or containers from the layout. When applied to a container, it also removes all of its children. It is not used to remove static resources (JS/CSS); those are handled in the <head> section using attributes like remove="true".
What is the correct way to pass a parameter to a block from a layout XML file?
The argument instruction inside referenceBlock or a block declaration is the standard recommended way to pass configuration to blocks. The action tag is deprecated and should be avoided.
Where should layout changes be placed to affect every single page of the store?
Changes placed in default.xml are loaded on all pages because it is the base layout handle that every page inherits. Any block or container modification in that file applies globally.
What does the display attribute set to false do on a referenceContainer?
display=false prevents the container from rendering in HTML but still instantiates the PHP object, keeping it available for programmatic interaction. This is different from remove=true which fully deletes the element.
What is the role of the update instruction in a layout XML file?
The update instruction includes a specified layout handle — for example update handle=customer_account — and executes it recursively. This allows reusing sets of layout instructions defined elsewhere.
How are argument values from layout XML accessed inside a PHTML template?
Argument values set via the argument instruction in layout XML are accessed in templates using $block->getData('name') or the boolean check $block->hasData('name'). The argument name attribute becomes the key used in getData().
What happens to elements moved via the move instruction if their destination is scheduled for removal?
During layout generation, the move instruction is processed before removal. This means if elements are moved into a container or block that is later removed, those moved elements are also removed.
When is the move instruction skipped during layout processing?
The move instruction is skipped if the element to be moved is not defined in the layout. This prevents errors when the source element may not exist in all scenarios.
Which layout instruction is used exclusively for removing static resources from the page head?
The remove instruction is used only for removing static resources (JS, CSS, fonts) that were added to the page head. It cannot remove blocks or containers.
What valid characters can be used for a block name attribute in layout XML?
Block names in layout XML are limited to 0-9, A-Z, a-z, underscore, period, and dash, and must start with a letter. They are also case-sensitive.
What does the ifconfig attribute on a block do?
The ifconfig attribute accepts an XPath to a system configuration field (for example contact/contact/enabled) and makes the block visible or hidden based on that field's value. This allows dynamic show/hide without custom PHP code.
In LESS coding standards, what prefix must extend names start with?
According to LESS coding standards, extend names must start with the .abs- prefix. This convention clearly marks them as abstract reusable patterns distinct from regular class selectors.
According to LESS coding standards, where should theme mixins (except extends) be located?
Theme mixins should be located in the web/css/source directory. This is the conventional location for theme-level LESS mixins as defined in the LESS coding standards.
What is the correct way to write the @import directive according to LESS coding standards?
LESS coding standards require: (1) always include the file extension in the imported path, and (2) use single quotes. So the correct form is @import 'source/lib/_lib.less'.
What does the LESS coding standard say about using the double underscore __ prefix?
In LESS coding standards, the double underscore __ prefix is used for grouping mixins. This allows related mixins to be visually grouped and identified as belonging to the same logical set.
How does server-side LESS compilation handle the preprocessed files?
In server-side compilation mode, the Less preprocessor resolves all paths and copies files to var/view_preprocessed/less, then the PHP Less compiler produces CSS output published to pub/static/frontend/[Vendor]/[theme]/[locale].
What is a root source file in the context of LESS compilation?
Root source files are the specific .less files from which the final .css files included in page layouts are compiled — for example styles-m.less and styles-l.less in the Blank theme.
When does server-side LESS preprocessing stop early without compiling?
The server-side Less preprocessor follows these steps: (1) if the requested .css file already exists, it stops. (2) If it changes the extension to .less and that .less file is not found, it stops. Only if the .less file is found does it continue to compile.
In client-side LESS compilation, what files are published to pub/static?
In client-side mode, the published files include: the root source .less files (with resolved @magento_import), symlinks to root source files without @magento_import, and symlinks to all recursively imported .less files.
Why does client-side LESS compilation use copies of processed files instead of symlinks in some cases?
When @import is used without a file extension, Commerce adds the .less extension during processing, making the processed file different from the source file. Since symlinks require the files to be identical, copies are used instead.
What does the static_content_only_enabled_modules flag do when set to true?
When set to true, this flag causes only CSS from enabled modules to be included in the final CSS output files (styles-l.css and styles-m.css). This reduces CSS file size and improves browser parsing performance.
Where must the static_content_only_enabled_modules flag be added?
This flag must be added to the top of the array in app/etc/env.php or app/etc/config.php. After adding it, you must run bin/magento app:config:import and then redeploy static content.
What is the primary purpose of RequireJS in Adobe Commerce?
RequireJS is a JavaScript file and module loader that improves perceived page load times by allowing JavaScript to load in the background asynchronously. It also manages dependencies between JavaScript resources.
In a requirejs-config.js, what does using asterisk (*) as the key in a map configuration mean?
Using asterisk (*) as the map key creates a global context — all loaded RequireJS modules can use the specified alias from anywhere in the application.
What is the exports key used for inside a shim configuration?
The exports key in a shim configuration specifies the global identifier (variable name) under which the non-AMD module is exported. This allows RequireJS to access the library as a named module after it loads.
What is the text configuration in requirejs-config.js used for?
The text configuration is used to set security request headers via the text.js file. Specifically, it enables setting the X-Requested-With header on cross-domain XHR requests where CORS would otherwise prevent it.
A mixin is written as what kind of JavaScript structure?
A JavaScript mixin in Commerce is written as an AMD module — it uses define() and returns a callback function that accepts the target component/module as an argument. It returns a new instance of the target with the mixin's modifications attached.
Which mixin directory scope affects only the Admin panel?
Mixins placed under view/adminhtml/web/js affect only the Admin panel area. The directory location under the view folder determines the mixin's scope.
After making changes to requirejs-config.js, what must be done?
After modifying requirejs-config.js, you must clean the cache and regenerate static files to ensure the updated configuration is picked up. Simply refreshing the browser is not sufficient because the old compiled configuration may be cached.
What does declarative notation using data-mage-init do when the JS component returns neither a function nor an object with the component name key?
When neither a function nor an object with the component name key is returned, the initializer searches for the component name in the jQuery prototype ($fn). If found, it applies it as $(element).componentName(config).
What type of notation should be preferred for better script execution control in PHTML templates?
Declarative notation is preferred because it provides better control over when scripts execute, allows leveraging existing JS classes, and avoids blocking page rendering.
What does the contentUpdated jQuery event trigger do when fired on an element?
Triggering .trigger('contentUpdated') on an element after dynamically injecting content signals the framework to re-parse any data-mage-init or x-magento-init declarations in the new HTML, initializing any JS components found there.
Where are jQuery UI components for frontend and base areas located?
All jQuery UI components for frontend and base areas are located in lib/web/jquery/ui-modules/. They can be referenced via the jquery-ui-modules path mapping — for example jquery-ui-modules/widget.
When extending a jQuery widget, which path should be used for frontend and base areas instead of jquery/ui?
For frontend and base areas, individual jQuery UI components should be imported using the jquery-ui-modules/ path — for example jquery-ui-modules/widget or jquery-ui-modules/slider.
To extend a default UI component (not a jQuery widget), what method does the custom script call?
To extend a default JS UI component, the custom script calls component_alias.extend({...}) where component_alias is the variable containing the imported default component from its module path.
If $(mage.apply) is added to a JS script, what does it enable?
Adding $(mage.apply) to a JS script enables the loading of default JS components and widget initialization at that specific stage in script execution. It is used when you need to trigger initialization at a particular point.
What is the recommended way to import a remote CSS file (like a Google Font) in a LESS source file?
To import a remote CSS file in a .less source file, you must use the url() notation: @import url('//fonts.googleapis.com/...'). This tells the application to skip the @import directive when resolving local resource paths.
What is the recommended way to include a font in theme CSS files for the fastest loading time?
For the fastest loading time, the recommended approach is to use the @font-face CSS rule to include web fonts in theme CSS files. This directly embeds the font declaration in the stylesheet.
When the application processes @magento_import, what does it replace the directive with?
During preprocessing, the @magento_import directive is replaced with standard @import directives that point to the specific files matching the name pattern across different module locations.
Where should the requirejs-config.js file be placed for a mixin declared in a frontend module?
The requirejs-config.js that declares a mixin must be placed in the same area-specific directory as the mixin file itself. For a frontend mixin at view/frontend/web/js/, the config goes in view/frontend/.
What happens if a mixin is declared with false as its value in requirejs-config.js?
Setting a mixin's value to false in the mixins configuration effectively disables or overwrites that mixin. This is the mechanism used when overwriting a mixin — the original mixin is set to false while the new one is set to true.
What is the full page cache (full_page) cache type responsible for storing?
The full_page cache type stores complete rendered HTML pages. It is recommended to keep this enabled as caching HTML significantly improves performance.
Which cache type should be cleaned after modifying layout files?
The layout cache type stores compiled page layouts — the merged result of all layout XML components. It should be cleaned after modifying any layout files to ensure changes are picked up.
What are examples of public content in Adobe Commerce caching?
Public content is stored server-side in the reverse proxy cache (Varnish, Redis, file system) and is available to multiple customers. Examples include header, footer, and category listing — content that is the same for all visitors.
Only which HTTP request methods are cacheable in Adobe Commerce?
Only HTTP GET and HEAD requests are cacheable per RFC-2616 section 13. POST requests are not cacheable because they are designed to send data and potentially change server state.
Where is a theme-independent logo stored after being uploaded via Admin?
When a logo is uploaded via Admin at Content > Design > Configuration, it is stored in /pub/media/logo/default/. This makes it independent of any specific theme.
What is a design exception used for in Adobe Commerce?
Design exceptions allow specifying a different theme for particular user-agents (identified by string or PCRE regex). This avoids needing to create separate store views just to serve a different theme to specific browsers or devices.
After applying a new theme in Admin, what path shows the theme was applied correctly?
The correct process to apply a theme is: go to Content > Design > Configuration, click Edit on the store view, select the theme in the Applied Theme dropdown, click Save Configuration, and then clear the cache if caching is enabled.
What happens to a theme's database record when the theme files are removed from the filesystem?
When theme files are removed, the default theme is automatically used, but the theme's database record is not automatically removed. This means the Admin may still reference the deleted theme entry.
Where is the registered theme path specified in registration.php?
The registration.php file uses ComponentRegistrar::THEME as the component type, and the path follows the pattern 'frontend/[Vendor]/[theme]' — for example 'frontend/ExampleCorp/orange'. The third argument __DIR__ points to the theme directory.
What is the view.xml file in a theme's etc directory used to configure?
view.xml in a theme's etc/ directory configures product image sizes and properties used on the storefront (width, height, type for various display contexts). It is required for themes with different image dimensions than their parent.
If a theme has a parent and both use default logo.svg naming convention, does the child theme need to declare its logo?
If a child theme has a logo with the same name and format as the parent's logo (logo.svg), no declaration is needed — it is automatically recognized. Declaration in layout XML is only required when the name or format differs from the convention.
When declaring a custom theme logo in layout XML, which block must be referenced?
To declare a custom theme logo, you must use referenceBlock name=logo in the extending layout file [theme_dir]/Magento_Theme/layout/default.xml, passing arguments for logo_file, logo_width, logo_height, and logo_alt.
Which of the following correctly shows an example of extending a page configuration layout file in a custom theme?
To extend a layout, place the file in [theme_dir]/[Namespace_Module]/layout/ using the same filename as the original. The application merges files automatically.
When overriding a base layout provided by a module, where is the override file placed?
To override a base layout (a module's own layout file), place it in [theme_dir]/[Namespace_Module]/layout/override/base/[filename].xml. This replaces the module's layout entirely rather than merging with it.
When overriding a parent theme's layout file, where is the override placed?
To override a parent theme's layout, the file goes in [theme_dir]/[Namespace_Module]/layout/override/theme/[Parent_Vendor]/[parent_theme]/. This structure targets the specific parent theme being overridden.
What are considered customization mistakes when overriding layouts?
According to the documentation, changing a block's name or alias while keeping it in the same parent is a customization mistake — it can break other modules referencing the original name. Similarly, changing page type parent handles is also a mistake.
What is a block in Adobe Commerce layout?
A block is a unit of page output that renders distinctive content for the end user. It is the link between a PHP block class (containing logic) and a template (rendering HTML). Blocks can have children and grandchildren.
What is a container in Adobe Commerce layout?
A container is a structure without content that holds other layout elements such as blocks and containers. It renders child elements during view output. An empty container with no child blocks is not displayed in HTML output.
When both before and after attributes are set on a layout element, which takes precedence?
When both before and after attributes are present on the same element, after takes precedence. The element is positioned after the specified sibling.
What happens when the before or after attribute value refers to a dash (-)?
Using a dash (-) as the before value positions the element before all other siblings of its nesting level. Using a dash as the after value positions it after all other siblings — effectively at the end.
In a PHTML template, should the template instantiate new objects directly?
Templates must not instantiate new objects within their code. All objects must be passed from the Block object. This keeps the template stateless — its sole responsibility is to display data received from the Block.
What library does the Blank theme use to apply CSS as inline styles in email templates?
Inline styling for email templates is provided by the Emogrifier library, which takes the HTML and CSS and injects all CSS styles into the style attributes of the HTML tags. This ensures compatibility with email clients that only support inline styles.
What is the email-fonts.less file responsible for in the Blank theme?
The email-fonts.less file in the Blank theme contains @font-face declarations for custom fonts. It is imported by _email-extend.less using an @import rule, and it itself imports the _variables.less and _typography.less files.
Why are email font files loaded via @import instead of being output directly in a style tag?
The font CSS is loaded via @import rather than being injected into a style tag because some email clients do not render text when the user is offline and web fonts cannot be fetched. Using @import allows clients to gracefully skip the font loading when offline.
What file in the Blank theme should be used for email styling variables that affect mixin output?
_email-variables.less is used to set variables that control the output of mixins used by _email-base.less. By overriding variables here, you can change the appearance of emails without modifying _email-base.less directly.
How are template-specific non-inline styles added to an HTML email template?
Template-specific non-inline styles are added inside a comment block in the email HTML template using the format: at-sign-styles on a new line, then the CSS rules, then the closing at-sign-styles. These are included in the template_styles variable output.
What is the maximum file size for an email logo in Adobe Commerce by default?
The default maximum file size for an email logo is 2 MB, though this can be changed by an admin.
What does the {{css}} directive do in an email template?
The {{css}} directive compiles the specified CSS/LESS file and outputs its contents inside a style tag in the email head. It is used for non-inline styles like media queries and hover pseudo-styles that cannot be inlined.
Where must the header and footer template directives appear in an email template to include the global header and footer?
The template directive with config_path pointing to the design/email paths is used to include the header and footer in email templates. Both the header and footer templates contain further directives for inline CSS and non-inline styles.
When an email is sent from a store configured with the fr_FR locale, what language are email strings displayed in?
The trans directive translates strings to whatever locale is configured for the store view sending the email. If the store view uses fr_FR, the emails are translated to French.
Which of the following is NOT a valid xsi:type for an argument in layout XML?
Valid xsi:type values for layout XML arguments include: string, boolean, object, number, null, array, options, url, helper. The type function is not a valid xsi:type.
When the shared attribute is set to false on an argument node in layout XML, what happens?
Setting shared=false on an argument node causes a new instance of the referenced object (view model or block) to be created each time, rather than sharing a single instance. The default since 2.3.2 is that view model instances are shared (shared=true).
How does a block access an argument named css_class set in layout XML within its template?
Arguments from layout XML can be accessed in templates using $block->getData('name') or via magic getter methods like $block->getCssClass() (camelCase conversion of the argument name). The hasData() method checks for existence.
What is a common customization pattern when extending parent theme styles instead of overriding them?
The standard pattern for extending parent theme styles is to create a _extend.less file in web/css/source within your custom theme. This file can override variables or add new rules without touching the parent theme's files.
What is the purpose of _module.less files in a module's CSS source directory?
_module.less files in a module's web/css/source directory contain styles specific to that module. They are picked up by the @magento_import directive in root source files, which includes them from all modules automatically.
To override a module's styles in a custom theme, where do you create the override file?
To override a module's styles in a custom theme, you place the override file in [theme_dir]/[Namespace_Module]/web/css/source/. This file overrides the specific module's _module.less and is picked up by the assets fallback mechanism.
What does the grunt clean command do during theme development?
grunt clean (typically grunt clean:[theme]) deletes preprocessed and published static files for the specified theme from pub/static and var/view_preprocessed. This forces a clean rebuild on the next page load.
What is the --clear-static-content optional parameter used for in several bin/magento commands?
The --clear-static-content optional parameter, available in commands like module:enable, module:disable, theme:uninstall, and module:uninstall, cleans generated static view files as part of that command's execution.
In the LESS coding standard, how should mixin parameters with default values be structured?
According to LESS coding standards, when creating mixins with parameters, always set default values for all parameters (placed in parentheses). This prevents issues when the mixin is called without specifying a value.
What does the double underscore __ prefix convention signal in LESS mixin naming?
The double underscore prefix in LESS mixin naming is used to signal grouping of related mixins. It is a naming convention to organize mixins that belong together logically.
Where should extends that are used in multiple files be placed according to LESS coding standards?
Extends that are used in multiple files should be specified in the theme's source/_extend.less file to centralize them. Local extends used only in one file stay in that file.
What is the full_page cache type code name used in CLI commands?
The cache type code for full page caching used in CLI commands is full_page — for example bin/magento cache:clean full_page. The friendly name is Page cache.
What is the block_html cache type responsible for?
The block_html cache type stores HTML page fragments per block. It should be cleaned after modifying the view layer (templates, etc.) when a full page cache flush would be excessive.
Which command displays the current status of all cache types?
The command bin/magento cache:status displays the current status (enabled or disabled) of all cache types. This is useful for quickly seeing what is cached and what is not without opening Admin.
How must the @magento_import path be specified relative to the calling file?
The @magento_import path must be specified relatively to the file where the directive is called, placed in either single or double quotes. It is best practice to include the file extension, though it can be omitted.
What is the translate cache type code name in Commerce?
The cache type code for translations is translate. It stores merged translations from all modules and should be cleaned when translation files change.
When customizing theme styles using the _extend.less file in server-side compilation mode, what must be done after each style change (besides refreshing the browser)?
In server-side mode with the _extend.less file, simple property changes (like color or font-size) often just require refreshing the page after clearing the static cache once. However, for more complex changes — like renaming, adding, or removing .less files — you must clear pub/static and var/view_preprocessed directories to force recompilation.
In client-side LESS compilation mode, when are simple changes visible?
In client-side LESS compilation mode, simple changes are visible immediately after saving the file and refreshing the page because the browser compiles LESS on every page load. No cache clearing or CLI commands are needed for basic property changes.
What is the FOUT issue associated with client-side LESS compilation mode?
FOUT stands for Flash of Unstyled Text — a visual issue where unstyled content appears briefly before the CSS (compiled from LESS in the browser) is applied. This is a known downside of client-side compilation mode.
Where is the LESS compilation mode setting configured in Admin?
The LESS compilation mode is configured at STORES > Settings > Configuration > ADVANCED > Developer > Frontend development workflow, where you select the Workflow type (client-side or server-side). The Store View dropdown should be set to Default Config.
Which of the following is NOT a valid option for the default caching mechanism storage in Adobe Commerce?
The default caching mechanism can store cache files in file system, database, or Redis. Elasticsearch is a search engine, not a supported cache storage backend for Commerce page caching.
What is the role of a reverse proxy in Adobe Commerce page caching?
A reverse proxy acts as an intermediary between visitors and the application. It serves cached content to users without the application needing to process requests each time, thereby reducing server load significantly.
In layout XML, what is the correct instruction to include a handle's layout instructions recursively?
The update instruction is used to include a layout handle: update handle='customer_account'. The specified handle's layout instructions are loaded and executed recursively.
What does the output attribute on a container control?
The output attribute on a container controls whether its children are rendered (1) or the entire output is disabled (0). This allows temporarily hiding sections of a page without removing them from the layout.
What is a key difference between the block vs container in terms of HTML output?
Blocks render HTML content through their associated PHP class and template. Containers only output an optional HTML wrapper tag (defined by htmlTag attribute) and render their children. A container does not have its own content — it is a structural element.
What is the correct location for a requirejs-config.js file placed in a theme?
The requirejs-config.js for a theme is placed in the theme root directory [theme_dir] itself, not inside web/js or other subdirectories. For a module-specific config within the theme, it goes in [theme_dir]/[module_dir].
What RequireJS configuration allows setting fallback URLs so if the first script fails to load, the next is used?
The paths configuration supports arrays: when a path is set to an array of sources, if the first script fails to load, the next source in the array is used as a fallback. This enables CDN with local fallback patterns.
What is the convention for naming a JS mixin file (though not strictly required)?
The convention is to name the mixin file by appending -mixin to the original module path. For example, if the target is vendor/module/js/component, the mixin would be vendor/module/js/component-mixin. This is a convention only — not a hard requirement.
When extending a jQuery widget via a mixin, what must the mixin function return?
When extending a jQuery widget via a mixin, the mixin function must register the extended widget under the parent alias (for example $.widget('mage.modal', targetWidget, mixin)) and return it (return $.mage.modal). This ensures the alias continues to work correctly after extension.
What does this._super() do inside a JS mixin method?
In a JS mixin, this._super() calls the original base method that the mixin is overriding. This allows the mixin to add functionality before or after the original behavior, or selectively call it.
What library is used to wrap JS functions or objects (not jQuery widgets) in a mixin?
The mage/utils/wrapper library provides the wrapper.wrap() and wrapper.wrapSuper() methods used to extend JS functions and objects in mixins. These methods allow adding functionality before/after the original function call.
Where are the default email template HTML files for the Sales module stored?
Default email templates are stored in [module_dir]/view/[area]/email/ — for the Sales module's frontend emails that would be in the Magento_Sales module directory under view/frontend/email/. For example, order_new.html lives there.
What is the relationship between the _email-variables.less and _email-base.less files?
_email-base.less uses mixins from the UI library, and _email-variables.less provides the variable values that control the output of those mixins. By overriding variables in _email-variables.less, you change the visual output of _email-base.less without modifying it.
What is the correct sequence for server-side LESS compilation when the Less preprocessor processes a CSS file included in layout?
The server-side Less preprocessor follows this exact sequence: (1) check if .css already exists — if yes, stop. (2) Find the .less file via fallback — if not found, stop. (3) Read and resolve @magento_import and @import directives. (4) Copy resolved files to var/view_preprocessed/less. (5) Compile with PHP Less compiler. (6) Publish .css to pub/static.
Which property of the paths configuration makes it different from the map configuration?
The key difference is that paths can alias any JS file, HTML template, or URL — including files that are not AMD modules. In contrast, map only works with real AMD modules that call define().
In the Less coding standard, properties within a single rule must each be on their own line. Which of the following is CORRECT formatting?
The correct LESS format puts each property on its own line with proper indentation, with a space after the colon and a semicolon at the end of each declaration. The ruleset opens on the selector line and closes on its own line.
What kind of content is private content in Adobe Commerce caching?
Private content is customer-specific personalized content stored client-side in the browser — examples include wishlist, shopping cart, customer name, and address. It should be a small portion of the total page content.
What is the recommended reverse proxy for full page caching in Adobe Commerce?
Adobe Commerce recommends using Varnish as the reverse proxy for full page caching. While the default built-in caching mechanism (file system, database, Redis) is available, Varnish provides superior performance for high-traffic stores.
What is the simplest file to create when you want to add new styles to a theme that inherits from Blank without modifying the parent?
_extend.less placed in web/css/source is the simplest approach for adding new styles to a child theme. You just add your LESS code there and it extends the parent without touching it. _theme.less is for overriding variables. There is no _override.less convention. styles-m.less is a root source file that should not be modified directly in a custom theme.
What does _theme.less in web/css/source do in a custom theme?
_theme.less is used to override default UI library variables from the parent theme. Your _theme.less overrides the parent _theme.less. The drawback is that you must manually copy all variables from the parent and monitor updates to the parent file when it changes. It does not add new rules directly or define breakpoints or compile CSS.
What is the precedence relationship between _extend.less and _theme.less in a custom theme?
The documented rule is that rules and variables declared in _extend.less always have precedence over ones declared in _theme.less. This means if both files declare the same variable or rule, the _extend.less version wins.
What is the recommended approach when Theme B inherits from Theme A which inherits from Blank and you want B to extend A without overriding it?
The documented solution is to create _extend-child.less in both the parent and child themes. Keep it empty in the parent and add an @import for it at the end of the parent's _extend.less. The child theme then adds styles in its own _extend-child.less. This prevents B from overriding A and instead extends the grandparent (Blank) properly.
To extend a specific module's styles in a custom theme where do you place the _extend.less file?
To extend a module's styles in a custom theme you place _extend.less in [theme_dir]/[Module_Name]/web/css/source/. For example to extend Magento_Review styles use [theme_dir]/Magento_Review/web/css/source/_extend.less. The theme root web/css/source is for theme-level styles not module-specific ones.
To override a specific module's styles completely in a custom theme what file do you create?
To override a module's styles you create _module.less in [theme_dir]/[Module_Name]/web/css/source/. This file overrides the _module.less of that specific module. If left blank no styles are applied for that component. _extend.less adds styles on top. _theme.less overrides variables. _override.less is not a valid convention.
To extend component styles (like buttons) in a structured way what is the correct pattern?
The structured approach is to create _buttons_extend.less for the button-specific styles and then register it in _extend.less with @import '_buttons_extend.less'. This keeps changes organized by component and makes the codebase easier to maintain. Editing the parent breaks upgrade safety.
To override component styles (like buttons) rather than extend them what file do you create?
To override parent theme button styles you create _buttons.less in web/css/source. This file directly overrides the parent theme's _buttons.less. If left blank no styles are applied for buttons. _buttons_extend.less is for extending not overriding. _buttons_override.less is not a valid convention.
When adding an external JS or CSS resource in layout XML what argument value is required?
When adding external resources (URLs) in the layout XML head section src_type="url" is mandatory. Without this argument value the application tries to treat the source as a local file path and fails to load it. This applies to external CSS fonts JS or any resource loaded from a URL.
What file defines the default head section (CSS and JS included in all store pages) in Adobe Commerce?
The default store page head (with CSS and JS includes) is defined in app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml. The recommended way to add resources is to extend this file in your custom theme. The other paths are either wrong or are different layout files.
What is the difference between using link src and script src in layout XML to include a local JS file?
Both instructions work for including a local JS file and both resolve the path the same way: [theme_dir]/web/js/sample.js when given js/sample.js. The choice between link and script is stylistic. The path is always relative to the declared base location for JS files which is [theme_dir]/web/js/.
What are conditional comments in layout XML head used for?
Conditional comments in layout XML (using the ie_condition attribute on a css element) generate IE-specific HTML conditional comment tags that load CSS files only for specific versions of Internet Explorer. They are not for developer mode CSS selection or LESS or debugging.
When removing a static resource that was added with a module path (like Magento_Catalog::js/sample.js) how must you specify it in the remove tag?
When a static asset was added with a module path (Magento_Catalog::js/sample.js) you must specify the same module path in the remove tag. Simply using the filename or path without the module prefix will not find and remove the correct resource.
Can JS files included via RequireJS (require/define) be removed using the layout XML remove instruction?
If JS files are called via the RequireJS approach (declared in require or define sections) they cannot be removed from layout XML using the remove instruction. The remove instruction only works for resources explicitly included in the head section via link or script layout instructions.
What command is used to view a list of all available indexers in Adobe Commerce?
The command bin/magento indexer:info displays a full list of all available indexers with their IDs and titles. indexer:status shows the current status of indexers (ready/reindex required). indexer:list and indexer:show are not valid commands.
What command shows the current operational mode (realtime or schedule) of all indexers?
bin/magento indexer:show-mode displays the current update mode (Update on Save or Update by Schedule) for all indexers or specified ones. indexer:status shows ready/invalid status not the mode. indexer:get-mode is not a valid command.
What does the bin/magento indexer:reindex command do?
indexer:reindex performs a one-time reindex of all or selected indexers. The documentation explicitly notes that to keep indexers up to date you must set up a cron job. It does not change modes or reset status.
What command is used to invalidate (reset) the status of indexers?
bin/magento indexer:reset invalidates the status of all or specified indexers marking them as needing reindex. indexer:reindex actually rebuilds the index. indexer:invalidate and indexer:clear are not valid commands.
What is the realtime mode for an indexer?
Realtime mode (also called Update on Save) means indexed data is updated immediately when a change is made in the Admin. For example the category products index is rebuilt after products are added to a category. This is the alternative to schedule mode which batches updates via cron.
What must be done before switching indexer modes to avoid database locks?
The documentation warns that before switching indexer modes you should set the website to maintenance mode and disable cron jobs to prevent database locks that could occur if both a mode switch and an automatic indexer update happen simultaneously.
What does the bin/magento indexer:set-status suspended command do?
The suspended status temporarily stops automatic cron-triggered updates for the specified indexer. This applies to both realtime and schedule modes. It is useful during intensive operations like data imports. Manual reindexing via indexer:reindex still works even for suspended indexers.
What status value marks an indexer as out-of-date prompting reindexing on the next cron run?
The invalid status marks indexers as out-of-date which prompts reindexing on the next cron run (unless they are suspended). The valid status indicates data is up-to-date. Suspended temporarily pauses automatic updates. Pending is not a documented status value.
What happens when you run bin/magento indexer:reindex on suspended indexers?
The documentation states that indexer:reindex reindexes all indexers including those marked as suspended. Suspension only affects automatic cron-triggered updates not manual reindexing. This makes it useful for performing manual updates while automatic ones are paused.
What is the minimum required version of ECE-Tools to apply the latest patches on Adobe Commerce Cloud?
The documentation specifies that the minimum required version of ECE-Tools to apply the latest patches is 2002.1.2. The Quality Patches Tool is a dependency for the Cloud Patches for Commerce and the ece-tools package so keeping ECE-Tools updated is essential for patch management.
In what order does ece-patches apply patches when you run ece-patches apply?
When running ece-patches apply patches are applied in this order: (1) Required patches from Cloud Patches for Commerce (2) Optional individual patches from Quality Patches Tool (3) Custom patches from the /m2-hotfixes directory in alphabetical order by patch name.
Where must custom patch files be placed for them to be applied on an Adobe Commerce Cloud project?
Custom patches must be placed in the /m2-hotfixes/ directory in the project root. All files in this directory must end with the .patch extension. ECE-Tools applies them automatically in alphabetical order by patch name during deployment after required and optional patches.
Where does the Quality Patches Tool log its operations?
The Quality Patches Tool logs all operations to [Project_root]/var/log/patch.log. This file is useful for auditing which patches have been applied reverted or encountered issues during the patching process.
How do you apply patches in a remote Cloud environment?
To apply patches in a remote Cloud environment you add the patch ID to the QUALITY_PATCHES variable in .magento.env.yaml then commit and push the file. The remote environment picks up the changes during the next deployment. Direct SSH patch application is not the recommended approach for Cloud environments.
What does php ./vendor/bin/ece-patches revert do in a local environment?
Running php ./vendor/bin/ece-patches revert in a local environment reverts all previously applied patches in this specific order: (1) Custom patches from /m2-hotfixes (2) Optional individual patches (3) Required patches. It cannot revert individual patches - it reverts all of them.
What type are all patches from the Cloud Patches for Commerce package for Cloud customers?
All patches from the Cloud Patches for Commerce package are Required for Cloud customers. They cannot be skipped during deployment. In contrast patches from the Quality Patches Tool are Optional (low-impact quality fixes as individual patches with no backward incompatible changes).
What does a Deprecated patch status mean in the ece-patches status output?
A Deprecated patch status means the individual patch has been marked as deprecated. The recommended action is to revert it. After reverting a deprecated patch it will no longer appear in the status table. A recommended replacement patch is usually listed in the details column.
What does the Commerce CLI command bin/magento list do?
bin/magento list (or the full path [magento_root]/bin/magento list) lists all available installation and configuration commands available in the CLI. This is useful for discovering available commands. Commands for disabled modules do not display in this list.
Who must run all Magento CLI commands according to the documentation?
The documentation explicitly warns that all Magento CLI commands must be run by the file system owner. You can switch to the file system owner using su or sudo -u before running commands. This is a security and permissions requirement.
What is the correct way to run CLI commands from any directory on the Commerce server?
The recommended approach to run CLI commands from any directory is to add [magento_root]/bin to your system PATH. You can also optionally cd to [magento_root]/bin and use ./magento or use the full absolute path [magento_root]/bin/magento but adding to PATH is most convenient.
What does the Compilation Mode topic recommend as a prerequisite before customizing LESS styles?
Before customizing LESS styles the compilation mode documentation states you must: (1) Create a theme specifying Luma or Blank as parent in theme.xml (2) Apply your theme in the Admin. These two steps are prerequisites before working on style changes regardless of which compilation mode you choose.
What is the path for the _extend.less file used for simple theme style customization?
The _extend.less file for theme customization must be at [theme_dir]/web/css/source/_extend.less. The examples in the compilation mode topic all use this path. Other paths would not be picked up by the LESS preprocessing system.
In server-side compilation mode with Grunt which three commands are run together to start the workflow?
The server-side compilation mode with Grunt workflow requires running: (1) grunt exec:[theme] (2) grunt less:[theme] (3) grunt watch - then after the watch is running you can make changes and they will be detected and compiled automatically.
What happens in server-side compilation mode when you want to change styles that require adding or removing imported LESS files?
For more complex changes in server-side mode (such as adding removing or renaming imported .less files) you must delete all files in pub/static/frontend/[vendor]/[theme] and var/view_preprocessed/pub/static/frontend/[vendor]/[theme] then refresh. Simple property changes may only require a cache clear and refresh.
What is the full path for the compiled requirejs-config.js that aggregates all module configurations?
The compiled requirejs-config.js that aggregates configurations from all modules and the current theme is located at pub/static/frontend/[Vendor]/[theme]/[locale]/requirejs-config.js. This is the file you open when debugging JS component paths. The individual source files are in theme and module directories.
What does the translate attribute do on a layout XML argument node?
The translate attribute on a layout XML argument node (set to true or false) specifies whether that string argument should be translatable - i.e. whether it will be processed by the translation system. This allows layout-defined strings to appear in translation dictionaries.
What interface must a class implement to be used as an object type argument in layout XML?
When using xsi:type="object" in a layout argument the referenced class must implement Magento\Framework\View\Element\Block\ArgumentInterface. This ensures the object is compatible with the block argument system. OptionSourceInterface is for options-type arguments not object-type.
What interface must a class implement to be used as an options type argument in layout XML?
For xsi:type="options" arguments the referenced class must implement Magento\Framework\Data\OptionSourceInterface. This is the interface for providing select option arrays. ArgumentInterface is for object-type arguments. The other options are unrelated interfaces.
What is the url argument type used for in layout XML?
The url argument type (xsi:type="url") is used to generate a store URL from a route path like checkout/cart/index. It can include optional URL parameters via child param elements. This is more robust than a plain string because it respects the store's base URL and URL structure.
What does the helper argument type allow in layout XML?
The helper argument type (xsi:type="helper") allows specifying a Helper class and method to call during layout processing. The method result becomes the argument value. Parameters can be passed via child param elements. Only public methods can be used.
Which of the following is NOT a valid xsi:type for a layout XML argument?
Valid xsi:type values include string boolean object number null array options url and helper. function is not a valid xsi:type. JavaScript functions cannot be represented as PHP-side layout XML argument types. The types map to PHP data structures and callables not JS constructs.
What is the arguments element's role in layout XML?
The arguments element is a required container that wraps one or more argument elements. It does not have its own attributes. Without this container argument elements cannot be used. It simply groups arguments together for passing to a block or referenceBlock.
How does the magic method getter work for layout XML arguments in templates?
Layout XML arguments can be accessed via magic getter methods that automatically convert the argument name to CamelCase. For an argument named some_string the magic method is getSomeString(). This is equivalent to getData('some_string'). The conversion applies to all xsi:types not just strings.
What is the class attribute default value for a block in layout XML?
The default class for a block in layout XML is Magento\Framework\View\Element\Template. If the class attribute is omitted this default class is used. This class provides basic template rendering functionality without additional business logic.
Why does the documentation recommend always adding a name to blocks?
The documentation specifically recommends always naming blocks for two reasons: (1) unnamed blocks get random ANONYMOUS_n names making them hard to reference and (2) a name is required to make a block non-cached using cacheable="false". Named blocks can be reliably targeted by referenceBlock and other layout instructions.
What is the as attribute on a block or container element?
The as attribute provides an alias name that identifies the block or container in the scope of its parent element. Child templates can reference this alias. It follows the same character rules as name (alphanumeric underscore period dash case-sensitive) but serves as a local reference within the parent context.
What is the class attribute on a layout block element?
The class attribute on a layout block element specifies the fully-qualified PHP class name whose object is responsible for rendering the block output. This class contains the business logic for the block. The template handles the HTML rendering while this class provides the data.
What happens when the display attribute is set to false on a block versus removing it?
Setting display=false prevents rendering but the PHP class is still loaded making the block available programmatically. remove=true completely removes the block and its PHP class is not instantiated. The documentation explicitly notes this difference and also states that when remove=true is set display is ignored.
What is the htmlTag attribute used for on a container?
The htmlTag attribute on a container specifies the HTML element (div header footer section etc) that wraps the container's children when rendered. Combined with htmlClass this allows containers to output semantic HTML wrapper elements. Without htmlTag the container outputs no wrapper element.
What is the Catalog Search Fulltext indexer ID used in CLI commands?
The correct indexer ID for Catalog Search is catalogsearch_fulltext. This is the exact string used in CLI commands like indexer:reindex catalogsearch_fulltext. Using incorrect IDs will result in an error.
What happens to database triggers when the indexer mode is changed from schedule back to realtime?
The documentation explains that database triggers are added when mode is set to schedule and removed when set to realtime. If triggers are missing from the database while indexers are on schedule mode the fix is to change to realtime then back to schedule to reset (recreate) the triggers.
What does the bin/magento indexer:set-status valid command require caution about?
Setting an indexer status to valid from suspended or invalid requires caution because this action can lead to performance degradation if there is accumulated unindexed data. The system believes the index is up-to-date but it may not be. Always ensure data is accurately indexed before manually setting status to valid.
In the _extend.less pattern for child themes what is kept in the parent theme's _extend-child.less?
The key to the _extend-child.less pattern is that the parent theme's _extend-child.less is kept empty. The parent adds @import '_extend-child.less' at the end of its _extend.less. This way child themes can add styles in their own _extend-child.less files without overriding the parent's _extend.less.
What is the drawback of using _theme.less for overriding parent styles?
The documented drawback of the _theme.less approach is that you must copy all variables from the parent _theme.less (including those you will not change) and you must monitor and manually update your files whenever the parent's _theme.less is updated. This creates maintenance overhead.
What is the xsi:type value used for passing a PHP null value as a layout argument?
The correct xsi:type for passing a PHP null value is xsi:type="null". The syntax is: argument name="null_value" xsi:type="null" (self-closing no content needed). empty none and void are not valid xsi:type values in this context.
What is the correct xsi:type for an argument that contains an array of items?
The correct xsi:type for array arguments is xsi:type="array". Child item elements define the array contents each with their own name and xsi:type. list collection and items are not valid xsi:type values for layout XML arguments.
How can a custom JS component be made available in all themes and modules (not just one specific theme)?
A JS component placed in [module_dir]/view/frontend/web/js/ is available in all modules and themes as long as the module is enabled. Placing it in [theme_dir]/web/js/ limits it to that theme and its children. lib/web is for library files. pub/static is generated output.
What is the primary reason to keep JS dependencies to a minimum when writing custom JS?
The documentation explicitly states: when using custom JS try to keep dependencies to a minimum because additional dependencies demand more web requests which can slow rendering. This is a core frontend performance principle - each additional RequireJS dependency may trigger an additional HTTP request if not already bundled.
In the assets fallback mechanism when resolving a script with module context (like Magento_Catalog/js/list) where is it searched first?
When a module context is specified in a script name the fallback searches: (1) [theme_dir]/[Namespace]_[Module]/web/ (current theme module) (2) Same location in the parent theme files (3) [module_dir]/ (the module directory itself). For example Magento_Catalog/js/list resolves to Magento_Catalog/view/frontend/web/js/list.js if not found in theme directories.
What does the class attribute on a layout block element default to if omitted?
If the class attribute is omitted from a block element the default is Magento\Framework\View\Element\Template. This base template class provides standard template rendering without additional custom logic. It is sufficient for blocks that only need to render a template with passed arguments.
What suffix does the Blank theme use for its base email stylesheet file that contains the majority of email styles?
_email-base.less in the Blank theme's web/css/source/ directory contains the majority of email styles including resets layout and typography. It is not the entry point file (that is email.less or email-inline.less) but rather the main source of email styling rules used by both inline and non-inline output.
What does email-inline.less do in the Blank theme?
email-inline.less imports necessary files and outputs the styles that are applied as inline CSS to email elements via the Emogrifier library. It is the entry point for inline styles. email.less is for non-inline styles. _email-extend.less is for customization. _email-variables.less contains variables.
What does email.less do in the Blank theme?
email.less in the Blank theme imports necessary files and outputs styles that go into a style tag in the email head section (non-inline styles). These include styles that cannot be inlined like media queries and hover states. email-inline.less handles the inline styles.
What is the purpose of the Namespace_Module/web/css/source/_email.less file in individual modules?
The _email.less file in individual module CSS source directories contains styles specific to that module for emails. This mechanism also allows third-party extensions to include their own email styles that will be automatically included in both the inline and non-inline CSS output through the @magento_import system.
What CSS property types CANNOT be applied as inline styles in email templates and must go in a style tag instead?
The documentation explicitly states that media queries and :hover pseudo-styles cannot be applied inline. These CSS features require being in a style tag to function. This is why emails have both inline styles (for broad compatibility) and a style tag (for advanced CSS that cannot be inlined).
What does the module_dir in the assets fallback refer to?
In the assets fallback mechanism [module_dir] refers to the module's actual directory which could be in app/code/ vendor/ or any other registered module location. The fallback does not assume a specific root directory for modules.
In the Blank theme what is the mobile breakpoint value for @screen__m and what does exceeding it trigger?
@screen__m is 767px. In the Blank and Luma themes when the viewport width is more than 767px this breakpoint switches to the desktop view. Styles for widths above 767px are compiled into styles-l.css while styles for 767px and below go into styles-m.css.
What is the @screen__xl breakpoint value in the Blank and Luma themes?
The @screen__xl breakpoint is 1440px in the Blank and Luma themes. The full breakpoint ladder is: @screen__xxs 320px @screen__xs 480px @screen__s 640px @screen__m 767px @screen__l 1024px @screen__xl 1440px.
In the mobile-first approach used by Blank and Luma which stylesheet handles base mobile styles?
In the mobile-first approach used by Blank and Luma styles-m.less handles base and mobile-specific styles (viewport 767px and below). styles-l.less handles desktop-specific styles (above 767px). There are no styles-base.less or mobile.less files in this system.
What does the .media-width() mixin @break parameter do?
The @break parameter in .media-width() sets the pixel value of the breakpoint used in the media query condition. You provide a LESS variable like @screen__m (767px) and the mixin generates the corresponding media query with that value. The @extremum parameter controls whether it is min-width or max-width.
Which media queries are compiled to styles-m.css by the .media-width() mixin?
The documentation states that @media-common max screen__s and max screen__m media queries are compiled to styles-m.css. Queries using min extremum (min screen__m and min screen__l) go to styles-l.css. This separation ensures mobile devices only load the styles they need.
Why is it recommended to use .media-width() and style groups separation when inheriting from Blank or Luma?
The documentation warns that if a theme inherits from Blank or Luma and does NOT use .media-width() and @media-common style group separation style rules will be added twice - once to styles-m.css and once more to styles-l.css. Using the proper mixin system ensures each rule appears in only the correct output file.
What is the @media-target variable used for in LESS responsive design?
The @media-target variable is used in conditional when blocks for native @media queries - particularly useful for tablet ranges. Values include 'mobile' 'desktop' and 'all'. For example using & when (@media-target = 'desktop') ensures native media query rules for tablets are only included in the appropriate output file.
What does the link src="js/sample.js" instruction in layout XML resolve to?
Using link src="js/sample.js" resolves to [theme_dir]/web/js/sample.js. If you use link src="sample.js" (without the js/ subdirectory) it resolves to [theme_dir]/web/sample.js. The js/ prefix is needed to resolve to the web/js directory which is the standard location for JS files.
Where are font-related files stored in a theme according to the layout XML asset path conventions?
Font-related files are stored in [theme_dir]/[Namespace]_[Module]/web/fonts/. This is a module-scoped directory within the theme. The theme-level web/fonts/ is used for general theme fonts while module-scoped fonts go in the module directory within the theme.
What is the meta tag og: type used for in the layout XML head block?
The class that renders meta tags in Commerce can render five types including og: which is for Open Graph meta tags used for social media sharing (Facebook Twitter etc). The other types are charset content_type x_ua_compatible media_type and a default catch-all.
What are the five meta types that the Magento meta renderer class handles natively?
The default meta renderer class handles: og: (Open Graph) charset content_type x_ua_compatible and media_type plus a catch-all default for other meta types. Understanding these allows developers to correctly use the meta tag system in layout XML.
What is the src_type="url" argument used for in head CSS or JS includes in layout XML?
The src_type="url" argument is required when including external resources (hosted at a URL like a CDN or external service). Without it Commerce tries to treat the value as a local file path. This argument tells the system to render the URL as-is in the HTML link or script tag.
What does it mean when a patch has status N/A in the ece-patches status output?
In the ece-patches status output the N/A status means the status of the patch cannot be defined due to conflicts. This might happen when patch dependencies are not met or when the patch conflicts with another applied patch. It requires investigation to resolve.
What happens to required patches when you upgrade to a new version of Adobe Commerce?
The documentation notes that after upgrading to a new version of Adobe Commerce you must re-apply patches if those patches are not included in the new version. Patches from previous versions do not automatically carry over to new versions - the QUALITY_PATCHES variable in .magento.env.yaml must be maintained.
What does the Cloud Patches for Commerce package deliver?
The Cloud Patches for Commerce package delivers Required patches with critical fixes. These are mandatory for Cloud customers and cannot be skipped during deployment. The Quality Patches Tool delivers the optional low-impact quality fixes as individual patches.
Where should you test patches before deploying to the Production environment in Adobe Commerce Cloud?
The documentation strongly recommends testing all patches in Integration or Staging environments before deploying to Production. The warning applies specifically to applying patches in remote environments. Local testing alone is not sufficient before going to Production.
What is the CSS class attribute on a block NOT used for?
The class attribute on a layout block element is about the PHP class that renders the block - NOT a CSS class for styling. It specifies the fully-qualified PHP class name. For CSS classes on the container HTML wrapper you use the htmlClass attribute on a container element.
What does Magento\Framework\View\Element\Template default block class provide?
The default block class Magento\Framework\View\Element\Template provides standard template rendering without additional custom business logic. It is the base class sufficient for blocks that simply need to render a PHTML template with arguments passed from layout XML. Custom blocks extend this class to add business logic.
You are registering a new storefront theme located at app/design/frontend/MyCompany/mytheme. Which registration.php implementation is correct?
The first argument must be ComponentRegistrar::THEME not MODULE. The path must start with frontend/ followed by Vendor/theme. Option B omits the area prefix entirely. Option D uses storefront/ which is not a valid Magento area name.
You are registering a custom Admin theme located at app/design/adminhtml/MyCompany/myadmintheme. Which registration.php is correct?
Admin themes use the adminhtml/ area prefix in the path. Option A uses frontend/ which is for storefront themes. Option C uses MODULE instead of THEME. Option D uses admin/ which is not the correct area name for Magento Admin themes.
You are writing theme.xml for a new theme called My Theme that inherits from Magento/blank. Which implementation is correct?
The correct elements are <title> for the name and <parent> for inheritance. The schema must be urn:magento:framework:Config/etc/theme.xsd. Option A uses <extends> which is not valid. Option C uses <name> instead of <title>. Option D uses the wrong schema which belongs to layout files.
You want to add a custom favicon of 32x32 pixels to your theme. Which default_head_blocks.xml implementation is correct?
The correct element is <link> with src not href and rel=""icon"" with a sizes attribute. Option A uses a non-existent <favicon> element. Option C uses href instead of src which is incorrect in layout XML. Option D uses a non-existent <icon> element.
You need to make the Magento_Customer_Block_Form_Edit block uncacheable. Which layout XML is correct?
The correct attribute is cacheable=""false"" on the <block> element. The attribute names uncacheable cache and cached do not exist in layout XML for this purpose. Only cacheable=""false"" is recognized by the system to mark a block as uncacheable.
You are configuring product images in view.xml and want category grid images to be 250x250 pixels. Which implementation is correct?
Width and height are declared as separate child elements. The module must be Magento_Catalog not Magento_Theme. The type for small images is small_image not small. There is no <size> element in view.xml image configuration.
You want to set the JS bundle size to 1MB in your theme's view.xml. Which implementation is correct?
The module name must be Js_Bundle and the variable name must be bundle_size inside a <vars> element. Option A uses the wrong module name JavaScript. Option B uses <config> which is not the correct element. Option C uses size instead of bundle_size as the variable name.
You are excluding a specific jQuery file from JS bundling in view.xml. Which implementation is correct?
The correct element inside <exclude> is <item> with type=""file"". The element name must be <item> not <file> <js> or <asset>. The Lib:: prefix with double colon notation is correct for library files.
You want to exclude the entire Magento_Ui::js/grid directory from JS bundling. Which is correct?
Directory exclusions use type=""directory"" on the <item> element. The values dir folder and path are not valid type attribute values. Only file and directory are the two valid type values for <item> elements inside <exclude>.
You are writing di.xml to apply a custom Admin theme called MyCompany/mytheme. Which implementation is correct?
The correct class is Magento\Theme\Model\View\Design and the argument name is themes with xsi:type=""array"" containing an item named adminhtml. Option A targets a non-existent class. Option C uses a single string argument named theme instead of an array named themes. Option D uses a preference which is for class substitution not theme configuration.
You want to declare a 300x300 custom logo called my_logo.png in your theme layout. Which implementation is correct?
The argument name for the file is logo_file and width and height use xsi:type=""number"". Option B uses <block> which creates a new block instead of referencing the existing one. Option C uses logo_src which is the Admin theme argument name not the storefront one. Option D uses xsi:type=""string"" for a numeric width value.
You need to remove the copyright block from your theme layout. Which is correct?
To remove an existing block you use <referenceBlock> with remove=""true"". You cannot set remove on a <block> declaration element. There is no self-closing <remove/> child element. Setting display=""false"" hides the block but does not remove it from the layout entirely.
You want to apply the layout handle catalog_product_opengraph in a layout file. Which is correct?
The correct element for applying a layout handle is <update handle=""...""/>. Elements like <include> <layout> and <apply> are not valid layout XML instructions for this purpose.
You are adding a CSS file reference to the page head in a layout file. Which is correct?
Inside a layout <head> element CSS files are added using <css src=""...""/>. Option A uses <link rel=""stylesheet""> which is for external resources or favicons not internal CSS files. <style> and <asset> are not valid layout head elements.
You are writing composer.json for a new frontend theme called mytheme by MyCompany. Which name field is correct?
The Composer package name for a theme must follow the format <vendor>/theme-<area>-<themename>. For a frontend theme this means MyCompany/theme-frontend-mytheme. Option A omits the theme- prefix and area. Option B omits the area. Option D uses an entirely wrong structure.
You are writing composer.json for a theme. Which type value is correct?
Magento themes must declare ""type"": ""magento2-theme"" in composer.json. magento2-module is for extension modules. magento2-library is for shared libraries. magento2-component is not a valid Magento Composer package type.
You are writing the autoload section of composer.json for a theme. Which is correct?
The files autoload type ensures Composer executes registration.php on startup which triggers theme registration. classmap is for mapping classes to files. psr-4 and psr-0 are namespace-based class autoloaders and are not appropriate for executing a registration script.
You need to configure product video options in config.xml. Which structure is correct?
The configuration must be wrapped inside <default> which represents the default store scope. Omitting <default> or using <store> changes the scope incorrectly. The root element is <config> not <configuration> and the section is <product_video> not <video>.
You want to override the minicart template in your Orange theme for the SampleCompany vendor. Which file path is correct?
The override path must mirror the original module structure. The module directory Magento_Checkout comes first then templates/ then the subdirectory cart/ preserving the original path. Placing templates/ before the module directory or omitting the cart/ subdirectory both break the override.
You want to override the base module layout for catalog_product_view.xml in your theme. Which path is correct?
Base module layout overrides must go in <theme_dir>/<Module>/layout/override/base/. Both layout/ and override/base/ are required in the path. Placing override/ outside layout/ or omitting layout/ entirely are both incorrect structures.
You want to extend the default.xml layout for Magento_Theme in your child theme to remove the copyright block. Which path and content is correct?
The module directory Magento_Theme comes before layout/ in the path. The content uses <referenceBlock> with remove=""true"" which is the correct way to remove an existing block. Option A reverses layout/ and Magento_Theme. Option C adds an unnecessary override/ directory. Option D uses <block> which cannot remove an existing block.
You want to override a parent theme layout for Magento_Catalog in your child theme called orange_winter inheriting from orange by SampleCompany. Which path is correct?
To override a parent theme layout the file goes in <theme_dir>/<Module>/layout/override/theme/<ParentVendor>/<parent_theme>/. Option A is for overriding module base layouts. Option B is for extending layouts. Option C has the wrong directory order placing override/ before layout/.
You are configuring the background color of product images in view.xml. Which syntax is correct?
The background property uses the array format [R, G, B] — for example [255, 255, 255] for white. Hex notation (#FFFFFF), comma-only format (255,255,255), and rgb() CSS functions are not valid in view.xml.
You want to configure images in view.xml so that images smaller than required are not enlarged. Which property and value is correct?
The constrain property when set to true prevents the system from enlarging images that are smaller than the configured dimensions. aspect_ratio preserves proportions. frame controls cropping. transparency controls background transparency. None of the others prevent upscaling.
You are writing a layout file to declare a custom Admin theme logo called custom-logo.svg with width 150 and height 80. Which referenceBlock arguments are correct?
For the Admin theme logo the argument name for the image path is logo_image_src. Width and height use xsi:type=""number"". Option A uses logo_file which is the storefront theme argument name. Option C uses logo_src and xsi:type=""string"" for a numeric width. Option D uses non-existent argument names logo_image and width.
You want to enable JS bundling on a production instance. Which sequence of CLI commands is correct?
JS bundling requires production mode first. Then enable bundling minification URL signing and disable merging in that order. Deploy static content and clean config cache last. Option A skips production mode and most required steps. Option C enables merging which conflicts with bundling. Option D uses developer mode where bundling does not work.
You need to move a block called product.info.sku before product.info.price inside the product.info.main container. Which layout XML is correct?
The <move> element uses the element attribute for the block to move destination for the container and before/after to position it. Option B uses referenceBlock which modifies an existing block but does not have a position-relative-to-sibling feature in this syntax. Option C creates a new block. Option D moves the wrong block.
You are creating a theme that inherits from Magento/blank. You want to override the background image used in the Orange theme at web/images/background.jpg. Where do you place your new file?
Static file override works by placing a file with the identical name and extension at the same relative path in the child theme. The system finds the child theme file first in the fallback. Using a different filename or adding override/ or static/ to the path will not trigger the override.
You want to add LESS styles for a new slider component inside a custom module. Which file path follows best practices?
Module-specific styles should live inside the module at app/code/<Vendor>/<Module>/view/frontend/web/css/source/components/ so they are only loaded when the module is active. Placing them in the theme means they always load. The vendor/ directory should not be edited directly.
You are writing a custom module that must load after Magento_Theme. Which module.xml snippet is correct?
Module load order is declared using the <sequence> element. Elements like <depends> <requires> and <loadAfter> are not valid in Magento module.xml for this purpose.
You want to verify your new theme is registered in the system after adding it to the filesystem. What do you do and where do you check?
Opening any Admin page triggers the registration process which adds the theme to the database. You then verify it appears in Content > Design > Themes. There is no bin/magento theme:list command. setup:upgrade is for module updates. pub/static/ is the static file output directory not a registration indicator.
You have made changes to a .less file in your theme using server-side compilation. What must you do to see the changes on the frontend?
After modifying LESS files in server-side compilation mode you must delete the previously compiled files in pub/static and var/view_preprocessed then reload. The browser cache alone does not hold the compiled CSS. setup:upgrade is for component updates. cache:clean layout only clears the layout cache type.
You want to configure the Orange theme to inherit from Blank. Which theme.xml parent declaration is correct?
Parent themes are referenced using the Vendor/theme format so the correct value is Magento/blank. Using lowercase blank alone Magento_Blank with underscore or including the area prefix frontend/ are all invalid formats.
You want to check which application mode is currently active. Which command do you run?
The command bin/magento deploy:mode:show displays the currently active application mode. The other commands check cache status show configuration values or are not valid Magento CLI commands.
You want to delete all compiled static files for the pub/static directory without deleting .htaccess. Which command is correct?
The command rm -r pub/static// removes all files inside pub/static subdirectories while leaving the .htaccess hidden file untouched because the wildcard pattern does not match hidden files. Using -rf on the directory directly would also delete .htaccess.
You want to clear the var/view_preprocessed directory. Which command is correct?
The correct command is rm -r var/view_preprocessed/* which clears the contents while leaving the directory itself. Using -rf without a wildcard on the path would delete the directory entirely which is more destructive than necessary.
You want to enable template hints from the CLI. Which command and follow-up step is correct?
The correct command is bin/magento dev:template-hints:enable followed by clearing the cache with bin/magento cache:clean config full_page. Restarting Apache is not required. The other command formats are not valid Magento CLI commands.
You want to access template hints on the storefront using URL Param mode. What do you append to the URL?
When URL Param mode is active you must add ?templatehints=magento to the storefront URL. The other query string values are not recognised by the system for this feature.
You want to configure the transparency property for a product image in view.xml so the transparent background is preserved. Which is correct?
Boolean properties in view.xml image configuration use the values true and false as strings. Setting transparency to true preserves transparent backgrounds. The values 1 yes and false would either not work or produce the opposite result. false would remove transparency and apply a white background.
You want to find which CSS file defines the minicart-wrapper class in the Blank theme. After searching in <theme_dir>/web/css/ with no results what is the next location to search?
The CSS fallback scheme after the general theme styles directory moves to module-specific theme styles at <theme_dir>/<Namespace>_<Module>/web/css/. Since the minicart belongs to Magento_Checkout the next search location is <theme_dir>/Magento_Checkout/web/css/. Parent theme styles and module styles come later in the fallback.
You want to configure a product image so it is not cropped even when dimensions are constrained. Which property combination is correct?
Setting aspect_ratio to true preserves proportions and setting frame to true prevents cropping. The frame property only takes effect when aspect_ratio is true. Setting frame to false with any aspect_ratio value would allow cropping. Option B would allow distortion because aspect_ratio is false.
You have applied a theme in Admin but changes are not visible after clearing cache. What is the correct troubleshooting step?
When cache clearing is not enough you must delete all files in pub/static/frontend and var/view_preprocessed to force the system to regenerate all static and preprocessed files from scratch. Re-applying the theme setup:upgrade and switching modes are not the correct troubleshooting steps for this issue.
You want to add a design exception to serve a different theme to mobile user-agents. Where do you configure this in Admin?
Design exceptions are configured at Content > Design > Configuration. You click Edit on the store view record then go to the Design Rule tab and click Add New User Agent Rule. The other paths do not lead to this feature.
You are writing config.xml for a module. Which xsi:noNamespaceSchemaLocation value is correct?
config.xml uses urn:magento:module:Magento_Store:etc/config.xsd. The theme.xsd is for theme.xml. The ObjectManager schema belongs to di.xml. The page_configuration schema belongs to layout files.
You want to set the image type for a product's base image in view.xml. Which type value is correct?
The type value image corresponds to the Base Image role in the Admin product editor. small_image maps to the Small Image role. thumbnail maps to the Thumbnail role. swatch_image maps to the Swatch Image role.
You want to deploy static content in production mode and force deployment even if not in production mode. Which command is correct?
The -f flag forces static content deployment in any mode and removes all symlinks deploying actual files. The --force long option is not the documented flag for this specific behavior. The other command formats are not valid Magento CLI commands.
You want to add translation support to a template. Which PHP syntax is correct?
The correct syntax wraps text in the __() translate function using the short echo tag. Plain echo without the translate function will not be processed by the translation system. translate() and $this->translate() are not the correct function names in Magento templates.
You are adding a new storefront theme and want to declare it with a preview image. Which complete theme.xml is correct?
The preview image is declared inside <media><preview_image>path</preview_image></media>. The schema declaration is required on the <theme> element.
You want to apply the custom Admin theme after writing di.xml. Which sequence of commands is correct?
After modifying di.xml for the Admin theme you must run bin/magento setup:upgrade to apply component changes then if prompted run bin/magento setup:di:compile to recompile DI configuration and finally bin/magento cache:clean. Running only cache:clean or only setup:upgrade is not sufficient.
You want to install a third-party theme manually. Which steps are correct in order?
Manual installation requires the directory structure to be <VendorName>/<theme> which you then copy to app/design/frontend/. Opening or reloading any Admin page registers the theme. Composer install goes to vendor/ not a manual copy. pub/static/ is the output directory not the source location.
You want to uninstall a manually added theme called MyCompany/mytheme from the database using MySQL. Which command is correct?
The correct SQL uses DELETE filtered by theme_path='MyCompany/mytheme' and area='frontend' with LIMIT 1. Option A uses theme_name which is not the correct column. Option C uses DROP TABLE which would destroy the entire table. Option D uses UPDATE to disable rather than delete the record.
You want to check the status of all cache types. Which command is correct?
The command bin/magento cache:status shows the enabled or disabled status of all cache types. The alternatives list show and info are not valid cache subcommands in Magento CLI.
What is a theme in Adobe Commerce?
A theme is a frontend component responsible for the visual design of an entire application area. It works through a combination of custom templates layouts styles and images. It is not related to business logic database configuration or JavaScript libraries.
What are the two design themes provided out of the box?
Adobe Commerce ships with Luma which serves as a demonstration storefront theme and Blank which is the recommended foundation for building new custom themes. No other default themes are provided out of the box.
What is the Blank theme intended for?
Blank is specifically designed as a starting point for creating new custom themes. Luma is the demonstration theme. Blank is not meant to be used directly on live stores or for Admin styling.
What is the Luma theme intended for?
Luma is a demonstration theme showing what a complete storefront can look like. It is not recommended as a base for custom development. Blank is the correct base for custom themes.
Why should you not edit the Luma or Blank theme files directly?
Editing default theme files directly is risky because platform upgrades can overwrite those files with newer versions causing you to lose your customizations. The correct approach is to create a child theme instead.
Can a custom theme be standalone without inheriting from another?
A custom theme can be either standalone with no parent or it can inherit from any existing theme. There is no requirement to inherit from any specific theme and the installation method has no effect on this.
What is theme inheritance used for?
Theme inheritance lets you build on an existing theme by only overriding the files you need to change. The rest are inherited automatically reducing the amount of work needed and making maintenance easier.
Is there a limit to how many levels of theme inheritance are allowed?
The theme inheritance system has no documented depth limit. You can have as many levels of parent-child inheritance as needed.
What mechanism guarantees that if a file is not found in the current theme it is found elsewhere?
The fallback mechanism is the system that searches for view files in a predefined order starting from the current theme moving to ancestor themes then module files and finally the library. It guarantees a file is always resolved.
What is the conventional directory for storefront themes?
Storefront themes are conventionally placed under app/design/frontend/<Vendor>/. Themes installed via Composer end up in vendor/ but the conventional custom development location is app/design/frontend/.
What is the conventional directory for Admin themes?
Admin themes follow the same structure as storefront themes but are placed under app/design/adminhtml/<Vendor>/ instead of the frontend directory.
Which two files are always required in a storefront theme?
Every storefront theme must have theme.xml to declare itself and registration.php to register with the ComponentRegistrar. composer.json is optional and view.xml is only required if not present in a parent theme.
What is the purpose of theme.xml?
theme.xml is the declaration file for a theme. It contains at minimum the theme title and optionally the parent theme name. It is what the system reads to recognize a theme. Registration is handled by registration.php.
What is the purpose of registration.php in a theme?
registration.php calls ComponentRegistrar::register to make the Magento system aware that the theme exists. Without it the theme will not be recognized even if all other files are present.
Is composer.json required in a theme?
composer.json is optional in a theme. It is only needed if you want to distribute the theme as a Composer package. Themes that are simply added manually to app/design/ do not need it.
Is view.xml required in a theme?
view.xml is required for a theme to function correctly but it does not need to be present in the child theme if it already exists in a parent theme. In that case the child theme inherits the parent's view.xml configuration.
What does view.xml configure?
view.xml is the configuration file for product image properties such as dimensions aspect ratio and transparency. It also holds gallery widget options and JS bundling exclusions but its primary purpose is image configuration.
Where is view.xml conventionally located in a theme?
view.xml is placed in the etc/ directory at the theme root giving the path <theme_dir>/etc/view.xml. This follows the Magento convention of placing configuration files in etc/ directories.
What does the media/ directory in a theme contain?
The media/ directory inside a theme holds only the preview screenshot image that appears in the Admin theme list. It does not store product images fonts or JavaScript files.
What does the i18n directory in a theme contain?
The i18n directory holds .csv files that provide translations for strings used in the theme. These files follow the standard Magento CSV translation format.
What does the web/fonts/ directory in a theme contain?
The web/fonts/ directory is where custom fonts and icon fonts used by the theme are stored. These are served as static assets to the browser.
What is stored in web/images/ in a theme?
The web/images/ directory holds general theme-level static image files including the default theme logo and any background or decorative images used by the theme.
What is stored in web/js/ in a theme?
The web/js/ directory holds theme-specific JavaScript files. Module-level JS files are stored inside the module-scoped directories within the theme.
What are static view files in a theme?
Static view files are assets like images fonts compiled CSS and JavaScript that are sent directly to the browser without any server-side processing. They differ from dynamic view files like LESS templates and layouts which require server processing.
What are dynamic view files in a theme?
Dynamic view files require server-side processing before they can be used. This includes LESS files which are compiled to CSS templates which generate HTML and layout XML files which define the page structure.
Where are public static theme files published so browsers can access them?
Static files are published to pub/static/frontend/<Vendor>/<theme>/<locale>/ during static content deployment or in developer mode on first request. This is the publicly accessible directory that browsers fetch files from.
What does the fallback mechanism do for templates?
The template fallback starts at the current theme and moves up through ancestor themes before falling back to the module's own templates. This ensures the most specific override is always used.
What does the layout processing system do differently from the template fallback?
Layout files do not use a winner-takes-all fallback. Instead the system collects all layout files from the current theme ancestor themes and modules and merges them together. This is why multiple layout files can affect the same page.
What is the recommended way to customize a layout in a child theme?
The recommended approach is to create an extending layout file that adds to or adjusts the existing layout without replacing it. Full overrides are supported but discouraged. Editing module files or deleting parent files are not valid approaches.
What is the difference between layout override and layout extension?
A layout extension adds instructions to the existing layout without removing anything. A layout override replaces the entire layout file with a new version. Extension is recommended and override is discouraged except when absolutely necessary.
What is the purpose of the <move> instruction in layout XML?
The <move> instruction repositions an existing block or container to a different location in the page structure. It does not rename copy or style elements.
What is the purpose of the <referenceBlock> element in layout XML?
<referenceBlock> allows you to interact with a block that already exists in the layout. You can add arguments to it set remove="true" to remove it or modify its template. It does not create move or independently delete blocks.
What is the purpose of the <referenceContainer> element in layout XML?
<referenceContainer> is used to interact with an existing container in the layout such as adding child blocks to it. It does not create new containers or perform CSS operations directly.
What does setting remove="true" on a referenceBlock do?
When remove="true" is set on a <referenceBlock> the block is completely excluded from the layout and will not appear in the HTML output at all. This is different from hiding it with CSS which still generates the markup.
What does setting display="false" on a referenceBlock do?
Setting display="false" prevents the block from being rendered in the HTML output but unlike remove="true" the block remains part of the layout structure and can be re-enabled later.
How is a parent theme declared in a child theme?
The parent theme relationship is declared in theme.xml using a <parent> element containing the parent theme's Vendor/theme path. The other files serve different purposes and do not handle theme inheritance.
What is the fallback order for static files when module context is known?
When module context is defined the fallback goes from the current theme's module directory to ancestor themes' module directories and finally to the module's own static files in its view/area/web/ directory.
What is the fallback order for static files when module context is NOT known?
Without module context the fallback goes from the current theme's locale-specific files to the current theme's general static files then through ancestor themes recursively and finally to the library.
What is the first step in the recommended theme development workflow?
Developer mode must be enabled first because it controls how static files are processed and cached. Without it static files may be cached in ways that prevent you from seeing theme changes during development.
Which LESS compilation mode is recommended for theme development?
Grunt is the recommended LESS compilation mode because it provides faster compilation and better tooling for tracking changes compared to server-side or client-side compilation modes.
What must you do after changing LESS files in server-side compilation mode?
After changing LESS files in server-side compilation mode the previously compiled files in pub/static and var/view_preprocessed must be deleted so the system regenerates them. Browser cache alone is not sufficient.
What is the purpose of Grunt in theme development?
Grunt is a task runner used in Magento theme development primarily to compile LESS files and watch for changes automatically triggering recompilation when source files are modified.
What is the last step in the theme development workflow before going live?
After completing development you switch to production mode and run the static content deployment command to publish all compiled static files. This is the final step before a live deployment.
What is JavaScript bundling in Magento themes?
JS bundling reduces the number of HTTP requests by combining many small JavaScript files into a few larger bundle files. This trades many small requests for fewer larger downloads which generally improves performance.
In which mode does JavaScript bundling work?
JavaScript bundling only works when the application is in production mode. Attempting to use it in developer mode will not produce the expected results.
What must be disabled for JavaScript bundling to work?
JavaScript file merging and bundling are mutually exclusive. When merging is enabled it overrides bundling making it ineffective. You must disable merging by setting dev/js/merge_files to 0.
What does cache busting do when enabled for static file URLs?
Cache busting adds a version string to static file URLs. When a file is updated a new version string is generated causing the browser to treat it as a new URL and download the fresh version instead of using its cache.
What is the recommended minimum size for a JS bundle?
As a rule of thumb each JS bundle should be at least 100 kB. This balances the number of HTTP requests with the download size of each bundle.
How are JS files excluded from bundling loaded?
Files excluded from bundling are not pre-packaged. RequireJS loads them asynchronously on demand when a page component actually requires them.
What is page caching in Adobe Commerce?
Page caching stores fully or partially rendered pages so subsequent requests for the same page can be served from cache without executing PHP and database queries again. This dramatically improves response times.
What are the two general methods of caching content?
The two general caching methods are client-side caching which happens in the browser and server-side caching which stores content on the server infrastructure. The specific technologies like Varnish and Redis are server-side implementations.
What is a reverse proxy in the context of page caching?
A reverse proxy intercepts incoming requests and can serve cached responses without the request ever reaching the application server. This reduces load significantly for cacheable pages.
Which caching solution is recommended for Adobe Commerce?
Varnish is the recommended full-page cache solution for Adobe Commerce. Redis database and file system are available alternatives for the built-in cache storage but Varnish is the preferred production solution.
What happens to an entire page if one of its blocks is marked as uncacheable?
If any block in the layout has cacheable="false" the entire page is treated as uncacheable. There is no partial page caching where some blocks are cached and others are not in the standard implementation.
What type of content should never be configured as uncacheable?
Configuring catalog product or CMS content pages as uncacheable has a serious negative performance impact. These pages have high traffic volume and marking them uncacheable forces regeneration on every request.
What HTTP methods are cacheable?
Only GET and HEAD requests are cacheable as defined by HTTP standards. POST PUT DELETE and other methods typically modify server state and their responses must not be served from cache.
What is public content in page caching?
Public content such as category listings headers and footers is the same for all visitors. It is stored server-side in the page cache and can be served to any user without customization.
What is private content in page caching?
Private content is personalised data tied to a specific user such as the shopping cart wishlist and customer name. It is stored in the browser and must not be cached server-side because it differs per user.
What does the layout cache type store?
The layout cache type stores the result of merging and compiling all layout XML files for a page. Cleaning it forces the system to reprocess all layout files which is needed after layout changes.
What does the block_html cache type store?
The block_html cache type stores the rendered HTML output for individual blocks. It should be cleaned after changes to block template files or block logic that affects the rendered output.
What does the full_page cache type store?
The full_page cache type is the full-page cache that stores complete rendered HTML pages. Cleaning it forces all pages to be regenerated on the next request. It has the most significant performance impact.
What does the translate cache type store?
The translate cache type stores the merged result of all translation CSV files from all modules and themes. It should be cleaned when translation files are modified.
What tool can you use to identify which template file renders a specific element on the storefront?
Template path hints is a built-in developer tool that overlays the path of each template file directly onto the rendered storefront making it easy to identify which file is responsible for any element.
Where in Admin do you enable template path hints for the storefront?
Template path hints are enabled in the Admin under Stores > Settings > Configuration > ADVANCED > Developer in the Debug tab by setting Template Path Hints for storefront to Yes.
What must you do after enabling template hints via CLI for the change to take effect?
After running the CLI command to enable template hints you must clear the cache before the change takes effect on the frontend. No server restart or deployment is needed.
What is the URL parameter used to activate template hints in URL Param mode?
When URL Param mode is configured you activate template hints for a specific request by appending ?templatehints=magento to the URL. This avoids affecting all storefront visitors.
How do you locate the layout file responsible for a storefront element?
The reliable approach is to identify which module the responsible template belongs to using template hints and then search the layout directories for that module starting in the current theme and working through the fallback chain.
What is a design exception in Adobe Commerce?
A design exception allows you to specify a different theme for visitors whose browser user-agent matches a specific pattern. This is useful for serving a simplified theme to specific devices without creating a separate store view.
Where is a theme-independent permanent store logo stored after being uploaded via Admin?
When a permanent logo is uploaded through the Admin Header section it is stored in pub/media/logo/default/. This location is independent of any theme meaning it persists even when the active theme is changed.
What should you do if Admin theme changes are not visible after clearing cache?
When cache clearing alone is not enough you must delete all compiled and preprocessed static files in pub/static/frontend and var/view_preprocessed. This forces the system to fully regenerate all static assets from source.
What is the recommended parent theme for a custom Admin theme?
Custom Admin themes should inherit from Magento/backend which is the default Admin theme. Luma and Blank are storefront themes. Magento/default is not a documented theme name.
Where is the default Admin theme logo located?
The default Admin logo magento-logo.svg is stored in lib/web/images/ which is the shared library directory. It is not inside the theme or module web directories.
Which file specifies the Admin theme for a module to use?
The Admin theme is specified in the module's etc/di.xml by configuring Magento\Theme\Model\View\Design with the adminhtml theme path. di.xml is the dependency injection configuration file.
What must happen for a new theme to appear in the Admin theme list at Content > Design > Themes?
Themes are registered automatically when any Admin page is opened or reloaded after the theme files are placed on the filesystem. The system detects new themes and adds them to the database at that point.
What happens if you remove a theme that is set as the active theme for a store view?
When an active theme is removed the system falls back to the default theme automatically. The store continues to function but the database record for the removed theme is not automatically deleted.
What are the two ways a theme can be distributed?
Themes are distributed either as a collection of files such as a ZIP archive which are installed manually or as a Composer package which is installed using Composer. These are the two documented distribution methods.
Where are manually installed themes stored?
Themes installed manually by copying files are stored in the app/design/ directory. Themes installed via Composer go to the vendor/ directory.
Where are Composer-installed themes stored?
Themes installed through Composer are stored in the vendor/ directory. Unlike manually installed themes in app/design/ they should not be modified directly because they are treated as external dependencies.
What is the key difference between Composer-based and locally installed themes?
Composer-based themes in vendor/ are treated as read-only external packages and should not be edited. Local themes in app/design/ are part of the project source code and can be modified freely. Both support inheritance and LESS.
What must you verify before uninstalling a theme?
Before uninstalling a theme you must confirm it is not the active theme for any store view and that no other registered theme lists it as its parent. Failing to check either condition can cause errors or broken dependencies.
What is the correct way to remove a manually added theme from the database?
For manually added themes there is no dedicated CLI command. You must run a MySQL DELETE query on the theme table using the theme_path and area='frontend' conditions with LIMIT 1 to remove the record.
What must you do for a Git-based installation before running theme:uninstall?
For Git-based installations you must first remove the theme package reference from composer.json then run composer update to apply the change and only then run the theme:uninstall CLI command.
What happens to the database record when you use composer remove to remove a theme?
Using composer remove only removes the package files. It does not interact with the Magento database so the theme record remains and must be deleted manually with a direct SQL query.
What does the autoload.files section in a theme's composer.json do?
The autoload.files array tells Composer to execute each listed PHP file when the application boots. For themes this ensures registration.php runs automatically which registers the theme with the ComponentRegistrar system.
What is the constrain property in view.xml used for?
The constrain property controls upscaling. When set to true images that are smaller than the configured dimensions are not enlarged. They are displayed at their original size instead.
What does the aspect_ratio property in view.xml do when set to true?
When aspect_ratio is true the system maintains the original width-to-height ratio of the image. This means the actual output dimensions may differ from the configured ones to avoid stretching or squishing.
What does the frame property in view.xml control?
When frame is set to true images are not cropped even if they do not fill the configured dimensions exactly. This property only takes effect when aspect_ratio is also true.
What does the transparency property in view.xml control?
The transparency property determines how transparent areas in PNG or GIF images are handled. When true transparency is preserved. When false a solid background color is applied instead.
What is the background property in view.xml used for?
The background property specifies the color applied to transparent image areas when the transparency property is set to false. It uses an RGB array format like [255, 255, 255] for white. This is distinct from CSS background properties or Admin panel settings.
What does the image id attribute in view.xml do?
The id is a unique string within the theme scope that connects a view.xml image configuration entry to the corresponding .phtml template code. The template uses this id to retrieve the correct dimensions and properties for that specific display context.
What image type in view.xml corresponds to the Base Image role in Admin?
The type value image maps directly to the Base Image role in the product editor. small_image maps to Small Image. thumbnail maps to Thumbnail. swatch_image maps to Swatch Image.
What does the catalog:images:resize command do?
The catalog:images:resize command processes all product images and creates resized copies according to the dimensions defined in view.xml. This is needed after importing products or changing image configurations.
What does the --async flag do in the catalog:images:resize command?
The --async or -a flag switches from immediate synchronous processing to asynchronous processing where images are added to the message queue and processed in the background by a consumer worker.
What is the purpose of adding styles to separate LESS files instead of one big file?
Keeping styles in separate files organised by purpose or component makes it much easier to find a specific rule when debugging. It has no direct impact on compilation speed or HTTP requests in the source editing workflow.
What is the benefit of using _extend.less instead of overriding a parent LESS file?
Writing customizations in _extend.less preserves the parent styles and simply adds to them. This means your changes survive upgrades because the parent file is untouched. There are no performance or compilation benefits specific to this file.
What best practice should you follow when customizing layout instead of editing .phtml templates?
Customizing via XML layout instructions is safer and easier to maintain than overriding .phtml templates. Layout XML can handle repositioning adding and removing elements without touching PHP template files.
What is the CSS critical path technique mentioned in best practices?
The CSS critical path technique prioritises loading the styles needed to render the visible portion of the page first. The rest of the CSS loads later resulting in a faster perceived load time.
Where should module-specific styles be added according to best practices?
Best practice is to place styles specific to a module inside that module's own directory. This ensures the styles are only loaded when the module is actually used on the page rather than on every page.
What does the mobile-first approach mean in theme development?
Mobile-first is a CSS design approach where you start by writing styles for the smallest viewport and use media queries to progressively enhance for larger screens. This generally results in cleaner and more performant CSS.
What is the purpose of using the __() translate function in templates?
Wrapping text in __() registers it with the Magento translation system so it can be replaced with translated strings from CSV files. Text not wrapped in this function will never be translated regardless of what translation files exist.
What is the conventional notation used in documentation to refer to a theme directory?
The official Adobe Commerce documentation consistently uses <theme_dir> as the conventional placeholder when referring to the root directory of a theme. This notation appears throughout layout template and configuration path examples.
What is the conventional notation for referring to a module directory in documentation?
The documentation uses <Magento_X_module_dir> where X is the module name to refer to a module's root directory. This notation is used in fallback path descriptions and configuration examples throughout the official documentation.
Which requirejs-config.js snippet correctly configures a mixin for a JavaScript module?
The correct structure places mixins inside config. The mixin path is the key and true enables it. Placing mixins at the top level outside config is invalid. map and paths are unrelated RequireJS features.
Which Knockout.js syntax correctly displays the value of a ko.observable called productQty?
The text binding displays the current value of an observable as plain text content. The value binding is for form input elements not display elements. observable is not a valid Knockout binding name. html is used when you need to render HTML markup not plain values.
Which requirejs-config.js snippet correctly loads a JavaScript file on all pages?
The deps array at the top level of the config object loads scripts on every page automatically. paths defines aliases. shim is for non-AMD dependencies. load is not a valid RequireJS config key.
Which requirejs-config.js snippet correctly adds a non-AMD module dependency so that 3rd-party-library loads before Vendor_Module/js/test?
shim is used for non-AMD modules to declare dependencies that must be loaded first. paths is for aliasing. mixins are for extending AMD modules. deps loads files globally but does not enforce order between them.
Which is the correct way to initialize a jQuery widget in a .phtml file using data-mage-init?
data-mage-init is the correct attribute for initializing Magento widgets declaratively in HTML. data-init mage-init and data-widget are not valid Magento initialization attributes.
Which is the correct way to initialize a jQuery widget in a .phtml file using require()?
require() is used to load and execute modules. Both jquery and the widget module must be listed as dependencies. Omitting jquery means $ is undefined. define() is for declaring modules not executing them. Direct jQuery calls bypass the RequireJS module system.
Which is the correct way to extend a native Magento Menu widget in a custom mixin file?
To extend a widget you need jquery for $, jquery-ui-modules/widget for $.widget(), and mage/menu to access $.mage.menu. Omitting either jquery-ui-modules/widget or mage/menu will cause errors. $.extend does not properly extend jQuery widgets.
Which dependencies are required when creating a custom jQuery widget?
A custom jQuery widget requires both jquery for the $ object and jquery-ui-modules/widget which provides the $.widget() factory method. Using just widget or jquery/ui are incorrect module paths in Magento's RequireJS setup.
Which Knockout.js syntax correctly displays the value of a ko.observable called productQty?
The text binding displays the current value of an observable as plain text. The value binding is for form inputs not display elements. observable is not a valid Knockout binding. html renders HTML markup not plain text values.
Which code snippet correctly creates a ko.observableArray for product names?
ko.observableArray() is the correct method for creating an observable array. ko.observable([productNames]) wraps the array in an observable but does not provide array-specific methods like push and remove. observableItem and ko.array do not exist in Knockout.
Which Knockout binding is used to find children nodes within the UiRegistry by a provided name?
The scope binding is a Magento-specific Knockout binding that looks up a component in the UiRegistry by name and provides its children as the binding context. mageInit is for widget initialization. template is for rendering Knockout templates. registry is not a valid binding.
Which snippet correctly translates text within a JavaScript file for a multilingual Magento website?
mage/translate provides the $.mage.__() translation function. Using translate as the module name or _() instead of __() are incorrect. i18n and standalone __() without the proper dependency are not valid in Magento JS.
Which XML snippet correctly passes a variable banner_style with value custom-style to an existing block named category.view?
referenceBlock with an arguments child is the correct way to pass data to an existing block. The action method approach is deprecated. Using block instead of referenceBlock would try to create a new block not modify the existing one.
Which XML snippet correctly moves block BLOCK-NAME to the bottom of the content container?
The move element is the correct layout XML instruction for repositioning blocks. after="-" places it at the bottom of the destination container. alter shift and using referenceBlock for positioning are not valid layout XML instructions.
Which XML snippet correctly restores a block that was previously removed?
Setting remove="false" on a referenceBlock cancels a previous remove="true" instruction and restores the block. delete is not a valid attribute. Using block instead of referenceBlock creates a new block. display="true" controls visibility but does not restore a removed block.
Which two methods can be used to access an argument called custom_title passed via Layout XML inside a .phtml template?
Arguments passed via layout XML are accessible through the magic getter getCustomTitle() which converts the snake_case name to CamelCase, or through getData('custom_title') which retrieves any data by key name. customTitle() without the get prefix does not exist. getVar() is for view.xml variables not layout arguments.
Which LESS media query declaration is used to create CSS rules only for desktop (min-width at screen__m breakpoint)?
Magento uses the .media-width mixin with min for desktop-up styles. max targets mobile and below. @media-common is for styles applied to all breakpoints. Direct @media rules with variables are not valid LESS syntax in the Magento UI library context.
Where should overrides of existing LESS variables be added in a custom theme?
_theme.less is the designated file for overriding LESS variables in a custom theme. _variables.less is part of the UI library and should not be edited directly. lib/_variables.less is also a library file. _overrides.less is not a standard Magento file.
Where are the Adobe Commerce UI library LESS files located?
The UI library LESS files are in lib/web/css/source/lib. This is the shared library directory accessible across all themes and modules. Magento_Ui and Magento_Core are module directories not library locations. The blank theme path is for theme-level overrides.
Which LESS code correctly applies a background color only to .header-wrapper when it is inside the .cms-index-index class?
The & parent selector inside a nested rule references the outer selector and places it after the inner selector in the output. So .cms-index-index & compiles to .cms-index-index .header-wrapper. Option B would work too but uses a different LESS structure. Option C targets elements that have both classes simultaneously. Option D targets .header-wrapper that also has the cms-index-index class on the same element.
Which directive allows inclusion of multiple LESS files with the same name pattern in Magento?
//@magento_import is the Magento-specific directive that imports all LESS files matching a given name across all modules. Standard @import only imports a single specific file. //@mage_import and //@import are not valid Magento directives.
Which XML snippet correctly adds a block to the content section of a category page layout?
content is a container so referenceContainer is the correct element to reference it. referenceBlock is used for blocks not containers. Using block or container without the reference prefix would try to create new elements rather than adding to the existing content container.
Which PHP template syntax follows Adobe Commerce coding standards when iterating over a collection?
Adobe Commerce coding standards require the alternative syntax with colon and endforeach for control structures in templates. Curly brace syntax is not preferred in phtml files. for loops with count() are less readable and the each() function is deprecated in PHP 7.
Which snippet correctly embeds inline JavaScript in a .phtml file when CSP strict mode is enabled?
When CSP strict mode is enabled inline scripts must be rendered through SecureHtmlRenderer::renderTag() which handles nonce injection automatically. Direct script tags will be blocked by CSP. renderInlineScript() is not a valid method name on SecureHtmlRenderer.
Which folder should .phtml template files go in when overriding catalog templates in a theme?
Theme template overrides for a module follow the path <theme_dir>/<Vendor>_<Module>/templates/. The web/ directory is for static assets not PHP templates. Placing templates/ before the module directory does not match the documented theme structure.
Where should a .phtml template file be placed inside a custom module called Orange_Customer?
Module template files follow the path app/code/<Vendor>/<Module>/view/<area>/templates/. Omitting view/ or placing templates inside web/ are both incorrect. app/design/ is for theme overrides not module source files.
Which file type should be placed in app/code/MyCompany/MyModule/view/frontend/web/template/?
The web/template/ directory inside a module is specifically for Knockout.js HTML templates used by UI components. PHTML files go in view/frontend/templates/. JavaScript files go in view/frontend/web/js/. CSS files go in view/frontend/web/css/.
Which XML snippet correctly disables a UI component on the Checkout page using Layout XML?
The config item must use xsi:type="array" and componentDisabled must use xsi:type="boolean" with value true. Using object instead of array is incorrect for config items. Using string instead of boolean for a true/false value is also incorrect.
Which is the correct way to overwrite an existing mixin in requirejs-config.js?
To overwrite a mixin you disable the original by setting it to false and enable the replacement by setting it to true in the same target module entry. Simply adding a new mixin with true does not remove the original. Setting only false disables the original but does not add a replacement. override is not a valid RequireJS config key.
Which data-mage-init snippet correctly redirects a user when clicking a span element?
The redirectUrl widget requires both the event and url parameters. Using redirect instead of redirectUrl is incorrect. A plain click attribute is not a Magento mechanism. Passing url directly without a widget name is invalid data-mage-init syntax.
Which XML snippet correctly extends the jsLayout of an existing block?
jsLayout is passed as an argument of type array to an existing block via referenceBlock. Creating a block named jsLayout is not how jsLayout works. referenceContainer does not accept arguments directly. update handle is used for applying layout handles not passing data.
Which CLI command enables full page cache in Adobe Commerce?
bin/magento cache:enable accepts one or more cache type codes as arguments. full_page is the cache type code for the full-page cache. start begin and activate are not valid subcommands for the cache command.
Which CLI command enables static file URL signing to ensure users always get the latest version of assets?
dev/static/sign adds a version string to static file URLs causing browsers to download fresh files when assets change. dev/js/minify_files enables JS minification. dev/js/enable_js_bundling enables bundling. dev/static/version is not a valid config path.
In which file in the dev/tools/grunt/ directory would you add a custom theme to the Grunt configuration?
themes.js inside dev/tools/grunt/ is where theme configurations are registered for use with Grunt tasks. grunt.js and Gruntfile.js are general Grunt configuration files. configs/themes.js is not the correct path in the Magento Grunt setup.
Where should custom-image.jpg be stored to be used in a transactional email template with the code: {{ view url='images/custom-image.jpg' }}?
The view url helper resolves paths from the theme's web/ directory. Images referenced this way should be in <theme_dir>/web/images/. pub/media/ is for user-uploaded media. The Magento_Email module directory is not where theme-level images are stored.
How should a developer change the logo on a purchase transactional email?
The transactional email logo is configured in Admin under Content > Design > Configuration in the Transactional Emails section. FTP uploads to pub/media/ bypass the proper configuration. Adding a file to the theme directory does not automatically update the email logo.
Which syntax is correct for conditional content in a Magento transactional email template?
Magento email templates use double curly brace directives. The closing tag for an if block is {{/if}} but when an else is present the block must be closed with {{/endif}}. Twig-style and PHP syntax are not valid in Magento email templates.
Which Page Builder XML configuration restricts the Quote content type to only be placed inside Column and prevents any content type from being placed inside Quote?
To restrict where Quote can be placed you deny all parents and allow only column. To prevent anything from being placed inside Quote you deny all children with no exceptions. Option B incorrectly puts the column restriction in children instead of parents. Option C allows all parents. Option D allows all children.
In the headless Edge Delivery Services approach where does product data get loaded?
In the EDS headless approach product data is fetched dynamically from the Adobe Commerce GraphQL API directly in the browser. Data is not prerendered into static files nor stored in IndexedDB. The REST API and server-side loading are not part of this approach.
Which theme fallback files are checked when a custom theme inheriting from Magento/luma contains Magento_LayeredNavigation/templates/layer/view.phtml?
After the custom theme the fallback checks the parent theme Luma at theme-frontend-luma/Magento_LayeredNavigation/templates/layer/view.phtml and then the module itself at module-layered-navigation/view/frontend/templates/layer/view.phtml. The adminhtml path is wrong for a frontend template. theme-frontend-base does not exist.
Where would a developer create catalog_category_view_type_grouped.xml in a child theme of Magento/blank to override only grouped product pages?
To override a base module layout for a specific product type you place the file in the module's layout/override/base/ directory within the theme. override/theme/Magento/blank/ would be for overriding a parent theme's layout not the module base layout. Magento_Catalog is the wrong module for grouped product layouts. The plain layout/ directory is for extending not overriding.
Which JavaScript configuration reduces file size by stripping whitespace and shortening variable names?
Minification removes whitespace comments and shortens variable names to reduce file size. Merging combines multiple files into one but does not reduce individual file content. Bundling groups files for fewer HTTP requests. Compress is not a specific Magento JS configuration option.
Which Admin configuration enables inline translation on the storefront so editors can change translations in the browser?
Inline translation is enabled under Stores > Configuration > Advanced > Developer in the Translate Inline section. The path Translate > Enabled for Storefront uses the wrong section name. Content > Design > Configuration and the General locale section do not contain this setting.
Which registration.php correctly registers a storefront theme located at app/design/frontend/MyCompany/mytheme?
Storefront themes use ComponentRegistrar::THEME as the type and the path must start with frontend/ followed by Vendor/theme. Using MODULE registers a module not a theme. Omitting the frontend/ prefix or using storefront/ are both invalid path formats.
Which theme.xml correctly declares a theme called My Theme that inherits from Magento/blank?
theme.xml requires xsi:noNamespaceSchemaLocation pointing to theme.xsd, uses <title> for the name and <parent> for inheritance. name and extends are not valid element names. page_configuration.xsd is for layout files not theme declarations. Omitting the schema declaration is not recommended.
Which view.xml snippet correctly configures a 250x250 category grid image?
Width and height are declared as separate child elements inside the image element. The module must be Magento_Catalog not Magento_Theme. There is no size element in view.xml. The correct type for small images is small_image not small.
Which view.xml snippet correctly sets the JS bundle size to 1MB?
The module must be Js_Bundle and the variable name must be bundle_size inside a vars element. Using JavaScript as the module name or size as the variable name will not work. config is not the correct element for this configuration.
Which layout XML snippet correctly makes the customer_edit block uncacheable?
The cacheable attribute set to false on a block element marks it and its entire page as uncacheable. uncacheable cache and the argument approach are not the correct syntax for controlling block caching.
Which default_head_blocks.xml snippet correctly adds a 32x32 favicon to a theme?
Layout XML uses src not href for file references. The element is link with rel=icon and a sizes attribute. favicon and icon are not valid layout head elements. The schema declaration is required on the page root element.
Which di.xml snippet correctly specifies a custom Admin theme called MyCompany/mytheme?
The correct class is Magento\Theme\Model\View\Design and the argument name is themes with xsi:type array containing an item named adminhtml with the theme path. Option B targets a non-existent class. Option C is a class substitution not a theme configuration. Option D uses the wrong argument structure.
Which requirejs-config.js snippet correctly maps a module alias available everywhere?
The map config with * as the context maps an alias globally for all modules. deps loads the file on every page but does not create an alias. paths defines a path shortcut but is not the same as a universal alias. alias is not a valid RequireJS config key.
Which module.xml snippet correctly ensures a custom module loads after Magento_Theme?
Module load order is declared using the sequence element in module.xml. depends requires and loadAfter are not valid XML elements in Magento module.xml for this purpose.
Which registration.php correctly registers a custom Admin theme located at app/design/adminhtml/MyCompany/myadmintheme?
Admin themes use the adminhtml/ area prefix. Using frontend/ registers it as a storefront theme. MODULE is for modules not themes. admin/ is not a valid Magento area name for themes.
Which composer.json snippet shows the correct name format and type for a frontend theme?
The name must follow the format vendor/theme-area-themename. The type must be magento2-theme not magento2-module. The autoload section must use files not classmap to ensure registration.php is executed on startup. Omitting theme- prefix or the area segment in the name are both incorrect.
What is the purpose of the fallback mechanism in Adobe Commerce theme development?
The fallback mechanism guarantees that if a file is not found in the current theme it searches ancestor themes then module files then the library. It is not related to caching merging or regeneration.
What is the difference between remove="true" and display="false" on a referenceBlock?
remove="true" completely excludes the block from the layout so it is never rendered. display="false" keeps the block in the layout structure but prevents it from outputting HTML. They are not equivalent and both work on blocks.
Which area prefix is used in registration.php for an Admin theme?
Admin themes use the adminhtml area prefix in the registration path. admin and backend are not valid Magento area names for themes. frontend is the prefix for storefront themes.
What is the correct schema location for theme.xml?
theme.xml uses the theme.xsd schema. page_configuration.xsd belongs to layout files. The ObjectManager schema is for di.xml. The Store schema is for config.xml.
Where are Knockout HTML templates stored inside a module?
Knockout HTML templates used by UI components are placed in view/frontend/web/template/. PHTML files go in view/frontend/templates/. JavaScript files go in web/js/. layout/ holds XML layout files only.
What does the //@magento_import directive do in a LESS file?
//@magento_import is a Magento-specific directive that collects and imports all LESS files with the matching name from every module. Standard @import only imports a single specific file path.
What is the purpose of the scope Knockout binding in Magento?
The scope binding is a Magento-specific Knockout extension that looks up a component by name in the UiRegistry and uses its children as the binding context. It is not related to CSS RequireJS or template availability.
What does the text Knockout binding do?
The text binding sets the text content of an element to the current value of an observable. It is for display not input. The html binding renders HTML markup. Translation is handled separately through the i18n system.
Which file in a theme is used to override existing LESS variables?
_theme.less is the designated file for overriding LESS variables in a custom theme. _extend.less is for adding new styles without overriding. _variables.less and lib/_variables.less are UI library files and should not be edited directly.
What is the purpose of ko.observableArray in Knockout.js?
ko.observableArray creates an observable that notifies subscribers when items are added removed or reordered. It provides array-specific methods like push pop and remove. It is not read-only and does not wrap a single item.
What does JavaScript minification do?
Minification reduces file size by removing unnecessary characters like whitespace and comments and shortening variable names. Combining files is merging. Grouping into bundles is bundling. Adding version strings is URL signing.
What does JavaScript merging do?
Merging combines multiple JS files into one file reducing the number of HTTP requests. Stripping whitespace is minification. Named bundles per page is bundling. Module alias mapping is a RequireJS map configuration.
What is the difference between JavaScript merging and JavaScript bundling?
Merging produces a single combined file. Bundling creates multiple smaller bundle files optimized for different pages. They are mutually exclusive and cannot be used together. Both are different from minification.
What is the recommended caching solution for Adobe Commerce in production?
Varnish is the recommended full-page cache solution for production. Redis is recommended for session and object caching. File system and database are available alternatives but not the recommended production choice for full-page caching.
What happens to a page when one of its blocks has cacheable="false"?
If any block in the layout is marked as uncacheable the entire page is treated as uncacheable. There is no partial page caching where individual blocks are excluded while the rest of the page is cached.
What are the two general methods of caching content in Adobe Commerce?
The two general methods are client-side caching which happens in the browser and server-side caching which stores content on the server. Varnish and Redis are specific server-side technologies. Full-page and block-level describe granularity not methods.
Which HTTP request methods are cacheable by default?
According to RFC-2616 only GET and HEAD requests are cacheable. POST PUT DELETE and other methods that modify server state are not cacheable because their responses are specific to the request payload.
What is private content in the context of Adobe Commerce caching?
Private content like the shopping cart wishlist and customer name is personalised per user and stored in the browser. It must not be cached server-side. It is not about authentication levels admin access or extension-generated content.
What does the layout cache type store?
The layout cache type stores the result of collecting and merging all layout XML files for a page. full_page stores complete HTML pages. block_html stores individual block output. translate stores translation strings.
When should you clean the layout cache type?
The layout cache stores compiled layout structures so it must be cleaned after layout XML changes. CSS changes require clearing static files. JS changes require clearing static files or cache depending on the type. Translation changes require cleaning the translate cache.
What does the translate cache type store?
The translate cache stores the merged result of all translation CSV files from modules and themes. It should be cleaned when translation files are modified. Inline translation annotations JS files and locale configuration are separate concerns.
What does the block_html cache type store?
block_html stores the HTML output rendered by individual blocks. full_page stores complete page HTML. The layout cache type stores compiled layout structures. Static HTML files are handled by the static content deployment process.
What is the purpose of template path hints in Adobe Commerce?
Template path hints show the physical file path of each template directly on the rendered page making it easy to identify which file renders a specific element. They show template paths not class names cache status or layout handles.
What URL parameter activates template hints when URL Param mode is enabled?
The correct parameter is ?templatehints=magento appended to any storefront URL. The other parameter formats are not recognised by the Magento template hints system.
What is a design exception in Adobe Commerce?
A design exception lets you serve a different theme to visitors whose browser user-agent matches a defined pattern. It is not a layout override a CSS mechanism or a PHP exception class.
What type of files are placed in a module's view/frontend/web/template/ directory?
The web/template/ directory inside a module is for Knockout.js HTML templates used by UI components. PHTML files go in view/frontend/templates/. JS files go in web/js/. LESS files go in web/css/source/.
What does the deps key at the top level of a RequireJS config object do?
The top-level deps array in a RequireJS config causes those scripts to be loaded on every page. shim deps declares dependencies for specific non-AMD modules. map handles alias mapping. Bundle configuration is separate.
What is the purpose of the shim configuration in RequireJS?
shim is used to define dependencies and export values for scripts that are not written as AMD modules. map creates aliases. Top-level deps loads scripts globally. Overriding AMD modules is done through mixins.
What is the purpose of the map configuration in RequireJS?
The map configuration allows you to specify that when a certain module ID is requested by a specific context a different module ID is used. shim handles non-AMD dependencies. Bundle configuration controls JS bundles. Module enabling is done differently.
What is the correct way to disable an existing mixin in requirejs-config.js?
Setting a mixin entry to false in the requirejs-config.js mixins config disables that specific mixin. Removing files does not deregister them from the config. null is not a valid value. The view.xml exclude node is for JS bundling not mixins.
Which Grunt command removes previously compiled static files for a specific theme?
grunt clean <theme> is the documented command to remove compiled static files for a specified theme. clear remove and reset are not valid Grunt task names in the Magento Grunt setup.
What does the data-mage-init attribute do in a Magento template?
data-mage-init is a declarative way to initialize Magento JavaScript widgets and components directly in HTML without writing inline script tags. It is not related to Knockout bindings server rendering or RequireJS path assignment.
What does the $.widget() function do in Magento's jQuery implementation?
$.widget() defines a new widget or extends an existing one using the jQuery widget factory pattern. Initializing a widget on a DOM element uses $(selector).widgetName(). It is not related to RequireJS registration or the Magento UI registry.
What is the purpose of the _extend.less file in a theme?
_extend.less is where you add new styles on top of the parent theme without replacing existing rules. Variable overrides go in _theme.less. Theme inheritance is declared in theme.xml. Module LESS imports use //@magento_import.
What is the recommended approach for customizing a layout in a child theme?
The recommended approach is to extend layouts by creating new files that add instructions to the existing layout. Copying and modifying parent files or editing module files directly are discouraged. Full overrides via override/base are supported but not recommended.
What is the purpose of the SecureHtmlRenderer in Adobe Commerce templates?
SecureHtmlRenderer handles the rendering of inline scripts by injecting the required CSP nonce automatically. escapeHtml() handles XSS prevention. HTML validation and encryption are not its purpose.
Where are UI library LESS files located in Adobe Commerce?
The UI library LESS files are in lib/web/css/source/lib/. This is the shared library directory. Magento_Ui is a module not the UI library. The blank theme path holds theme-level overrides not the library itself. The framework vendor path is not the UI library location.
What is the purpose of the /web/css/source/lib/ directory inside a theme?
The web/css/source/lib/ directory in a theme is specifically for files that override the corresponding UI library files. It mirrors the structure of lib/web/css/source/lib/. It does not hold compiled CSS JS files or shared variables.
What is the correct Composer package type for a Magento 2 theme?
Themes must declare magento2-theme as the Composer package type. magento2-module is for extension modules. magento2-library is for shared code libraries. magento2-component is not a standard Magento Composer type.
What does the autoload files section in a theme's composer.json ensure?
The files autoload type causes Composer to execute the listed PHP files on every request. For themes this ensures registration.php runs and registers the theme with ComponentRegistrar. It does not handle class autoloading LESS compilation or static file publishing.
What does the constrain property in view.xml image configuration control?
constrain prevents the system from enlarging small images beyond their natural dimensions. aspect_ratio controls proportion preservation. There is no image type restriction. frame controls whether images are cropped.
What is the purpose of the frame property in view.xml image configuration?
When frame is set to true images are not cropped even if the configured dimensions would require it. It does not add visual borders control iframes or define template container sizes. It only takes effect when aspect_ratio is also true.
What does the full_page cache type store?
The full_page cache type stores complete rendered HTML pages. The layout cache type stores compiled layout structures. block_html stores individual block HTML. translate stores merged translation strings.
Which Admin navigation path is used to apply a theme to a store view?
Themes are applied at Content > Design > Configuration by editing the store view record and selecting the theme from the Applied Theme dropdown. The other paths either do not exist or lead to unrelated settings.
What is the purpose of the transparency property in view.xml?
The transparency property controls what happens to transparent areas in PNG and GIF images. When true transparency is kept. When false a solid background color is applied. It does not affect CSS opacity URL access or alpha channel support directly.
What does the image id attribute in view.xml do?
The id is a unique string that connects a view.xml image entry to the .phtml template code that requests it. The template uses this id to get the correct dimensions and properties for a display context. It does not control filenames attribute mapping or HTML output.
What does the catalog:images:resize --async flag do?
The --async flag switches from synchronous immediate processing to adding images to the message queue for background processing by a consumer worker. It does not suppress output filter recently added images or spawn parallel processes.
What is the recommended parent theme for a custom storefront theme if you want to start with minimal styles?
Magento/blank is specifically designed as the minimal foundation for custom theme development. Luma is a fully styled demonstration theme. backend is for Admin themes. default is not a documented theme name.
Where are manually installed themes stored in the Adobe Commerce file system?
Themes installed manually by copying files are placed in app/design/. Composer-installed themes go to vendor/. lib/web/ is for shared library files. pub/static/ is the published output directory for static assets.
What must be verified before uninstalling a theme to avoid breaking the store?
Before uninstalling you must confirm the theme is not active on any store view and no other theme lists it as a parent. If either condition is not met you risk breaking the store or creating orphaned child themes. Backups and developer mode are good practices but not the specific documented prerequisites.
A developer needs to remove a specific JS file added via default_head_blocks.xml on a specific page. Which XML snippet achieves this?
To remove a static asset like a JS file added via head XML you use the <remove src="..."/> directive inside a <head> block in a page-specific layout file. exclude script and referenceBlock are not valid approaches for removing head assets.
What is the difference between remove="true" and display="false" on a referenceBlock?
remove="true" completely removes the block from the layout tree including its PHP class instance. display="false" keeps the PHP instance available but suppresses the HTML output. They are not equivalent and serve different purposes.
A developer needs to hide a block's HTML output but still needs its PHP class instance to be available. Which attribute should they use?
display="false" suppresses HTML output while keeping the PHP block instance in the layout tree and accessible to other blocks. remove="true" destroys the instance entirely. visible and cacheable are not valid attributes for this purpose.
Which CLI command disables the full page cache in Adobe Commerce?
bin/magento cache:disable accepts cache type codes as arguments. full_page is the code for full-page cache. remove stop and off are not valid subcommands for the Magento cache command.
Which CLI command checks the status of all indexers in Adobe Commerce?
bin/magento indexer:status shows whether each indexer is valid or requires reindex. info list and show are not valid subcommands for the indexer command.
Which CLI command reruns all indexers in Adobe Commerce?
bin/magento indexer:reindex reruns all or specified indexers. rebuild refresh and run are not valid subcommands for the Magento indexer command.
Where should _extend.less be placed inside a custom module?
Module frontend CSS source files follow the path view/frontend/web/css/source/. Placing _extend.less directly in web/css/ or omitting view/frontend/ are incorrect paths. web/ at the module root without view/frontend/ is also wrong.
Where should _extend.less be placed inside a custom theme?
Theme LESS source files go in web/css/source/ inside the theme root. Placing _extend.less directly in web/css/ etc/css/ or a standalone less/ directory does not match the documented theme structure.
Where should the critical CSS file be placed in a custom theme?
The critical CSS file is placed in web/css/ inside the theme root as critical.css. etc/css/ is not a valid path for static files. web/critical.css omits the css/ subdirectory. A standalone css/ directory at the theme root is not the documented structure.
What does styles-m.css represent in Adobe Commerce themes?
styles-m.css contains mobile-first styles and is always loaded on all viewports. styles-l.css contains desktop styles loaded via a min-width media query. The m stands for mobile not medium or main.
What does styles-l.css represent in Adobe Commerce themes?
styles-l.css contains desktop-specific styles and is loaded conditionally via @media (min-width: 768px). It is not for images retina displays legacy browsers or shared library styles.
Which LESS media query mixin is used for mobile-only styles in Adobe Commerce?
Using max with @screen__m targets viewports smaller than the medium breakpoint which is mobile. min with @screen__m targets desktop and above. @media-common applies to all breakpoints. Direct @media with LESS variables is not valid in the UI library context.
Which LESS media query mixin is used for desktop-only styles in Adobe Commerce?
Using min with @screen__m targets viewports at and above the medium breakpoint which is desktop. max with @screen__m targets mobile. @media-common applies styles at all breakpoints. Direct @media rules with LESS variables are not valid in this context.
What does the @escapeNotVerified annotation indicate in a .phtml file?
@escapeNotVerified is a code annotation indicating that escaping has not been manually verified yet but there is intent to verify it. It does not mean the content is trusted auto-escaped or blocked from commits.
Where are email template .html files stored inside a module?
Email template HTML files follow the path view/frontend/email/ inside a module. They are not placed in templates/ email/ at the module root or view/email/ without the frontend area.
Where are email template overrides stored in a theme?
Email template overrides in a theme follow the standard module override structure at <theme_dir>/Magento_Email/templates/. The other paths either omit the module directory or place templates in an incorrect subdirectory.
Which layout XML correctly overrides the default.xml layout from the parent theme Magento/blank in a child theme?
To override a parent theme's layout file you place it in <theme_dir>/<Module>/layout/override/theme/<ParentVendor>/<parent_theme>/. override/base is for overriding module base layouts. The plain layout/ directory is for extending. Placing the module directory at the end is the wrong path structure.
Which layout XML file targets only configurable product pages?
Product type-specific layout files follow the naming convention catalog_product_view_type_<type>.xml. The type for configurable products is configurable. The other options use incorrect naming patterns that will not be recognised by the layout system.
Which layout XML file targets all product pages regardless of type?
catalog_product_view.xml applies to all product types. Product type-specific files use the _type_ suffix. There is no type_all variant. catalog_product_view_type_simple.xml only targets simple products.
Which layout XML file targets only grouped product pages?
The layout handle for grouped products follows the convention catalog_product_view_type_grouped.xml. The other options use incorrect naming patterns that do not match the Magento layout handle naming convention.
Which layout XML file targets only bundle product pages?
Bundle product pages use the layout handle catalog_product_view_type_bundle.xml following the standard product type naming convention. The other options do not follow this convention.
Which layout XML file targets only virtual product pages?
Virtual product pages use catalog_product_view_type_virtual.xml. All product type-specific layout handles follow the pattern catalog_product_view_type_<type>.xml. The other options are incorrectly structured.
Which layout XML file targets only downloadable product pages?
Downloadable product pages use catalog_product_view_type_downloadable.xml following the standard naming convention. The type suffix must come after catalog_product_view_type_. The other options do not follow this convention.
What is the purpose of the shim configuration in requirejs-config.js?
shim tells RequireJS how to handle third-party libraries that do not use define(). You declare their dependencies and the global variable they export. map creates aliases. top-level deps loads scripts globally. Overriding AMD modules uses mixins.
What is the exports property in a requirejs-config.js shim used for?
The exports property in a shim tells RequireJS which global variable the library creates after loading so it can be used as a module return value. It does not control function visibility module ID mapping or file exposure.
What does the map configuration with '*' as context do in requirejs-config.js?
Using '' as the context in map applies the alias globally meaning any module that requests the old ID will receive the new one. Using a specific module ID instead of '' limits the substitution to that module's context only. deps loads globally. The '*' context is the broadest not the most specific.
Which requirejs-config.js snippet correctly adds a meta tag to the page head via layout XML?
Meta tags are added to the page head in layout XML using the <meta> element with name and content attributes inside a <head> block. tag add and metadata are not valid layout head elements.
Which layout XML snippet correctly removes a meta tag from the page head?
To remove a head element you use <remove name="..."/> inside a <head> block with the name of the element to remove. Setting remove="true" on a meta element adding delete or using referenceBlock are not valid approaches for head element removal.
Which Knockout binding makes an element visible or hidden based on an observable?
The visible binding in Knockout.js toggles the CSS display property based on the truthiness of the bound observable. show display and toggle are not valid Knockout binding names.
Which Knockout binding correctly binds an input field value to an observable?
The value binding is used for form input elements to create a two-way binding with an observable. text is for displaying text content in non-input elements. bind and model are not valid Knockout binding names.
Which Knockout binding correctly triggers a function when an input changes?
The event binding maps DOM events to functions using an object where keys are event names. on trigger and listen are not valid Knockout binding names for handling DOM events.
Which UI component XML snippet correctly configures a component as visible by default?
UI component configuration items are nested inside a config item of type array. Boolean values must use xsi:type="boolean". Using string for a boolean value or placing visible outside the config item are both incorrect.
What is the correct path for overriding a layout from the parent theme Magento/blank in a child theme for the Magento_Catalog module?
Overriding a parent theme layout uses the path <module>/layout/override/theme/<ParentVendor>/<parent_theme>/. override/base is for overriding module base layouts. The plain layout/ directory is for extending. The override/ directory must come after layout/ not before the module directory.
How are product layout customizations applied at scale in a more manageable way than per-product Admin edits?
Using type-specific layout XML files in a theme is the scalable approach for applying different layouts to different product types. Editing module files directly is discouraged. Per-product Admin edits and separate store views per product type are not scalable solutions.
Where is the correct location for a mixin targeting Magento_Ui validation rules in requirejs-config.js?
Mixins must be nested inside config.mixins in requirejs-config.js. Placing mixins at the top level without config is incorrect. Nesting mixins inside the target module path is wrong. map is for module aliasing not mixins.
Which is the correct Knockout binding to display the text content of an observable called title?
The text binding renders the observable value as plain text and escapes HTML. html renders markup without escaping. value is for form inputs. content is not a valid Knockout binding name.
Which requirejs-config.js key is used to load a script immediately on every page without an explicit require() call?
The top-level deps array in requirejs-config.js causes listed scripts to load automatically on every page. shim is for non-AMD dependency declaration. map creates module aliases. paths defines path shortcuts but does not auto-load scripts.
Which requirejs-config.js key is used to replace one module with another globally?
The map configuration with '*' as context replaces a module ID with another globally. shim handles non-AMD libraries. deps auto-loads scripts. mixins extends module behavior without replacing the original.
Which requirejs-config.js key is used to define path aliases for module IDs?
paths defines short aliases that map module IDs to physical file paths. map creates context-specific module substitutions. deps auto-loads scripts globally. shim handles non-AMD library configuration.
What does the visible Knockout binding do when its value is false?
The visible binding controls the CSS display property. When false it sets display:none. It does not remove the element from the DOM unlike the if binding. It does not use visibility:hidden or add CSS classes.
Which file in the Magento UI library contains LESS variable declarations for global elements?
UI library variable declarations are in lib/web/css/source/lib/_variables.less. The path must include source/lib/ to reach the library subdirectory. Paths without source/lib/ or starting from web/ without lib/ are incorrect.
Which approach is used to load a JS file on every page when it is a non-AMD script that depends on jQuery?
For a non-AMD script that needs jQuery you must declare it in shim with jquery as a dependency and also add it to deps to auto-load it. Simply listing both in deps does not guarantee load order for non-AMD scripts. map and mixins are not appropriate for this use case.
Which path structure is used for a child theme to override a specific layout file from the parent theme Magento/blank?
Overriding a parent theme layout requires the path <Module>/layout/override/theme/<ParentVendor>/<parent_theme>/<filename>.xml. override/base is for module base layouts. The plain layout/ is for extensions. Placing the module name after the parent theme path is wrong.
What is the correct & parent selector behavior in the following LESS code: .header { .cms-index-index & { color: red; } }?
The & parent selector in LESS references the outer selector and places it where & appears. So .cms-index-index & means the outer selector .header is placed after .cms-index-index giving .cms-index-index .header. It does not combine them or reverse nesting.
Which Knockout data-bind attribute correctly calls a function onChange when an input value changes?
Knockout uses the event binding with an object mapping DOM event names to handler functions. The shorthand change: onChange listener and on-change are not valid Knockout binding syntax.
Where should a custom .phtml template override be placed for the Magento_Catalog module in a theme?
Theme template overrides follow the path <theme_dir>/<Vendor>_<Module>/templates/. The module directory comes directly under the theme root. Placing templates/ before the module directory or adding view/ into the path are all incorrect.
Which layout XML correctly adds a meta description tag to all pages in a theme?
Meta tags go inside a <head> element which must be inside the root <page> element with the correct schema declaration. tag is not a valid head element. The root element must be page not layout. meta must be nested inside head not directly under page.
What is the correct way to initialize a UI component's jsLayout configuration in layout XML?
jsLayout is passed as an argument of type array inside an arguments element on a referenceBlock. There is no <jsLayout> XML element. Creating a block named jsLayout is incorrect. An argument element must be inside arguments which must be inside a referenceBlock or referenceContainer.
An Adobe Commerce developer wants to initialize a custom Knockout UI component called Vendor_Module/js/my-component on a page without binding it to any specific DOM element. Which x-magento-init snippet is correct?
Using `*` as the selector in `x-magento-init` initializes the component without binding it to any DOM element. `body` and `html` are not the documented selectors for this purpose. `data-mage-init` binds to the specific element it is placed on — it cannot run without a DOM target.
A developer needs to replace the default Magento_Catalog/js/price-box component globally with a custom one at Vendor_Module/js/custom-price-box. Which requirejs-config.js entry is correct?
`map` with `'*'` redirects all references to the original module to the custom one globally. `mixins` extends the original without replacing it. `paths` creates an alias for the custom file but does not redirect existing references to the original. `shim` is for non-AMD libraries and cannot replace AMD modules.
A developer writes a JS mixin for Magento_Checkout/js/model/quote. The mixin must add a method called getCustomData() before the original module loads. Which AMD structure is correct?
A mixin must be an AMD module returning a callback function that accepts the target component and returns an extended version. Option B mutates the original directly without the mixin wrapper. Option C returns a plain object with no reference to the target. Option D uses `require()` which executes immediately and is not a valid mixin structure.
A developer wants to extend the Magento_Ui/js/modal/modal jQuery widget with a custom method showCustomHeader(). Which mixin implementation is correct?
jQuery widget mixins require `jquery`, `jquery-ui-modules/widget`, and the target widget. The mixin callback receives the target, calls `$.widget()` passing the target as parent, and returns the registered alias (`$.mage.modal`). Option B mutates directly. Option C omits the target widget as parent. Option D uses `.extend()` which is for UI components, not jQuery widgets.
A developer needs to load a legacy non-AMD script vendor/legacy.js that sets a global variable MyLib and depends on jQuery. It must auto-load on every page. Which requirejs-config.js is correct?
`shim` with `deps: ['jquery']` ensures jQuery loads first for the non-AMD script. `exports: 'MyLib'` tells RequireJS the global name the script exposes. Adding the script to the top-level `deps` auto-loads it on every page. Option B does not guarantee load order for non-AMD scripts. Option C uses `map` incorrectly. Option D uses `shim` correctly but omits `deps` at the top level so the script never auto-loads.
A developer needs to override the catalog_product_view.xml layout file from the Magento_Catalog module entirely in a child theme called Vendor/mytheme that inherits from Magento/blank. Where should the override file be placed?
To completely override a module's base layout file the path must be `<theme_dir>/<Module>/layout/override/base/<filename>.xml`. Option B places it in the extension path which merges rather than replaces. Option C is for overriding a parent theme's layout, not a module base layout. Option D has an incorrect directory structure.
A developer has a child theme Vendor/winter inheriting from Vendor/orange. They need to override only the catalog_product_view.xml defined in Vendor/orange (not the module base). Where should the file go?
Overriding a parent theme's layout requires the path `<theme_dir>/<Module>/layout/override/theme/<ParentVendor>/<parent_theme>/<filename>.xml`. Option B overrides the module base, not the parent theme's layout. Option C extends (merges) rather than overrides. Option D has incorrect directory ordering.
A developer adds the following LESS in a child theme that inherits from Magento/blank: .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .header { background: red; } } Which CSS file will contain the compiled output?
The `.media-width()` mixin with `@extremum = 'min'` compiles into `styles-l.css` (desktop styles). `max` extremum compiles into `styles-m.css`. The `@media-common` group also goes into `styles-m.css`. Using `min` with `@screen__m` targets viewports above 767px which is the desktop output file.
A developer writes the following LESS in a child theme that inherits from Magento/blank but does NOT use .media-width(): @media (min-width: 768px) { .header { color: blue; } } What is the unintended consequence?
When inheriting from Blank or Luma without using the `.media-width()` mixin system, native `@media` rules are added to both `styles-m.css` and `styles-l.css`. This is because the root source files import all LESS files and the rule appears in both compilation contexts. Using `.media-width()` with `@media-target` conditions prevents this duplication.
A developer needs to pass a jsLayout configuration to an existing block named checkout.root in a layout XML file. Which snippet is correct?
`jsLayout` is passed as an `argument` of `xsi:type="array"` inside an `arguments` element on a `referenceBlock`. There is no `<jsLayout>` XML element. Creating a `<block name="jsLayout">` is incorrect. An `argument` element must always be wrapped inside `arguments` which must be inside a `referenceBlock` or `block`.
A developer needs to render an inline script in a .phtml template when CSP strict mode is active. The script must execute alert('ready'). Which implementation is correct?
With CSP strict mode enabled, inline scripts must be rendered through `SecureHtmlRenderer::renderTag()` which automatically injects the required CSP nonce. Direct `<script>` tags are blocked by CSP. `escapeHtml()` encodes the script as text — it does not produce executable JS. CDATA wrapping is not a CSP solution.
A developer has the following LESS code in a child theme of Magento/blank: .header-nav { .cms-homepage & { color: @color-white; } } What does the compiled CSS output look like?
The `&` parent selector in LESS references the outer selector `.header-nav` and places it where `&` appears. So `.cms-homepage &` compiles to `.cms-homepage .header-nav`. Option B reverses the order. Option C combines them as a single element (no space). Option D ignores the nesting entirely.
A developer must disable an existing mixin Vendor_A/js/cart-mixin that was declared for Magento_Checkout/js/view/minicart and replace it with Vendor_B/js/cart-mixin. Which requirejs-config.js is correct?
To overwrite a mixin you must disable the original by setting it to `false` and enable the replacement by setting it to `true` in the same target module entry. Option B only adds the new mixin without disabling the original — both would run. Option C uses `map` which redirects module resolution, not mixin registration. Option D incorrectly declares the mixin inside another mixin.
A developer needs to use this._super() inside a mixin method for a plain JS object component (not a jQuery widget). Which library must be imported?
`mage/utils/wrapper` provides `wrapper.wrap()` and `wrapper.wrapSuper()` which enable `this._super()` calls when extending plain JS functions and objects. `jquery-ui-modules/widget` is for jQuery widget extension only. `mage/utils/extend` does not exist. `this._super()` is not native JavaScript — it requires the wrapper utility.
A developer needs to configure a product image in view.xml so that images smaller than 400x400 are NOT enlarged, transparent backgrounds are preserved, and the image is not cropped. Which combination of properties is correct?
`constrain=true` prevents upscaling of smaller images. `transparency=true` preserves transparent backgrounds. `aspect_ratio=true` prevents distortion. `frame=true` prevents cropping — but it only takes effect when `aspect_ratio=true`. All four are required together for this requirement. Option B allows upscaling. Option C uses `aspect_ratio=false` which makes `frame` ineffective. Option D sets `transparency=false` (removes transparency) and `frame=false` (allows cropping).
A developer needs to declare a layout argument of type object that instantiates a new separate instance each time, using class Vendor\Module\ViewModel\Custom. Which XML is correct?
Setting `shared="false"` on an `xsi:type="object"` argument creates a new instance each time the argument is resolved, rather than sharing a singleton. Without `shared="false"` (Option B) a single shared instance is used. Option C uses `xsi:type="string"` which passes the class name as a string, not an object. Option D uses `instance="new"` which is not a valid attribute.
A developer needs to add a meta Open Graph tag for a product page in layout XML. Which snippet is correct?
In Magento layout XML head section, the `<meta>` element uses `name` to specify the meta type including the `og:` prefix. The renderer class detects the `og:` prefix and outputs the correct HTML. `og:meta` and `link` are not valid layout head elements for this purpose. Option D uses `property` which is correct in raw HTML but in layout XML the attribute name is `name`.
A developer defines a container in layout XML with htmlTag="section" and htmlClass="main-content". The container has no child blocks. What appears in the HTML output?
An empty container — one with no child blocks available — produces no HTML output at all, regardless of htmlTag or htmlClass settings. The htmlTag and htmlClass attributes only wrap the children output. With no children to render, the container is invisible in the final HTML.
A developer adds cacheable="false" to one block on the catalog_product_view page. A merchant complains the entire product page is slow. What is the root cause?
Setting `cacheable="false"` on any single block in the layout causes the entire page to be excluded from the full-page cache. Every visitor triggers a full PHP and database render cycle. This is one of the most impactful performance mistakes in Magento frontend development. The documentation explicitly warns against using this on high-traffic pages like product pages.
A developer adds the following to requirejs-config.js: var config = { config: { mixins: { 'Magento_Catalog/js/price-box': { 'Vendor_Module/js/price-mixin': true } } } }; The mixin file defines define(['Magento_Catalog/js/price-box'], function(priceBox) { return priceBox; }); What is the problem with this mixin?
A valid mixin must return a callback function that receives the target component and returns an extended version: `return function(target) { return target.extend({...}); }`. Returning `priceBox` directly bypasses the mixin mechanism entirely — the component is used as-is. The declaration under `config.mixins` is correct. Importing the target inside the mixin does not create a circular dependency in this pattern.
A developer needs to move the product.info.sku block to appear immediately before product.info.price inside the product.info.main container. Which layout XML instruction is correct?
The `<move>` instruction uses `element` for the block to move, `destination` for the target parent container, and `before`/`after` to set position relative to a sibling. Option B moves the wrong block. Option C incorrectly uses `arguments` for positioning — `before` is not a block argument. Option D tries to create a new block instead of moving an existing one.
A developer sets both before="product.info.sku" and after="product.info.price" on the same layout element. What is the result?
Per Magento's layout processing rules, when both `before` and `after` are set on the same element, `after` takes precedence. The element is positioned after the sibling specified in `after`. The `before` attribute is ignored in this conflict.
A developer needs to include a server-side LESS compilation step using Grunt for a theme called Vendor/custom. After editing a LESS file, which sequence of Grunt commands must be run?
`grunt exec:<theme>` copies and preprocesses LESS source files. `grunt less:<theme>` compiles the preprocessed files to CSS. `grunt watch` then monitors for further changes and recompiles automatically. `grunt clean` removes files but does not compile. `grunt compile` and `grunt build` are not valid Magento Grunt tasks.
A developer adds a new LESS file _custom-nav.less to a child theme and imports it inside _extend.less. Using server-side compilation, the change is not visible after refreshing. What must be done?
Adding a new imported LESS file is a structural change. The previously compiled files in `pub/static` and `var/view_preprocessed` still reflect the old compilation. Both directories must be cleared to force a full recompilation that picks up the new import. Simply cleaning cache or running `grunt less` without `grunt exec` first will not resolve the missing file. `setup:static-content:deploy` is for production mode, not development.
A developer needs to configure a helper argument in layout XML that calls Vendor\Module\Helper\Data::getCustomValue() and passes the result as an argument named custom_value to a block. Which XML is correct?
The `xsi:type="helper"` argument type requires a `helper` attribute specifying the class and method in `Class::method` format. The method's return value becomes the argument. Option B passes the helper reference as a plain string without invoking it. Option C instantiates the helper as an object rather than calling its method. Option D is missing the `helper` attribute and the method name.
A developer writes the following in a child theme's _extend.less that inherits from Magento/blank: & when (@media-common = true) { .promo-banner { display: block; } } Which file will contain the compiled output and what is the media query condition?
The `@media-common` style group compiles to `styles-m.css` with no media query wrapper, meaning the styles apply to all screen widths unconditionally. It is the correct way to write global styles within the Blank/Luma responsive system without duplicating them in both output files.
A developer configures an indexer in schedule mode. After a data import, the indexer status is invalid. The developer then runs bin/magento indexer:set-status valid for that indexer without running a reindex. What is the risk?
Setting status to `valid` without actually reindexing tells the system the index is current when it is not. This leads to incorrect catalog results, missing products in search, or wrong prices because the index data does not reflect the imported records. The system will not trigger an automatic reindex. The documentation explicitly warns about performance degradation and data integrity issues from this action.
A developer wants to add a custom block inside the content container on every page. Which layout file and instruction is correct?
`default.xml` applies to all pages. `content` is a container so it must be referenced with `<referenceContainer>`, not `<referenceBlock>`. Option B incorrectly uses `<referenceBlock>` for a container. Option C uses `catalog_product_view.xml` which only applies to product pages. Option D uses `<container>` which would create a new container rather than referencing the existing one.
A developer registers a storefront theme in registration.php as: ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Vendor/mytheme', __DIR__); The theme has theme.xml with title My Theme and no parent element. What happens when applied?
A theme without a `<parent>` declaration in theme.xml is a standalone theme. It has no fallback inheritance — all required templates, layouts, and styles must be present in the theme itself. There is no automatic fallback to Blank or Luma. This is a valid configuration but requires significantly more work to implement fully.
A developer uses bin/magento cache:clean full_page on a production store. The same pages are slow again on the next request until cache warms. Which alternative would clean only the layout cache without affecting full-page cache?
`bin/magento cache:clean layout` cleans only the compiled layout cache type, leaving `full_page` intact so cached pages continue serving immediately. `cache:flush` flushes the entire cache storage pool which is more destructive. `cache:disable full_page` disables caching entirely which is worse for performance. The `rm` approach removes the file-system cache for all types without Magento's awareness.
A developer needs to configure JS bundling in production. They run: bin/magento config:set dev/js/enable_js_bundling 1 and bin/magento config:set dev/js/merge_files 1 and bin/magento setup:static-content:deploy. Bundling does not work. What is wrong?
JS merging and bundling are mutually exclusive features. When merging is enabled (`dev/js/merge_files = 1`) it overrides bundling and makes it ineffective. The developer must set `dev/js/merge_files` to `0` before bundling will work. Bundling requires production mode (correct here). Cache cleaning should also be done but is not the root cause.
A developer creates _theme.less in a child theme to override a LESS variable @button__background-color. They also create _extend.less in the same theme with a rule that hardcodes the same color. Which value is applied?
The documented rule is that rules and variables declared in `_extend.less` always have precedence over `_theme.less`. If both files declare the same rule or variable, the `_extend.less` version wins. This is intentional — `_extend.less` is designed for specific overrides that should win over the general variable overrides in `_theme.less`.
A developer needs to add a non-inline CSS style for hover states in a transactional email template. Which method is correct?
Non-inline styles (like `:hover` pseudo-classes and media queries) that cannot be inlined must be added inside a `@styles` comment block in the email template. These are included via the `{{var template_styles|raw}}` directive in the email header. The `{{inlinecss}}` directive only handles inlineable styles. `<link>` tags are not supported by most email clients. Editing `_email-base.less` directly breaks upgrade safety.
A developer needs to add a custom Admin theme MyCompany/myadmin. They create the theme files and write di.xml. After running bin/magento setup:upgrade, the Admin still shows the default theme. What is the most likely missing step?
After modifying `di.xml`, `setup:upgrade` applies component registration changes but does not recompile the DI container. `setup:di:compile` is required to regenerate the compiled DI configuration so the custom Admin theme injection takes effect. Without it the old compiled DI cache is used. Admin themes are applied via `di.xml` not through the Admin UI.
A developer needs to exclude the entire Magento_Ui::js/grid directory from JS bundling in view.xml. Which snippet is correct?
Directory exclusions in `view.xml` use `<item type="directory">`. The type value must be `directory` exactly — `dir` and `folder` are not valid. The element must be `<item>` not `<directory>`. Using `type="file"` would only exclude a single file, not the entire directory.
A developer needs to write a LESS mixin in a theme that compiles tablet-specific styles (between 768px and 1024px) without duplicating them in both styles-m.css and styles-l.css when inheriting from Magento/blank. Which approach is correct?
For tablet-specific ranges not covered by the standard `.media-width()` breakpoints, the correct approach is to nest a native `@media` query inside a `when (@media-target = 'desktop')` condition inside the min `@screen__m` media-width block. This ensures the rule only appears in `styles-l.css`. A raw `@media` without the target condition would duplicate in both files. Option C targets the wrong extremum. Option D puts it in `@media-common` which has no media query scope.
A developer needs to remove a static CSS resource Magento_Catalog::css/catalog.css that was added via layout XML. Which layout XML instruction is correct?
The `<remove>` instruction inside `<head>` is specifically for removing static resources. When the original resource was added with a module path (`Magento_Catalog::`) the same full module path must be specified in the `remove` tag. Removing the block `head.additional` would remove all additional resources. The `<css>` and `<link>` elements do not support a `remove` attribute.
A developer uses the update instruction in a layout file: <update handle="catalog_product_opengraph"/>. What happens if the catalog_product_opengraph handle does not exist?
If a layout handle referenced via `<update>` does not exist in any loaded layout file, the instruction is silently skipped without any error. Magento's layout processing is designed to be resilient to missing handles. No exception is thrown and no fallback is triggered. This is important to understand when debugging layout issues caused by a missing or misspelled handle name.
A developer needs to write a Knockout observable that automatically recalculates a totalPrice value whenever qty or unitPrice change. Which implementation is correct?
`ko.computed()` creates a derived observable that automatically tracks its dependencies and recalculates when any of them change. The `this` context must be passed as the second argument. Option B uses `ko.observable()` which calculates once at creation and never updates. Option C uses plain variables which are not observable. Option D uses `observableArray` which is for arrays, not computed values.
A developer creates a theme that needs to override the registration.php of a parent mixin from Vendor_A module so it loads after Vendor_B. Which file and content are correct?
Module load order is declared in `module.xml` using the `<sequence>` element. This ensures Vendor_A_MyModule loads after Vendor_B_MyModule, which is critical when overwriting mixins. `<depends>` is not a valid module.xml element. `requirejs-config.js` `deps` loads scripts globally but does not control PHP module sequence. `config.xml` is for store configuration, not module ordering.
A developer needs to add an IE 11-specific CSS file ie11-fixes.css via layout XML. Which snippet is correct?
IE-specific CSS files in layout XML use the `ie_condition` attribute on `<css>` elements. This generates HTML conditional comment tags `<!--[if IE 11]>...<![endif]-->`. The attribute name is `ie_condition` not `condition`, `media`, or `browser`. `<link>` elements do not support conditional comments via attributes in layout XML.
A developer discovers that after deploying a patch via ece-patches apply on Adobe Commerce Cloud, a required patch has status N/A. What does this mean and what should be done?
In `ece-patches status` output, N/A means the patch status cannot be determined due to conflicts. This occurs when patch dependencies are not met or when the patch conflicts with another already-applied patch. It requires investigation — checking which patches are applied, their dependencies, and resolving conflicts before attempting to re-apply. It does not indicate version incompatibility or missing files.
A developer writes this template code: <?= $block->escapeHtml($block->getCustomHtml()) ?> but the HTML tags in the output are being stripped. The method returns trusted HTML. What is the correct fix?
`escapeHtml()` encodes HTML entities, stripping all tags from the output. When a method returns trusted HTML that must render as markup, use `/ @noEscape /` with a direct echo. This is the documented pattern for suppressing escaping intentionally. `escapeUrl()` is for URLs. `htmlspecialchars_decode()` after escaping is incorrect pattern. `escapeJs()` is for JS context.
A developer needs to configure a product image in view.xml so that images keep their transparent background, are not upscaled, maintain aspect ratio, and are not cropped even if smaller than configured size. Which is the minimal correct configuration?
All four properties are required: `transparency=true` preserves alpha channels, `constrain=true` prevents upscaling, `aspect_ratio=true` prevents distortion, `frame=true` prevents cropping. Critically, `frame` only takes effect when `aspect_ratio` is also true. Option D omits `aspect_ratio=true` which makes `frame` non-functional.
A developer adds the following to a child theme's requirejs-config.js placed in the theme root: var config = { config: { mixins: { 'Magento_Catalog/js/catalog-add-to-cart': { 'Vendor_Module/js/add-to-cart-mixin': true } } } }; But the mixin is in view/frontend/web/js/. Where must the requirejs-config.js be placed for this mixin to work in a module context?
The `requirejs-config.js` that declares a mixin must be placed in the same area-specific directory as the mixin file. For a mixin at `view/frontend/web/js/`, the config must be at `view/frontend/requirejs-config.js` within the module. Placing it in the theme root registers it at the theme level, not the module level — this may cause scope or load order issues for module-registered mixins.
A developer needs to trigger re-initialization of data-mage-init components after injecting HTML via AJAX into a div with id="ajax-content". Which JavaScript is correct?
Triggering the `contentUpdated` event on the container element signals the Magento framework to re-parse all `data-mage-init` and `x-magento-init` declarations found in the newly injected markup. `mage('init')` is not a valid jQuery method. `mage/apply/main` does not have an `applyFor()` method. Reloading the page defeats the purpose of AJAX injection.
A developer wants to restore a block called header.links that was previously removed with remove="true" in a parent theme layout. Which layout XML in the child theme is correct?
Setting `remove="false"` on a `<referenceBlock>` cancels a previous `remove="true"` instruction and restores the block to the layout. `display="true"` controls visibility but cannot restore a block that has been removed from the layout structure. `<block>` with `remove="false"` creates a new block rather than referencing an existing one. An empty `<referenceBlock>` without `remove="false"` does nothing to restore it.
A developer creates a grandchild theme: Blank → ThemeA → ThemeB. ThemeA has _extend.less that sets colors. ThemeB needs to add NEW styles without overriding ThemeA. Using the documented _extend-child.less pattern, what must ThemeA contain?
The `_extend-child.less` pattern works as follows: ThemeA adds `@import '_extend-child.less';` at the end of its `_extend.less` and creates an empty `_extend-child.less`. ThemeB then creates its own `_extend-child.less` with its additional styles. ThemeB's version overrides ThemeA's empty one via the fallback mechanism. This allows ThemeB to add styles without overriding ThemeA's `_extend.less`.
A developer needs to configure config.xml in a custom module to set a default value for the path catalog/product_video/play_if_base at the default scope level. Which XML structure is correct?
The config.xml root element is `<config>` (not `<configuration>`) with the Magento_Store schema. Values at the default scope go inside `<default>`. The section is `<catalog>`, group is `<product_video>`, field is `<play_if_base>`. Option B omits the required `<default>` scope wrapper. Option C uses `<store>` scope. Option D uses the wrong root element and wrong group name `<video>`.
A developer notices that when switching an indexer from schedule mode back to realtime mode and then back to schedule mode, some database triggers are missing. What is the documented fix?
The documented fix for missing database triggers when indexers are in schedule mode is to switch to realtime mode and then back to schedule mode. This cycle removes the old triggers and recreates fresh ones. `indexer:reset` only marks the index as invalid — it does not affect triggers. `setup:upgrade` is for module schema upgrades not trigger management.
You've reviewed all 609 questions. Take the interactive practice exam to simulate the real test environment.
▶ Start Practice Exam — Free