Theme Customization
Molti Ecommerce offers numerous impressive features. Below, we provide simple video guidance on how to make various changes. You can utilize the Search Feature at the top for ease.
Last updated
Was this helpful?
Molti Ecommerce offers numerous impressive features. Below, we provide simple video guidance on how to make various changes. You can utilize the Search Feature at the top for ease.
Last updated
Was this helpful?
So you’ve purchased the Molti Ecommerce Child Theme? You’ve made one of the best decisions in your life. In this guide, we’ll see how you can customize the Molti Ecommerce Child Theme to make sure the Molti Ecommerce is your very own website.
Molti Ecommerce Comes with 6 different and cool-looking Header Designs to choose from. So If you’d like to change to any of the other designs for your Main Header. First, go to Dashboard -> Pages and search for “Header Designs” and Edit with Divi Builder. Once you’re in the Divi Builder, copy the Header section you’d like to use and then come to Divi -> Theme Builder -> Edit Global Header and paste the Section here. That’s it.
Molti Ecommerce Theme also provides you 6 awesome-looking Footer Designs to choose from. The process is pretty much the same as you’ll do to change the Header Design. Go to Dashboard -> Pages and search for “Footer Designs” and Edit with Divi Builder. Once you’re in the Divi Builder, copy the Footer section you’d like to use and then come to Divi -> Theme Builder -> Edit Global Footer and paste the Section here. Said you, It’s pretty much the same process!
Want to change those Testimonial Images on the Business Homepage of the Molti Ecommerce Theme? Then this will help you with that. For that, please go to Appearance -> Theme Editor and then Select Molti Theme and then select style.css file. And then scroll to the line 330 and from there you’ll be able to change the Images easily. You’ll have to change the Image URLs on line 334 for the first Image and so on. As in this image.
You can easily make your Molti Ecommerce Header Sticky on Scroll. For that, go to Divi -> Theme Builder -> Edit Global Header, and open the Section/Row Settings that you want to make sticky on Scroll. In the Settings go to Advanced Tab -> Scroll Effects -> Sticky Position -> Stick to Top. Then Save the Changes and check your Header on Frontend.
If you want to customize the Advance Dropdown Content, go to Dashboard -> Divi -> Theme Builder -> Edit Global Header and here Enable the Layers View and look for "Molti - Dropdown 2" Section and you can expand the Layers View to edit the content of Dropdown.
On the Homepage Feature Section, you see Icon Hover Effect and to change their color you can follow the screenshot below.
The Services Cards shown on the Services Page looks really cool with an awesome hover effect. But here's how to change the color of that card. Go to the Row settings -> Column Settings -> Advanced tab -> Custom CSS -> Before and here change the color code. This video will help:
If you've decided not to use WooCommerce like many of our customers, then you need to do a small tweak. If you deactivate WooCommerce, you'll get a "Critical Error" message on your site. To fix this critical error message go to Appearance -> Theme Editor -> Molti Ecommerce -> functions.php and remove code from line 39 to 50 and the "Critial Error" issue will be gone forever.
Do you want to change the text in the "New" indicator Badge in the Menu or change the Background color and more? For that, go to Dashboard -> Appearance -> Theme Editor -> select Molti - Ecommerce -> Go to style.css and search for "new symbol," and you'll see the CSS for the New indicator. You can see the screenshot below to learn how to customize things:
To add the New Indicator to any Menu Item you wish, you need to add Class to the Menu Item.
For Main Item = molti-new-icon main
For Sub Menu Item = molti-new-icon
If you want to remove the Badge from the Menu Item, remove the Class from that Menu Item.
You might be struggling a bit with changing the My Account sidebar background color. But It's not that difficult. Simply Open up the Layers View and Open the Orange Section settings -> Background -> Column 1 Background and change the color here. See this image:
If you're going to Translate your site to some other language, you might want to change these texts from the Theme's Style.css.
Change Text on line 1111 -> "View Details" -> Changes Text on Portfolio Module.
Change Text on line 1350 -> "Quick View" -> Changes Text on Shop Module.
Change Text on line 1819 -> "Remove" -> Changes Text on Cart page Remove Icon.
Change Text on line 2107 -> "Review Content" -> Reviews under My Account area.
Change Text on line 2310 -> "Remove" -> Changes Text on Wishlist page Remove Icon.
Change Text on line 2666 -> "New" -> Changes Text on Menu Item with New Indicator.
Change Text on Line 2868 -> "Navigate" -> Changes Text on My Account V2 Page.
Another can be changed by going to the functions.php file and here go to line 614 and changing the text "View Review" to your own text.
If you want to redirect your customer to the My Account page after login, here's what you can do to achieve this, See this quick video for better understanding.
In the latest update, you can now find the Login area and My Account area on the Account Page. Here's a video for help.
If you feel the need to make the Products to show in 2 columns on Mobile, then don't worry, you can do that easily. You just need to make a small CSS change for that, simply go to Dashboard -> Appearance -> Theme File Editor -> Style.css, and here make these changes on lines 2762 and 2763:
Change Width to 50%
Margin to 0%
This is the Testimonial section that you'll find on the Services page, and here's a video to help you edit the content of all 4 Testimonials in this design:
Changing the divider line that shows next to some Headings on the homepage is quite easy, you simply need to open up the Module settings and change the Box Shadow color; here's a video for help:
Editing the Search Dropdown is easy; it's just a little bit hidden but can be easily accessed using Divi's Layers View.
Simply click on the Layers View Icon and search for "Search Form", then you'll see the Row for the Search Form. Simply edit this Row and remove the class from this Row to see it inside the Builder to make your changes. Once done, add the class back so it remains hidden on the front end.
Video walkthrough:
