The Spectrum Magento Megamall Theme is an advanced, fully customizable theme suitable for e-commerce sites possessing a huge range of products. It has an adaptable design that allows you to show off the categories, banners, and product items, certainly attracting more customers to your megamall site.
Empowered by the fantastic Magento 2, Spectrum comes with various powerful e-commerce features that will help you to build a megamall website without any cost and time for coding. The theme is packed up with an array of complimentary extensions, including Megamenu, Product Slider, Quick View, and Advanced Search.
It seems quite a complicated task to build a professional-looking and functional e-commerce supermarket. The main issue is in the amount of products sold. It has to have the most intuitive navigation and checkout. Also, the online store shouldn’t be overflowed with content or information. How to achieve all these goals? The Spectrum Magento Megamall Theme will help!
Developed by a profound team of Magento developers at SoftProdigy, Spectrum is for Amazon-like megamall stores, featuring a wide range of product categories and customization options. To illustrate the functionality and design of the Spectrum Magento Megamall Theme, let’s take a look at its core elements.
The Spectrum Magento Megamall Theme offers a great opportunity to create an online supermarket with minimum time and effort. All you need to do is just install the theme and start selling. Time to get started with your online megamall journey!
In case you’ve already got a Magento website and you want install our theme into your website, you can use theme package.
If you haven't a Magento website, you need to install a freshed Magento before install this package.
There are three main steps to install it:
Go to your Magento installtion folder. Copy and paste the pakage watch-theme.zip to this folder. Then unzip it.
Use SSH, go to Magento root directory.
Run commands:
Access to admin panel, and go menu Softprodigy> Flexible Theme > Settings.
The infinitd theme list is displayed on this page. You only need to hover on your favorite theme and click on button Activate, the referent theme will be enabled.
Refresh Magento cache and back to home page, the theme was installed successfully!
MagentoSphere theme provides header styles.
To select header
To edit header:
1) General | |
Header Identifier |
This is the unique identifier of header. |
Header Title | The name of header |
Extends CSS from | If you want to get the design of another header and only need to change colors, you can extend the CSS style of parent header with this field. |
Enable | Enable or disable the header. |
2) Font/Color Variables | |
You can change header colors, backgrounds with fileds in this section | |
3) Layout Structure | |
The layout XML of header. |
|
4) Extra Content | |
Some header will use extra text for its content (link list, telephone, image…). |
Our theme supports 13 footer styles (and update more in next theme versions).
To switch footer:
To edit footer:
1) General | |
Footer Identifier |
This is the unique identifier of footer. |
Footer Title | The name of footer |
Extends CSS from | If you want to get the design of another footer and only need to change colors, you can extend the CSS style of parent footer with this field. |
Enable | Enable or disable the footer. |
2) Font/Color Variables | |
You can change footer colors, backgrounds with fileds in this section | |
3) Layout Structure | |
The layout XML of footer. |
|
4) Content | |
The content of footer. You can edit links, images,… of footer with this field. |
We use page builder to generate content of home page.There are available 10 designs for home page. You can choose one and adjust it (add new element, remove element, change text, change layout, change colors,…) to get your wish design.
To switch home page design:
To edit home page:
1) General | |
MainContent Identifier |
This is the unique identifier of content builder. |
Main Content Title | The name of this layout. |
Enable | Enable or disable the content builder. |
2) Font/Color Variables | |
You can change main content colors, fonts, backgrounds,… with fileds in this section. | |
3) Main Content Builder | |
The content builder. You can generate your home page content by drag-drop tool: adding, remove, edit, config elements. For more details, please check Feature tab->Page Builder Feature. |
Refer FAQ tab |
To config options of theme, go to menu: Softprodigy > Flexible Theme > Settings.
On the theme list, hover on the theme are using and click button Config.
Please refer to FAQ tab.
Please refer to FAQ tab.
1. CHANGE CATEGORY PAGE STYLE
2. CHANGE PRODUCT PAGE STYLE
Go to menu Softprodigy> Flexible Theme > Settings.
Select your current theme.
Configure Google Map in section Pages > Contact.
Please refer to FAQ tab.
Firstly, you can use page builder as a CMS Block.
Our theme supports Softprodigy Flexible Block widget. You can insert this widget into anywhere by using one of default elements of Magento below:
Insert new widget
Go to menu Softprodigy > Flexible Theme > Settings. On the theme list, hover on your current theme and click button Config. In theme settings page, go to tab General, group Header and choose main menu in the field Select Main Menu.
Go to menu You can use Magento widget to add a exist menu to any position and any page you want.
To create a new mega meu, go to Back office menu Softprodigy > Megamenu Drag & Drop > Manage Megamenu. Click button Add new menu.
Settings | |
Title |
The title of menu, using for managing menus in menus list. |
Identifier | The identifier of menu, using for selecting which menu will show in frontend. Therefore, each menu must have a unique identifier. |
Menu type |
There are two options:
|
Wrapper CSS Class | The CSS class of menu HTML wrap element. |
Dropdown Style |
There are two options:
|
Dropdown Animation |
The animation of dropdown menu after hovering the mouse on menu. There are four options:
|
Enabled | If set No, the menu will not be displayed in front page. |
MENU LEVEL
DRAG AND DROP ITEMS TO MENU
Item Link |
Add a single hyperlink to menu. Options:
|
Categories List | Add a categories list to menu |
Level 2 is the dropdown menu of a level 1 item. For this item level, there are 5 types that you can use:
Item Link | The dropdown is a group of single links. |
Categories List | The dropdown is a list of categories. |
HTML Content | The dropdown is a custom html content. If use this type, you can add your favourite html, select layout |
Tabs | The dropdown is a tabs layout. |
Bootstrap 24-Columns | If you have knowledge about Boostrap CSS, you can use this type to build your favourite dropdown content. Our module supports Boostrap 12-Columns. This type will help you build a complex layout for dropdown menu. If the dropdown layout is not very complex, you should use HTML Content instead. |
Moreover, you can also use a combination of types above to set up a level 2 dropdown. For example:
DRAG AND DROP HTML CONTENT TO MENU
SETTINGS
Custom CSS Class | The custom CSS class for dropdown HTML element in DOM. |
Custom CSS Inline Style | The custom CSS inline style for dropdown HTML element in DOM. For example: padding-bottom: 50px. |
Dropdown Width | The width of dropdown content (calculated by pixel). |
Dropdown Content | The layout and HTML content of dropdown. |
Background for content | The background image of dropdown content. |
EDIT TOOL
You can edit the HTML content with our edit tool.
Help you edit the dropdown content with WYSIWYG Editor. | |
Help you to insert widget (See more in II. ADD WIDGET TO YOUR CONTENT). | |
Insert available HTML template to your text. Base on those templates, you can modify them to make your favourite dropdown content. |
DRAG AND DROP TABS TO MENU
To set up a tabs, you have to use a tabs container and some of tab items.
TAB CONTAINER
Custom CSS Class | The custom CSS class for tab container HTML element in DOM. |
Custom CSS Inline Style | The custom CSS inline style for tab container HTML element in DOM. For example: padding-bottom: 50px. |
Tab Width | The width of tab container. |
Tab type | Horizontal or Vertical (view image below). |
Background for content | The background image of tab container. See more in II.3.D Background image |
TAB ITEMS
Tab Title | The title of tab item link. |
Tab URL | Redirect link when clicking on tab item link. |
Custom CSS Class | The custom CSS class for tab item panel in DOM. |
Tab Content | The layout and HTML content of tab item panel. This setting is similar to setting of Dropdown Content. See more in II.3 HTML Content for menu |
Background for content | The background image of tab item panel. See more in II.3.D Background image. |
Go to menu Stores > Attributes > Product.
Create an attribute:
This attribute will be used as a brand group. All its option values are used as brands. You can use an existed attribute like Manufacturer.
Remember to add this attribute to product Attribute Set (Go to menu Stores > Attributes > Attribute Se). From now, every time you create a new product, you can choose brand for it through this attribute. Moreover, when you import products by import tool, you can import values for this attribute.
Go to menu Softprodigy > Shop by brand > Brand Settings. Select Attribute Used as Brand.
In this section, you can also set value for other configurations relating to brand page, brand block.
Go to menu Softprodigy > Shop by brand > Manage Brands.
Go to menu Softprodigy > Lookbook Pro > Lookbook Item. Click button Add New Item.
In edit page, enter the look name. In Photo Config section:
Go to menu Softprodigy > Lookbook Pro > Lookbook
Go to menu Softprodigy > Lookbook Pro > Lookbook Category
Go to menu Softprodigy > Lookbook Pro > Settings
The Product Filter Widget for Magento 2 allows you to easily show product listings on any page in your store filtered by category and any product attribute. You can use it to create products list on homepage.
Option | Description |
Display Type |
Type of products are filtered.
|
Number of Products to Display | (number) Limit the number of products to show. |
Order by | Used to sort the data in ascending or descending order |
Show on frontend | Choose which elements are visible on product list. You can select multiple elements by holding Ctrl and clicking |
Thumbnail Width | The product thumbnail width (in pixels). |
Thumbnail Height | The product thumbnail height (in pixels). |
Template | Choose a template to display products list. |
Custom template |
This option is displayed once you select Custom template for Template field. E.g., If you input: grid-style-01.phtml. The full path of this template will be: app/design/frontend/Softprodigy/magentosphere/default/Softprodigy_ProductFilter/grid-style-01.phtml |
Conditions | You can make a rule for filtering products. E.g, with the rule “Category is 120, 125, 137, 325”, all productsbelong to categories withid 120 or 125 or 137 or 325 will be displayed on your product list. |
Cache Lifetime (Seconds) | Expiration time in seconds that this product list show be cached. |
Click pencil icon to edit slideshow.
Slideshow settings:
Click pencil icon at Slide items section to add slide image and caption.
We have some classes to set the caption animation.
You can add/change these classes to adjust the caption position.
For caption animation, now we only use the slide-down effect.
Go to menu Stores > Settings > Configuration.
Go to tab Softprodigy > Ajax Layer Navigation.
With each attribute, you can define the displaying style for attribute options in category page (checkbox, slider, drop, link, ...) by following:
Change the style in the field Properties > Extra Options > Custom Frontend Style. Click button Save and clear Magento cache.
The Labels extension for Magento 2 help you to create multiple labels on product item. Moreover, you can manage Labels items in admin panel, create a rule to display labels on product which matches your rule.
To manage Labels, in admin panel, navigate to Softprodigy > Product Label > Manage Labels
In this section, we guide about the options of a Labels in details
Option | Description |
---|---|
Label Title |
The name of label Options: string |
Status |
Whether this label is enable or not Default: Enable Option: Enable, Disable |
Label Content |
You can input any text on the label, for instance, new, hot. If your label is
Sale, you can input the percentage of price off by clicking on Insert
Variables at the below, and choose Options: string |
Label Image |
Image for the label instead of text Options: image |
Label Background |
Background image for the label Options: image |
Custom Class |
Custom css classes if you want to make own style for label Options: string |
Custom CSS |
This option allows you input css styles directly to make style for label Options: string |
- Go to backend menu Content > Elements > Pages.
- Select your home page.
- Edit the field AMP Content. Please make sure your HTML tags are valid with AMP rule. If this field is empty, the value of "Content" field will be used for AMP version of this page with a HTML filter.
In this field, you can use Softprodigy AMP Products List
to insert product grid/list/slider.
- Go to backend menu Content > Elements > Pages.
- Select the page you want to edit.
- Edit the field AMP Content. Please make sure your HTML tags are valid with AMP rule. If this field is empty, the value of "Content" field will be used for AMP version of this page with a HTML filter.
In this field, you can use Softprodigy AMP Products List
to insert product grid/list/slider.
Go to backend menu Softprodigy > Google AMP > Settings
You can configure all options of Social Login module in System Configuration Panel.
From Magento Admin, select
Store > Settings > Configuration > Mageplaza Extensions > Social Login
.
From the Admin Panel, go to
Store > Settings > Configuration > Mageplaza Extensions > Social Login
, choose General
sections
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Facebook.
Facebook Login dialog will be shown after clicking on Sign in with Facebook button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Google.
Google Login dialog will be shown after clicking on Sign in with Google button
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Amazon.
Amazon Login dialog will be shown after clicking on Sign in with Amazon button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Twitter.
Twitter Login dialog will be shown after clicking on Sign in with Twitter button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Linkedln
LinkedIn Login dialog will be shown after clicking on Sign in with LinkedIn button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Yahoo.
Yahoo Login dialog will be shown after clicking on Sign in with Yahoo button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Foursquare.
Foursquare Login dialog will be shown after clicking on Sign in with Foursquare button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Instagram.
Instagram Login dialog will be shown after clicking on Sign in with Instagram button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Vkontakte.
Vkontakte Login dialog will be shown after clicking on Sign in with Vkontakte button.
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Github.
To enable/disable this feature or change its options, you can go to menu Catalog > Shipping Estimation > Settings.
Go to menu Softprodigy > Flexible Theme > Settings. Hover on your current theme and click button Config
From Theme settings panel, go to section Pages > Product View
Set Yes for the field Display Size Chart
Size Chart Type = Link to a CMS page.
Then write the URL of the page you will use into the field Size Chart Page Link
Size Chart Type = Popup - content is a CMS block.
Then select the block you will use with options in the field Size Chart Popup
You can use a product attribute (Catalog Input Type for Store Owner = Text Area) for size chart content.
Size Chart Type = Popup - content is a product attribute value.
Then write the code of the attribute you will use into the field Size Chart Attribute
Size Chart Type = Popup - content depends to product attribute set.
Then write the mapping into the field Size Chart Attribute Set Mappings
Use syntax below:
attribute set 1 name>:CMS block 1 identifier
attribute set 2 name>:CMS block 2 identifier
(Break line to add new mapping). E.g.:
Default:codazon-sizechart-default
Women Clothing:codazon-sizechart-women-clothing
Note: Empty Size Chart Link Label field below to use the cms block name as link label.
Go to menu Catalog > Ajax Layered Navigation Pro > Settings.
From the tab Softprodigy > Ajax Layered Navigation, set Yes for the field General > Enable product listing infinite scroll.
Go to menu Softprodigy > Flexible Theme > Main Content. Select your main content and go to its edit page.
Use Container element to make a section. If you want to display its reference link on the floating bar, you can use the options below (click image to view full):
Get icon code here
Go to backend menu Softprodigy > Flexible Theme > Settings
Hover on your current theme and click button Config
The options of Newsletter Popup are in the screenshot below (click image to view full):
Go to backend menu Content > Elements > Blocks
Select the block which you choose for Newsletter Popup field (view section 1. Settings) and edit its content.
Our page builder, header builder, footer puilder support lazyload.
To use lazyload for images on home page, you can use the html class cdz-lazy
<img class="cdz-lazy" src="<img src>" width="<img width>" height="<img height>" >
E.g.
<img class="img-responsive cdz-lazy" src="https://softprodigy.in/pub/media/wysiwyg/softprodigy/main-content-12/img-04.jpg" width="1420" height="400" >
Frontend output will be:
<img class="img-responsive cdz-lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" data-lazysrc="https://magentosphere-watch-theme.softprodigy.in/magentosphere/pub/media/wysiwyg/softprodigy/main-content-12/img-04.jpg" width="1420" height="400">
With Softprodigy Advanced Search Box Widget, you can display the Advanced Search Form on any page you want such as home page, cms page, product page...
Go to menu Content > Design > Configuration.
Select the default store or current store and click Edit.
Go to field Other Settings > Header > Logo Image and upload your logo.
Go to menu Softprodigy > Flexible Theme > Main content
.
Go to your current main content edit page
Go to menu Softprodigy > Flexible Theme > Main Content.
Select your current used main content.
Go to section Font/Color Variables > Product swatches (Product view page). Edit value for swatch size fields.
If you use swatch images, you need to change the default sizes of swatch images following
vendor/magento/module-swatches/etc/view.xml
to (create necessary directories if not exist):
app/design/frontend/Softprodigy/magentosphere/default/Magento_Swatches/etc/view.xml
Go to menu Content > Design > Configuration.
Select the default store or current store and click Edit.
Go to field Other Settings > HTML Head > Scripts and Style Sheets and insert your custom script:
Then refresh Magento cache.
Go to menu Content > Design > Configuration.
Select the default store or current store and click Edit.
Go to field Other Settings > Footer > Miscellaneous HTML and insert your custom script:
Then refresh Magento cache.
Go to directory
app/design/frontend/Softprodigy/magentosphere/default/web/images/flags/
Add your custom store flag with name:
flag_<store view code>.gif
Access to your website and check language switcher. If the flag is still not displayed on the language switcher, please run command setup:static-content:deploy.
To enable RTL view, you can go to menu Softprodigy > Flexible Theme > Settings.
Hover on your current theme and click "Config" button to go settings panel.
In the tab General, you can enable RTL view with the field "General > Enable Right To Left Layout". Then click button Save Config and clear Magento cache.
TIP: If you want to enable RTL view for a store, you can use Store switcher to change the store before change the setting.
Go to menu Softprodigy > Flexible Theme > Main Content.
Select and go to your current main content edit page.
In the section Font/Color Variables > Typography, you can change the fonts as screenshot below.
Go to menu Softprodigy > Flexible Theme > Header.
Select and go to your current header edit page.
You can change the colors the section Font/Color Variables
Go to menu Softprodigy > Flexible Theme > Main Content.
Select and go to your current main content edit page.
You can change the colors the section Font/Color Variables
Go to menu Softprodigy > Flexible Theme > Footer.
Select and go to your current footer edit page.
You can change the colors the section Font/Color Variables
Go to menu Softprodigy > Flexible Theme > Settings.
Select your current theme.
Set No for General > Header > Enable Full Search Box.
Go to menu Softprodigy > Flexible Theme > Settings.
Select your current theme.
Configure Google Map in section Pages > Contact.
Clone the file:
vendor/magento/module-contact/view/frontend/templates/form.phtml
to
app/design/frontend/Softprodigy/magentosphere/<your current theme>/Magento_Contact/templates/form.phtml
and edit the new file.
Go to menu Softprodigy > Flexible Theme > Settings. Click button Config on your current theme.
In settings page, edit the field Pages > Product View > Maximum Height of Details Tab. Then click button Save Config and clear Magento cache.
Rename the file
app/code/Softprodigy/ThemeLayoutPro/etc/csp_whitelist.xml.sample
to
app/code/Softprodigy/ThemeLayoutPro/etc/csp_whitelist.xml
and add the media source host into the whitelist according the media type (script, style, frame,...). Then clear Magento cache.
Notice: If you don't see this file, please upgrade the theme to the newest version Click here
E.g.:
Go to menu Softprodigy > Flexible Theme > Settings. Hover on your current theme and click button Config.
The content of this block is specified by the field Pages > Product View > Custom Text. This is a CMS block.
To edit the content of this block, go to menu Content > Elements > Blocks. Choose the block which you selected in the field Custom Text and edit its content. Then clear Magento cache.
Frontend
Backend
Go to menu Stores > Settings > Configuration. View the field Web > Default Pages > CMS Home Page to know the current page used for home page.
Go to menu Content > Elements > Pages. Select the page used for home page and edit its title.
Go to menu Content > Elements > Pages. Select the page with title "Softprodigy Home Page" and edit its title.
Go to menu Softprodigy > Flexible Theme > Settings. Hover on your active theme and click button Config.
Edit the value of the field Pages > Home page > Custom script in head tags.
Then clear Magento cache.
After that, continue to clear the Facebook cache via https://developers.facebook.com/tools/debug/