Oscar's documentation explains in detail how to customise Oscar's appearance.

In this guide, we highlight some points that you will need to bear in mind when using Oscar on Divio Cloud.

Divio App Required

Changing Oscar templates

The easiest way to get access to the original Oscar templates is via their GitHub Repository. Just copy the templates you want to adapt to your project's templates folder - i.e. all files in django-oscar/src/oscar/templates/oscar/  should be copied to a directory called templates/oscar  in your project.

Add Aldryn Snake to the base.html  template that you've copied over, once in the head:

    <!-- Aldryn -->
    {{ ALDRYN_SNAKE.render_head }}
</head>

And at the end of body:    

    <!-- Aldryn -->
    {{ ALDRYN_SNAKE.render_tail }}
</body>


This allows Addons to inject required code into your templates.

Push your changes to the Divio Cloud, either by using Upload in the Divio app, or by using Git in the shell, and redeploy.

Note: there are other ways to do this, but this is the simplest and will get you started. If you are more familiar with Django in general, you'll be able to implement the templates in whichever way best suits you. You should also be aware that copying the files as described here does mean that if a new version of Oscar updates the files, you may need to update your own copy manually. 

Changing CSS

Oscar uses LESS for generating CSS files. The CSS files are split into:

  • style.css (compiled from style.less): Used to style the customer-facing frontend
  • dashboard.css (compiled from dashboard.less): Used to style the admin dashboard

You'll find all files at src/oscar/static/oscar/less in the Oscar repository.

To modify the customer-facing frontend you can simply override the style.css with whatever you prefer and use any pre-processor you might prefer (e.g. SASS) or just plain CSS.

Once again, push your changes to the Divio Cloud, either by using Upload in the Divio app, or by using Git in the shell, and redeploy.

Did this answer your question?