Here you can define the overall color profile of your webshop, as well as the font used across all text on the site. These settings ensure a consistent design and branding throughout your webshop.
To access the Global Design Settings, go to:
Storeshop Dashboard – Settings – Design & Customization – Global Design Settings
Color profile
Under Color Profile, you define the main colors used in your webshop.
Button color
This controls the color of your Add to cart button on product pages. Choose a color that stands out and makes it easy for customers to take action.
Product label color
This is the background color of product labels such as New, Sale or Campaign. These labels appear on top of product images in category and product listings.
Product label text color
This controls the text color inside the product labels. Make sure there is good contrast between the label background and the text for readability.
How to choose colors
You have several ways to select colors.
HEX code
Enter a HEX value, for example #ff7300. Remember to include # before the code.
RGB values
Define colors using Red, Green and Blue values between 0 and 255.
HSL values
Adjust Hue, Saturation and Lightness for more precise control.
Color picker
Use the color picker to visually choose a color by dragging your cursor within the color field.
Eyedropper tool
Click the eyedropper icon to pick a color from anywhere on your screen. This is useful if you want to match colors from your logo or other design elements.
Font settings
Under Font Settings, you can define the font used across your entire webshop.
You can choose from the following fonts.
Inter
Roboto
Open Sans
Lato
Montserrat
Poppins
Nunito
Source Sans 3
Raleway
Ubuntu
Playfair Display
Merriweather
Oswald
Rubik
Work Sans
The selected font will be applied to all text on your website, ensuring a consistent and professional design.
Custom fonts
If you want to use a font that is not available in the list, you can add it using Custom CSS. This allows you to use any font from Google Fonts or other sources.
Read more about how to use Custom CSS here.
After making your changes, simply click Save located at the top right of the screen.