Guide for Jet Theme for Magento 2

Trendy, responsive, customizable. The Jet theme brings both stable store performance and stunning visuals to your Magento 2 store.

• Adapt to the latest design trends without spending a fortune on custom development
• Provide customers with a smooth shopping experience on mobile and desktop
• Forget about compatibility problems and poor functionality
• Customize theme design in no time with Style Guide

The Jet theme can be installed both manually or via Composer.

After theme installation, we recommend you to check 5 things to ensure the stability of theme work.

1. Check if the theme is assigned to all necessary websites/store views by going to Content → Design → Configuration;
2. Go to the website and/or store view that doesn't have Jet Theme applied to make sure everything is as it should be;
3. Go to the global theme settings and adjust them. Learn how to do this in the Configurations section of the User Guide;
4. Check newly created CMS pages to ensure that they are correctly assigned to the store view. To do this, go to Content → Elements → Pages;
5. It is possible, that several pages duplicates appear. It is expected behavior, as we do not delete existing pages on your instance. EXCEPTION: if you are installing the Jet theme's sample data, products and categories will be deleted and replaced with newly created sample data

The Jet theme goes with sample data, for example, products, images, texts, CMS pages, etc. You can use Jet's sample data to replace the default one by Magento.

Luma Sample Data

1. Navigate to the root directory of your Magento 2 store.

2. Run the following CLI command to install Magento 2 sample data:

php bin/magento sampledata:deploy

3. To authenticate from repo.magento.com, enter your username, and password.

4. After successfully installing Magento 2 sample data, run the following commands one by one.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f

Jet Sample Data

To install the Jet theme sample data, the first step is to upload the files of the Jet Sample data and then run the following commands one by one:

php bin/magento setup:upgrade
php bin/magento jettheme:sampledata:deploy --clean

After that, run the following strings:

php bin/magento indexer:reindex
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f

That's it — the sample data is installed to your Magento instance.

To configure the Jet Theme, please go to the Stores → Configuration → Jet Theme.

Choose Style - choose one of the styles available in the dropdown and hit the 'Apply' button below to see how the settings below are changed according to the style configurations.

Then click 'Save' and run the following command in the console to apply style to the frontend:

'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

Allow Access to Style Guide at Frontend - set to Yes to enable access to the Style Guide via frontend link. We advise you to restrict access to Style Guide in the Production environment.

http://example.com/amasty_jettheme/styleguide

The Style Guide is a comprehensive documentation Storybook-based tool that consists of font, layouts, elements settings. They are used to give a standardized look to the stores' frontend.

Sticky Add to Cart Panel at Product Page - choose from two types of display for your sticky Add to Cart panel:

• Horizontal Bar;
• Sidebar.

Horizontal Bar

Sidebar

Swatches Type - Choose the preferable type for the product swatches display, round or square.

Round swatches:

Square swatches:

Open Minicart - Set 'Yes' to enable 'Open Minicart'.

Enable Sticky Minicart - Set 'Yes' to enable Sticky Minicart.

Enable Sticky Header - Set 'Yes' to enable Sticky Header.

Always Display Sticky Header - Choose whether to always display Sticky Header or only if a certain condition is met. Choose 'No' to see extra configuration options.

Hide on Scroll Down - This option becomes visible only if you've chosen 'No' in the option 'Always Display Sticky Header'. Specify here % of the screen height after which sticky header should be hidden, e.g. 50%.

Display on Scroll Up - his option becomes visible only if you've chosen 'No' in the option 'Always Display Sticky Header'. Set 'Yes' to display Sticky Header on a scroll up.

Show Newsletter Subscription Form - set to 'Yes' to display 'Subscribe to Newsletter' block on the frontend.

Form Position - Specify the position of the input (email) field on the block: center, right or left.

Headline Text - enter the text you'd like to see as a headline.

Additional Text - enter the text that adds extra info about the value of a subscription to your newsletter.

Text Position - Specify text position towards to the input field (email field): before, after or inline.

Text Color - Pick up color for the text on your newsletter block, don't forget to save settings.

'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

Placeholder for Email Input - set the text that will be displayed as a placeholder.

Background color - Use color picker to specify any color for the block background.

