How to Add Custom CSS (Font, Header, Footer, etc.)

You can customize the appearance of your webshop by adding your own CSS. To do this:

1. Log in to the Storeshop Dashboard.
2. Go to Settings → Design & Customization → CSS Editor.

Here you can paste CSS code to change colors, fonts, spacing, and other design elements.

Change background color for navigation bar or menu bar

<style>
#header{
background-color: #F9F5EF;
}

header.continental #mainmenu {
    background-color: #F9F5EF; 
}

header.continental #mainmenu {
    background-color: #F9F5EF;
}
</style>

//Comment: The menu bar comes in two parts, #header is the entire menu bar, white #mainmenu is the area behind the links. 

Edit text in navigation bar or in menu bar. 

<style>
header.continental a, header.continental .btn-link {
    color: #fff;
}
</style>

//Comment: select all header elements within continental class, select a element and all header elements within continental class, and select class .btn-link.

Footer

<style>
.pt-5, .py-5 {
 background-color: #343a40;
}

body.continental footer .container {
    padding-left: 40px;
    padding-right: 40px;
    background-color: #343a40;
}
p {
    color: #fff;
 }

h3, .h3 {
    color: #fff;
}

small, .small {
    color: #fff;
}
</style>

Change fonts

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap’);

body {
font-family: ‘Poppins’, sans-serif;
}
</style>

//Comment: Can either use html fonts or import from google fonts: 

HTML FONTS:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

GOOGLE FONTS:

https://fonts.google.com

– Find your desired font, choose “import” and copy paste to add in CSS <style>. From there, copy “CSS rules to specify families” and copy paste under the import. 

Adding Your Own Codes
You can add your own CSS codes if you are comfortable creating them yourself.
Alternatively, you can use one of the examples above and ask a tool like ChatGPT to generate similar code according to the specifications you want, such as changing colors, fonts, or other style elements.

Remember to click Save in the top-right corner to apply your changes.