Store Design
Customizing the design of your online store
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.
The following customization options are available to HitPay online store users:
- Add a company/brand logo
- Customize Store Design
- Customizable Top Banner for Promotions
- Adding and Customizing a Navigation Menu
- Add a store cover image
- Defining Product Sections
- Customizing Your Footer
- Customizing Font, Color and Card Appearance
- Add Pages
Adding a Company/Brand Logo
To add your company or brand logo, follow these steps:
- Go to your HitPay Web Dashboard.
- Navigate to Settings > Business.
- Click the upload button to add your logo.
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 Top Banner for Promotions
Highlight your store’s special offers and promotions:
- Navigate to Home Settings > Header > Top Banner.
- Choose whether to make the banner promotion closable.
- Customize the banner content.
- Adjust the background color and text color.
Adding and Customizing a Navigation Menu
Enhance your online store’s user experience by creating a navigation menu that directs your customers exactly where they need to go.
- Click on Home Settings > Header > Header.
- Click on ‘Add Menu’ to create a new navigation menu.
- Choose to add an existing page or an external link to the menu.
- Rearrange the items in your navigation menu by dragging and dropping them.
- Select the navigation alignment: Left, Center, or Right.
- Customise the background color and text color.
Adding a Store Cover Image
Enhance your store’s visual appeal by adding a cover image:
- Navigate to Home Settings > Header > Banner.
- Select the banner type: full width or boxed.
- Click the upload button to add your cover image. You can upload multiple images that will be displayed in a rotating slideshow.
- Choose the preferred size and preview your cover image on the right side of the screen.
Defining Product Sections
Define how your products are displayed on your online store:
- Click on Home Settings > Sections.
- Select a section or add a new one.
- Choose which products to display: featured products, product categories, or all products.
- Specify the layout: carousel or grid.
- Select the number of products per column.
- Choose the product image shape: Landscape, Square, or Portrait.
- Display or hide product category filters.
- Limit the number of displayed products.
- Add a section title and description.
- Customise the background color and text color.
Adding Online Store Sections: Categories, Text, Text & Image, and Gallery
Enhance your online store with customizable sections. Follow these steps to set up the Categories, Text, Text & Image, Gallery and Embed Code sections:
1. Categories Section
Define and display product categories on your storefront:
- Navigate to Home Settings > Sections.
- Click on + New Section and select Categories.
- Select which categories to display.
- Under Appearance, choose how many columns to display, select the category image shape (Landscape, Square, or Portrait), and choose to display or hide the View All Categories page.
- Under Content, add a section title and description to introduce the categories.
- Customise the background color and text color for consistency with your store’s theme.
2. Text Section
Share important messages, promotions, or information with a flexible text section:
- Navigate to Home Settings > 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.
- Customise 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.
3. Text & Image Section
Combine text and images to create engaging and visually compelling content:
- Navigate to Home Settings > 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.
4. Gallery Section
Showcase your products, events, or customer reviews with the new gallery section:
- Navigate to Home Settings > 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.
5. 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 Home Settings > 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.
Customizing Your Footer
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 Home Settings > Footer > 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.
Adding a ‘Link-in-Bio’
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
Expand your online store’s content by adding additional pages:
- Click on Pages and then click on ‘Add New’ at the top right corner of the screen.
- Provide the page title, cover image and content. Click Publish when done.
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.
Was this page helpful?