​
Overview

Customizing your online store’s design allows you to create a unique and engaging shopping experience for your customers. HitPay offers several customization options to help you tailor your store’s appearance to match your brand and preferences. From adding your company logo to defining the layout and colors, these customization options empower you to make your online store truly yours. Store Design The following customization options are available to HitPay online store users:

​
Store Design Structure

The store design includes a unified navigation system with the following pages:
  • Homepage
  • Pages
  • Link in Bio

​
Global Components

The following components apply globally across all pages:
  • Announcement
  • Header
  • Footer

​
Customization Options

To further customize your Store’s appearance, you can navigate to the Store Design page by going to Online Store > Store Design in your Web Dashboard. The following customization options are accessible through the store design page:

​
Customizable Announcement for Promotions

Highlight your store’s special offers and promotions:
  • Navigate to Homepage > Announcement
  • Choose whether to make the announcement promotion closable.
  • Customize the announcement content.
  • Adjust the background color and text color.

​
Customizing the Header and Navigation

The header and navigation menu help define your store’s branding and improve customer navigation.
  • Navigate to Homepage > Header.
  • Under Settings:
    • Upload your logo and select its width.
    • Choose how to align your navigation menu and logo.
    • Click on New Menu to create a navigation menu.
    • Add an existing page or an external link to the menu.
    • Rearrange the menu items by dragging and dropping them.
  • Under Appearance:
    • Customize the background color and text color.

​
Adding a Store Banner

Highlight your store’s special offers and promotions:
  • Navigate to Homepage > Banner.
  • Upload and customize your banner image.
  • Choose full width, boxed, or half-width display.
  • Adjust alignment and overlay text options.

​
Adding Online Store Sections

Enhance your online store with customizable sections. Follow these steps to set up the Products, Categories, Text, Text & Image, Gallery and Embed Code sections:

​
Products Section

Define how your products appear on your storefront:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Products.
  • Choose which products to display:
    • All Products
    • Featured Products
    • Product Categories
    • Pick Specific Products
  • Under Settings:
    • Select the layout type (Carousel or Grid).
    • Choose how many columns to display.
    • Select the product image shape (Landscape, Square, or Portrait).
    • Choose whether to limit the number of displayed products.
    • Choose whether to display or hide the Categories Filter.
  • Under Content:
    • Add a section title and description to introduce the products.
  • Under Appearance:
    • Customize the background color and text color for consistency with your store’s theme.

​
Categories Section

Define and display product categories on your storefront:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Product Categories.
  • Choose which categories to display.
  • Under Settings:
    • Select the layout type (Carousel or Grid).
    • Choose how many columns to display.
    • Select the category image shape (Landscape, Square, Portrait, or Circle).
    • Choose whether to display or hide the View All Categories page.
  • Under Content:
    • Add a section title and description to introduce the categories.
  • Under Appearance:
    • Customize the background color and text color for consistency with your store’s theme.

​
Text Section

Share important messages, promotions, or information with a flexible text section:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Text.
  • Choose how many columns to display your text.
  • For a single column, select the text alignment: Split or Center.
  • Customize the title, description, and add a Call-to-Action button for each column.
  • Adjust text alignment and color options to fit your store’s aesthetic.

​
Text & Image Section

Combine text and images to create engaging and visually compelling content:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Text & Image.
  • Choose the image width for the text and image: Half Width or Full Width.
  • Select the text alignment.
  • Upload an image.
  • Under Content, add a title and description. Optionally, include a Call-to-Action button linked to a page or product.
  • Customize the background color and text color for alignment with your store’s theme.
Showcase your products, events, or customer reviews with the new gallery section:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Gallery.
  • Choose from three layout types: Carousel, Masonry, or Grid.
  • Select how many columns to display the gallery on web and mobile.
  • Upload your images and optionally assign captions, external links, and the option to show a lightbox when the image is clicked.
  • Add a section title and description to explain the gallery’s purpose.
  • Customize the background color and text color to align with your store’s branding.

​
Embed Code Section

Embed custom content, such as newsletter sign-up, map, social media feed, or interactive survey into your online store using the Embed Code section:
  • Navigate to Homepage or Pages > Sections.
  • Click on + New Section and select Embed Code.
  • Choose the alignment for your embedded content: Center or Split.
  • Customize the background color and text color to align with your store’s branding.
  • Add a section title and description to provide context for the embedded content.
  • Enter or paste your embed code directly into the Code field to display the external content on your store.
By customizing these sections, you can create a more engaging and visually appealing online store that reflects your brand’s identity and enhances the customer experience. Include a ‘Contact Us’ section with phone, WhatsApp, and Telegram links, as well as a ‘Follow Us’ section featuring email, other websites, and social network links.
  • Click on Homepage > Footer Content.
  • Find the ‘Footer Link’ section and click on it.
  • Click on ‘Add New Menu’ and fill in your Phone number, WhatsApp number, or Telegram.
  • Locate the “Social Media” section and click on it.
  • Click on ‘Add New Menu’ to input your links to your social network profiles.

​
Customizing Font, Color and Card Appearance

Enhance your online store’s user experience by customising your store appearance
  • Click on Style
  • Choose from predefined styles or customize your own.
  • For custom style you can customize fonts, background colors, button appearance, and card appearance.
Link-in-bio is a feature that allows you to create a single page that acts as a hub for all of your important links. Instead of having to constantly update your bio links on social media or elsewhere, you can simply direct people to your link-in-bio page. From there, they can easily access all of the resources that you want to share with them.
  • Click on Link-in-Bio.
  • Click on ‘Icon Links > Add More’ to add links you would like to highlight as icons.
  • Click on ‘Button Links > Add More’ to add links that you wish to showcase as buttons.

​
Adding Pages and Sections

Pages allow you to create structured content beyond your homepage, helping you organize information such as About Us, FAQs, or Custom Landing Pages. Each page can contain multiple sections, giving you flexibility in design and layout.

​
Pages

Each page consists of:
  • Page Title – The title displayed at the top of the page.
  • Banner – A large image or visual element at the top of the page.
  • Page Content Sections – Customizable sections that can include text, images, product listings, and other content.

​
To add a new page:

  1. Click on New Page.
  2. Provide a title, URL slug, and choose whether to add it to the navigation bar.
  3. Click Publish to make the page live.
Once created, you can add sections to the page to customize its layout and content.

​
Customising the Categories Page

You can customise the layout and content of your All Categories Page or individual Category Pages to better reflect your brand and guide customers through your product catalog.

​
What You Can Customise

Each categories page can include:
  • Title – Displayed at the top of the page.
  • Banner – An optional image or visual to showcase your store or key collections.
  • Content Sections – Add flexible sections such as featured collections, product carousels, images, or text.

​
To Customise a Categories Page:

  1. Go to Online Store > Categories.
  2. Select All Categories or choose a specific category.
  3. Click on the category to begin customising.
  4. Add, remove, or rearrange sections to fit your layout.
  5. Click Publish to apply changes to your live store.
Changes made to a specific category page will apply to all specific category pages.

​
Conclusion

Once you’re satisfied with the changes you’ve made to your store’s design, remember to click the Update button to apply them. You can then return to the HitPay Dashboard. By customizing your online store’s design, you create a visually appealing and branded shopping environment that resonates with your customers and enhances their shopping journey.