Sport theme

Sport Theme is a modern, responsive and attractive premium template. Perfect for stores with sports articles, equipment, apparel and many, many more. Animated content combined with sales banners is a guarantee of success in e-commerce.

How to create mega menu

As you can see on our demo, we've created a mega menu. It's a plain GrandNode feature, it's not a plugin. We've used our generic attributes feature. 

According to our demo example, look at the following category structure:

Now, edit the first main category and add to it following generic attributes:

Now let's describe them a little:

gallery - defines if we want to show images of subcategories or not.

cols - defines how many columns we want to have in our mega menu under this category

promoTop, promoMiddle, promoBottom, promoButton - content of the mega menu promo box.

promoOrder - it's used to place the promo banner. By default we have a standard order, that it's visible on the first place. For example, in the second category, promo banner is placed at the end of the mega menu container. We've used the promoOrder = 5 in second example.

Ok, now, we have to configure the subcategories generic attributes. In the case of mega menu, it's enough to set only one generic attribute:

showImage - it's used to show subcategory image in mega menu.

Rest of fields are used to customize the home page category banner. I will describe it in independent chapter.

Home page category banners

As you can see on our demo, homepage categories are customized with nice, hover effect. How can we achieve it? Basically, easily! Just set following generic attributes:

alternativName - category slogan on thumb

showFlag - specify if we should see logo or not

showBtn - specify if we should see the "Shop now" button on thumb

And that's all. It's very easy, 

How to customize product page

Customized product page

As you can see, this product page has different top color (that background on breadcrumbs). It can be easily achieved with generic attributes. The usage is very simple. Just go to specified product and create following generic attribute:

topColor - the value depends on you, here it's yellow color, but you can set any existing color.

Furthermore, product page has also one interesting feature. You can change the slide animation for product thumbnails.

As you can see in below presented example, I've set the "cube" effect. It's swiper slider, so you can use any animation effect provided by Swiper Slider.


To create customized animation effects, just create new generic attribute:

sliderEffect - and enter its value - cube.

This is an example presented above:

back to top