Hana will work with any image size. However, for best results (both in terms of performance and quality), we recommend the following image dimensions:

• Blog post featured image: 1800×1000, in JPG format. The image’s point of interest should be in the middle, as this image will be automatically resized and cut off based on the screen size. 
• Collection images: 1800×1000, in JPG format. The image’s point of interest should be in the middle, as this image will be automatically resized and cut off based on the screen size.
• Product image: there is no recommended size, as it all depends on how you’d like to showcase your products. It could be square images, horizontal images or vertical images. The recommendation though is trying to stay consistent, using JPG format, and upload images that are as large as possible to give the theme enough flexibility to choose the correct size based on device. For instance, if you are using squared images, you could upload something like 1800×1800. If you are using vertical images, something like 1200×1700 can work well.

Hana theme offers a special section called “Shop the look”. It allows you to create look and position up to three products per look. This is a nice way to showcase your products in real-life situation.

We recommend you to use this section only once on your home page, and limit the number of looks to 3. However, nothing prevent you to include this section more than once. Unfortunately, due to performance reason, Shopify does not allows to display more than 20 products per page.

You can use one section “Shop the look” with 4 looks, each featuring 3 products (4*3 = 12 products, which fit into the limit) without any problem. However if you add the section twice with 4 looks, each featuring 3 products, you will end up with 24 different products, which will cause the issue.

Open the theme editor and choose “Product pages” in the page selector at the top:

Then, click on the “Default product” template:

Locate the “Description” block and drag and drop it at your desired position (for instance after the “Buy Buttons” block):

1-  First, you need to create a new page in Shopify admin. If you are already logged into your Shopify admin, just  click here.

Leave the content of this page empty. On the bottom right, you should find a box called “Templates”. In the dropdown menu, select the template called “page.faq”:

2-  Open the theme editor, and in the page selector at the top, enter the name of your page in the “Search” field:

Then click on the page in the list (of course, the name may be different if you have named it something different than “FAQ”):

You will be redirected automatically to the page. On the sidebar editor, click on the small arrow next to the FAQ section to expand the content.

You can then edit the existing content, remove content or add new content:

Shopify Markets allows you to easily translate your store into multiple languages, sell in different currencies, and set up different tax rates based on customers’ location. This allows providing a fully localized version of your store to customers coming from different countries.

Here are our recommendations when it comes to showing selectors:

