Design Themes

Design Themes let you control how your storefront looks to customers — colours, fonts, the header, and the content sections on your pages. Mystore offers ready-made themes built for different store types (such as Fashion and Grocery). You copy a theme and customize it in two stages: first the global Theme Settings, then the individual Sections that make up your pages.

In this section

• Getting Started: Copy Your Theme
• Theme Settings (Global Styles)
• Working with Sections
• The Header Section
• Adding a Section
• Editing a Section
• Editing a Section with Columns
• The Footer Section
• Saving Your Changes

Getting Started: Copy Your Theme

You always customize a copy of a theme, never the original. Mystore creates the copy for you automatically, so your live storefront stays untouched while you work.

1. Go to Dashboard → Storefront → Current Theme.
2. From the dropdown, choose the theme you want to work with — Fashion or Grocery.
3. Click Customize. A copy of the theme is created (named with a timestamp) and opens in a new tab.
4. Make all your changes in this new tab.1

Note  Because Customize always creates a timestamped copy, your original theme remains intact as a backup.

Theme Settings (Global Styles)

When the copied theme opens, start with the Theme Settings in the left panel. These are global styles that apply across your entire website, grouped into Colors, Typography, Header, and CSS.

Colors

Set the colour scheme used across the whole website.

Typography

Set the font size used across the website.

Header

Set the placeholder text (for example, the prompt shown in the search bar).

CSS

Add your own custom CSS to enable styles beyond the standard options.

Note  This Header setting controls only the global placeholder text. The full header layout, navigation, and announcement bar are configured separately under Sections → The Header Section, described below

Working with Sections

Sections are the building blocks of your pages. After setting your global styles, you add, arrange, and style sections to build each page. The sections below explain the header, how to add a section, and how to edit the two kinds of sections you'll come across.

The Header Section

The header sits at the top of every page and holds your logo, navigation, search, and announcement bar.

1. Click on Change and choose a header style from the available options and click Apply.

1. Click Edit to open the header's settings. It has three tabs:

• Content — create the navigation menu for the header, set the announcement bar speed, and add an optional link and text.

• Style — choose the background type and background gradient.

• Advanced — add your own custom CSS.

Adding a Section

1. Click Add Section. A list of available sections appears.

1. Click the section you want to add.
2. A slider shows the different styles available for that section. Choose a style and click Apply.

1. By default, the new section is added to the bottom of the page.
2. Drag the section within the template to place it wherever you want.

Editing a Section

Some sections are single widgets with no child components. You edit them through three tabs:

Content

Add a Heading, Sub-heading, Description, and Collection. Use the Collection dropdown to choose from your existing collections — all products in the selected collection are then displayed. You can also create a new collection by clicking Add Collection.

Style

Set the margin, padding, and border (these apply to both desktop and mobile), and set the background colour and background type.

Advanced

Add custom CSS for that particular section.

Editing a Section with Columns

Some sections contain child components arranged in columns. Each column has its own Content, Style, and Advanced tabs.

Content

Add media to the column. By default, the same media is used for desktop and mobile.

• To use a different image on mobile, uncheck Same as desktop version and upload a separate image for the mobile view.
• Change the media's aspect ratio as needed.
• Add a name, link, URL, and label.

Style and Advanced

These work the same way as for any other section — Style for margin, padding, border, and background; Advanced for custom CSS.

The Footer Section

The footer sits at the bottom of every page and typically holds menu columns (such as Company and Account), contact details, and your copyright line. Like the header, it offers ready-made styles and is edited through three tabs.

1. The current footer style is shown at the bottom of the left panel (for example, Theme Footer V1). Click Change to pick from the available footer styles and apply one.
2. Use the Content, Style, and Advanced tabs to configure the footer.

Content

The footer menu is organised into columns. For each column you can:

• Set the Column Name (for example, Company or Account).
• Add Links, each with a label and a URL (for example, About Us → /page/about).
• Click Add New Link to add another link to a column.
• Use the X to remove an individual link or an entire column.

Style

Advanced

• Show Contact Email — toggle on to display the contact email in the footer.
• Show Contact Phone — toggle on to display the contact phone number in the footer.
• Custom CSS — add your own CSS for the footer (for example, to size the footer logo).

Saving Your Changes

Click Save (top-right of the editor) to save your changes to the theme copy.

Tip  Use the device preview icons (desktop, tablet, and mobile) at the top of the editor to check how your store looks on each screen size before you save.