Can I add custom CSS to my store?

Yes. There are two ways to add custom CSS, and which one you use depends on the design your store is running.

• Stores on the new design have a dedicated editor at Design > Custom CSS.
• Every other store adds CSS through the Header Scripts & Meta Tags field in the store settings.

Stores on the new design: Design > Custom CSS

1. Go to Design > Custom CSS in your store admin
2. Type your CSS into the box. Do not wrap it in a <style> tag here, because the page adds that for you
3. Click Save

.product-title {
  color: #333;
  font-size: 18px;
}

Every other store: Header Scripts & Meta Tags

1. Go to Store > Settings > Store in your store admin
2. Scroll to Custom Scripts, Meta Tags & ads.txt and find the Header Scripts & 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:

  .main-nav a {
    color: #ffffff;
  }

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:

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

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.

On the Header Scripts method, wrap both examples in a <style> tag. On the Custom CSS page, paste them as they are.

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.
• Store icon. Set a custom browser tab icon.
• Typography. Choose from available font options.
• Store Options. 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.