'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

Background Image - Use this setting to upload image for the block background.

Image Position - Use this option to specify how the image you've uploaded will be applied to the block (stick to the right/left/center or stretch to the full size of the block).

The Jet theme allows you to quickly customize the colors of your store. To do that, simply choose the colors you'd like to see for a variety of elements.

'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

Color Scheme Presets - In order to apply a color scheme preset on a storefront, please follow the steps below:

• 1. Make sure the value of the setting 'Enable Custom Colors' from the section 'Color Scheme' is 'Yes';
• 2. Make sure this is the store view you need for changing the color scheme. If it's not, then change to the store view you need and empty all checkboxes 'Use Default' for the section 'Color Scheme';

• 3. Choose the preset you want from the 'Color Scheme Presets' dropdown (e.g. 'Bright');
• 4. Click on the 'Apply' button below the dropdown. Now you can see the available color options included into the preset;
• 5. Click on the 'Save' button to apply a preset to the store view you've selected;
• 6. Run the

  'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

  command.

Choose one of three available font types:

• Default (Roboto);
• Google;
• or Non-latin.

The default font is Roboto.

'bin/magento setup:upgrade && bin/magento setup:static-content:deploy'

Google Font - Type in the font name you'd like to apply on the frontend, like 'Roboto', 'Open Sans' or 'Oswald'.

Specify the Non-Latin font name. For example Hachi Maru Pop.

Example on the frontend:

With Jet Theme, you can apply different Color Schemes and Google Fonts for different Store Views. It allows for more customization options so that your storefront will get a unique design.

To do that, you need to create a child theme. It can be done in two ways.

1. Create the /Amasty/ folder in the /app/design/frontend/
2. In the /Amasty/ folder create a new folder with <your_theme_name>. For example, a folder can be named something like /JetTheme_GermanStore2/
3. Copy the following files from the /vendor/amasty/theme-frontend-jet-theme/ of your Magento 2: registration.php; theme.xml and media/preview.jpg (here it’s a required file). These files should be copied to the /app/design/frontend/Amasty/<your_theme_name> . In our example above, the full path will be like /app/design/frontend/Amasty/JetTheme_GermanStore2
4. Modify the copied registration.php file. You need to adjust text by switching the “JetTheme” in the 'frontend/Amasty/JetTheme' to the ‘<your_theme_name>’, and save the file. For instance, in the example case, it should be the 'frontend/Amasty/JetTheme_GermanStore2'.
5. Modify the theme.xml file. In the </title> set the name of the theme, that will be used in the Admin panel. For example, ‘Jet Theme by Amasty 2’ or ‘Jet Theme in Dark Colors’ etc. See the way it looks on the screenshot below.
6. Also, in the <parent> tag set ‘Amasty/JetTheme’ instead of the ‘Magento/blank’ and save the file.
7. If you are working in the Developer Mode, you need to run the 'bin/magento setup:upgrade' command from your Magento 2 root.
8. In case you are working in Production Mode, you need to run the 'bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento setup:static-content:deploy’ command from the Magento 2 root folder.

1. In the /app/design/frontend/Amasty/ folder create a new folder with <your_theme_name>. For example, a folder can be named something like /JetTheme_GermanStore2/
2. Copy the registration.php, theme.xml files and /media/ folder from the /app/design/frontend/Amasty/JetTheme of your Magento 2 to the /app/design/frontend/Amasty/<your_theme_name>. For example, the destination folder can be something like /app/design/frontend/Amasty/JetTheme_GermanStore2/
3. Modify the copied registration.php file. You need to adjust text by switching the “JetTheme” in the 'frontend/Amasty/JetTheme' to the ‘<your_theme_name>’, and save the file. For instance, in the example case above it should be the 'frontend/Amasty/JetTheme_GermanStore2'.
4. Modify the theme.xml file. In the </title> set the name of the theme, that will be used in the Admin panel. For example, ‘Jet Theme by Amasty 2’ or ‘Jet Theme in Dark Colors’ etc. Then, in the <parent> tag set ‘Amasty/JetTheme’ instead of the ‘Magento/blank’ and hit the Save button.
5. If you are working in the Developer Mode, you need to run the 'bin/magento setup:upgrade' command from your Magento 2 root.
6. In case you are working in Production Mode, you need to run the 'bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento setup:static-content:deploy’ command from the Magento 2 root folder.

