How to Set Up and Customize a Theme

Choose a theme that fits your business, apply it to your store, and customize text, colours, images, alignment, buttons and more, all from one editor.

Overview

A theme controls how your online store looks: its layout, colours, fonts, images and the sections shoppers see on each page. Hike gives you a library of ready-made themes organised by industry, so you can start from a design that already suits your business and then make it your own.

This article walks you through:

1. Finding the Themes page

2. Searching and filtering the theme library

3. Previewing and selecting a theme

4. Customizing your theme in the theme editor

5. Previewing and publishing your changes

Good to know: Applying a theme does not change your live store right away. New theme changes are saved as a draft and shoppers only see them after you publish. You can experiment freely.

Before You Begin

• Sign in to your Hike admin account.

• Have your logo, product or banner images, and brand colours ready (hex codes such as #1c1a17 work best).

• Decide on the look you want: for example, minimal and elegant for fashion, or bold and colourful for a food business.

Part 1: Open the Themes Page

1. From the left-hand menu of your admin, open Online store, then select Themes.

2. At the top of the page you will see the Current theme card. It shows the theme your shoppers see on your store right now, with a Customize button.

3. If you have unpublished work, a Draft in progress banner appears below it with a Continue editing button, so you can pick up where you left off.

4. Select View your store (top right) at any time to see your live store.

Below the current theme you will find the Theme library, which lists every theme you can choose from.

Part 2: Search and Filter the Theme Library

The library contains dozens of themes. Use the tools at the top of the library to narrow them down quickly.

Search

Type a name, industry or style (for example, luxury or bold) into the Search by name, industry or style box.

Filter by industry

Select one of the category chips to show only themes designed for that type of business:

• All themes

• Fashion & clothing

• Homeware & furniture

• Café & food

• Hair & beauty

• Toys & hobbies

• Tools & hardware

• Pets

• Other stores

• Classic themes

The number beside each chip shows how many themes it contains.

Filter by style

Use the All styles drop-down (right of the search box) to filter by look and feel, such as Bold or Luxury. Each theme card also lists its industry and style tags, for example Fashion & clothing · Minimal · Luxury · Classic, so you can tell at a glance whether it suits your brand.

Tip: Combine an industry chip with a style filter. For example, choose Fashion & clothing and then Luxury to see only upscale fashion themes.

Part 3: Preview and Select a Theme

1. Scroll through the theme cards. Each card shows a preview image, the theme name, its tags and a short description.

2. Select View on a card to preview the theme in full before committing.

3. When you have found the one that fits your business, select Use theme.

4. Hike creates a draft of your store with the new theme and opens it in the theme editor. A message confirms that your draft now uses the chosen theme and that you can customize it and then publish it to show it to shoppers.

Note: You can switch to a different theme later. Your products, collections and other store data stay in place.

Part 4: Customize Your Theme

The theme editor is where you make the theme yours. The screen has three main areas:

• Left panel: the controls for the page. It has four tabs: Sections, Menus, Styles and History.

• Centre: a live preview of your store that updates as you edit.

• Top bar: page selector, Desktop / Mobile view toggle, Preview and Publish buttons, and a save indicator (such as Draft saved).

Use the Home page drop-down at the top to choose which page you want to edit, or select Add page to create a new one. Select Themes (top left) to return to the Themes page.

Edit Sections

On the Sections tab you will see every block that makes up the page, grouped under Header, Main and Footer. Typical sections include Announcement bar, Header, Hero banner, Category collection, Image with text, Lookbook mosaic, Trust bar and Newsletter.

For each section you can:

• Select the section name to open its settings.

• Use the eye icon to show or hide it.

• Use the up / down arrows to reorder it.

• Use Hide section, Duplicate or Remove section at the bottom of its settings.

• Select All sections (top of the panel) to go back to the full list.

• Select Add to this page or Add to every page to insert a new section.

​

Below are examples of what you can change in common sections. Every change appears instantly in the preview.

Hero banner (the large banner at the top of your home page)

• Small text above the heading: a short label, for example The Autumn Collection.

• Heading and Text: your main headline and supporting message.

• Background image: select Upload photo to replace the image. Use a landscape image, about 2000 × 800 px (JPEG, PNG or WebP, up to 2 MB). Keep the main subject in the middle, as edges may be cropped on phones.

• Height: choose how tall the banner is, for example Large.

• Content alignment: place the text to the Left, Centre or right.

• Image darkening (%): slide to darken the photo so the text is easier to read.

• Content blocks (widgets): add up to 3 buttons, such as Shop the collection and Read the journal. You can edit each button's label and link, reorder them or remove them.

Header

• Sticky header: keeps the menu visible as shoppers scroll.

• Logo position: for example Left or Centre (menu below).

• Menu alignment: choose Automatic (follows the logo) or set it manually.

• Logo width: use the slider to resize your logo.

• Show search box and Show wishlist: tick or untick to turn them on or off.

​

Menu links are managed in the Menus tab. Use the Edit menus link in the header settings to go there.

Category collection ("Shop by category")

• Heading: edit the section title.

• Category collection: pick which collection feeds this section, for example Popular category. To change which categories belong to it, use the Edit collections link.

• Categories to show and Columns on desktop: use the sliders to control how many items appear and how they are laid out.

• Card style: for example Name below image.

• Heading alignment: Left or Centre.

• Background: choose None, Tinted and similar options.

• Schedule (Show from / Show until): optionally set dates for the section to appear automatically, for example for a seasonal sale. Leave empty to always show.

Image with text

• Image and Image description (alt text): upload a photo and describe it for accessibility and SEO.

• Image position: Left or right of the text.

• Small text, Heading and Text: edit all the wording. The text box accepts basic HTML for formatting, such as paragraphs and line breaks.

• Background: Tinted or None.

• Content blocks: add or edit a button, for example Read our story.

Lookbook mosaic

• Heading, Text and Heading alignment: edit the title and subtitle.

• Link and Link label: set where the section's button goes and what it says.

• Columns on desktop and Background: adjust the layout.

• Lookbook pictures (up to 12): add pictures with Upload photos or Add lookbook picture. Select any picture to edit its image, alt text, caption (shown on the picture), link and Size (for example Square or Tall (two rows)). Use the arrows to reorder and the × to remove.

Change Colours and Fonts (Styles tab)

Open the Styles tab to change the look of your whole store at once:

1. Under Style preset, keep Theme default or choose another preset.

2. Under Colours, update each colour by typing a hex code or picking from the colour swatch: Buttons and links, Text on buttons, Accent, Page background, Tinted background, Text, Headings, Sale and alerts, Header background and Footer background.

3. Under Typography, choose your Heading font and body font.

4. Changed a colour and want to undo it? Select reset beside it to return to the theme's default.

Because these settings apply store-wide, you only need to set your brand colours once.

Manage Menus

On the Menus tab, edit the navigation links that appear in your header and footer, such as Home, Categories, Products, FAQ and Contact us.

​

Check Mobile and Desktop Views

Most shoppers browse on their phones, so always check both views. Use the Desktop / Mobile toggle in the top bar to switch between them, and adjust images or text if anything looks cramped.

​

Undo, Redo and History

• Use the undo / redo arrows in the top bar to step backwards or forwards through recent edits.

• Open the History tab to review earlier versions of your draft.

• Changes save automatically. Look for Saving… and then Draft saved in the top bar. If you see Unsaved changes, wait a moment for the save to finish.

Part 5: Preview and Publish

1. Select Preview in the top bar to see your draft as shoppers will see it. A banner at the top of the preview reminds you that you are previewing unpublished changes, and an Exit preview link takes you back to the editor.

2. When you are happy, select Publish (top right) to make your changes live.

3. Select View your store from the Themes page to confirm everything looks right.

​

Tips for Best Results

• Start with the right industry. A theme made for your type of business needs the least customization.

• Use high-quality images at the recommended size, and keep file sizes small so pages load quickly.

• Keep text short. Clear headlines and one main button per section convert better.

• Write alt text for every image to help accessibility and search engines.

• Stick to two or three brand colours and make sure text has enough contrast with its background.

• Use Schedule to prepare seasonal banners or sale sections in advance.

• Preview before you publish, on both desktop and mobile.

Frequently Asked Questions

1. Will my store change as soon as I select Use theme?

No. The theme is applied to a draft. Your live store stays the same until you select Publish.

2. Can I try more than one theme?

Yes. Return to Themes, preview other themes and select Use theme again. Use History and the draft banner to manage your work in progress.

3. I closed the editor before publishing. Did I lose my work?

No. Your changes are saved as a draft. On the Themes page, select Continue editing in the Draft in progress banner.

4. How do I change what appears in my menus?

Open the Menus tab in the editor, or select Edit menus from the header section settings.

5. My image looks cropped on mobile. What should I do?

Use an image at the recommended size and keep the main subject near the middle. Check the Mobile view and adjust before publishing.

6. Can I hide a section without deleting it?

Yes. Select the eye icon beside the section, or use Hide section in its settings. You can show it again at any time.

Need More Help?

If you get stuck or want help tailoring your theme to your brand, contact our support team and include your store URL and a short description or screenshot of what you are trying to change.