Ultimate Theme Developer guide for Prestashop 1.7

Configure a development docker environment for prestashop 1.7 by creating a network and containers for mysql and prestashop, with volume mounts for live code edits.

Install docker and configure Prestashop 1.7 installation parameters, including the database server host and root login with a password. Test the database connection and manage automatic database creation.

Restart docker services by listing containers with docker ps -a, then start the needed ones using their container IDs, and refresh the browser to bring the Prestashop site back up.

After installation, rename the install folders for security, or let prestashop do so automatically. Access the shop via localhost:80, explore the classic theme, and prepare to code.

Learn how prestashop templates and layouts organize pages, from global header and footer partials to product, catalogue listing, and checkout templates, with core checks for language-specific templates.

Learn how layouts organize a page and function as the skeleton of your Prestashop theme, using full width or two-column options, and how templates, blocks, and headers leverage layout inheritance.

Explore the head section, a container for meta data between the head and body tags, and learn how title, meta, link, style, and script tags shape page titles and assets.

Explore how Prestashop 1.7 head.tpl manages assets with CSS and JavaScript, enabling async loading and inline CSS, and supports dynamic metadata like title, description, keywords, and language alternates.

Explore the partial stylesheet tpl, comparing external CSS links versus inline styles, and learn how template compiling and cache settings affect loading of theme and module CSS files.

Explore how javascript.tpl handles external and inline JavaScript in Prestashop themes, using two for each loops and an if statement to define variables with var.

Learn how the Prestashop 1.7 layout extends a base layout, defines left and right column blocks, and uses head.tpl to inject head content, with options to override blocks for customization.

Explore Smarty, a web template system that separates front end from back end, using extend, blocks, for each, if statements, and template inheritance for layout.

Learn to set up a new Prestashop 1.7 theme using the deprecated starter theme, clone from GitHub, install npm dependencies, run watch, and activate in the back office.

Copy the classic Prestashop 1.7 theme to a new custom theme, rename it without spaces, and update the config with display name and author; then enable it in back office.

Copy the dev folder into your new Prestashop 1.7 theme to enable development tools and assets, then npm install, npm run watch, and update the production environment.

learn how prestashop 1.7 supports rtl themes through two paths: rtl overrides via css and separate rtl theme versions, with automatic rtl style generation available from 1.7.3+.

Learn to create a child theme in Prestashop 1.7 using template inheritance to minimize duplicated code, with a parent set to classic and assets from the parent.

Explore how a Prestashop 1.7 child theme inherits templates from the classic theme, and learn to override templates by redefining the whole file or extending it with blocks.

Explore theme.yml structure for Prestashop 1.7, covering meta, compatibility, and available layouts, then configure global settings, hooks, and image types to customize layouts and modules.

Configure theme assets by defining css and javascript files in the Prestashop starter theme, load parent assets when needed, and tailor assets to specific pages like product or home page.

Explore how to display module content with widgets in Prestashop 1.7, use widget syntax to override templates, and test with hooks like display nav for dynamic module views.

This lecture introduces webpack as a JavaScript module bundler that compiles Sass/SCSS to browser-ready CSS and explains its role in Prestashop 1.7 themes with development versus production assets.

Build a minimal webpack workflow to bundle a simple hello world module, configuring entry and output, and generating all bundle in the dest folder after installing webpack and CLI.

Learn how to configure a Prestashop 1.7 theme build with webpack, including dependencies, loaders for js and styles (less, css, stylus), and entry, output, externals, and module resolution.

Explore the official GitHub repo to access the themes folder, open the classic theme and Endeavor's assets, and clone the project to begin developing Prestashop 1.7 themes.

Set up and activate a new Prestashop 1.7 theme by cloning the repository into the themes folder, adapting the folder name, and running npm install to install dependencies.

Activate the Prestashop 1.7 theme, update the core entry file and set opacity to 0.05, then run npm run watch to compile changes and clear cache for verification.

Learn how to set up the Prestashop 1.7 theme header by positioning language and currency selectors, transplanting modules into display hooks, and cleaning up unused blocks.

Organize custom module assets for development by creating language and currency selector modules, structuring folders under devs csx, and override default div behavior with structured bootstrap-based styling and imports.

Learn to customize the header language and currency selectors in Prestashop 1.7 by overriding default module styles with custom css and color variables for consistent hover colors.

Explore how to customize the Prestashop 1.7 theme's my account area by editing the authentication templates, updating sign in and register links, and styling with icons, borders, and responsive spacing.

Learn to place a full-width image slider on the Prestashop 1.7 home page using a centered bootstrap container, a custom hook, and the widget API.

Learn to build a Prestashop 1.7 image slider by replacing the bootstrap grid with a dedicated slider top container, applying overflow hidden, and styling the carousel arrows on hover.

Wire the logo, search, and cart into the header using the widget API and display top hook, then customize the PS main menu with CSS for desktop and mobile.

Rearrange the search and cart modules in Prestashop 1.7 by editing design positions, removing float right, and using css display flags and responsive media queries for desktop alignment.

Learn to customize the Prestashop 1.7 search module by hiding the default cart span, creating a desktop cart card with custom selectors, and applying CSS hover effects and precise positioning.

Explore the Prestashop 1.7 product list template and how modules like featured, best sellers, and new products share it, with changes propagating across all views.

Learn to tailor the Prestashop 1.7 product list visuals by removing backgrounds and shadows, controlling hover opacity, and refining the thumbnail container with smooth transitions.

This lecture demonstrates configuring prestashop 1.7 category pages, including conditionally showing the home page slider, adjusting breadcrumb padding, and styling the category top menu and accordions with borders and colors.

Learn to implement a category pages accordion by inspecting the Prestashop template and module output, then enable collapse and tailor desktop and mobile CSS.

In the final episode, learn to customize any Prestashop 1.7 page using the API, the templates app, layouts, and assets like CSS and JavaScript.