After you created a child theme, you need to apply it to the required Store View. To do that, please do the following steps:

1. In the Admin panel, go to Content → Design → Configuration
2. Press the Edit button near the required Store View
3. In the Applied Theme select the newly created theme name (in the creation process examples above, it was ‘Jet Theme by Amasty 2’ and ‘Jet Theme in Dark Colors’)
4. Hit the Save button

To apply various Color Schemes and Google fonts for various Store Views, you need to do the following steps.

1. First, please proceed to the Admin panel and go to Amasty → JET Theme → Configuration
2. In the Scope, select the required Store View and install all necessary Color Scheme and Google Fonts

1. Press the Save button.

Run the 'bin/magento setup:upgrade’ command for Developer Mode. If you are working in Production Mode, please run the ‘bin/magento setup:upgrade && bin/magento setup:di:compile && bin/magento setup:static-content:deploy' command.

Enable AJAX Add to Compare - Set 'Yes' if you want the AJAX to work for the 'Compare products' feature.

Enable AJAX Add to Wishlist - Set 'Yes' if you want the AJAX to work for the 'Wishlist' functionality of the theme.

Enable AJAX Add to Cart - Set 'Yes' if you want the AJAX to work for the 'Add to Cart' functionality.

See 4 basic examples of how the configurations described below can be applied:

List Mode - please choose one list mode from the dropdown to configure the way you want products to be displayed on category pages.

As for now, four list modes are available:

• Grid only
• List only
• Grid (default)/List
• List (default)/Grid

Products per Page on Grid Allowed Values - Here you can specify one or several values of products to be displayed per page on the category page. Please separate several values by commas for the correct work of this feature.

Products per Page on Grid Default Value - Here you can specify the number of products to be displayed per one page on a category if the Grid mode is selected as default.

Products per Page on List Allowed Values - Here you can specify one or several values of products to be displayed per page on the category page. Please separate several values by commas for the correct work of this feature.

Products per Page on List Default Value - Here you can specify the number of products to be displayed per one page on a category if the List mode is selected as default.

Allow All Products per Page - Allow showing all the relevant products per one page without any limitations.

Products per Line for Desktop View - Choose how many products to display per line on the category pages.

Products per Line for Mobile View - Choose how many products to display per line on the category pages on mobile. To display 2 products per line, please make sure that screen resolution is up to 480 px.

Enable Quick View - Use this setting to switch on/off the Quick View feature for the product cards on the frontend.

See how the Quick View feature looks on the frontend:

Display Product Name - Choose how do you want to display product names on the frontend:

• 'Default' - the standard Magento product names display;
• 'All Caps' - with all letters capitalized;
• 'All Lower case' - with no capital letters at all;
• 'Each Word with the Capital Letter' - each word will start with the capital letter.

Show Product Reviews - Enable/disable the display of the product reviews.

Swatch Display Type - Choose whether to show the swatches all the time or just on hover.

Show Swatch Tooltip - Use this setting to enable the display of tooltips for the swatches configured.

Show Swatches in Product List - Enable/disable showing swatches in the product list.

Display Product Count - Enable/disable the display of the product count on the frontend.

Display Category Filter - Enable/disable the display of the category filter on the frontend.

Show Short Description - Enable/disable display of the short description.

Display Add to Cart Button - Choose when to display your 'Add to Cart' buttons:

• 'No' - do not display the 'Add to Cart' buttons on category pages at all;
• 'Always' - always show the 'Add to Cart' buttons on category pages;
• 'On hover' - show the 'Add to Cart' buttons on category pages on hover only.

Align Add to Cart - Choose the style for your 'Add to Cart' buttons display:

• Center;
• Left;
• Full Width.

Show Add to Wishlist - Choose where and how to display the 'Add to Wishlist' buttons.

Show Add to Сompare - Choose where and how to display the 'Add to Сompare' buttons.

See 3 basic examples of how the configurations described below can be applied:

