Skip to main content

Design & Theme

The Design & Theme section is where you control how your website looks (its colors, fonts, spacing, and overall visual style) without needing to write any code or hire a designer. Every SitePack website is built on top of a theme, which acts like a ready-made outfit for your site: a professionally designed starting point that already looks good, which you can then adjust to match your own brand.

This guide explains what a theme is, how to switch to a different one, and how to fine-tune the details (colors, fonts, and layout) of the theme you are using.

The Design section also holds five content tools that appear across your website:

  • Topbar: the thin strip at the very top of your site, showing your USPs and contact details or a single announcement line.
  • USPs: your central list of selling points (free shipping, fast delivery, easy returns) that your site reuses everywhere, including the topbar.
  • Product page: the expandable rows on your product pages, such as shipping and returns or size advice, with your own title and text per language.
  • Footer: the block at the bottom of every page, built with drag-and-drop elements, including a category menu that lists your store's main categories automatically.
  • Popup: a window every visitor sees once, built from blocks such as an image, buttons to your pages, news posts and a newsletter signup with a discount code. Available with a custom theme.

Understanding themes​

A theme controls the overall layout and visual identity of your website: where the menu sits, how product listings are arranged, what your buttons look like, and more. Because every SitePack theme is built to work with the platform's content and store features, you can switch between themes without losing your pages, products, or content, only the visual presentation changes.

Viewing your current theme​

In the theme configuration box, you can see key information about the theme your site currently uses:

  • Theme Name: The name of the active theme.
  • Version: The current version number of the theme. Theme developers occasionally release updates with improvements or bug fixes, and this tells you which version your site is running.
  • Developer: The SitePack Partner (an independent designer or agency) who built and maintains the theme.

Changing your theme​

If you would like a different overall look for your website, you are not stuck with your original choice. Click the Change Theme button to open the themes tab of the Marketplace, which lists every theme that has been reviewed and approved for SitePack.

Each theme is shown as a card with a screenshot, the name of the partner who built it, a short description and its price. The theme your site uses now comes first, marked Current theme, with a Customize button that takes you back to the theme settings.

To switch to another theme:

  1. Look around: click a card to open its details, with all screenshots, a longer description and the main features.
  2. Click Activate: use the Activate button on the card or in the details window.
  3. Confirm: SitePack asks you to confirm the switch. After that the new theme is live on your website right away.

Themes that bring an app​

Some themes are made for a particular kind of content that comes from an app. A theme for painters or web designers, for example, shows your finished projects, and those come from a portfolio app. Such a theme installs the app it needs for you:

  • The theme's card and details say which app comes along.
  • When you activate the theme, the app is installed at the same time, unless you already have it.
  • The app then shows up under Apps, and its content gets its own item in the Content menu. See Content from apps.
  • If you switch to another theme later, the app and everything you entered in it stay. Remove the app yourself if you no longer need it.

When you activate a new theme, it starts with its own colors and design settings. Your brand color and your fonts are carried over, so the site still looks like yours. Your pages, blog posts, products and orders stay exactly as they are. Afterwards you can fine-tune the new theme under Design & Theme, as described below.

When a theme cannot be activated​

Sometimes the Activate button is locked. Hover over it, or open the theme's details, to see why:

  • Your website uses a custom theme: if a partner built a theme especially for your website, you cannot switch to another theme. This protects the work that went into your custom design. A notice at the top of the themes page explains this. Contact your web developer if you would like changes to your design.
  • Paid theme: premium themes cannot be activated from the admin yet. Contact support if you are interested in one.
  • No online store support: if your website is an online store, themes that do not support a store cannot be activated, because your product pages and checkout would no longer work.
  • The theme needs an app first: a theme can need an app that cannot be installed for you automatically, for example a paid app. The card names the app. Install it yourself under Marketplace → Apps first, then activate the theme.

Customizing design elements​

Beyond choosing a theme, SitePack lets you fine-tune specific visual details of that theme directly. No CSS or code editing required. These options live within the same Design & Theme section and apply instantly across your entire website.

