How to customize PS9.0.x?

[darkin]

Hello everyone

So in previous PS versions there's custom.css file sitting in every theme and adding new css rules to this file you can change your site's look and basically feel. But in PS 9.x.x. there's no such file and adding it to theme's dir doe's nothing. Noticed that PS 9 generates themeXXX.css file, uses it and saves in cache dir. IS custom.css file hiding somewhere or in case it's totally different from previous versions, what is the best way to customize website look (like backgrounds, shadows, lines and etc.)?
Thanks in advance

[Andrei H]

Hello,

In PrestaShop9 you can still create an assets/css/custom.css file in the themes/<theme-name> directory, and, as you can see here, the FrontController will add it to the front store pages.

The caching does seem to be handled a little bit different, especially for the Hummingbird theme. You will actually need to go to Advanced Parameters -> Performance and clear the cache, in order to see the changes.

For speeding up development, you can disable the Smart cache for CSS (in the same Performance page) and on refresh you should see the changes.

[darkin]

Thanks for reply, Andrei. Using classic theme and have tried to put custom.css file, but had no effect. Need to clean all caches and try again.

[El Patron]

In PS 9 the theme assets are driven by theme.yml.
To have your own custom.css and custom.js included, you need:

1, Files in the theme assets folders

/themes/<your-theme>/
  assets/
    css/
      custom.css
    js/
      custom.js

2. Declare them in theme.yml

Open /themes/<your-theme>/theme.yml and make sure you have an assets section like this (add it if it’s missing):

assets:
  # If you're building a child theme and want to reuse parent assets:
  # use_parent_assets: true

  css:
    all:
      - id: theme-custom
        path: assets/css/custom.css
        media: all
        priority: 1000

  js:
    all:
      - id: theme-custom-js
        path: assets/js/custom.js
        priority: 1000
        position: bottom   # before </body>, optional

A few notes:

• path is relative to the theme root (themes/<your-theme>/), so assets/css/custom.css points to /themes/<your-theme>/assets/css/custom.css. PrestaShop+1
• css: all: and js: all: mean “load on every front-office page”. You can also target specific page types (product:, category:, etc.) if you want more granular loading. PrestaShop+1
• priority controls the order – higher numbers are loaded later, useful if you want to override theme styles.