Can I add custom CSS to my store?

FreshStore doesn't have a dedicated CSS editor, but you can add custom CSS to your store using the Header Scripts and Meta Tags setting. This lets you override any default styles and customise the look of your store.

How to Add Custom CSS

1. Go to Store > Settings > Store Settings in your store dashboard
2. Find the Header Scripts and Meta Tags field
3. Add your CSS wrapped in a <style> tag, for example:

<style>
  .product-title {
    color: #333;
    font-size: 18px;
  }
</style>

4. Click Save
5. Clear your store cache to see the changes

🔗 How to clear your store cache

Common CSS Customisations

Here are some examples of what you can do with custom CSS:

• Change font sizes, colours, and styles
• Adjust spacing and margins between elements
• Hide elements you don't want to display
• Customise button colours and hover effects
• Adjust the layout on specific page types

Tips

• Use your browser's developer tools. Right-click any element on your store and select "Inspect" to see its CSS class names. Use those class names in your custom CSS to target specific elements.
• Test on mobile. Make sure your custom CSS looks good on phones and tablets, not just desktop.
• Keep it minimal. Only override what you need. The less custom CSS you add, the less likely it is to conflict with future FreshStore updates.
• Save a backup. Copy your CSS to a text file before making changes, so you can easily restore it.

Built-in Design Options

Before adding custom CSS, check if the built-in design settings already cover what you need. The Design section in your store dashboard gives you control over:

• Colour scheme. Choose from a range of pre-built colour schemes.
• Logo. Upload your own logo, choose a pre-built icon, or generate one with AI.
• Favicon. Set a custom browser tab icon.
• Fonts. Choose from available font options.
• Layout. Configure your homepage, navigation, and page layouts.

🔗 Design feature guide

🔗 Colour Schemes feature

Need Help?

If you are unsure about CSS or need help achieving a specific design change, contact our support team using the help icon in the bottom right. We can help you write the right CSS or suggest an alternative approach.