If you own a Magento 2.0 store on the cyberspace, you probably noticed how rigid the settings are when it comes to customizaing the various front end elements like fixed buttons, text for options and thumbnails.. you know the works. But you want your store to stand out. What’s the point of investing in an online store when it’s just like the other 200,00 or so stores that are powered by Magento?
But it’s not a lost cause. You can tweak and redesign your store to suit your style of business, and what’s more, at no extra costs whatsoever. Because unlike most other Magento customizations that have you spending thousands of dollars for bespoke developments, this is a Do-It-Yourself!
The intent of this article is to guide you through modifying the basic templates of various front end elements in Magento 2.0 in 5 simple steps. These could be something as simple as changing the text for ‘Add to Cart’ button (as demonstrated) or changing the default layout and the look of any UI element. Magento 2.0 stores the design and formatting of various front-end elements in the form of templates, within the theme. All you need to do is locate and modify these templates.
Word of Caution: To successfully modify these template files you have to be extra careful; a single error can potentially harm the functioning of the entire theme and bring your site to a standstill. If you’re looking for a complete overhaul of your Magento 2.0 theme, it’s recommended you get in touch with a Magento expert.
Let’s begin!
Pre-Requisites
- An active installation of Magento 2.0. If you don’t have one, you can download it here.
- Working knowledge of Magento 2.0 and its various modules.
- Basic understanding of PHP, HTML, XML and CSS.
Note: This article is specific to Magento 2.xx.
Running Magento 1.xx ? Old Is Just Not Sold! Migrate to Magento 2.0 Today
[space]
Step 1: Creating Child Theme
To make sure that you don’t accidentally disrupt your theme and end up being stuck with a non functional site, you have to first create a child theme. This child theme will have the your current Magento theme as the parent theme.
The steps to create a child theme in Magento 2.0 can be found here. Make sure you include all the templates you want to modify in the child theme. I took the liberty of creating a child theme called Product Templates for the purpose of demonstration.
Modifying the child theme and not the original parent theme also makes sure that you don’t lose your changes with Magento updates.
Step 2: Identifying The Template
The basic intention of overriding a template is that you want to change or alter or style a default UI element. But first, you need to first identify the template responsible for that UI element.
For example, let us consider the Add-To-Cart Button on single product page and change its text to Add-To-Basket.
- Magento provides an option which you can use to find out the templates for different UI elements.
- Navigate to Stores -> Configuration -> Advanced -> Developer
- On the Developers tab, under Debug, you should find an option Enabled Template Path Hints for Storefront.
- Set that option to “Yes” and hit Save Config.
- Refresh Cache and then Navigate to one of the single product page on frontend.
- You will find various red statements on the page, which are nothing but paths to the templates that are responsible for frontend UI elements.
- Over the ”Add-to-cart” button, you will find the template location for Add-to-cart button as
“/var/www/html/public/vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml”.
- Note that this template can be different based on the parent theme that you are using.
- Once you have identified the template file, move to Step 3.
Step 3: Overriding The Template
This is where we actually override the default setting for the template. In the child theme, you need to first create the Template Directory structure. Considering
“/var/www/html/public/vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml”
as the template file path, the directory structure for overriding template would be :
“<path-to-child-theme-directory>/Magento_Catalog/templates/product/view/”
Copy the main template file i.e “addtocart.phtml” from
“/var/www/html/public/vendor/magento/module-catalog/view/frontend/templates/product/view/”
to
“<path-to-child-theme-directory>/Magento_Catalog/templates/product/view/”.
That’s it. You have overridden the base template file with your theme’s template file. To cross check, go to Stores -> Configuration -> General -> Design and select the child theme you created as the Design Theme.
Save Config and refresh Cache.
Step 4: To Check If The Template Is Properly Overridden
Head to Single Product Page on the front end and check the template which is being shown in hints. If the template is properly overridden, then the hint should show your child theme as the template file path.
If not, there may be some error in the directory structure you created. Flushing Magento Cache might help you here.
Step 5: Make Changes
Once the template is overridden, it’s all yours to play around with; you can customize it in every possible way you can. For demo purposes, let’s change the “Add to Cart” text to “Add to Basket”.
- In the addtocart.phtml file, you will find a small piece of code as,[space]
- Change that code to
- Check it on front end. Don’t forget to disable the hints.
Good job! The template has been identified, overriden and successfully modified! The same procedure would apply to every other template, you shouldn’t have no problems whatsoever in giving your Magento Store a minor revamp!
More Magento Tip & Tricks? Check Out The Complete Walkthrough To Installing Extensions On Magento 2.0
