You can add CSS to your Salla store if it is on the Pro or Special plan, has its own domain, and your account can access store design. Those are Salla's own conditions, and they get their own section below.

But code is not the first step. Every line you add depends on how your current theme is built, and it can stop working after an update. So this guide walks the safe route in order: settings first, then a test copy of the theme, then narrow selectors, then a check after every update.

Full disclosure: we at AfterAds make the Angel theme, and the code you add on Salla runs on top of themes like ours. Angel has its own section near the end of this article.

Before code: is it already a setting?

Many changes merchants look for code to make are already theme settings: colors, the font, logo size, the product card, showing or hiding an element. Open Store Design (تصميم المتجر), go into your theme copy's customization, and read through the settings section by section before you write a line.

A setting beats code for three reasons:

  • It survives theme updates, because the theme developer maintains it.
  • It usually works in both languages, and in dark mode if your theme has one.
  • You or anyone on your team can change it without opening a code file.

If you cannot find the option, ask the theme developer through the Support tab on the theme's page. The feature may be planned, or there may be a setting you missed. To judge how flexible a theme is before you buy it, see the "customization without code" criterion in our guide to choosing a Salla theme.

Requirements: why you may not see the CSS field

Salla's help center sets three conditions for changing store design with code (Customizing the theme with CSS and JS, in Arabic, updated 22 August 2026):

  • Plan: your store must be on Pro or Special. As of 27 October 2026, the Salla plans page lists CSS customization only under Pro among the plans with published prices.
  • Domain: your store needs its own domain, not Salla's default link. Salla explains how to book or connect one in Managing your store domain (in Arabic).
  • Permission: if you are staff rather than the owner, your account needs access to store design.

On the Plus plan, the field will not be there. You can work with the theme settings, or move to Pro if the change is worth the difference in price.

Where the code goes in your dashboard

The path in Salla's articles: Store Design (تصميم المتجر) → the (...) menu on the theme card → Customize Copy (تخصيص النسخة) → the Theme Customization (تخصيص الثيم) tab → Customize with CSS (تخصيص عن طريق الـ CSS). Paste your code, then click Save Changes (حفظ التغييرات). The same tab has an option for JavaScript.

We will not re-teach the basics here. Salla's simple guide to designing your store with CSS (in Arabic, updated 18 August 2026) explains how a rule is built (selector, property and value) and how to open your browser's element inspector. What follows is what that guide leaves out: how to work safely.

Test in a theme copy first

You reach the field from Customize Copy on one particular copy of the theme. So never experiment on the published copy: use a duplicate, and confirm in step 3 that your live store did not change:

Step 1: In Store Design, duplicate the published copy of your theme.

Step 2: Add the code to the new copy and save.

Step 3: Preview the new copy on a phone and on a computer, and open your live store in another window to confirm it has not changed.

Step 4: Publish the new copy when you are satisfied, or schedule it for a quiet hour.

The number of copies depends on your plan: 2 on Pro and 50 on Special, according to Managing and customizing themes in Salla's help center (in Arabic). On Pro, keep one copy live and use the other for tests.

Also keep your code outside Salla, in a text file with the date of every change. If you ever delete a theme copy, the code stays with you.

Picking the selector

The selector is the part that tells the browser which element you mean. The narrower it is, the less likely it is to change something you did not intend.

Start with the browser's inspector: right-click the element, choose Inspect, and look at its tag name and classes. Look at the classes on the body tag at the top of the page too.

On the Angel theme's demo store, for example, Salla adds a class to body that names the page type, so the product page carries product-single. The add-to-cart button is a Salla component called salla-add-product-button. With those two names you can write a rule that touches only the button on product pages:


/* Add-to-cart button on product pages only · 27 October 2026 */

body.product-single salla-add-product-button {

  margin-block-start: 8px;

}

This example shows the method; it is not a change we recommend. The names may differ in your theme, so copy them from your own store, not from an article or a ready-made snippet.

Three more rules for selectors:

  • Phone first: put changes for small screens inside a media query such as @media (max-width: 767px), then test them on an actual phone, not only on a computer.
  • Direction: if your store runs in two languages, use logical properties such as margin-inline-start instead of margin-left, so the rule flips by itself between Arabic and English (MDN on logical properties).
  • Stability: avoid long selectors that depend on element order, such as div > div:nth-child(3). Any theme change that reorders elements breaks them.

