Where these settings live
These settings are configured per market, and within a market they affect every page at once. Open the builder, pick a market with the market tab (country flag icon) in the left sidebar, then click the Settings tab (gear icon). Changes apply to the market you have selected and go live when you click Publish. For the full list of every setting, see Builder settings reference.
Color schemes
Storeep uses a palette of up to 9 color schemes. Every section, block, and component in your store references one of these schemes by its number (1 through 9). Changing a scheme's colors instantly updates every section that uses it, across all pages.
Color roles inside each scheme
Each scheme defines the following color roles, all set as hex color values:
- Background: the main section background color.
- Inner Background: a subtly tinted background used for cards and nested content areas within the section.
- Heading Color: the color for heading text.
- Body Text Color: the color for paragraph text.
- Highlighted Text Color: an emphasized text color used for prices, savings badges, and countdown timer values. Typically the darkest or boldest tone in the palette.
- Link Color: the default hyperlink color.
- Link Hover Color: the hyperlink color when a shopper hovers over it.
- Border Color: the color for element borders and divider lines.
- Outline Color: the color for focus rings, keyboard selection highlights, and accent outlines that need to stand out more than regular borders.
- Shadow Color: the color for box shadows (usually with some transparency).
- Primary Button Background: the fill color for primary buttons.
- Primary Button Text: the label color on primary buttons.
- Primary Button Border: the border color of primary buttons.
- Primary Button Hover Background: the primary button fill color when hovered.
- Primary Button Hover Text: the primary button label color when hovered.
- Primary Button Hover Border: the primary button border color when hovered.
- Secondary Button Background: the fill color for secondary buttons.
- Secondary Button Text: the label color on secondary buttons.
- Secondary Button Border: the border color of secondary buttons.
- Secondary Button Hover Background: the secondary button fill color when hovered.
- Secondary Button Hover Text: the secondary button label color when hovered.
- Secondary Button Hover Border: the secondary button border color when hovered.
- Input Background: the background color of form input fields.
- Input Text Color: the text color inside form input fields.
- Input Border Color: the border color of form input fields.
- Input Label Color: the label text color above form fields.
- Input Focus Background: the input background color when a shopper focuses or hovers over the field.
Tips for strong color schemes
- Use a neutral light color for Background on most sections and save bold colors for a single accent scheme used on hero and call-to-action sections.
- Make your Primary Button Background visually distinct from the section Background, because the button must stand out clearly.
- Keep Inner Background as a very slight tint of the main Background so card backgrounds are distinguishable without being jarring.
- Aim for at least 4.5:1 contrast between Body Text Color and Background, and between Primary Button Text and Primary Button Background.
Typography
Four font roles control typography across every page. Each role maps to a font family from the available library.
- Body: the primary font for paragraph text and descriptions.
- Heading: the font for all headings across the entire store.
- Subheading: the font for secondary titles and section subheadings, bridging the heading and body styles.
- Accent: a stylistic font for prices, badges, and decorative emphasis.
Available fonts include: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface, and Acme.
For stores with Arabic content, fonts are automatically paired with matching Arabic counterparts: for example, Inter is paired with Cairo, and Poppins with Tajawal. You do not need to select the Arabic font separately.
Page width
The global Page Width setting controls the maximum width of the main content grid in pixels. Sections set to Page width are constrained to this value; sections set to Full always span the entire viewport regardless. Available values: 900, 1000, 1100, 1200 (default), 1300, and 1400 px. On viewports narrower than the selected width, sections automatically shrink to fill 100% of the screen.
Logo
The logo is set inside the Header section's logo block and inside the About Us block in the footer. Click the logo block in the control panel, then click + Add media or + Add image to upload your logo from your device or pick it from your media library. After uploading, set the display width (20–300 px) and height (20–300 px); the other dimension scales automatically to maintain the aspect ratio.
Favicon
The favicon is set in Settings → Branding in the builder. Click the favicon field and upload an image (recommended: a square image). The favicon appears in browser tabs and bookmarks.
Body background image
Also in Settings → Branding: you can optionally set a background image for the entire page. Configure how it scales (Cover fills the entire viewport, Contain fits the image within it) and whether it repeats (tiles) or stays as a single image behind scrolling content.
Global custom CSS and JavaScript
For advanced customizations that the standard settings cannot achieve, Settings provides a Global CSS field (up to 1,000 characters) and a Global JS field (up to 1,000 characters). CSS entered here is injected into every page of the store; JS entered here runs on every page. Use these sparingly, and prefer the Custom Code section for page-specific customizations.