Can I add custom CSS to my store?

Yes. Every store has a Custom CSS editor at Design > Custom CSS.

How to add 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;
}

For CSS that applies to one section only, add a Custom HTML section in Design > Editor and use its CSS for this section field. Rules there apply inside that section and nowhere else.

Scripts and meta tags

The Header Scripts & Meta Tags field in Store > Settings > Store is still the place for scripts, tracking codes and meta tags. CSS you added there earlier, inside a <style> tag, keeps working. To keep all your CSS in one place, move it into Design > Custom CSS.

🔗 How to add Meta Tags and Custom Scripts

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 Custom CSS page, paste both examples as they are, with no <style> tag.

Example: right-to-left (RTL) text

If your store is in a right-to-left language such as Arabic or Hebrew, add this to Design > Custom CSS:

html {
  direction: rtl;
}

This makes text read from right to left. Some parts of the layout may not flip fully, so check your homepage, a category page and a product page after you save.

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:

• Themes. Six complete looks for your store, at Design > Themes.
• Colour scheme. Choose a pre-built colour scheme, or switch on custom colours and set your own.
• 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 your three fonts, or pick one of ten ready-made pairings.
• Store Options. Configure your homepage, navigation, and page layouts.

🔗 Design feature guide

🔗 Colour Schemes feature guide

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.