Documentation   /   EXTRAS

Customization.

Posted on 22 January 2021
We provide 3 themes: Default, Dark, Mono.
You can select one of them to Admin > Configuration > Global Settings > Themes section.
We also provide multiple ways to customize the chosen theme.
Just select ONE of the following according to your skills.

PHP Variables

Easy & Comprehensive
We have include a PHP file in the css folder so that you can better handle your color and font customizations.
Open the cartfile/assets/css/custom.php file.
You will see a list of variables which are easy to understand.
Open your favorite text editor and insert your values between the double-quotes.
Ex: $body_font_color = "#0099FF";
Simply add your values according to your need, save the file and refresh the page to see the changes take effect.
Change the default fonts selecting your fonts from Google Fonts - http://www.google.com/fonts.
Need a tool to select the right color?
Try the Color Picker
Note As seen above, the sign # is required at the beginning for HEXadecimal color.
  1. /* SHOP WIDTH */
  2. $shop_width = ""; /** Ex: 1050px or 95% */
  3.  
  4. /* MAIN */
  5. $body_font_type = ""; /** Google Fonts font name - https://www.google.com/fonts | Ex: Alegreya Sans SC */
  6. $body_font_size = ""; /** Ex: 20px */
  7. $body_font_color = ""; /** Ex: #206281 or darkblue */
  8. $body_font_spacing = ""; /** Site letter spacing - Ex: 3px */
  9.  
  10. $body_background_color = "";
  11. $body_background_image_url = ""; /** Full URL such as http(s)://mydom.com/e.png | No background image: none */
  12. $body_background_repeat = ""; /** repeat|repeat-x|repeat-y|no-repeat */
  13.  
  14. /* LINKS */
  15. $links_color = "";
  16. $links_hover_color = "";
  17.  
  18. /* ROUND BORDERS */
  19. $enable_rounded_corners = false; /** true | false - If enable_rounded_corners = true - Default:false */
  20. $round_corner_radius = "1.25rem"; /** rem ou px - Default:1.25rem */
  21.  
  22. /* HTML FORM ELEMENTS */
  23. $input_background_color = "";
  24. ...
  25. ...

SASS Variables

Flexible & Comprehensive
Open cartfile/assets/css/scss/custom-css/modules/_variables.scss.
As the previous "PHP Variables" method, you will see a list of SASS variables which are easy to understand.
Override a variable’s value and recompile with your compiler tool.
Important Notice:
The Output Path/File of cartfile/assets/css/scss/custom-css/bs-custom.scss Must Be cartfile/assets/css/bs-custom.css.
Simply change the values according to your need, save the file and after compilation refresh the page to see the changes take effect.

SASS must be compiled into CSS to be “understood” by a Web browser.

Recommended Compiler tool: KOALA.
  1. cartfile
  2. | assets
  3. | | css
  4. | | | scss
  5. | | | | custom-css
  6. | | | | | base
  7. | | | | | | _functions.scss
  8. | | | | | modules
  9. | | | | | | _accordions.scss
  10. | | | | | | _buttons.scss
  11. | | | | | | _cards.scss
  12. | | | | | | _cart.scss
  13. | | | | | | _checkout-progress-bar.scss
  14. | | | | | | _fonts.scss
  15. | | | | | | _footer.scss
  16. | | | | | | _forms.scss
  17. | | | | | | _global.scss
  18. | | | | | | _header.scss
  19. | | | | | | _lightbox.scss
  20. | | | | | | _loginFormFloated.scss
  21. | | | | | | _modalCart.scss
  22. | | | | | | _offersBanner.scss
  23. | | | | | | _promo-box.scss
  24. | | | | | | _responsive.scss
  25. | | | | | | _styles.scss
  26. | | | | | | _tables.scss
  27. | | | | | | _tabs.scss
  28. | | | | | | _tooltip.scss
  29. | | | | | | _toptitlebox.scss
  30. | | | | | | _variables.scss
  31. | | | | | bs-custom.scss

Custom CSS

Overwrite the theme style
We have include an empty Custom CSS File in the css Folder.
Simply add all your Custom CSS Codes in the cartfile/assets/css/custom.css File.
Also make sure that your Custom CSS Styles are Overwritten properly.
Simply add your Custom CSS Codes according to your need, save the file, refresh the page to see if your Custom CSS Styles are Overwritten properly.

Bootstrap 4 + Theme Customization using SASS

Take the full control of your Customization
Let's say you have selected the following theme: 
Open the cartfile/assets/css/scss/themes/default/_variables.scss file.
You will see a list of SASS variables which are easy to understand.
Override the variable’s value and recompile with your compiler tool.
Output Path/File of cartfile/assets/css/scss/themes/default/bs-saw.scss Must Be cartfile/assets/css/bs-saw.css.
Simply change the values according to your need, save the file and after compilation refresh the page to see the changes take effect.

SASS must be compiled into CSS to be “understood” by a Web browser.

Recommended Compiler tool: KOALA.
  1. cartfile
  2. | assets
  3. | | css
  4. | | | scss
  5. | | | | themes
  6. | | | | | default
  7. | | | | | | _accordion.scss
  8. | | | | | | _badges.scss
  9. | | | | | | _buttons.scss
  10. | | | | | | _cards.scss
  11. | | | | | | _checkout-progress-bar.scss
  12. | | | | | | _content-frame.scss
  13. | | | | | | _fonts.scss
  14. | | | | | | _footer.scss
  15. | | | | | | _forms.scss
  16. | | | | | | _global.scss
  17. | | | | | | _header-navbar-button.scss
  18. | | | | | | _header.scss
  19. | | | | | | _lightbox.scss
  20. | | | | | | _loginForm-popup.scss
  21. | | | | | | _modal-cart.scss
  22. | | | | | | _offersBanner.scss
  23. | | | | | | _page-cart.scss
  24. | | | | | | _page-log.scss
  25. | | | | | | _page-shipping.scss
  26. | | | | | | _page-payment.scss
  27. | | | | | | _promo-box.scss
  28. | | | | | | _qty-buttons.scss
  29. | | | | | | _responsive.scss
  30. | | | | | | _tables.scss
  31. | | | | | | _title-top.scss
  32. | | | | | | _transition.scss
  33. | | | | | | _variables.scss
  34. | | | | | | bs-saw.scss
  35. | | | | | | README.txt

Search

Most popular articles

Geolocation Map Setting.
Many thanks to...
Logo Setting.

Newest articles

Many thanks to...
Where is my Purchase Code?
Customization.