What ways can we customize theme?

No coding required, all can be edited directly in admin panel. Select colors for dozens of elements using color pickers, set hundreds of options, apply textures for header, footer and for the entire page, upload background image and configure its properties (position, repeating, attachment), change font and font-size, and many many more …

This chapter refers the following section of the theme admin panel: EMThemes > EM Themes Manager > EM BaseTheme Settings

THEME INFORMATION

  • Theme Name: Name of theme
  • Identifier: Give the id of this block. It must be unique. You can’t edit Identifier of built-in theme
  • Base Theme: This field displays the parent theme name (identifier of parent theme)
  • Package: This field displays Design Package/Theme. The flexible blocks are visible on these Design Package/Theme will be visible on this theme
  • Preview: Thumbnail of theme

GENERAL SETTINGS

1. LAYOUT SETTINGS
  • Responsive Layout: detect the visitor’s screen size and orientation and change the layout accordingly. Your websites work well and look great no matter what devices you’re using to view it. Small + Medium + Large screen. One site for every screen!
  • Right to Left Layout: most of the user interface will appear mirrored automatically for you. The text direction changes to right-to-left with the exception of phone numbers and country codes which are always left-to-right

  • Box/Wide Layout: You can use this theme in wide or boxed layout variants. Wide layout is perfect for you, if you like airy websites, with invisible borders or page edges. Boxed layout comes with different ready-to-use background patterns & images, or you can define any color you would like to use by simply picking it with colorpicker. This theme comes with a lot of pre-defined patterns to choose from.

Box Layout

Wide Layout

  • Sticky Menu Search Cart On Scroll: is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without scrolling. gives your shopping cart users an easy sliding cart, which sticks to the position on page if web pages scrolls down too down, so cart users get better user experience to your site.
3. MENU SETTINGS
  • Default Navigation: If using EM MegaMenuPro, default catalog navigation should be disabled. If EM MageMenuPro has not been installed, default catalog navigation is always enable
4. GENERAL BLOCKS SETTINGS
  • Show Popup When Loading: Show a popup block when your site is loaded. If you choose “Flexible Block”, it will show flexible block (EMThemes > EM Manage Blocks) with ID embasetheme-popup-advertising-block
  • Ajax Addto (Add to wishlist, Add to compare): Allows customers to add products in wishlist or compare without reloading page which can generate better user interface for the customers.
  • Variation Block On Frontend: Display the module variation on frontend. For theme demonstration purpose.

THEME DESIGN

1. CUSTOM CSS
  • Additional CSS File(s): Upload your custom css file here skin/frontend/default/embasetheme/css directory. Then add custom css file name to this field. Multiple files are separated by a comma (,). You can create your own file as well. Note: Less Css File must always be first. E.g.: custom1.less E.g.: custom2.css E.g.: custom1.less,custom2.css
  • Your Custom CSS: If you know how to code and want to customize your site beyond the styling options in the default theme settings, you can add custom CSS code here. If you do decide to apply custom CSS to your site, it should be used sparingly. Customer Care doesn’t offer support or troubleshooting for CSS modifications. We also can’t provide you with code or support for any third-party code modification. Here are few popular and credible websites we would like to recommend for CSS tutorials, troubleshooting, and reference guides:

    . E.g: .header{background-color:red}

2. FONTS
  • Google Font API Key: You will need a Google API key to make use of google fonts. Your key is free and easy to get. However, many people get confused on this. It’s really quite simple:
    1. Logged in to your Gmail account;
    2. Go to the Google Developers Console.
    3. Create a project (example: “my google fonts”);
    4. Select a project.
    5. In the sidebar on the left, select APIs & auth In the list of APIs, make sure the status is ON for the Google Fonts Developer API.;
    6. In the sidebar on the left, select APIs & auth, In the list of Credentials click on Create new key, then choose Browser key, end click on Create button
    7. Copy the API key under “Key for browser applications”, that’s it.

    Click on this link http://vimeo.com/83986921 to view demo how to create new google font api key.

  • Import Google Fonts: Font preview is available on Google Web Fonts. Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want. Select which google fonts should be imported to your site. Hold SHIFT + left click a font to multiple select.
  • General Font Family: The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. There are two types of font family names:
    • 1. family-name – The name of a font-family, like “times”, “courier”, “arial”, etc.
    • 2. generic-family – The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

    Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: Separate each value with a comma. Eg: Helvetica Neue, Helvetica, Arial, sans-serif.

  • Google Fonts’ Weights: most of the fonts from Google are not available in all weights. Make sure that you specified correct weight for selected font. Otherwise font will not be displayed. Refer to Google Web Fonts to check if the selected weight is available for your font.
    Eg: 200,400,321,800.Leave empty to use default weight.
  • General Font:
  • H1 Font:
  • H2 Font:
  • H3 Font:
  • H4 Font:
  • H5 Font:
  • H6 Font:
