The «الخطوط» (fonts) and «خلفية المتجر» (store background) groups set your store's font and its background color and image. The end of this page lists where every other color in Angel lives.
#«الخطوط» (fonts)
Angel uses the PingAR LT font until you add your own. You add a font by its link from a font site, and each of the three fields has an Arabic and an English value.
| Setting | Default | What it does |
|---|---|---|
«رابط الخط» fonts | Empty | The link to the font file. Angel accepts a Google Fonts link, a fontstatic.com link, or a link to a CSS file. Up to 200 characters. |
«اسم الخط» fonts_name | Empty | The font's name as written in font-family inside the font file, such as Tajawal. Up to 100 characters. |
«وزن الخط» fonts_w | Empty | The heading weight, a comma, then the text weight, such as 700, 400. A single weight applies to both. Up to 10 characters. |
Your font only loads when both «رابط الخط» (font link) and «اسم الخط» (font name) are filled in. If either is missing, the store goes back to PingAR LT.
#Adding a font from Google Fonts
- 1
Copy the font link
In Google Fonts, pick the font and the weights you want, then copy the CSS link that starts with
https://fonts.googleapis.com/css2?family=. - 2
Paste the link and type the name
Paste the link into «رابط الخط», and type the font's name in «اسم الخط» exactly as Google Fonts shows it, such as
Tajawal. - 3
Set the two weights
In «وزن الخط», type two weights included in the link you copied, such as
700, 400, then save your changes.
#«خلفية المتجر» (store background)
| Setting | Default | What it does |
|---|---|---|
«لون خلفية المتجر» store_bg_color | #f5f5f5 | The store's background color in the light appearance only. In dark mode, «لون الخلفية الأساسي» (main background) from the color system is used instead. |
«صورة خلفية المتجر» store_bg | Empty | An image used as the store's background. |
#Where the other colors are
| Color | Setting | Group |
|---|---|---|
| Buttons and highlighted items | The store color in Salla | Not in Angel |
| Button text | «لون نص أزرار المتجر» | «نظام الألوان» (color system) |
| Header | «لون خلفية أعلى الصفحة» | «أعلى الصفحة» (header) |
| Side menu | «لون خلفية القائمة الجانبية» | «القائمة الجانبية» (side menu) |
| Footer | «لون خلفية أسفل الصفحة» | «أسفل الصفحة» (footer) |
| Product card | «لون خلفية بطاقة المنتج», «لون إطار بطاقة المنتج» and «لون خلفية العنوان الترويجي» | «بطاقة المنتج» (product card) |
| Dark mode | Four background and text colors | «نظام الألوان» (color system) |
| A home-page element | «لون خلفية العنصر» | The element's options |
Details in Dark mode and the color system.