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.

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.

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.

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

Related Products

Configure the 'Related products' block from the backend on the product configuration page. Boost conversion on cross-selling thanks to the ability of the pre-selected related products to be added to the cart right from the block.

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.

How to enable our stylized 'Maintenance Mode' page

1. 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.

2. 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 configure the Jet Theme, please go to the Stores → Configuration → Jet Theme.

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.

An example of a style guide is shown in the screenshot below.

Enable Sticky Add to Cart Panel at Product Page - set to 'Yes' to enable the 'sticky' or 'floating' Add to Cart block. It's 'sticky' because it stays in the same place on the page right, visible to users at all times.

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

Google, YouTube, Facebook, Twitter - enter full URLs of your social pages.

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

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.

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

Background Image - upload the image for the block background.

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.

Enable Google Fonts - Set 'Yes' to customize font using the Google Fonts library.

'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'.

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.

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;

Rate the user guide

from 1 votes (Details)       0 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes 1 visitor votes