3. PAGE
  • Page Background Color : Syntax: #number or rgba…
  • Page Background Pattern:
  • Upload Page Background Image:
  • Page Background Position: Property Values: left top, left center, left bottom,right top, right center, right bottom,center top,center center,center bottom,x% y%, xpos ypos, inherit
  • Page Background Repeat : Property Values: repeat, repeat-x, repeat-y, no-repeat, inherit
  • Page Background Attachment : Property Values: fixed, scroll, inherit
  • Box Shadow:
  • Rounded Corner:
4. HEADER

In this tab, you can configure the header section of the page located at the top.

  • Background
    • Header Top Background Color : Syntax: #number or rgba…
    • Header Background Cart Color : Syntax: #number or rgba…
    • Header Background Search Color : Syntax: #number or rgba…
    • Header Background Dropdown Color : Syntax: #number or rgba…
    • Header Background Image:
    • Upload Header Background Pattern:
    • Header Background Position:
    • Header Background Repeat:
  • General Color
    • Header Text Color : Syntax: #number or rgba…
    • Header Text Cart Color : Syntax: #number or rgba…
    • Header Text Dropdown Color : Syntax: #number or rgba…
    • Header Text Search Color : Syntax: #number or rgba…
    • Header Line Color : Syntax: #number or rgba…
5. MENU

In this tab, you can configure the Menu.

  • Top Menu Settings
    • Top Menu Background:
    • Top Menu Hover Background : .
    • Top Menu Text Color : Syntax: #number or rgba…
    • Top Menu Hover Text Color : Syntax: #number or rgba…
    • Top Menu Line Color : Syntax: #number or rgba…
    • Top Menu Font:
  • Vertical Menu Settings
    • Vertical Menu Background:
    • Vertical Menu Hover Background :
    • Vertical Menu Text Color : Syntax: #number or rgba…
    • Vertical Menu Hover Text Color : Syntax: #number or rgba…
    • Vertical Menu Line Color : Syntax: #number or rgba…
    • Vertical Menu Font :
  • Dropdown Menu Settings
    • Dropdown Menu Background Color : Syntax: #number or rgba…
    • Dropdown Menu Text Color : Syntax: #number or rgba…
    • Dropdown Menu Hover/Active Color : Syntax: #number or rgba…
    • Dropdown Menu Title Color : Syntax: #number or rgba…
    • Dropdown Menu Line Color : Syntax: #number or rgba…
    • Dropdown Menu Font :
6. BODY

In this tab, you can configure the Menu.

  • Background
    • Body Wrapper Background Color : Syntax: #number or rgba…
    • Body Container Background Color : Syntax: #number or rgba…
    • Body Background Brands Color, Title Block : Syntax: #number or rgba…
    • Body Tab Hover/Active Background Color : Syntax: #number or rgba…
    • Body Background Title Block sidebar Color : Syntax: #number or rgba…
    • Body Tab Background Color : Syntax: #number or rgba…
    • Body Label New Background Color : Syntax: #number or rgba…
    • Body Label Hot Background Color : Syntax: #number or rgba…
    • Body Label Special Background Color : Syntax: #number or rgba…
    • Body Background Image:
    • Upload Body Background Pattern:
    • Body Background Position:
    • Body Background Repeat:
  • General Color
    • Body Text Color : Syntax: #number or rgba…
    • Body Text Title Block Color : Syntax: #number or rgba…
    • Body Text Product Name, Title Page Color : Syntax: #number or rgba…
    • Body Text Price Color : Syntax: #number or rgba…
    • Body Text Title Tab Color : Syntax: #number or rgba…
    • Body Text Readmore Color : Syntax: #number or rgba…
    • Body Text Label Color : Syntax: #number or rgba…
    • Body Line Title Block : Syntax: #number or rgba…
    • Body Line Color : Syntax: #number or rgba…