Colors​

Every theme defines a small set of core colors (typically primary, secondary, and background) that are reused consistently across your site, for buttons, headings, backgrounds, and accents. Changing them here updates the look of your entire website at once, keeping everything visually consistent.

  1. Select a color: Click the colored square next to the setting you want to change to open a visual color picker.
  2. Enter a hex code (optional): If your brand has a specific color, such as one from your logo, you can type its hex code directly (for example, #1e3346) instead of using the picker. A hex code is simply a short, precise way of describing an exact color that designers and printers use, your web designer or logo file can usually provide it.

Tip: If you are unsure which colors to pick, look at your logo or existing marketing materials and try to match the primary color to your brand's main color for a cohesive look.

Fonts & typography​

Typography (the fonts and text styling used throughout your site) has a big impact on how professional and readable your website feels.

  • Font Selection: Choose from a curated list of web-safe fonts and Google Fonts, a large free library of fonts that load quickly and display consistently across every device and browser.
  • Text Decoration: Adjust styling details for specific text elements, such as underlining links or adding a line-through effect where appropriate.

Tip: Stick to one or two fonts across your whole site, for example, one for headings and one for body text. Using too many different fonts can make a website feel cluttered and unprofessional.

Layout & sizes​

Fine-tune the structural feel of your website using simple sliders:

  • Border Radius: Controls how rounded the corners of buttons, cards, and boxes appear. A higher value gives a softer, more modern look, while a lower value creates sharp, traditional corners.
  • Container Width: Adjusts the maximum width of your site's main content area, controlling how much empty space appears on the sides of your content on large screens.

Because these are sliders rather than code fields, you can experiment freely and see the effect immediately, adjusting until the layout feels right for your brand.

Reporting theme bugs​

If you notice a visual glitch, for example elements overlapping or a button that displays incorrectly, you can use the Report Bug link within the Design & Theme section to notify the theme's developer directly. Because themes are built and maintained by SitePack Partners (see Partners: Creating Themes), routing the report straight to them ensures the fix reaches the right people as quickly as possible.

Frequently asked questions​

Will changing my theme delete my pages or products?​

No. Your content (pages, blog posts, products, and orders) is stored separately from your theme. Switching themes only changes how that content is displayed, not the content itself.

Do I need design experience to customize my website?​

No. All the customization tools in this section (color pickers, font dropdowns, and sliders) are built for non-designers. You do not need to know CSS, HTML, or any other code to change how your site looks.

What is a hex code and do I have to use one?​

A hex code is a short code (like #1e3346) that represents an exact color. It is entirely optional. You can just as easily click the color picker and choose visually. Hex codes are useful mainly when you need to match a very specific brand color exactly.

Can I preview a new theme before switching to it?​

Yes. In the Marketplace, opened from the Change Theme button, every theme has screenshots. Click a theme to see all of them, together with its description and features, before you activate it on your live site.

Why can I not switch to another theme?​

Your website most likely runs on a custom theme that a partner built especially for you. To protect that work, switching themes is turned off for these websites. Contact your web developer if you would like something changed. A theme can also be locked because it is a paid theme, because it does not support an online store while your website is one, or because it needs an app that you have to install yourself first.

Why did a new app appear after I changed my theme?​

Some themes need an app for their content, such as a portfolio app for a theme that shows finished projects. The theme installs that app when you activate it, so the pages of the theme work straight away. The theme's card tells you in advance which app comes along. Find the app under Apps and its content in the Content menu.

Do I keep my colors when I switch themes?​

Partly. The new theme starts with its own colors and design settings, but your brand color and your fonts are carried over. You can adjust everything afterwards under Design & Theme.

What should I do if I find a visual bug in my theme?​

Use the Report Bug link inside the Design & Theme section. This sends your report directly to the developer responsible for maintaining that theme.

Who creates SitePack themes?​

Themes are designed and maintained by SitePack Partners, independent designers and agencies who build both free and premium themes for the Theme Marketplace. You can learn more about how themes are built in the Partners: Creating Themes guide.