Can Magento 2 theme be customized? The question is of relevance always. Picking the perfect theme for your store is half the battle your e-commerce.
The success of an online store depends on many things as a wide range of products, intuitive navigation, user-friendly search experience, and much other stuff helping the website to result in a completely satisfied customer.
To be honest, Magento 2 Luma is not such flexible as we want. It doesn't present enough features to make your website attractive and powerful. Need more lines of customization, wouldn't you agree?
And that is why we share the new article with you. It will show you some tricks based on Argento theme functionality which help to make your store presence more engaging for customers. Let's continue the discussion.
Is it possible to build a custom theme for Magento?
The answer is Yes. If you don't know how to create a custom theme in Magento 2, please follow our recommendations. We will look into this briefly. Get more information at Magento 2 developer documentation.
- First, you have to create a directory for the theme. The custom theme will be created under app/design/frontend directory.
- The next step is adding a declaration for the theme. You will create a file named theme.xml that predetermines basic information about your custom theme such as name, parent theme, preview image. We suggest you copy it from app/design/frontend/Magento/luma/theme.xml. Then you name your theme and choose any parent.
- Magento 2 default theme is distributed as a сomposer package. In order to spread the new theme as a package, you have to add a composer.json file to the theme directory and register the package on a packaging server.
- The next step is adding registration.php to register your theme to Magento 2. When it comes to Luma, see registration.php file in the theme.
- Time to create the directory structures for your theme layout, CSS, JavaScript, images, and fonts. You have to use the view.xml configuration file to configure all storefront product image sizes.
- The last step is to deploy your new custom theme. See the Apply and configure a theme in Admin section. To check if your theme is activated in your store, go to Magento 2 backend, then go to Content > Design > Themes.
- Now you can customize your theme styles. The manual customization requires good enough skills in managing theme file structure. https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.html
Once you created a custom child theme from Luma theme, you are able to keep customizing your theme's elements such as brand logo, footer text, menu text, slider image, etc.
But even considering the fact that Magento 2 brings more opportunities in terms of customization, it requires more efforts to make your website looks according to your needs, particularly if you need more complex functionality.
Why Argento theme is more flexible and functional than any other Magento 2 custom theme?
Argento template is more than just the improved look of your website. Even though plenty of available designs give you more creative freedom. Now we talk about fully custom functionality that provides:
- improved Magento 2 search results
- dynamic Magento 2 navigation menus
- advanced SEO settings
- the highest level of options
- wide range flexibility over the look and feel of your website
- full control over frontend and backend
And on top of that, Argento is a Magento 2 theme with unlimited customization possibilities.
The template brings the possibility to create the new _argento_custom.less file as well as the new argento-custom.js file which will be automatically included on all pages. Argento sub-theme gives you unlimited possibilities in theme customization like changing the layout instructions, template files, Javascript.
So what do we know about tricks which help to make your store presence more engaging for customers?
We begin a series of articles based on Argento theme functionality. We are going to show you the best ways to customize a Magento 2 theme, which will help you to extend your site functionality and make it highly convenient to your targeted customers.
Today we'll show you:
- how to make "Details" product tab opened by default
- how to display the product tabs under the product image
- how to assign SVG icons to any theme's element
- how to change the view of the homepage slider.
Let's go over this step by step. We will deal with Argento Luxury design.
Make "Details" product tab opened by default
The first step will be creating a custom theme. Once you apply it to your store, you have to create the file etc/view.xml in the theme directory. Please add the code as shown:
<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<vars module="Swissup_Easytabs">
<var name="options">{"active": 0, "collapsible": true, "openedState": "active"}</var>
</vars>
</view>
Please notice, in case the file etc/view.xml already exists in your theme, you have to add the code as follows:
<vars module="Swissup_Easytabs">
<var name="options">{"active": 0, "collapsible": true, "openedState": "active"}</var>
</vars>
Save file. Clean Magento Cache. View the product page in the frontend.
NOTE: Check the value of node var with name options. “active” with value 0 makes the first tab opened by default (tab index starts with 0). In a similar way, you can make any other tab opened by default. If you use -1, all tabs will be closed.
Show the product tab under a product image
If you like to have product tabs shown under the product image, you can easily implement the feature via Argento Luxury design.
You have to create a custom theme and apply it to your store. Then create file Magento_Catalog/layout/catalog_product_view.xml in the custom theme directory. Add the code as shown:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!-- Create container for main product tabs -->
<referenceContainer name="page.wrapper">
<container name="custom-before-footer-container" before="before-footer-container" label="Luxury Custom - container for main tabs" htmlTag="div" htmlClass="page-before-footer">
<container name="custom-before-footer-content" label="Luxury Custom - main tabs content" htmlTag="div" htmlClass="content">
</container>
</container>
</referenceContainer>
<!-- Hide additional tabs -->
<referenceBlock name="additional-tabs" display="false" />
<!-- Move product tabs into new place -->
<move element="product.info.tabs" destination="custom-before-footer-content" before="-"/>
</body>
</page>
For more information please check http://docs.swissuplabs.com/m2/argento/luxury/customization/#main-tabs-under-product-image
Save file. Clean Magento Cache. View the product page in the frontend.
Assign SVG icon to any HTML element
Argento Luxury theme comes with its own set of SVG icons. You can show icon using CSS class, for example:
<div class="luxury-icon luxury-cart"></div>
You can also assign an icon to any HTML element with less using .luxury-icon mixin, for example:
.minicart-wrapper .action.showcart .text {
.luxury-icon('cart');
}
See the list of available icons: heart, heart-listing, customer, cart, cart-listing, search, hamburger, letter, cart-alt, lock, headphones, arrow-left, arrow-right, bulb, compass, alert, success, error, warning, info.
For instance, you can improve the product tabs look with icons shown in the heading.
Change the view of homepage slider
On the screenshot, you can see the fullscreen Argento Luxury theme slider shown under the header. You can change it yet, for instance, if you'd like to keep visible some page elements such as the company logo, header navigation, and even the store’s search bar.
Argento theme provides an easy way to configure the homepage slider. Starting from Argento version 1.1.0 you can disable it in admin under Stores > Configuration > Swissup Theme Editor > Argento Luxury > Home Page > Enable Fullscreen Slider.
What about the other options to customize your Magento 2 theme?
Are there much more features you want to deliver? We're asking because we constantly work to develop and improve Argento theme. You can see you are definitely able to customize your template according to your e-commerce business needs.
So if you have more special requirements for Magento 2 theme customization, please drop us a line.
