{"title":"Set up basic styling with CSS","slug":"step-by-step-guide-how-to-setup-basic-styling-for-your-store","url":"https://support.storeconnect.com/articles/step-by-step-guide-how-to-setup-basic-styling-for-your-store","url_markdown":"https://support.storeconnect.com/articles/step-by-step-guide-how-to-setup-basic-styling-for-your-store.md","subtitle":null,"summary":"Configure your store\u0026#39;s colors, fonts, menus, content widths, borders, and shadows using StoreConnect CSS variables. A quick-start guide for applying consistent styling across all pages.","type":"Help_Documentation","video_url":"","keywords":"css variables, store styling, theme customization, colors, fonts, menus, borders, shadows, css framework, content width, storeconnect css","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"CSS offers flexibility, and ensures your store maintains a cohesive and professional appearance while being easy to manage and update.\n\nStoreConnect comes with its own CSS framework that contains global variables and classes that are customizable. Setting these variables and classes will give you a fast win when creating or customizing your theme. Your changes will be reflected throughout your store, from the home page, products, checkout to account pages.\n\n## Understand StoreConnect variables\n\nMost variables in the StoreConnect framework accept direct values. For example, if you want to set the primary color of your store, you can set an RGB, hex, or HSL color value directly on the variable.\n\n```\n:root {\n  --sc-color-primary: #0077ff;\n}\n```\n\nHowever, some variables belong to a set of variables. For example, we use the HSL colour system to improve accessibility aspects. Therefore, we provide single variables to set each value for the HSL.\n\nIf you want to convert the hex color above into its HSL version, you will need to set each value in its own variable, as follows:\n\n```\n:root {\n  --sc-color-primary-h: 212;\n  --sc-color-primary-s: 100%;\n  --sc-color-primary-l: 50%;\n}\n```\n\nThis is not the case for every variable, but it applies to any variable related to HSL colors. You can recognise them because they end with `-h`, `-s`, and `-l`.\n\n## Colors\n\nFor colors, you can use direct values or use the HSL system which offers better accessibility.\n\nWhen you set your own custom hex and hsl colours, the built-in theme will adapt your colors to all the global components generated by StoreConnect. Skip this step if you already set up colors using the setup wizard.\n\n### Primary and secondary colors\n\n```\n:root {\n  --sc-color-primary: #0077ff;\n  --sc-color-primary-h: 212;\n  --sc-color-primary-s: 100%;\n  --sc-color-primary-l: 50%;\n\n  --sc-color-secondary: #262626;\n  --sc-color-secondary-h: 0;\n  --sc-color-secondary-s: 0%;\n  --sc-color-secondary-l: 15%;\n}\n```\n\n### Errors and warning messages, sales tags and text, bonuses tags\n\nSet specific colours for content types. For example, for warnings, you can use the default StoreConnect palette, or use your own red tone to match your brand.\n\n```\n:root {\n  --sc-color-error: #e60000;\n  --sc-color-error-h: 0;\n  --sc-color-error-s: 100%;\n  --sc-color-error-l: 45%;\n\n  --sc-color-sale: #e60000;\n  --sc-color-sale-h: 0;\n  --sc-color-sale-s: 100%;\n  --sc-color-sale-l: 45%;\n\n  --sc-color-bonus: #0077ff;\n  --sc-color-bonus-h: 212;\n  --sc-color-bonus-s: 100%;\n  --sc-color-bonus-l: 50%;\n}\n```\n\n### Header and footer\n\nSet some basic custom colors for header and footer backgrounds and fonts. You can customize headers and footers more, but this is the basic defaults.\n\n```\n:root {\n  --sc-header-bg: white;\n  --sc-header-color: #1A1A1A;\n}\n```\n\n```\n:root {\n  --sc-footer-bg: #005FCC;\n  --sc-footer-color: white;\n}\n```\n\n## Fonts\n\nEasily integrate external fonts to align and style your navigation menus, and adjust dimensions, borders, and shadows to match your theme.\n\n### Font sources\n\nTo use an external font source like Typekit, Google Fonts, or any other source that offers an external link, first paste the external link into the [Adding custom JavaScript, CSS and head content](adding-custom-javascript-css-and-head-content).\n\nIf you are using a Google font source, we highly recommend using the liquid code below. It will improve the way your store renders the font without slowing down your site and causing performance issues.\n\nReplace `external-link-here` with the external URL:\n\n\n```\n\n    {% assign font_url = 'external-link-here' %}\n    https://fonts.gstatic.com\" crossorigin\u003e\n```\n\n\nIt should look like this:\n\n\n```\n\n    {% assign font_url = 'https://fonts.googleapis.com/css2?family=Raleway:wght@400;600\u0026display=swap' %}\n    https://fonts.gstatic.com\" crossorigin\u003e\n```\n\n\n### Site font family\n\nAs a final step, set the font family for the entire site. Keep in mind that you can still set multiple fonts. This is just a quick example of how to set the base font for your project.\n\n```\n:root {\n  --sc-font-family: 'Raleway', sans-serif;\n}\n```\n\n## Menus\n\nTo change the alignment or position of store menus, you can modify the menu styles.\n\n![Menu styles](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677768/documentation-media/menu_styles.png)\n\n### Alignment\n\n`center`\n`end`\n\n### Example using `center` option\n\n![Menu styles](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677769/documentation-media/centered_menu.png)\n\n### Menu link colour\n\nChange the menu link colours on resting and on hover by setting the hex, hsl, or rgb colours in these variables:\n\n```\n--sc-menu-link-color-resting: #111111;\n--sc-menu-link-color-hover: #66CBC1;\n```\n\n### Dropdowns and megas\n\nAdjust the mega or dropdown styling by replacing the values of width\n\n```\n:root {\n  --sc-menu-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);\n  --sc-menu-max-height: 300px;\n  --sc-menu-column-max-width: 300px;\n  --sc-menu-column-min-width: 100px;\n  --sc-menu-dropdown-width: 400px;\n}\n```\n\n## Custom dimensions\n\nAdjust the maximum widths of your content by overriding the default max-width values of specific global classes. In StoreConnect, we provide a range of component and utility classes that help you define padding, margins, widths, heights, and more. These classes are essential for constructing various content blocks and global components like cards and navbars.\n\nOccasionally, you may require a specific maximum width that creates a boxed effect throughout your entire store. While you could target individual content blocks to achieve this, it may not maintain consistency with your theme’s spacing and verticals.\n\nLet’s say all components, content and custom content blocks should reach a max-width of `1200px` across all site and always centered.\n\n### Set the max width to a custom variable\n\n```\n  --sc-max-width: 1200px;\n```\n\n### Apply the custom variable to global classes\n\n```\n.SC-Navbar_inner,\n.SC-Header_inner,\n.SC-Notice,\n.SC-Breadcrumb,\n.SC-ContentBlockContainer_header,\n.SC-ContentBlockContainer_body:not(.sc-expand),\n.SC-ContentBlockContainer_footer,\n.sc-container:not(.sc-container-expanded),\n.sc-container.sc-container-spacious,\n.SC-Grid,\n#SC-categories-show h1 {\n  max-width: var(--sc-max-width);\n  margin-left: auto;\n  margin-right: auto;\n}\n```\n\nFeel free to add more classes that you think are relevant. This is another example on how you can customize the dimensions of global components but you can also set custom max widths to articles or page content.\n\n## Borders and shadows\n\nChange the border radius and border rounded radius depending on your theme needs. These are reflected in buttons, cards, headers and notes bars.\n\n```\n:root {\n  --sc-border-width: 1px;\n  --sc-border-color: hsl(0, 0%, 85%);\n  --sc-border-radius: 3px;\n  --sc-border-rounded: 15px;\n\n  --sc-shadow: 0 1px 2px hsla(0,0%,0%,0.1);\n}\n```\n\nStoreConnect by default looks like this:\n\n![Border radius](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677771/documentation-media/buttons_with_radius.png)\n\nIf you set `--sc-border-radius: 0px;` you'll get this:\n\n![Border radius](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677772/documentation-media/buttons_without_radius.png)\n\n## Tips and suggestions\n\n-   To make things simple, you can reuse variables in your custom CSS. For example, if you have a custom content block template and want to set the primary font color, you can do so without repeatedly writing the hex code for the color.\n\n```\n.your-custom-class {\n  font-color: var(--sc-color-primary);\n}\n```\n\nYou can also set all the variables within just one `:root {}` bracket, you don’t have to repeat it unless you have an internal convention to do so.\n\n-   Use style blocks or upload a master file to the theme assets.\n-   Keep a realistic and easy naming convention.\n-   External libraries can slow down your application, instead customize what you exactly need.\n-   When styling your store, consider patterns and theme styling, style specific content block only when it is strictly needed. Avoid ending up with a huge amount of CSS that can become hard to manage.\n-   Stick to StoreConnect layouts first and then customize using the the theme builder. This will help you to maintain a robust set of reusable components.\n\n## Related topics\n\n-   [Overview of store customization](how-to-customise-the-design-of-your-store)\n-   [Adding custom CSS](adding-custom-css)\n-   [Adding custom JavaScript, CSS and head content](adding-custom-javascript-css-and-head-content)"}