• Disable both the country and language selectors in the header.
• Enable both the country and language selectors in the footer.
• Install the free Geolocation app from Shopify (https://apps.shopify.com/geolocation)
• Recommended: create new markets that contain only one language applicable to it (for instance, if you target Japan, you should create a new Shopify Market for Japan, with a domain for Japan and the appropriate language and currencies; this way, you won’t have to show English, French or whatever to a Japanese customer who will have no reason to use this). You can learn more about how to create a Shopify market by clicking here.

The reason we do not recommend having the selectors in the header is that they require significant space in the header. The header typically contains a lot of information such as logo, navigation, cart link… and can quickly become very crowded. Ideally, a customer should never have to directly interact with the localization selectors: instead, the customer should be automatically suggested the best choices in language and currency based on their geographical location. This is what the free Geolocation app from Shopify is doing.

Having the selectors in the footer (an area that is typically less crowded with important links) as a fallback allows your customers to eventually change their preferences in the future.

This setup provides the best combination of simplicity, by automatically suggesting to your customers the most appropriate experience, removing the frustration of your customers having to interact with different selectors, and keeping your header free of rarely used selectors so that they can focus on what matters the most in your store: your products.

By default, our themes add a “Powered by Shopify” link in the footer. While you cannot remove it from the theme settings, it is relatively easy to remove it from the code. The instructions depend on the theme you are using. Please select your theme below.

1-  In the theme list, click on “Actions” and choose “Edit languages”:

Enter Powered by Shopify into the search bar to filter translation, and locate the line outlined in red below:

Insert a single space so that at looks like this, and save the new languages:

In addition to standard dropdown menus, all our themes comes with a mega-menu feature. A mega-menu allows to show dropdown menu in a more elaborate and visual way. While the setup is pretty much the same for all our themes, the instructions slightly differ from theme to theme.

To read the appropriate instructions, please select your theme below.

mega-menu allows you to create several columns like this (this screenshot is coming from Hana):

First, you will need to define your menu structure by creating drop-down using the native Shopify menu interface. You can learn more on how to create menu and dropdown by  following the official Shopify documentation. In order to properly use mega-menu, you will need to set up a three-levels structure. You can see below an example of how the previous navigation structure looks like in Shopify:

By default, the theme will display your dropdown menu in a rather traditional way. To transform them into a mega-menu, open the theme editor and and click on the “Header” section:

Then click on the “Add mega menu” button:

In the “Mega menu” setting, simply enter the name of the menu item that contains the mega-menu (this means that the name entered in “Menu item” must match the name of one of the first-level items list). For instance, in our example, the mega-menu is contained within the “Shop” link, so we simply need to enter “Shop”:

You can optionally upload up to two images for each mega-menu.

Finally, make sure to click on “Save” button in the theme editor.

Some of our themes provide a color swatch feature on product page and/or collection page. Color swatch replace the traditional dropdown for variant options of type color. However, if you are using some color names that are non standard (like “zebra black”, or “denim blue” for instance), you will realize the color swatch appears white.

1- Open the theme editor and, in the bottom, click on “Theme settings”:

Select the “Color swatch” sub-section. In the “Configuration” box, you will need to enter the name of the color (as written in your Shopify admin), followed by :, and then either the hex color code or the name of a file. You must enter one mapping per line. For instance, here are a few example with hexadecimal code. When writing hex code, do not forget to add the initial # before the color code. It won’t work if it is omitted:

If you want to use more complex image (such as pattern), you can also use an image. To do that, you will first need to upload an image in the Files section of Shopify (we recommend a 128×128 image, either in PNG or JPG). You can learn more about how to do that here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads

In the configuration, instead of an hex code, enter the file name (do not forget the extension, it won’t work without it):

We often release new versions of our themes. Those new versions either fix bugs, introduce new features, improve performance (or sometimes remove features that were problematic).

Unfortunately, there is no way to upgrade easily a theme in Shopify, and for good reasons. Because you can install app, modify the code of the theme, and do all kind of changes, if Shopify would auto-upgrade your themes, all your custom changes would be erased.

As a consequence, when you download a theme from the  Website, you automatically download the latest version. The good news is that you can re-download a theme as many times as you want, for free.

Many merchants use Google PageSpeed or similar tools to evaluate their performance. Shopify also recently launched a built-in tool allowing one to get a performance score.

While focusing on performance is essential (everyone loves fast websites), the truth is that the theme is always never the reason for slow performance here. All our themes are being developed with performance in mind: we are using small, compact, and optimized code.

Despite this, your store performance may suffer over time. Here are various pieces of advice that you should absolutely follow if you want your performance to stay good.

• Always optimize your images. We can’t emphasize enough on this! So many people are uploading very heavy images. Images are, 99% of the time, the only performance issue you should care about. To do that, ensure you optimize your images before uploading them to Shopify (you can use this tool for JPG images or this one for PNG images). If you already have a lot of images uploaded to your store, you could try an app such as Crush Pics.
• Be careful with large images: it may be tempting to upload extremely large images (like 3000 px wide or bigger) to have the best quality possible. However, the larger the image is, the more time it will take to load. For instance, instead of a 3000px wide image for your slideshow, try uploading a 2000px image instead. If the quality is acceptable for you, it is probably a good trade-off to do. Remember that most customers will not zoom into most of your images.
• Remove apps that you do not use or are not essential: apps are fantastic. They can bring many exciting features to your store in no time. However, many apps add their code (JavaScript, CSS…) which can hurt the performance. We highly recommend you do an audit regularly of all your apps and remove the ones you do not use.
• Limit the number of apps: as a rule of thumb, not having more than three apps installed that are affecting the storefront is a good target. You can, of course, have more apps (some apps that do not impact your storefront have no impact on performance; for instance, apps like financing apps).
• Whenever you uninstall an app, make sure to reach the app developers to ask if there are extra cleanup processes. Apps, even if you uninstalled them, will often have leftover code (known as “dead code”) that, over time, can accumulate and affect the performance.
• Some Shopify features directly impact performance. For instance, the “dynamic checkout button,” which allows your customers to buy in one click from the product page, impacts the performance. You may consider trying to disable this feature.
• Be responsible in how you structure your pages: while the perspective of featuring a large number of products on the home page, with tons of sections, may seem appealing, this does not come free: the more content you add, the more time it takes for Shopify to generate your page, and the slower your performance is. Aiming for 4-6 sections on your home page is a good trade-off/
• If not required, try to avoid the “Map” section. This section uses the Google Map API and, while convenient and widely used by everyone; it is very performance intensive (they require a lot of scripts to be loaded to do the work). You could, for instance, move your maps to a content page instead of the home page, where the performance is not critical.
• Try to limit the number of videos that you are using. Using many videos is tempting, but videos always come at a cost. Showing one video is ok, but uploading too many may affect performance. If possible, you should avoid using video on long page (such as video) as it may impact the performance of already heavy pages.
• Finally, do not spend too much time on that: as long as you follow all the previous advice, you should not spend too much time trying to increase your score. There are a lot of external factors on Shopify that you cannot control. Because of the exact nature of e-commerce, you cannot have a super lightweight store (nobody will buy your products if you do not show images, videos, and rich content…). Performance is always a trade-off; it is important, but if it feels fast, it is likely fast enough, and you should not spend much more time on this.

A lot of people are often concerned about the best format to use for images. Unfortunately, there is no golden rule for that. However, here are some best practices:

• Make sure to always use JPG images (PNG are much heavier and take longer to load).
• Make sure to always optimize your JPG images by using a tool such as TinyJPG. Ideally, you should try to make sure your slideshow images are not more than 150 Kb.
• A good size that provides a good work-around between quality and performance is 1600×600.
• Do not include too many slides: try to stick with 2 or 3 at maximum. Not only it will make your site faster to load, but it has also been proven that most customers do not see slides beyond the second or third one.

By default, customer accounts are not enabled when you open a new Shopify store, which is why you may not see the links in the header. In order to show the customer accounts related links, you will need to enable this feature on your Shopify store. You can find the detailed instructions in Shopify documentation: https://help.shopify.com/en/manual/customers/customer-accounts#set-your-customer-account-preferences

If you have created multiple languages for your Shopify store, you may experience an issue where the selector only show up in the theme editor, but not in the actual store. This issue happens when you create multiple domain, but forgot to enable the languages for each domain.

To fix this issue, open your Shopify admin, click on “Online store” and “Domains”:

Then, for each of your managed domain, click on “Manage”:

Then make sure to select the languages you want to show for the specific domain (the screenshot below is an example, the list of languages will be different based on the languages you have created):

Unfortunately, deleting the express buttons on the checkout is no longer possible in any way since December 1st 2023 (you can find more info by clicking here). The Shopify checkout is 100% controlled by Shopify, and there is no way for us, theme developers, to control what appears in the checkout.

Our best suggestion would be that you reach Shopify support to let them know about your interest in hiding express buttons in the checkout, so that this may eventually be considered as a future improvement of the platform.