In this tab, you can configure the Footer.

  • Background
    • Footer Background Color : Syntax: #number or rgba…
    • Footer Background Image : .
    • Upload Footer Background Pattern :
    • Footer Background Position :
    • Footer Background Repeat :
  • General Color
    • Footer Text Color : Syntax: #number or rgba…
    • Footer Title Text Color : Syntax: #number or rgba…
    • Footer Hover Link Text Color : Syntax: #number or rgba…
    • Footer Line Color : Syntax: #number or rgba…
    • Footer Social hover Colo: Syntax: #number or rgba…
8. BUTTON
  • Button 1 (Button Default)
    • Button 1 Background Color : Syntax: #number or rgba…
    • Button 1 Text Color : Syntax: #number or rgba…
    • Button 1 Line Color : Syntax: #number or rgba…
    • Button 1 Font :
  • Button 2 (Button sidebar)
    • Button 2 Background Color : Syntax: #number or rgba…
    • Button 2 Text Color : Syntax: #number or rgba…
    • Button 2 Line Color : Syntax: #number or rgba…
    • Button 2 Font :
  • Button 3 (Button Add To Cart)
    • Button 3 Background Color : Syntax: #number or rgba…
    • Button 3 Text Color : Syntax: #number or rgba…
    • Button 3 Line Color : Syntax: #number or rgba…
    • Button 3 Font :
  • Button 4 (Button Proceed to Checkout)
    • Button 4 Background Color : Syntax: #number or rgba…
    • Button 4 Text Color : Syntax: #number or rgba…
    • Button 4 Line Color : Syntax: #number or rgba…
    • Button 4 Font :
  • Button 5 (Button Add To Wishlist)
    • Button Add To Wishlist Background Color : Syntax: #number or rgba…
    • Button Add To Wishlist Text Color : Syntax: #number or rgba…
    • Button Add To Wishlist Line Color : Syntax: #number or rgba…
    • Button Add To Wishlist Font :
  • Button 6 (Button Add To Compare)
    • Button Add To Compare Background Color : Syntax: #number or rgba…
    • Button Add To Compare Text Color : Syntax: #number or rgba…
    • Button Add To Compare Line Color : Syntax: #number or rgba…
    • Button Add To Compare Font :
  • Button 7 (Add to cart, Wishlist, Compare on top product)
    • Button Background Color : Syntax: #number or rgba…
    • Button Text Color : Syntax: #number or rgba…
    • Button Line Color : Syntax: #number or rgba…
    • Button Font :

CATEGORY VIEW (GRID MODE)

1. PRODUCT COLUMNS ON DESKTOP
  • Product Columns – One column Layout:
  • Product Columns – Two columns Layout:
  • Product Columns – Three columns Layout:
2. PRODUCT COLUMNS ON DESKTOP SMALL
  • Product Columns – One column Layout:
  • Product Columns – Two columns Layout:
  • Product Columns – Three columns Layout:
3. PRODUCT COLUMNS ON TABLET
  • Product Columns – One column Layout:
  • Product Columns – Two columns Layout:
  • Product Columns – Three columns Layout:
4. PRODUCT COLUMNS ON MOBILE
  • Items Mobile:
5. GENERAL ELEMENT SETTINGS
  • Image Aspect Ratio:

CATEGORY VIEW (LIST MODE)

  • Image Aspect Ratio : 

PRODUCT VIEW PAGE

1. GENERAL SETTINGS
1.1. PRODUCT VIEW ONE COLUMN
  • Primary Column (Base Image Column) Width:
  • Base Image Width:
  • Base Image Height:
  • Secondary Column Width:
  • Tertiary Column Width:
1.2. PRODUCT VIEW TWO COLUMNS
  • Primary Column (Base Image Column) Width:
  • Base Image Width:
  • Base Image Height:
  • Secondary Column Width:
  • Tertiary Column Width:
