Design Website

Designing new Page

  1. Go to your Hankly Dashboard and Go to Website & Design → Pages
  2. Click "Edit in Designer" in the column with title "Homepage" to begin editing your page.
  3. If you're editing your homepage for the first time, you'll see a sample page with a few components to get started. Edit, Delete or add new components to design your page.

  4. Click the + button to add a new component below
  5. Click the Pencil icon to edit settings of the component
  6. You can Save your page by clicking Save/Publish → Save as Draft.
  7. Once finished, Click Save/Publish → Save & Publish to make your updated page public.

Creating a new Page

Step 1 - Add a Page

  1. Go to your Hankly Dashboard and Go to Website & Design → Pages
  2. Click "Add New" on top right corner.
  3. Add a Page Title, SEO Meta Title and SEO Meta Description
  4. Click Save

You will now be redirected to the list of pages you've created. It's time to design the page now

Step 2 - Add Content & Design your Page

  1. Click "Edit in Designer" to begin editing your page.
  2. You'll see a sample page with a few components to get started. Edit, Delete or add new components to design your page.

  3. Click the + button to add a new component below
  4. Click the Pencil icon to edit settings of the component
  5. You can Save your page by clicking Save/Publish → Save as Draft.
  6. Once finished, Click Save/Publish → Save & Publish to make your updated page public.

Duplicating a new Page

Duplicating a page is helpful when you're designing a page that looks similar to another page.

  1. Go to your Hankly Dashboard and Go to Website & Design → Pages
  2. Click in the rightmost column of the page that you want to duplicate.
  3. When prompted "Do you really want to continue?", Click Yes

Your page is now copied, you can make changes to this page and publish it for your audience.

Uploading your Website Logo

Leave your mark with customers, this will help them to connect with brands next time outside of your website. Your Brand logo explains your brand values, design it the same way.

  1. Go to your Hankly Dashboard and Go to Website & Design → Design → Logos & Favicon
  2. Click the icon on top-right corner of the Logo Box.
  3. Select the file you want to upload as your logo.
  4. Click "Save".

Recommendations for your Logo

  • Keep it minimal.
  • If it's vertical, it's easy to read and understand.
  • Remove the extra white space from your logo, to make the logo more clear.

Uploading your Website Favicon

  1. Go to your Hankly Dashboard and Go to Website & Design → Design → Logos & Favicon
  2. Click the icon on top-right corner of the favicon Box.
  3. Select a .ico file you want to upload as your logo.
  4. Click "Save".

Recommendations for your Favicon

  • Please choose at least 48px as the size of your favicon.
  • You can only use a .ico file in your favicon.

How to change the font on your website?

Font helps to add imagery to your context and colour helps to draw attention to a certain text

  1. Go to your Hankly Dashboard and Go to Website & Design → Design → Fonts
  2. To change heading fonts, Select a font type from the 1st select box.
  3. Change the font that you want to use from the 2nd select box.
  4. Some fonts come in more than 1 weights/style, select the weight that you want to use from the 3rd select box
  5. To change the default font of all the other text on your website, follow Step 2 -4 in the text boxes beside "Text Font".
  6. Click "Save"

Available Font Types

Sans-Serif

A category of font that does not use serifs, small lines at the ends of characters. The font is pretty clean and helps to convey modernity or minimalism.

Monospace

A category of font which is non-proportional. The letters and characters each occupy the same amount of horizontal space. This font is used to distinguish code from natural-language text.

Serif

A category of font where a small line or stroke is attached to the end of a larger stroke in a letter or symbol. These fonts often work well for printing. Such as publications, books and newspapers.

Display

A category of font that often has adaptations to increase legibility and make letters more distinct from each other.These fonts often work well for large sized headings rather than paragraphs of texts.

Handwriting

A category of font that is designed to come out as more natural to give the texts a more unique appeal. These fonts have a human appeal to them, so it evokes human emotion and character.

Store Page Layout

It is said that, "First impression is the last impression". A store page is where a customer can see at a first glance what your business has to offer. This is where customers who are just visiting your store turn into permanent ones.

How to change the design of store page?

  1. Go to your Hankly Dashboard and Go to Website & Design → Design → Store Page
  2. Click on any of the 5 designs that you want to choose as your store page.
  3. Turn on the toggle "Hide Product Page" if you don't want your customers to go to the product page by clicking the product. (This works only for Quick Add to Cart design)
  4. Click "Save"

You can check the preview of updated store page design by going to {yourwebsite.com}/store

Types of Store Page Layouts

  1. Default
  2. Quick Add to Cart
  3. Default No Shadows
  4. No Text - Rounded Corners
  5. No Text

Product Page Layout

A product page is where a customer can see all the features of a product at one glance. It includes features such as Prices, Size comparison, Product photos, Colours. It is totally up to the owner of the website and store on how you would want to customise the product page.

How to change the design of product page?

  1. Go to your Hankly Dashboard and Go to Website & Design → Design → Product Page
  2. Click on any of the 2 designs that you want to choose as your product page.
  3. Turn on the toggle "Enable Product Zoom" to enable product zoom. Hovering over the product will show a zoomed view of the product, this works only in legacy vie.
  4. Click "Save"

You can check the preview of updated store page design by going to {yourwebsite.com}/store and clicking any of your products.

Types of Product Page Layouts

Fullscreen View

Full screen view is a modern product page layout exclusively created by us, the customer when buying that product gets a fullscreen view an already zoomed image of your product and a nice sidebar with all the details.

Legacy View

Legacy view is the classic layout used on eCommerce websites, the customer when buying that product gets to see a thumbnail of various product images which they can zoom to see the details by hovering over them.

Track Order

Login

Mail Sent

Please check your E-Mail

Let's finish creating your free store, click the verification link we have sent to your email to get started with Hankly. If you do not find the email right away, please check spam.

Open your Gmail

Reset Password