Show Image Gallery Thumbnails - Choose how to display the image gallery thumbnails:

• 'Bottom' - bottom (below the main image),
• 'Left' - on the left from the main image,
• 'Right' - on the right from the main image.

Show Product Review - Enable/disable the display of product reviews on the frontend.

Show Stock Info - Enable/disable display of the product stock info.

Show Product Sku - Enable/disable display of the product SKU.

Add To Cart Button Position - Choose the 'Add to Cart' button's position from the dropdown:

• Under the quantity selector;
• On the line with the quantity selector.

Show Add To Wishlist - Enable/disable display of the 'Add to Wishlist' button for the product.

Show Add To Compare - Enable/disable display of the 'Add to Compare' button for the product.

Show Logo Block - Set 'Yes' to show logo on your custom footer. If this setting is set to 'No' then the default footer will be displayed.

Show Subscription Block - Set 'Yes' to show the subscription field on your custom footer.

Show Subscription Block on Mobile - Set 'Yes' to show the subscription field on your custom footer on mobile devices as well.

Show Social Network Links Block - set to 'Yes' if you want to display the block with clickable icons of chosen social networks in your custom footer.

Show Footer Links Block - set to 'Yes' display your custom links in the footer.

Enable Custom CMS Block - set 'Yes' to enable custom CMS block in footer.

Select CMS Block - choose the necessary CMS block from the dropdown so it can be displayed in your footer.

Show Payment Methods Block - set 'Yes' to display available payment methods in your footer.

Align Payment Methods Block - use this setting to choose the alignment of the payment methods block: right, center, or right.

Enable Custom Mini Footer - set 'Yes' to enable custom mini footer. For the correct work of this option please create the relevant CMS block first.

Mini Footer CMS Block - Choose the relevant CMS block from the dropdown.

Copyright Text - Please note that this option won't be visible if you've selected 'Yes' for the option 'Enable Custom Mini Footer'. Specify the copyright text to be displayed on your footer.

Enable Custom Layout - set 'Yes' to choose from the 2- or 3-columns footer layout and customize its content. Just drag-n-drop cards to configure it.

In order to configure content of the block, please navigate to Content → Amasty Jet Theme → Manage Social Links.

There you'll find a grid to manage all social links you create. Click no the 'Add New Social Link' button to create the new one.

Title - Specify the social link's title, e.g. 'YouTube'.

Link - Specify the URL leading to your profile on a social network.

Choose Icon - Choose a social icon from the gallery. Reset icon to default if you changed your mind or just clear icon.

Upload Custom Icon - Upload custom icon here.

Is enabled - Enable/disable the social link with this toggle.

Store View - Choose the store views where your icon will be displayed.

Sort Order - Specify sort order for the icon to set up a certain order (priority) of its display among the other icons.

Show Payment Methods in Minicart - Set 'Yes' to show payment methods block in mini cart;

Show Payment Methods on Shopping Cart Page - Set 'Yes' to show payment methods block on Shopping Cart Page;

Show Payment Methods on Product Page - Set 'Yes' to show payment methods block on Product Page.

See frontend examples:

Use the default payment method icons or click on the 'Add New Payment Method Icon' button to create new.

Title - Here you can specify the title of the icon.

Choose icon - Choose from the library of the ready-made icons or upload your own image using the setting below.

Upload Custom Icon - Upload an image to create a custom icon not listed in the library from the setting above.

Is Enabled - Enable and disable the icon.

Store View - Choose the store views where the icon will be displayed.

Sort order - specify a sort order for the icon.

Optimize Images - Set 'Yes (Recommended)' to enable advanced image optimization settings for your store.

Optimization Console Command - to run optimization manually, execute the following command:

php bin/magento amastyjet:image:optimize

Run Optimization - press the 'Run Optimization' button after all the optimization settings below are properly configured.

Enable Multi-Process Generation - select 'Yes' to speed up image optimization.

Number of Parallels Processes - Specify the number of the parallel processes here.

Process Images per Request - Enter the number of images you want to be shown instantly, per one request.

bin/magento amasty:optimizer:optimize -j 4</cpde>

Moreover, you can specify the particular pattern ( i is the id of the pattern):

<code>bin/magento amasty:optimizer:optimize -j 4 -i 2

JPEG optimization tool - set the way to optimize JPEG images:

• Do not Optimize - select this option to forbid optimization;
• jpegoptim 100% quality / jpegoptim 90% quality / jpegoptim 80% quality - choose the quality level you want to get after compression. See the examples of optimized images right below the setting.

PNG optimization tool - select optipng to optimize PNG images.

GIF optimization tool - choose gifscale to compress GIF files.

Create Webp Copy - choose Cwebp to create a copy for every image in the WebP format.

Create Images in Smaller Resolutions - choose the type of copies to be created:

• Mobile - the extension will create copies suitable for mobile devices. All copies will be placed in the automatically created folder - pub/media/amasty/amoptmobile.
• Tablet - all the copies will be created specially for tablets and placed in pub/media/amasty/amopttablet folder.

Resize Algorithm - select the algorithm according to which the images will be compressed:

• Crop - cuts pictures by size according to the device used, but not proportional to the size of the picture itself. While the height of the image would be the same, in the result the cropped image will look like the part of the original picture.
• Resize - compresses the images in proportion to the picture itself according to the size of the field viewed. Simply it will be the same picture, but smaller in pixels.

Dump Original Images - set this option to 'Yes' to store original images in the pub/media/amasty/amoptimizer_dump folder. It lets to collect all the original files in one place and easily update them in case the settings are changed.

Automatically Optimize Newly Uploaded Images in Catalog and Wysiwyg folders - set to 'Yes' to optimize all images uploaded to the catalog or Wysiwyg folder automatically.

Expand the User Agent tab to adjust settings for image loading according to the customer's browser user agent.

User Agent for Loading Images - Set this setting to 'Yes' to enable fetching appropriate image sizes based on the user agent data, obtained from the browser.

Ignore Images that Contain - In this setting, you can specify certain images to be excluded from the loading based on the user agent info. Such images will be delivered on the users' devices in the original size.

Enable Lazy Load - Set this setting to 'Yes' enable the Lazy Load functionality.

Use Lazy Loading Images - set to Yes to make off-screen images load only when a customer scrolls to them. It prevents pages full of images from lagging.

Lazy Load Script - you can choose between 2 lazy load scripts: jQuery Lazy Script or Native JS Lazy Script. We recommend trying both of them to choose one that fits your system best.

Preload Images - You can decide whether to 'Preload Images' or load them from scratch when they happen on screen. Decide how many images to load by setting Preload Images Number.

Desktop Preload Images Number - set the number of images to be pre-loaded on the page from the start. You can also assign a specific number of images for tablet devices with the Tablet Preload Images Number and for phones with the Mobile Preload Images Number fields.

Ignore Images That Contain - specify the images that should not be optimized.

Clear Generated Image Folders - the Clear Generated Image Folders button deletes the optimized files from the pub / media / amasty / folder_name folder.

It is used if the previously selected optimization settings were inconvenient to use and there is a need to re-generate the queue and re-optimize the images.

In this section, you'll find answers to the most frequently asked questions.

In order to modify the contents of the footer, please refer to the file

vendor/amasty/theme-frontend-jet-theme/Magento_Theme/layout/default.xml

You can enhance the default Magento Menu functionality with features like image upload, different layouts for the menu display, eye-catching labels, and a hamburger menu.

For this purpose, we recommend you consider the Mega Menu for Magento 2 extension, fully compatible with the Jet Theme.

By default, if you are installing the Jet theme without sample data, all custom CMS blocks by Jet theme will be disabled.

It is made to ensure that no unnecessary blocks will be visible on the frontend.

To enable custom Jet theme blocks, you have to do it manually by enabling each particular block one-by-one.

To ensure the correct extension work, please check the following configurations.

Magento is running with Magento_CSP, no Varnish

Please increase the buffer size in nginx configurations:

fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;

Magento is running with Varnish or any other proxy

Please, add to Proxy section the following:

proxy_buffers 16 16k;
proxy_buffer_size 32k;

• To install the patch through the Composer, please use the following command:

composer require amasty/module-mixin-rewrite-patch

