BaseTheme

NOTE: We’ve developed a native UB Theme Helper which gives a handy and practical customisation panel built-in as a core feature in all Magento 2 themes at Ubertheme. It allows to easily customize almost anything (Font, Color, Background, Button, Product Labels, etc.,) with ease via user-friendly interface. Check out the userguide for UB Theme Helper here.

Magento extension BaseTheme is a handy and practical tool for you to customize your eCommerce Magento store with ease.

This documentation will guide you step by step to customize our Magento themes with BaseTheme.

Theme customizing refers to (1) configuring the settings of theme profiles and (2) assigning an actual profile to a configuration scope.

1. Profiles

A profile refer to a group of settings for site appearances upon a Magento theme. Eg. Once installed theme A, you can customize its settings to create different profiles blue, green, black & white. These profiles may have different colors settings or background image, etc.

2. Configuration Scopes

If you choose your Current Configuration Scope as Main Website, the customizing results will work with all of your store views. Otherwise, you can choose to customize each store views separately.

You can select to customize the entire page or any store view separately.

Navigate to System >> Configuration. In the top left, find the Current Configuration Scope.

Magento extension documentation: back-end settings

Click to choose your desired scope.

You can now configure multiple themes for one Magento website.

1. Navigate through System >> Configuration >> Design.

2. Select your desired Current Configuration Scope as discussed.

3. Enter the section Themes, in the field Default, input your desired theme for this scope.

Magento extension documentation: back-end settings

4. Now Save Config. Your current Configuration Scope has been defined with one particular theme while the whole website is defined with another one.

1. Log in to your Admin Panel e.g. http://www.yourdomain.com/admin.

2. Navigate to BaseTheme.

Profile Settings

Magento extension documentation: back-end settings

1. Untick the checkbox.

Note : Once checked at Use Default, all of your profile will be set as the default settings. To view your default settings, change your Current Configuration Scope to Default Config.

2. Select your Active Profile. In any particular theme, there will be several pre-profiles designed by UberTheme. You can choose one or create a totally new one.

  • Clone this Profile : Select this to duplicate the chosen active profile.
  • Restore this Profile : Click this to come back to your last default profile.

General Settings

1. Theme Settings

Magento extension documentation: back-end settings

Theme Settings section defines the general appearance of your site.

  • To input colors: Click at the icon of Color picker to select your desired one; or input color code into the textbox.

Magento extension documentation: back-end settings

  • To input image: Upload the image from your computer. To delete a selected image, check {Delete Image}.

Magento extension documentation: back-end settings

Note : To apply Header Background color, Header Image must be transparent or empty.

  • Show Product Label : Choose to show or hide the Label in front-end. If Yes, add new attribute with attribute code “label” (if not available), then add it to attribute sets.

2. Social Button URLs

Social Button URLs section defines your shortcuts to various social channel eg. Facebook, Twitter. Simply add your site urls as you want. Otherwise, leave the fields as empty.

Magento extension documentation: back-end settings

3. Product Layout

The two sections Product Grid Layout Settings (Desktop) and Product List Layout Settings (Desktop) is to define the Product List layout in your front-end. Simply input the numeric values as you want.

Magento extension documentation: back-end settings

4. Product Detail Settings

This section defines your Product Detail page appearance on front-end.

Magento extension documentation: back-end settings

  • Show Upsell Products : Select Yes to show Upsell Products.
  • Number of Upsell Products : The best value here is 4 items.

Note : Upsell Products section shows the recommended items in the product detail page as below.

Magento extension documentation: back-end settings

5. Off-canvas settings

This section defines the effect of Off-canvas parallel menu in your front-end. Simply select the effect type that you want.

Magento extension documentation: back-end settings

Settings for Tablet

This sections defines several responsive settings for tablet devices. Simply input your desired values or leave it as default.

Magento extension documentation: back-end settings

Settings for Mobile

This sections defines several responsive settings for mobile devices. Simply input your desired values or leave it as default.

Magento extension documentation: back-end settings

Settings for Core profile

Depending on the particular theme, BaseTheme has different Core Profile section. You can upload images or select colors here for site logo, separator, next/pre slideshow, etc.

Magento extension documentation: back-end settings

  • To input colors: Click at the icon of Color picker to select your desired one; or input color code into the textbox.
  • To input image: Upload the image from your computer. To delete a selected image, check {Delete Image}.
  • All the image backgrounds should be transparent for the best view in front-end. If you want to use the default image of the theme, leave the field as empty.