1.3. PRODUCT VIEW THREE COLUMNS
  • Primary Column (Base Image Column) Width:
  • Base Image Width:
  • Base Image Height:
  • Secondary Column Width:
  • Tertiary Column Width:
1.4. ELEMENTS SETTINGS
  • Show Product’s SKU:
  • View mode:
  • Details Tabs:
  • Social Block:
2. MOREVIEW IMAGES
2.1. IMAGES
  • Thumbnail Width:
  • Thumbnail Height:
2.2. CAROUSEL SLIDER
  • Slider:
  • Max Slider Items:
  • Related Products:
  • Thumbnail Width:
  • Thumbnail Height:
  • Slider:
  • Max Slider Items:
4. UPSELL PRODUCTS
3.1. GENERAL SETTINGS
  • Upsell Products:
3.2. IMAGES
  • Thumbnail Width:
  • Thumbnail Height:
3.3. CAROUSEL SLIDER
  • Slider:
  • Max Slider Items:

CONFIG SIDEBAR BLOCK

  • Catalog layer navigation (Anchor ):
  • Catalog navigation (Non-anchor ) : .
  • Catalog search layer:
  • Related products :
  • Compare products :
  • Community poll:
  • Vertical Menu Background:
  • Popular tags :
  • Wishlist sidebar products :
  • Reorder sidebar products :

CROSSELL PRODUCTS

1. GENERAL SETTINGS
  • Crossell Products:
2. IMAGES
  • Thumbnail Width:
  • Thumbnail Height:
3. CAROUSEL SLIDER
  • Slider:
  • Max Slider Items:

CONTACT PAGE

  • Description: In this tab you will be able to configure showing Goolge Map with Store Contact Address on Contact Page. The theme will use your Store Contact Address which you configure in System > Configuration > General > Store Information
  • Block Map On Contact Page If you choose “Flexible Block”, it will show flexible block (EMThemes > EM Manage Blocks) with ID em0127-contact-page-static-block-replace-map.
  • Google Map API Url: Google Maps JavaScript API. Example: https://maps.googleapis.com/maps/api/js?v=3.17
  • Map Width: Width of Map. Value in pixels
  • Map Height: Height of Map. Value in pixels

CONFIG RICH SNIPPET ON PRODUCTS PAGE

  • Enable Rich Snippet:
  • Reviews And Rating:
  • Price And Instock:
  • Breadcrumbs:
  • Description:

OTHER IMAGE SIZE

1. IMAGES IN PRODUCT SIDEBAR
  • Thumbnail Width:
  • Thumbnail Height:
2. IMAGES IN SHOPPING CART
  • Thumbnail Width:
  • Thumbnail Height:

CONFIG FLASH TAG

  • Flash Tag:
  • Tags count view : .
  • Max font size:
  • Min font size :
  • Max text color :
  • Text normal color:
  • Vertical Menu Background:
  • Text hover color :

AJAX CART AUTO CLOSE

The EM Ajax Cart extension makes thousands of customers shop online more easily. EM Ajax Cart allows visitors to effortlessly add and remove products from your store without having to continuously click the “update” button. With each addition or deletion, only the shopping cart is refreshed. This immediate interaction allows users to continue shopping without waiting for pages to refresh. Best of all, it also works on the shopping cart and wishlist page, enabling deletions and additions without reloading page.

When any native Magento product type is added to cart from the category page, your consumers are not redirected to the product page, they are offered to select item’s options exactly from the pop-up confirmation dialog. With the EM AJAX Cart module, you can easily control process and cart animations, AJAX activity indicator, and confirmation dialog displaying.

The EM Ajax Cart extension allows you to display the pop-up window for items with different options: required or not. By the way, required product options will be always shown in a pop-up.

Now, you can config ajax cart popup auto close after a timeout:

  • Ajax Auto Close: Specify the second for ajax cart, add to wishlist, add to compare to auto-close.

EXCLUDED BLOCK FROM PARENT THEME

You can remove these blocks on this theme by choosing blocks below.

To exclude block from the theme, go to Excluded Block From Parent Theme tab and following these step: