Store Design — Full Tutorial

This guide explains every setting in the Store Design section. Each option controls how your storefront appears and behaves for your customers.

  1. Colours

Primary Colour

This is the main colour used throughout your store.
It affects buttons, highlights, links, and other key elements.

How to change it:

  1. Click the colour box next to Primary Colour.
  2. Choose a colour from the palette or enter a hex code (e.g., #0055FF).
  3. The preview updates immediately.

Text Colour

Controls the default colour of text across your storefront.

Tip:
Use darker shades for light backgrounds, and lighter shades for dark backgrounds.

Contrast Colour

Used for elements that need to stand out such as secondary buttons or labels.
Choose a colour that contrasts clearly with your primary colour.

Unavailable Item Colour

This colour is applied to:

  • Out-of-stock products
  • Unavailable product labels

It’s best to use a colour that clearly communicates unavailability, such as red or grey.

  1. Font Style

Select the typeface used across your store.

How to change it:

  1. Click the Font Style dropdown.
  2. Scroll through the available fonts (e.g., Playfair Display, Saira, Poppins).
  3. Select the font you prefer — the preview updates automatically.

Tip:
Choose a font that reflects your brand’s personality (modern, elegant, bold, minimalistic).

  1. Feature Image Size

Controls the size of the main product images shown on category or feature sections.

Options:

  • Small – Compact product layout
  • Medium – Balanced presentation
  • Large – Bigger, more visual presentation

Pick the size that complements your theme.

  1. Banner Section

The banner area allows you to add a rotating slideshow at the top of your store.

Adding a Banner Image

  1. Click Choose File.
  2. Select an image from your device.
  3. (Optional) Add Slide Text to display words over the banner.
  4. Click the + icon to upload additional slides.

Important:

All banner images should be the same size for a smooth, professional slideshow.

Managing Banner Slides

Each banner you upload appears in a list. You can:

  • Edit the text
  • Remove a slide using the red bin icon
  • Add more slides as needed

Banner Size

Controls the vertical height of your banner.

Common choices:

  • Small – Neat, compact
  • Large – Full, dramatic hero section

Banner Coverage

Determines how the image fits into the banner space:

  • Cover Area — fills the space completely, may crop edges
  • Contain Area — entire image is visible, may show space around it

Choose the option that best suits your images.

5. Theme Selection

You can choose from the available store themes:

Themes Available:

  • MARKET (currently installed)
  • Pro BOOK
  • Minimal

How to change your theme:

  1. Click Preview to see the theme in action.
  2. Click Install to apply it to your store.

Themes alter layouts, spacing, fonts, and overall styling.

  1. Additional Store Options

These toggles add extra functionality to your store.

Social Share

Enables social media sharing buttons on product pages.

When enabled:

  • Customers can share your products on platforms like Facebook, X (Twitter), or WhatsApp.

Enable Reviews

Allows customers to write product reviews and give ratings.

When enabled:

  • A reviews section appears on product pages
  • Customers can leave comments and star ratings
  • Helps build trust and credibility

‘Powered By’ Credits

Controls whether “Powered by [Your Platform Name]” appears in the footer.

  • On: Shows the credit
  • Off: Removes your platform branding from the customer-facing store

Allow Search on Store

Adds a search bar so customers can easily find products.

Highly recommended for larger catalogues.