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.
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 SitePack Theme Marketplace, a curated collection of professionally designed themes covering a wide range of industries and styles. Browse the available options, preview how they look, and select a new one whenever you are ready for a change. Because your content lives separately from your theme, switching themes will not delete your pages, blog posts, or products.
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.
- Select a color: Click the colored square next to the setting you want to change to open a visual color picker.
- 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. The Theme Marketplace, opened from the Change Theme button, lets you browse and preview available themes before making a change to your live site.
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.