Embed Size (px)
Citation preview
For more details see how the Jet Theme for Magento 2 works.
Guide for Jet Theme for Magento 2
Trendy, responsive, customizable. The Jet theme brings both stable store performance and stunningvisuals to your Magento 2 store.
Adapt to the latest design trends without spending a fortune on custom developmentProvide customers with a smooth shopping experience on mobile and desktopForget about compatibility problems and poor functionalityCustomize theme design in no time with Style Guide
Theme InstallationAs of August 2020, the Jet Theme is compatible with Magento 2 Community Edition (also known asMagento 2 Open Source).
The compatibilities with other Magento 2 types will be added in further releases.
The Jet theme can be installed both manually or via Composer.
We strongly recommend you to make a backup of your database before theme installation. It willkeep your files secure, especially if you have lots of customizations applied.
After theme installation, we recommend you to check 5 things to ensure the stability of theme work.
Check if the theme is assigned to all necessary websites/store views by going to Content →1.Design → Configuration;Go to the website and/or store view that doesn't have Jet Theme applied to make sure2.everything is as it should be;Go to the global theme settings and adjust them. Learn how to do this in the Configurations3.section of the User Guide;Check newly created CMS pages to ensure that they are correctly assigned to the store view. To4.do this, go to Content → Elements → Pages;It is possible, that several pages duplicates appear. It is expected behavior, as we do not delete5.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
Sample DataWe limited access to the sample data to prevent accidents like deleting all products in the storedatabase. To get access to Jet Theme sample data, please write us a ticket. Alternatively, you cancreate a ticket in your Customer Account by going to My Account → Support Tickets.
The Jet theme goes with sample data, for example, products, images, texts, CMS pages, etc. You canuse Jet's sample data to replace the default one by Magento.
The sample data deploy is not a necessary step. You can skip it if you want to test the theme withdefault Luma sample data.Please note that the sample data deploy deletes all existing products, orders, customers, etc, toreplace them with custom data. If you are installing the sample data over the existing storedata, we strongly advise you to make a backup of all data.
How to install sample data?
Before installing the specified Jet sample data, please install the Luma sample data first. To do so,please follow the step-by-step instructions below.
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:upgradephp bin/magento setup:di:compilephp 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 andthen run the following commands one by one:
php bin/magento setup:upgradephp bin/magento jettheme:sampledata:deploy --clean
The php bin/magento jettheme:sampledata:deploy –clean command permanently deletes allexisting products and categories on this Magento instance and installs the sample data of Jet theme.
This an important step that ensures the sample data is correctly installed, without mixing withpreviously created items.
After that, run the following strings:
php bin/magento indexer:reindexphp bin/magento cache:flushphp bin/magento setup:static-content:deploy -f
That's it — the sample data is installed to your Magento instance.
Frontend Examples
See the examples of Jet theme's frontend looks. Please note, that all screenshots are made on theMagento 2 instance with custom sample data installed.
Home Page
Catalog Pages
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 productcards.
Compare - bright floating 'Compare Products' button always visible and reminds users of productsthey'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 toget 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 fromthe category and configure product attributes.
Product Pages
Simple Product
Related Products
Configure the 'Related products' block from the backend on the product configuration page. Boostconversion on cross-selling thanks to the ability of the pre-selected related products to be added tothe cart right from the block.
Checkout
First step of the checkout — Shipping
Second step of the checkout — Payment
Wishlist
We also redesigned the 'Share Wishlist' action. By click, now a pop-up appears and allows users toshare wishlists by email.
Maintenance Mode Page
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 filebefore 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 caseyour file is named local.xml.sample, then please rename it into local.xml and follow the instructionsabove.
2. Please follow the instructions below in case you DON'T have the local.xml norlocal.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 namedlocal.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 alreadyhave the local.xml file (see it above).
Jet Theme Configurations
To configure the Jet Theme, please go to the Stores → Configuration → Jet Theme.
General Settings
Allow Access to Style Guide at Frontend - set to Yes to enable access to the Style Guide viafrontend link. We advise you to restrict access to Style Guide in the Production environment.
To access the Style Guide, use the following link format:
http://example.com/amasty_jettheme/styleguide
For example, on the demo instance, the link looks as follows:
https://jet-theme-m2.magento-demo.amasty.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.
Additional Elements
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 atall times.
This is an example of how the sticky Add to Cart block looks on the frontend:
Social Network Links
Show Social Network Links Block - set to Yes if you want to display the block with clickable iconsof chosen social networks in the footer.
Google, YouTube, Facebook, Twitter - enter full URLs of your social pages.
This is an example of how the Social Network Links block looks on the frontend:
Newsletter Subscription
Show Newsletter Subscription Form - set to 'Yes' to display 'Subscribe to Newsletter' block on thefrontend.
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 yournewsletter.
Placeholder for Email Input - set the text that will be displayed as a placeholder.
Background Image - upload the image for the block background.
This is an example of how the Newsletter Subscription block looks on the frontend:
Color Scheme
The Jet theme allows you to quickly customize the colors of your store. To do that, simply choose thecolors you'd like to see for a variety of elements.
Enable Google Fonts - Set 'Yes' to customize font using the Google Fonts library.
Please note that the command below must be run in the console after setting a certain valid value inthe 'Google Font' field.
'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'.
Please note that some fonts use extra parameters e.g. Molle:400i where 400 = regular, i = Italic (100= thin, 700 = bold).You can find the full list of the available Google Fonts with examples here. Please find some fontexamples below.
- Righteous
AJAX Usage Configuration
Please apply the JET Theme to the needed website or store view to make these options work.
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' functionalityof the theme.
Enable AJAX Add to Cart - Set 'Yes' if you want the AJAX to work for the 'Add to Cart' functionality.
Please note that 'Ajax Add To Cart' from our theme will be disabled automatically once Amasty AjaxShopping Cart installed.
Troubleshooting
In this section, you'll find answers to the most frequently asked questions.
How to modify contents of the footer?
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
How to add more content into the Menu?
You can enhance the default Magento Menu functionality with features like image upload, differentlayouts 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, fullycompatible with the Jet Theme.
CMS Blocks after installation
By default, if you are installing the Jet theme without sample data, all custom CMS blocks by Jettheme 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.
Varnish compatibility
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;
Find out how to install the Jet Theme extension for Magento 2 via Composer.
Rate the user guide from 1 votes (Details)
Rate 0 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes 1 visitor votes
From:https://amasty.com/docs/ - Amasty Extensions FAQ
Permanent link:https://amasty.com/docs/doku.php?id=magento_2:jet-theme
Last update: 2020/11/11 22:05
