Go to /app/design/frontend
1.Declare your theme
<?xml version="1.0" encoding="UTF-8"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>My First Theme</title> <!-- your theme's name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image --> </media> </theme>
2.Add registration.php
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/stark/my-first-theme', __DIR__ );
3.Configure images
Product image sizes and other properties used on the storefront are configured in a view.xml
configuration file. For example, here is the view.xml
of the Magento Blank theme: app/design/frontend/Magento/blank/etc/view.xml
copy that and past your view.xml file
4.Include CSS
include your CSS in default_head_blocks.xml of the Magento_Theme module, which defines the default <head> page section for all Magento pages.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/styles-m.css" /> <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> <css src="css/print.css" media="print" /> <css src="css/custom.css" media="print"/> </head> </page>
Magento theme location
Storefront themes are conventionally located under app/design/frontend/<Vendor>/. Though technically they can reside in other directories. For example Magento built-in themes can be located under vendor/magento/theme-frontend-<theme_code> when a Magento instance is deployed from the Composer repository.
Resize catalog images
Generally, product images are cached while saving the product. However, the magento catalog:images:resize command enables you to resize all images for display on your storefront.
php bin/magento catalog:images:resize