The design theme consists of Left Navigation Panel, StoreHippo Dashboard, and Top Navigation Panel.
The top navigation panel consists of many options which are explained as below:
StoreHippo allows you to configure and design multiple themes for your store. Using this option, you can switch between themes and customize the settings of the selected theme. All the themes that you imported in Site > Themes section of your admin panel
A message is displayed when
Clicking on the mobile/desktop view button opens the mobile/desktop view of the site. You can review and edit the view as per your desire.
Using this option you can on or off highlighting of widgets in themes preview section.
Using this section, you can manage all themes which are applied to your store. When you click on MANAGE THEMES, it takes you the Themes section (Site > Themes) in StoreHippo admin panel.
Clicking on GO TO ADMIN takes you to the admin panel of your store. This button is directly linked to the admin panel of your store. When you click on it, you will get redirected to the admin panel.
View site opens the store's front end for you. This button is directly linked to your site.
Breadcrumb shows the name and URL of the page that you are currently editing in theme.
An optional link in the right corner takes you to another help
The left navigation panel consists of 4 sections described below:
Design section is ideal for beginners and users with little or no technical knowledge. It allows store owners to change the look and feel of their store by changing a few settings. In
Design theme consists of the general groups which are available in most themes. These are explained as below:
You can make the font based changes in the selected theme through the typography section.
All the variables related to the header of the selected theme are accessible in the Header section.
You can access the variables related to the home section of the selected theme in the Home section.
You can access the variables related to
You can access the variables related to the category page of the selected theme in the Category section.
You can access the variables related to the products page of the selected theme in the Products section.
When you make changes to these variables then you can preview your changes, whether these are looking good in your store or not before saving. If you are not satisfied with your changes then you can revert these also, otherwise, you can save your changes.
History option is also available to see the history of your changes. It is available at the bottom of variables. In history, you can see user id, time, difference data and also can revert your changes from here.
The HTML section lets you edit the widgets that make up your theme. By default, the HTML section shows only the widgets that used on the current theme page. You can edit any widget, click on the widget name in
Once you edit the widget, a popup appears that allows you to edit the code, settings, translations, and options of that widget. Different sections/tabs are explained as below:
You can access the HTML code of the selected widget in the Code tab. You can edit the code as per your requirement and save it.
StoreHippo provides the Options tab for the ease of use of the user having no or little knowledge of coding. This section allows you to preview and switch between these options without editing the code.
Translations in design theme allow you to translate the keys of a widget into another language. This tab lets you provide values to the supported keys for translations of a widget in another language. The values are used for translation on the storefront.
In the widget reference section, a list of reference and documentation of the global widget and objects used in the widget are provided.
This tab allows you to customize the
Let us take an example of a global widget ms.slides. Here, you can edit the sliding interval for the slides through widget settings.
StoreHippo provides the provision to access the admin panel for a particular entity in the design theme to make your experience better. For example, the data of ms.banner provides you
This section contains the list of all the widgets that are used in the selected theme. You can access and make changes to all the widgets of the theme here. You can edit the code, add translations and view widget reference of all the widgets of the theme. You can also add a new widget to your theme.
For more information about widgets, refer Widgets.
You can select any widget and preview the different options. You can choose whichever you like the best and apply it to the selected theme. For example, when you click on the header, then some options for
When you add a new asset file, you need to include it in default layout of the theme in order to use it in the selected theme.
For accessing the Assets section, your selected theme should be Local. If your theme is Global Or globally linked to the code, then you can not access assets. To access the section, you will need to unlink the theme.
By using Unlink theme option, you can unlink your theme from global code and access the Assets section.
Know more about the advantages of a global theme in StoreHippo, refer Globally linked themes.
StoreHippo provides some inbuilt assets for your theme as shown below. You can add or update the assets of the theme.
To add a new theme, click on Add a new asset. When clicked, the following window appears:
If you create a file, provide the file name and content of the file and save it. You can also choose to upload one or multiple asset
This section provides various amazing functionalities that allow even a novice to effortlessly design a website. The brief description of them is given below:
When you hover over widgets, the respective widget in the theme is highlighted as shown below. You can easily identify which widget's code you need to edit and change any section of the theme. Clicking on the widget name takes you to the code of the particular widget where you can edit it as per your requirement.
StoreHippo provides you
The support of drag-drop and uploading files directly
StoreHippo allows you to manage banners in the design theme in an effortless way. Hover over a banner and you will find Change Banner button.
When you click on the button, various options to upload banners appear in the left panel. You can either choose to upload a new banner or choose from your existing banners.
To add CSS in themes, follow the following steps:
The themes appearing in the Theme drop-down list are the themes that are imported into the admin panel from the StoreHippo themes gallery.
You can browse and import a new theme for your store in the Site > Themes section in StoreHippo admin panel.
Know how to import themes, refer
The Save button on the code tab of a widget is used to save the content of the particular widget. The Save all widgets button is used to save all the recently edited widgets.
The star before a widget denotes that the widget has been edited and the draft version of the widget is stored until it is saved.