Skip to main content

Customizing Online Store

E
Written by EPOS Support

Overview

This comprehensive guide walks you through personalizing your online store's appearance, layout, and branding to match your business identity and optimize the customer ordering experience. A well-branded store builds trust and can significantly increase conversion rates.

Who is this guide for?

  • Store Owners & Managers establishing their brand's online presence.

  • Marketing Staff responsible for maintaining a consistent brand image across channels.

  • Anyone tasked with updating the online store for promotions or seasonal changes.

Before You Begin

  • Permissions: You need administrative access to the EPOS360 online store settings.

  • Assets Ready: Have your logo, banner images, and any promotional graphics saved on your device in the correct format (JPEG or PNG).

How to Access the Customization Dashboard

  1. Open your EPOS360 Merchant App.

  2. Tap "Sell" in the bottom navigation bar.

  3. Select the "Online" tab at the top to access your online store dashboard.

  4. Tap "Customize Theme" to enter the visual editor.

Step-by-Step Customization Guide

Step 1: Select a Base Theme

Start by choosing a pre-designed color scheme that aligns with your brand's vibe.

  1. Browse Available Themes: View the grid of pre-designed theme colors.

  2. Preview a Theme: Tap on any theme to see a detailed preview of how it will affect buttons, headers, and text.

  3. Apply the Theme: If you like it, tap "Use This Theme" to apply it as your foundation. You can always change it later.
    ​

Step 2: Customize Your Store Branding

This is where you make the store unmistakably yours.

  1. Upload Your Store Logo

    1. How: Tap "Upload Image" under the logo section. Select from your device's gallery or take a new photo. Crop and resize as needed.

    2. Technical Requirements:

      1. Format: JPEG or PNG only.

      2. Size: Maximum 120 KB.

      3. Best Practice: Use your official logo with a transparent background (PNG) for a clean, professional look.

  2. Set Your Display Name

    1. What it is: This name appears prominently throughout the ordering journey.

    2. How: Enter your desired name in the "Display Name" field.

    3. Best Practice: Keep it consistent with your physical store signage. If you have multiple locations, include the area (e.g., "Brew & Bean - Orchard Road").

  3. Add a Store Banner

    1. Purpose: This large, prominent image is prime visual real estate for branding or promotions.

    2. How: Tap "Upload Image", choose or take a photo, and adjust the cropping.

    3. Technical Requirements:

      1. Format: JPEG or PNG only.

      2. Size: Maximum 500 KB.

    4. Best Practice: Use a high-quality image of your storefront, a popular dish, or a current promotional graphic. Update this regularly to highlight new offers.
      ​

Step 3: Configure Advanced Layout Settings

Optimize how your menu is presented for your specific products and customers.

  1. Choose the Menu Layout

    1. Grid View:

      1. Best for: Items with high-quality, attractive photos (food, retail products).

      2. Advantages: Visually engaging, mobile-friendly, thumb-driven browsing.

    2. List View:

      1. Best for: Text-heavy menus, services, or items without dedicated images.

      2. Advantages: Clean, fast-loading, and simple to navigate.
        ​

  2. Set the Category Bar Display

    1. Portrait Mode (Vertical List):

      1. Shows more categories at once.

      2. Often easier for mobile users to scroll and tap.

    2. Landscape Mode (Horizontal Scroll):

      1. Provides a modern, app-like interface.

      2. May require side-scrolling on some devices if you have many categories.

  3. Select Item Image Ratio

    1. 1:1 Ratio (Square):

      1. Creates a uniform, tidy grid (like Instagram).

      2. Ensures all product photos are presented consistently.

    2. 4:3 Ratio (Rectangle):

      1. Provides a traditional, wider frame.

      2. Ideal for showcasing landscape-oriented dishes or group product shots.
        ​

Step 4: Preview & Publish

Always preview your changes before making them live.

  1. Tap the "Preview" button to see exactly how your store will look to customers on a mobile device.

  2. Navigate through categories and items to test the user experience.

  3. If satisfied, tap "Save Changes" or "Publish" to make the new design visible to the public.

  4. If adjustments are needed, go back and edit, then preview again.

Best Practices

  • Brand Consistency: Use the same logo, colors, and tone of voice as your physical store and other marketing materials.

  • High-Quality Images: Blurry or dark product photos reduce credibility. Invest in good lighting and simple, clean photos.

  • Seasonal Updates: Refresh your banner and maybe your theme color (e.g., festive red/green) during holidays to keep the store feeling current.

Troubleshooting

  1. Image upload failed

    1. Check the file format and size requirements. Compress the image if it's too large, or convert it to JPEG/PNG.

  2. Changes aren't showing on my public website

    1. After saving, allow 1-2 minutes for the cache to clear. Try refreshing the page or opening your store link in an incognito browser window.

  3. My product images look stretched or cropped weirdly

    1. This is likely due to the Item Image Ratio setting. Ensure you are uploading images that fit the chosen ratio (e.g., if using 1:1, crop your photos to a square before uploading for best results).

  4. I don't see the 'Customize Theme' button

    1. Verify your user role has Online Store editing permissions and that the online store module is activated for your account.

Did this answer your question?