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 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

Example: change the colour of one menu link

If your chosen colour scheme doesn't offer the menu colour you want, you can set it with a few lines of CSS. First find the menu link's class name: right-click the link on your store, choose Inspect, and note its class. Then add CSS like this, swapping in your own class name:

<style>
  .main-nav a {
    color: #ffffff;
  }
</style>

To recolour a single link rather than the whole menu, target that link's own class instead of the menu container.

Example: add a border around product gallery images

To put a border around the images on your product pages, add this to the Header Scripts field:

<style>
  .aspect-w-1 img,
  div[role="tablist"] img {
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
  }
</style>

The first selector targets the main product image and the second targets the thumbnail strip underneath it. Swap the colour code for one that matches your design. These class names come from the current store design; if a future update changes them, use Inspect (see Tips below) to find the new ones.

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.