A beautiful store design makes the first impression on your customers and speaks to them on your brand's behalf. An aesthetically beautiful site offers stickiness and helps you engage your customers better. StoreHippo offers simple tools and features under the design theme to make the process of creating an impressive web design template super-easy for you.
The StoreHippo theme designer allows you to edit your themes and preview your changes in real time. It has a wide range of tools that make the theme designer useful for beginners as well as experienced web designers.
To access the theme designer, click on the Design Theme icon in the top header of your StoreHippo Admin Panel.
Clicking on the icon will open the design theme in a new window.
The design theme consists of the Left Navigation Panel, StoreHippo Dashboard, and Top Navigation Panel.
The top navigation panel consists of many options which are explained below:
StoreHippo allows you to configure and design multiple themes for your store. Using this option, you can switch between themes and customise the settings of the selected theme. All the themes that you imported in the Site > Themes section of your admin panel
A message is displayed when the
Clicking on the mobile/desktop view button opens the mobile/desktop view of the site. You can review and edit the display as per your desire.
Using this option you can on or off highlighting of widgets in the 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:
The 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 the
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 the
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 the 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 used on the current theme page. You can edit any widget, click on the widget name in the
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 the 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 customise 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 with access to the banners section of the
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.
Every theme is a collection of multiple widgets. For certain common widgets like header, footer, home, etc., the theme might also offer alternative options. The Options section allows users to preview and switch between these options without editing the code.
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 the
When you add a new asset file, you need to include it in default layout of the theme 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 the 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 files.
This section provides various amazing functionalities that allow even a novice to design a website effortlessly. 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 quickly 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 with
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 select from your existing banners.
If you wish to choose the banners from your existing banners, you can use the drag and drop functionality for the same.
If you want to upload a new banner, click on the Upload New Banner button. Choose the file and enter its name, title, and subtitle. Provide the URL where you want to navigate the banner and publish it.
You can also search for banners from the design theme. Enter the name and various options for banners appear to choose from.
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.