How is CSS customization done in the Jet Theme?
Making style changes in any theme can be done in several different ways:
- by creating a child theme and using the backend configurations of it to experiment with different styles (this is the safest way);
- by extending the parent theme's styles through the _extend.less file (extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, don't need a child theme, but still want to add more styles to the parent theme);
- by overriding the parent theme styles (that is, overriding default Magento UI library variables). The drawback of this approach is that you need to monitor and manually update your files whenever the parent’s _theme.less file is updated.
With Jet Theme, we typically don't recommend using CSS and making edits through it, since our theme generates CSS from .less files. Also, these changes might disappear after the theme's update. To apply customizations to Jet Theme, we highly suggest creating a child theme and then making all the configuration changes there. This way, when a new version of Jet Theme is released, you will be able to update it with no worries.
However, if you still wish to apply new changes without creating a child theme, you can use the following instructions:
Step 1. Create a _custom.less file inside the app/design/frontend/Amasty/JetTheme/web/css/source directory;
Step 2. In the end of the app/design/frontend/Amasty/JetTheme/web/css/source/_extend.less file, add the following line:
Step 3. If you would like to customize a particular extension, you can do that by applying the files to this extension directly - app/design/frontend/Amasty/JetTheme/Module_Name/web/css/source/_module.less
Keep in mind that these changes will be lost after the update, so the backup of the files is highly advised.
If you have a child theme and still would like to customize your CSS files beyond the regular changes, you can do that through the Magento functionality. We advise you to refer to this Magento guide for further instructions.
How to use the Jet Theme Style Guide?
The Jet Theme Style Guide is a Storybook-based tool that consists of fonts, layouts, and elements settings. This guide includes comprehensive documentation that can be used to learn how to give a standardized look to the storefront. In case you want ...
Is it possible to get the information about all the Jet Theme's elements and design in any format that a developer can work with?
You can use the theme's Style Guide for dev reference. This Style Guide is a comprehensive storybook-based tool that consists of settings for fonts, layouts, and other elements, and you can use the information about them as a base for further changes ...
Can I have the Luma Sample Data on some pages of my website and the Jet Theme Sample Data on other pages?
Different types of Sample Data can only exist on different store views. It's not possible to have Luma Sample Data & Jet Theme Sample Data on different pages within ONE store view of a website at the same time. A workaround for such a request within ...
I've noticed a couple of skins for the Jet theme. Are there options I can switch between and if so how?
The Jet Theme has several color scheme presets that could be easily switched between and customized to your liking. To change the color scheme, simply navigate to general theme settings and find the Style Switcher tab here. Select one of the ...
I installed the Jet Theme, but don't see all the features that are in your demo. How do I get the specific sliders/widgets/etc.?
Jet Theme includes several add-ons enhancing its functionality. Each package - Lite, Pro, or Premium - comes with its own set of sub-modules. In Jet Theme Lite those complementary modules are: Jet Optimizer, Jet Non-Latin Fonts, Mixin Rewrite Patch, ...