Five habits that keep CSS from breaking your store

Always scope. Tie every rule to a page type or to the element you mean, as in the example above. A general rule on all buttons or all headings changes them across the whole store.

Comment and date every block. Above each block, write one line saying what it does and when you added it. Six months from now you will not remember why each line is there, and neither will a developer you hire.

Never hide what your customer needs to decide. The price, product options, the add-to-cart button and links to your return and exchange policy must stay visible. Hiding an element with code can look like a quick fix for the layout, but it may hide something your customer is looking for.

Respect contrast. Normal text needs a contrast ratio of at least 4.5:1 against its background under WCAG 2.2. If you change a color, check it in both light and dark mode if your theme has both.

Do not import a font with code. An @import line for an external font adds a file the browser must load before it shows text in that font, and it can clash with the theme's font. Use your theme's font setting if it has one, or Salla's method for adding a custom font to your store (in Arabic).

Ready-made snippets: when they help and when they hurt

You will find ready-made CSS for Salla stores online, free and paid. Some of it is useful, but every snippet was written for a particular theme, and usually for a particular version of it. A selector that works in one theme may find nothing in another, or find a different element with the same name.

Before you paste any snippet, ask five questions:

  • Which theme and which version was it written for? Does the author give a date?
  • Do you understand what each line does? If the author does not explain it, ask, or do not use it.
  • Does it hide anything? Search it for display: none and ask what will disappear from your page.
  • Does it rely on !important in most lines? That makes it hard to adjust, and it overrides your theme settings.
  • Does it load files from another site, through @import or a link inside url()?

JavaScript needs even more care. It runs on your store's pages and can read what your customers type into them. Do not paste JavaScript from a source you do not know, and do not add it to your store before a developer you trust has reviewed it.

Then apply everything above: try the snippet in an unpublished copy, and check the pages it touches on a phone and a computer.

After every theme update

Developers update their themes to fix problems and add features, and an update can rename a class or reorder an element your code depends on. So give every update a short review:

  • Read the changelog on the theme's Salla page, and look for the parts your code touches.
  • Open the pages your code changes on your phone: the home page, a product page, a category page and the cart.
  • If a rule stopped working, inspect the element again and copy its current name.
  • If the update added a setting that does what your code does, delete the code and use the setting.

This review is quicker when every block is commented and dated, as in the second habit.

Angel and custom CSS

This section is about our own theme, so hold it to the same standard.

Angel has more than 80 options for controlling the store without code, according to its page on Salla. So before you write code for a store running Angel:

  • Go through Angel's settings and look for the part you want to change.
  • For a custom font, use «رابط الخط» (font link), «اسم الخط» (font name) and «وزن الخط» (font weight) instead of @import, as described in Fonts and background.
  • For dark mode, upload a logo in «شعار المتجر في المظهر الداكن» (store logo in dark mode) instead of recoloring the logo with code.

Angel has no CSS field of its own: custom code goes through Salla's field, under Salla's conditions. Angel's releases and their changes are linked from the changelog page; check them after each update. If you need something the settings do not offer, write to us before you write code for it. To see everything the theme offers, read the Angel page.

Frequently asked questions

Can I add CSS on the Plus plan?

No. Salla's help center requires the Pro or Special plan, plus a custom domain and access to store design.

Why can't I see the Customize with CSS option?

Usually one of the three conditions is missing: the plan, the custom domain or store-design access. Check them in that order, then contact Salla support if the option is still hidden.

Will my code stop working after a theme update?

It may, if the update renames or moves the element. Read the changelog after every update and open the pages your code touches on your phone.

Does CSS slow my store down?

A few rules usually make no visible difference. Importing fonts or images from other sites, or adding JavaScript, can add loading time. Measure page speed before and after.

Are ready-made snippets safe?

Not all of them. Understand every line before you paste it, avoid anything that hides information from your customers or loads outside files, and never paste JavaScript from a source you do not know.

Do I need a developer?

Not for small changes, if you follow the method above. A change that touches many pages or needs JavaScript is better written and documented by a developer.

Your next step

Open your theme settings and look for the option first. If it is not there, duplicate your published copy, add the code to the new copy with a narrow selector and a dated comment, and preview it on your phone before publishing. If you are designing your store from scratch, read our guide to designing your Salla store yourself.

Last reviewed: 27 October 2026.