Design - Feature Guide
The Design section controls how your store looks: its theme, colours, fonts, logo, icons and images. Find it under Design in your store dashboard sidebar.
The Design menu lists these pages, in this order: Templates, Themes, Editor, Colour Scheme, Typography, Logo, Store Icon, Store Images, Article Images, Store Options, Product Options, Links and Custom CSS.
Templates
A Template is the engine your storefront runs on. FreshStore has one, Crystal, and this page shows it read only. Every theme runs on that engine.
Themes
A Theme is the look of your store: which sections appear on your homepage and in what order, plus the colours and fonts that suit them. Six ship with FreshStore: Crystal, Magazine, Outlet, Boutique, Directory and Midnight.
Switching keeps your content. Your products, articles and text stay where they are. It does replace your style, so the new Theme's colours and fonts take over from any you had set. FreshStore takes a snapshot before it switches, so you can revert for 30 days afterwards and get your old colours and fonts back with it.
🔗 Themes feature guide
Editor
The Store Editor builds your pages out of sections. Add, remove, reorder and configure them with a live preview of your store beside the settings, then press Publish when you are happy. Nothing reaches visitors until you do.
🔗 Store Editor feature guide
Colour Scheme
Pick one of 18 ready-made schemes. Each sets your title colour, link colour and button colour across the whole storefront.
You can also switch on custom colours and set five of your own, with FreshStore deriving the rest and checking them for readable contrast.
Pick a colour scheme that matches the mood of your niche. Earthy tones for outdoor and garden, clean blues for tech, warm colours for food and cooking.
🔗 Colour Schemes feature guide
Typography
Your store uses three fonts: one for titles, one for subtitles, one for body text. Set each from the catalogue of 81 fonts, or pick one of the ten ready-made pairings and let it fill all three.
Stick to one or two fonts for a clean, professional look. Keep body text plain. Readability matters more than style, and your articles are where visitors spend their time.
Logo
Your logo appears in your store header and is one of the first things visitors see. Set it at Design > Logo, either as one of the built-in icons or as your own image.
For best results:
- Use a transparent PNG file
- Keep the file size small for fast loading
- Make sure it looks good on both light and dark backgrounds
Don't have a logo yet? Use the AI Logo Designer to generate one from your store name and niche.
🔗 AI Logo Designer feature guide
🔗 How to change your store logo
Store Icon (Favicon)
The Store Icon is the small image in browser tabs, bookmarks and search results. Upload a square image of at least 512x512 pixels, usually a simplified version of your logo or your brand's initials. Your store builds the smaller sizes browsers and phones need from it.
🔗 How to change your store favicon
Store Images
Your store ships with default images for areas such as social previews, the footer and custom offers. Replace them at Design > Store Images: click an image field and upload your own. Your homepage hero image is set in the hero section of the Editor.
To remove a default image without replacing it, click it and delete. If a section needs that image to display, removing it may hide the section or leave a blank area.
Tip: an Instant Store arrives with images that match its niche. Replacing them with your own is one of the quickest ways to make the store yours.
You can also generate images with AI or import them from PixaBay without leaving your dashboard.
🔗 AI Image Generator feature guide
🔗 PixaBay Images feature guide
🔗 How to change the social image of your store
Recommended image sizes
Most image slots in your store are shown in a frame of a set shape, and your image is cropped to fill it. Build the image at the shape of the slot and nothing important gets cut off. Logos and icons are shown whole.
| Image | Where you set it | Best size |
|---|---|---|
| Homepage hero | Design > Editor, hero section | 2400 x 1200. Shown cropped to fill the space. Image Fit and Image Focal Point in the hero section change this. |
| Default Listing Image (the store wide article image) | Design > Article Images | 1200 x 900. Article cards are 4:3 and crop the edges off anything else. |
| Listing Image on one article | Articles > edit an article > Images | 1200 x 900 |
| Default Social Image | Design > Store Images, Social tab | 1200 x 630. This is the size social networks show link previews at. |
| Social Image on one article | Articles > edit an article > Images | 1200 x 630 |
| Hero Image on one article | Articles > edit an article > Images | 1600 x 800. Shown cropped behind the title, so keep the subject away from the left. |
| About page main image | Store > Pages > About | 1200 x 800. Shown cropped to fill a 3:2 space. |
| Homepage offer box background | Design > Editor, offer box section | 1920 pixels or more across. It fills the box behind the text and crops to fit. |
| Footer linked box background | Design > Store Images, Footer tab | 1200 pixels or more across. It crops to fit and shows in black and white behind a dark layer. |
| Default Custom Offer Logo | Design > Store Images, Offer tab | 200 x 80, transparent PNG or SVG |
| Store logo | Design > Logo | 512 x 128, transparent PNG or SVG. Shown whole, never cropped. |
| Store icon (favicon) | Design > Store Icon | 512 x 512, square |
Each of these sizes also shows under its own field in your dashboard, so you do not have to come back here to check.
Article Images and Product Options
These pages carry the image slots and display settings for your articles and products: what appears alongside them and how they are laid out.
Store Options
Store Options is the long list of switches for your storefront, grouped by area: Header, Footer, Hero, Layout, Content, Highlight Box, Offer Box, Testimonials, Featured Products, Featured Categories, Featured Articles, Detail Page and more.
This is where you switch parts of your store on and off, such as the footer newsletter form, the category links in your footer, or the FreshStore link at the bottom of every page.
Two switches you may want:
- Show Back to Top Button in the General group adds a button in the bottom right corner of long pages. It shows once a visitor scrolls down and takes them back to the top. It is off by default.
- Sticky Header in the Header group keeps your logo and menu on screen as visitors scroll. It is off by default.
Links
The Links page sets where your store's built-in links point: the buttons in your hero, your highlight boxes, your header and footer navigation. It controls the destination and the wording, not the colour. Link colours come from your Colour Scheme.
Each link field has a Choose button that searches your own pages, categories, brands, articles and products, so you do not have to know the address by heart.
Custom CSS
Add your own CSS at Design > Custom CSS. Type it in and save, with no <style> tag.
🔗 Can I add custom CSS to my store?
Tips
- Don't over-customise early. Focus on content first, then polish the design later.
- Preview your changes on mobile as well as desktop.
- Consistent branding across colours, fonts and logo builds trust with your visitors.
- Design changes can take a few minutes to reach visitors, because your store is served through a cache. Your dashboard shows them straight away.