• Afterward please make sure to run:

php bin/magento setup:upgrade

1. If you want to enable stylized for the Jet Theme 'Mainatance Mode' pages, please do the following:

• if the theme is installed to the 'app/code' folder, please navigate to 'app/code/Amasty/JetTheme/Setup/Files/errors' and copy the folder 'amasty_jettheme' to the folder 'errors' ('pub/errors') in the Magento root folder.

• in case you've installed Jet Theme via composer, please copy the folder navigate to 'vendor/amasty/jet-theme/Setup/Files/errors' and copy the folder 'amasty_jettheme' to the folder 'errors' ('pub/errors') in the Magento root folder.

2. Please follow the instructions below in case you have the local.xml or local.xml.sample file before the installation of the Jet Theme on your store.

Please navigate to the local.xml file and add the amasty_jettheme into the <skin> parameter. In case your file is named local.xml.sample, then please rename it into local.xml and follow the instructions above.

3. Please follow the instructions below in case you DON'T have the local.xml nor local.xml.sample file before the installation of the Jet Theme on your store.

If you want to use our stylized 'Maintanance Mode' page for your store, please create file named local.xml first, containing the following data:

<?xml version="1.0"?>
<config>
    <skin>amasty_jettheme</skin>
    <report>
        <action>print</action>
        <subject>Store Debug Information</subject>
        <email_address></email_address>
        <trash>leave</trash>
        <dir_nesting_level>0</dir_nesting_level>
    </report>
</config>

Move the file you've just created [local.xml] to the root of the folder 'pub/errors'.

Then please follow the instructions from the first section of this notice for the case when you already have the local.xml file (see it above).

To create a new banner slider widget, please navigate to Content → Widgets → Add Widget.

Select the widget type 'Slider for Secondary Banner' and choose the Jet Theme for the option 'Design Theme'.

Then navigate to the 'Widget options' to specify image sources for the slides, image descriptions, and URLs per each image if it's necessary.

See the examples of Jet theme's frontend looks. Please note, that all screenshots are made on the Magento 2 instance with custom sample data installed.

• Color Scheme Preset = ‘Bright’
• Google Font = ‘Indie Flower’
• Show Add To Wishlist = ‘Top Right’
• Show Add To Compare = ‘Top Right’
• Show Short Description = ‘Yes’
• Show Product Reviews = ‘No’
• Swatches Type = ‘Square’

• Color Scheme Preset = ‘Dark’
• Google Font = ‘Red Hat Display’
• Show Add To Wishlist = ‘Bottom Left’
• Show Add To Compare = ‘Bottom Right’
• Display Product Name = ‘Each Word with the Capital Letter’
• Show Short Description = ‘Yes’
• Show Product Reviews = ‘Yes’
• Swatches Type = ‘Square’

• Color Scheme Preset = ‘Light’
• Google Font = ‘Abel’
• Show Add To Wishlist = ‘Top Right on Hover’
• Show Add To Compare = ‘Bottom Right on Hover’
• Display Product Name = ‘All Lower Case’
• Show Short Description = ‘No’

• Color Scheme Preset = ‘Pastel’
• Google Font = ‘Shadows Into Light’
• Show Add To Wishlist = ‘Bottom Left’
• Show Add To Compare = ‘Bottom Left’
• Display Product Name = ‘All Caps’
• Show Short Description = ‘Yes’
• Show Product Reviews = ‘Yes’

The Catalog Pages on a Jet Theme are equipped with extra options to simplify product browsing.

Hide Filters - by click, it hides all product filtering options and frees screen space to enlarge product cards.

Compare - bright floating 'Compare Products' button always visible and reminds users of products they'd like to compare and buy further.

Back to Top Button - a green button with an arrow is visible at all times and enables shoppers to get back to page top in one click.

Table mode - Switch to the 'Table mode' on any page of the catalog to see more info about the product right from the category and configure product attributes.

Simple Product

Configurable Product

Bundle Product

Grouped Product

Virtual Product

Downloadable Product

First step of the checkout — Shipping

Second step of the checkout — Payment

We also redesigned the 'Share Wishlist' action. By click, now a pop-up appears and allows users to share wishlists by email.