Theme Documentation

Need Help?

Welcome to HelloThemes!

First and foremost, we’d like to thank you for choosing HelloThemes and welcome you to our wonderful community of ecommerce lovers! We’ve worked hard on our themes and their design, so you don’t have to. Our templates will save you time and money on the setup and configuration of your online Magento stores, making it easier and faster than ever.

In this document, you will find all the necessary instructions on how to install and manage your theme.

A few tips before you begin:

1. Add the domain where you will activate the theme in the following section of your account: Account Dashboard -> Licenses. If you don’t do this first, you won’t be able to activate the theme. 

2. Use your HelloThemes username when activating your theme (not your registered email address).

3. NOTE: The theme will overwrite your CMS home content once it’s activated. Save your content before proceeding.

Thank you!

Upload your theme

1. Download the zipped theme pack to your local computer from your HelloDashboard.

2. Extract the ZIP file contents to a folder on your local computer.

3. In the extracted folder you will find a theme directory. Find your Magento platform and Magento version, and then the latest theme version.

4. You fill find three folders in the theme files: /app – /media – /skin. Upload these folders to your Magento root folder (where you will also see three Magento folders with the same names). When uploaded, the respective theme and Magento folders with the same names will merge. Important: if your Magento install is under – /magento directory, paste the theme folders over this directory; don’t paste them inside the directory. If your Magento install is within your server root directory, move back one directory, then paste the theme folders over your public_html folder.

5. Navigate to – /System -/Cache Management.

6. Flush your Magento caché and log out from your Magento installation.

7. Log in again. Important: If you don’t do this, you won’t see the HelloThemes navigation tab in your Admin panel.

Note: Remove the -/index.php from your URL for optimal functionality of your Media Gallery.



1. Once you’ve logged back in to your Magento, you will see the HelloThemes tab in your Admin panel navigation menu. Click on Theme Activation.


2. Fill the fields with your HelloThemes username (not your registered email address) and password (if you don’t remember your password you can reset it from your account).

3. Select the theme you want to activate and click on the Activate HelloFramework button.

4. A message will appear once your theme has been successfully activated. Navigate again to -/System -/Cache Management. Refresh all cache items and also Flush Magento Cache and Cache Storage.

5. That’s it! You’re done. Now go to the Theme Settings option within the HelloThemes navigation tab and start customizing your theme!

Note: There’s no need to add static-blocks for this theme. Once you activate it, the static-blocks are added automatically by the theme’s framework.

Page Builder

The HelloThemes Magento Page Builder lets you set up your store by just dragging and dropping any element you want with it’s intuitive interface. It allows creating advanced custom layouts and responsive column based content, using our new exclusive widgets for Magento. Just choose which elements you want to place and easily move, edit and resize all of them with just the click of a button. It’s so easy no further explanation is needed, just check it out and play around and you’ll get the hand of it in no time.


The following is a detailed list of all the setting options you will find on your theme and their purpose. No explanations are required on how to configure them due to our extensive and easy to use Framework.

Note: for each color picker, you will find a lifeguard icon with an image of the element to be modified. Please make sure that you’ve selected the website where you have HelloPiazzolla installed.


  • Responsive layout: Enable/disable the responsive layout.
  • Newsletter popup: if you enable this option, a popup with a CMS static block will be displayed on your homepage. Use it to display important news or a newsletter subscription option.
  • Number of visible cross-sells.


Header Links

  • Display/hide Top Links: Show top links for a fluid usability or disable the module for a clean header, or select which elements you want to display.

Top Search

  • Display/hide top search


  • Display top menu: If you select NO, your main menu will not be displayed.
  • Display “Home”: Show/hide the “Home” link on your main menu.
  • Display “View all” in menu: You can display a link to view all subcategories of a parent category.
  • Display subcategories in menu: If you select NO, only parent categories will be displayed in your main menu.

Category View

  • Breadcrumbs: Display to help your customers navigate your website.
  • Images:
    • Alternative image:  Display a secondary image for your products in mouseover event.
    • Alternative image value: you can choose the label for your secondary image.
Category (Grid mode)
  • Number of columns: Select the number of products displayed in a single row. The value of Maximum Page Width is set to 1024 px.
    If the value of Maximum Page Width is bigger, the number of columns will be automatically increased to show more products per row. For example: if the Number of Columns is set to 3 and the Maximum Page Width is 1280 px, then 4 products will be displayed per row.
  • Product grid display:
    • Product hover effect: You can disable the product image animation.
    • Align center: Align center elements of the grid item such as product name, price, button etc.
    • KeepFrame on images: The KeepFrame parameter guarantees that the image will be not cropped.
  • Display selected elements
    • Name
    • Display name in a single line
    • Price
    • Ratings
    • Stock
    • SKU
    • Add to cart
    • “Add to” links
    • Show “Add to” links as icons above the image
    • Display “New” label
    • “New” label text – Show “From” for New label
    • Display “Sale” label – Show “To” for Sale label
Category (List Mode)
  • Product hover effect
  • Show “Add to” links as icons
  • KeepFrame on images
  • Display ratings

Product Page

  • Width of columns
  • Related Products
    • Number of visible products
    • Empty related
    • Popup related
  • Up-sell products
    • Number of visible products
  • Other elements
    • Show SKU
    • Show Stock
    • Display “New” label
    • Display “Sale” label
    • Display ratings
    • Display tabs


  • Footer links
  • Add or edit your custom footer links
  • Display newsletter subscription

