User Tools

Site Tools


Sidebar

magento_2:jet-theme

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

Theme Installation

As of August 2020, the Jet Theme is compatible with Magento 2 Community Edition (also known as Magento 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 will keep 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.

  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

Sample Data

We limited access to the sample data to prevent accidents like deleting all products in the store database. To get access to Jet Theme sample data, please write us a ticket. Alternatively, you can create 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 can use 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 with default Luma sample data.
Please note that the sample data deploy deletes all existing products, orders, customers, etc, to replace them with custom data. If you are installing the sample data over the existing store data, we strongly advise you to make a backup of all data.

How to install sample data?

To install the Jet theme sample data, the first step is to run the following CLI command:

php bin/magento jettheme:sampledata:deploy --clean
The php bin/magento jettheme:sampledata:deploy –clean command permanently deletes all existing 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 with previously created items.

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.

Frontend Examples

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.

Home Page

Catalog Pages

Catalog Pages are equipped with 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.

Product Pages

Simple Product

Configurable Product

Bundle Product

Grouped Product

Virtual Product

Downloadable Product

Shopping Cart

Checkout

First step of the checkout — Shipping

Second step of the checkout — Payment

Customer Account

Wishlist

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

Compare Products Page

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 the access to the Style Guide via frontend link. We advise you to restrict access to Style Guide in the Production environment.

To access the Style Guide, use the following link format:
https://yourdomain.com/**styleguide**

For example, on the demo instance, the link looks as follows: https://jet-theme-m2.magento-demo.amasty.com/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 'sticky' Add to Cart block. It's 'sticky' because it stays in the same place on the page right, visible to users at all times.

This is an example of how the sticky Add to Cart block looks on the frontend:

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.

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

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 the colors you'd like to see for a variety of elements.

Troubleshooting

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

CMS Blocks after installation

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.

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
 stars  from 1 votes (Details)
magento_2/jet-theme.txt · Last modified: 2020/09/21 14:58 by hfedulova