Customization settings

  • Load custom CSS: enable this option to load a custom.css file, with which you can override the default theme style. To create a custom.css file, you can use the sample.custom.css file located in -/skin -/frontend -/hellothemes -/yourtheme -/css directory. We strongly recommend you use custom.css and the child theme functionality. This will save you from many headaches when you update your theme to it’s latest versions, as you will be able to safely overwrite all of the parent theme files without worrying about losing your modifications.

Mobile App

  • Activate tooltip: to display a popup in iOS devices and bookmark your site in a desktop device. This function will use your store icons for iOS.
  • Icons: they must be set up in different sizes (57×57, 72×72, 114×114). The allowed type of files are .jpeg, .gif and .png.


Show/hide sidebar elements. Once they are enabled, you can move them with the drag and drop method.


  • Ajax wishlist.
  • Ajax cart
  • Show Back to top button
  • Enable Quickview






  • Font size: size of regular text. Font size of most of the other elements will be calculated relative to this value.
  • Google Fonts: there are over 100 publicly available fonts.
  • Font: select and preview a font from Google’s Fonts.





Mobile Menu

Category Image

Try the classic display or choose the elegant Parallax effect to give your categories a modern look.


Flex slider

Select multiple slides by store and configure the title and descriptions. Upload an image for desktop view and a small image for mobile devices.

Revolution slider

Default parameters:

  • delay: the time each slide stays on the screen in milliseconds (default: 9000).
  • startheight: basic height of the slider in the desktop resolution in pixels. Other screen sizes will be calculated according to this value (default: 490). It should be similar to the settings of the style sheet. If you use a fullwidth banner, it will define the maximum height of the banner by resizing the browser. The banner won’t be higher than this value.
  • startwidth: basic width of the slider in the desktop resolution in pixels. Other screen sizes will be calculated according to this value (default: 890). It should be similar to the settings of the style sheet. If you use a fullwidth banner, it will define the maximum width of the banner by resizing the browser.
  • hideThumbs: time after which the thumbs will be hidden (default: 200).
  • navigationType: display type of the navigation bar (default:”none”). Options: bullet thumb – in the fullwidth version thumbs won’t be displayed  if navigation offset is set to show thumbs outside of the container. Thumbs must be shown in the container! Not both.
  • navigationArrows: display position of the navigation arrows (default: “nexttobullets”). Options: nexttobullets, verticalcentered.
  • navigationStyle: look of the navigation bullets (default: “round”). Options: round navbar round-old square-old navbar-old. If you choose navbar-old, we recommend to choose navigationArrows to “nexttobullets.”
  • touchenabled: enable Swipe Function on touch devices (default: “on”) Options: on, off.
  • navOffsetHorizontal: the bar is centered but can be moved by pixel count. For example: left (-10) or right. (default: 0). By resizing the banner, it will be always centered.
  • navOffsetVertical: the bar is bound to the bottom but can be moved by pixel count. For example: up (-20) or down. (default: 20).
  • shadow: the shadow display underneath the banner.
  • onHoverStop: stop the timer when hovering the slider. Options: on, off.
  • thumbWidth: the basic width of a thumbnail, only if a thumbnail is selected. (default: 100).
  • thumbHeight: the basic height of a thumbnail, only if a thumbnail is selected. (default: 50).
  • thumbAmount the amount of thumbnails visible at the same time, only if a thumbnail is selected. All thumbs will be hidden in smallest Responsive Level, and in smaller level default size is reseted to 60x30px. Can be modificated in the settings.css file)
  • hideCaptionAtLimit It Defines if a caption should be shown under a Width Limit ( Basod on The Width of Banner ! ) You need to define the captions which should be shown seperately with data-captionhidden=”on/off”
  • hideAllCaptionAtLilmit Hide all The Captions if Width of Browser is less then this value
  • hideSliderAtLimit under this Limit the Slider is hidden and the timer is stopped
  • fullWidth on/off It turns on the Horizontal Centering of Images in FullWidth version. In Case the Image is bigger then the container width, it fits the image with its height in the container and centers horizontally.
  • stopAtSlide -1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !
  • stopAfterLoops -1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped “x” time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 !


Restore Default

Trouble in paradise? Restore the default configuration and try again with other settings.


HelloPiazzolla comes with a year of support from our specialized Support Team. Please send a Support Ticket if you have any issues and they will get back to you in 24-48 hours and help you with anything you may need.

Please keep in mind the following before submitting a ticket:

1. Each theme comes with it’s own Theme Documentation that includes instructions on how to correctly install and activate your theme. Please read this detailed document before asking how to install your theme. Note most of them include video-tutorials and step by step instructions to avoid any complications.

2. We do not provide support for Magento issues. We know it can be tricky but we only give our customers assistance with our themes. For problems related solely to Magento, we suggest you visit Magento’s official website where you will find a ton on info from Magento and it’s community.

3. We do not answer “How do I…?” customization questions. If you need help with customization and theme modifications, please visit the Magento Commerce Forum or our Community Forum where customers help each other. Please remember that if the reason for your issue is a customization or modification you have made, we won’t be able to help. We only fix issues that could be caused by our own theme development.

For more information, read our Support Policy.


Revolution Slider: Responsive jQuery Plugin

Google Fonts: Lato

HTML 5: Upload image, ratio with drag and drop