Documentation
Changelog
 
 

Theme Customization

You can find theme customization options in Athlete2 Menu on the Left. Theme Settings section responsible for layouts and other options when Theme Appearance responsible for colors and fonts.

We suggest to disable magento cache before you start theme customization. Otherwise, you will have to flush the cache everytime to see your changes.

 

Theme Blocks

You can find basic website containets and blocks structure on screenshot below. Most of the block are controlled by theme options, except some of the predefined footer blocks. More detailed information about Footer Structure you can find in Footer section.

As you can see from screenshot, product sliders and banners are placed in content area. They are widgets and you can add them anywhere on your website where widgets are allowed.

 

General

You can find general settings in Athlete2 > Theme Settings > General.

Enable Athlete2 Extension - This option will disable theme required functionality including theme settings. Theme will not work properly if this option is disabled. If you want to use another theme for specific store view then disable this extension for that store view only.

Site max width - you can set max width for content and other areas. Specifically this option set max width to .container class. You can still have full width layouts for pages and other block set separately.

Messages Fixed Position - This options will make store messages (product added to cart, errors, etc) to appear in fixed position above the content. Messages are autoclosed after 10 sec.

Messages Fixed Position

Lazy Load - delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. You can exclude image

Create a placeholder of the appropriate size - This option will create placeholders for images to prevent Cumulative Layout Shift. This means that space for images will be reserved before they loaded and as results page doesn't "jump" while loaded.

Lazy Load Excluded Class - you can exclude elements from lazy load by adding its class in this textarea. Use this option if you have any issues, odd behavior or conflicts with other lazy loads. In our theme we exclude Revolution Slider background elements from lazy loading by adding rev-sliderbg class.

Expand (Show More/less) - You can set max height for long content with expand option. It will add "show more/less" link and set max height to all elements with specified class, see image below.

Add selectors for elements that you want to minimize, separated by comma. E.g. for category description add .category-description

Defer JS - Athlete2 theme comes with integrated Defer Parsing of JavaScript Extension by Olegnax you can check its documentation here

 

You can find header settings in Athlete2 > Theme Settings > Header. First of all choose header layout. First one is classic Athlete theme header with logo overlay the top line. Second with normal logo position and the third one is full height items, featured in "Greece" demo. In third layout all items has the same height as main header. Additionally you can choose menu style for any of the header layouts.

 

Sticky Header

You can make header sticky, Which means it will stay on top when you scroll the page. Smart Sticky will make header appear when you scroll up instead of scroll down, so header won't be visible all the time.

Enable Simplified Sticky Header if you wish header to be resized when it is sticky so it won't take too much space. It is especially useful when menu is below header.

Additionally you can hide logo in sticky header to add additional space, useful when you have long menu below header.

 

Top line

Top line does not depend on layout and can be disabled or enabled for any layout. You can hide default top links from top line and add your custom content on the left, right and center of the top line.

You can add any custom content in topline using Top Line Left Static Html, Top Line Right Static Html and Top Line Middle Static Html including widgets. Below you can check example of top line with social widget.

 
Header Items

Minicart Content Style allows you to choose between small and big minicart drop down/slideout style:

Using Minicart Type option you can choose between Drop Down and Slideout minicart and also choose how minicart drop down should be triggered.

You can also adjust minicart item text and icon and set position for header items.

Menu Position option allows you to place menu below header. When menu is below header, header content area will be enabled. To add content to the header area create/edit static block with following identifier: athlete2-header-text and place your content there.

You can change menu alignment separately for normal position and in sticky header.

 
Header Items Position

You can choose position for each header item to show it either in top line or in main header.

 
Account Drop down

If you set My account to show in Main header and enable account action to drop down/slideout then top line links and items that set to show in top line will be moved to my account drop down.

My Account Button Action - you can choose between simple drop down with links and login form for not logged in users. Logged in users will see simple links also. See examples below.

Account Drop/Slideout - same as for minicart, you can choose between drop down on hover, drop down on click or slideout for my account block.

 

 
Header Items Order

You can reorder items in header. Simply add order numbers. Default is 0.

 

Mobile Header

You can also choose layout for mobile header and hide some unnecessary elements.

Wishlist and Compare position options has been changed since 1.4. Now you can choose to not only hide it but also show it in main header or account tab of menu slideout on mobile.

You can add content above and below menu on mobile using 2 custom content areas: Mobile Menu(Slideout), Content Before Menu and Mobile Menu(Slideout), Content After Menu

 
Please note: we've added logo width and height options in theme settings / logo in version 1.5.2.1 of the theme due to the bug in Magento 2.4. So you from now on you need to set logo size in theme settings instead of default Magento settigns.

You can find logo settings in Athlete2 > Theme Settings > Logo. You can upload logo and additioanally retina (2x version of your) logo image and set logo width and height. Adding logo size is important, if you won't add your size it will add default size and your logo will be squished. Note, that if you upload logo here it will replace logo from magento default settings (Content > Configuration).

You can also adjust logo container size and paddings for desktop and mobile.

 

CMS Pages

CMS Pages Layout - allows your to easily set layout globally, for all cms pages, without the need of editing xml. Cms pages are pages that created in Content / Elements: Pages. Layout for categories and product pages can be set in relevant sections.

 

Product Page

First set of options allows you to control width of product page and its different parts.

With Info Wrapper option enabled you can set width for gallery + info block separately from other page. So lets say you can have the whole page full width but product image with info section limited to 1400px. You can see such example on canada demo: https://athlete2.com/ca/suede-classic-sneakers.html

Additionally you can set max width for the entire content area of the product page and bottom block. Bottom block is where you can place related, upsell, reviews, or tabs using the options described below. Bottom block presenteed in v1.5 allows you to give even more control to the product page layout, because you can separate everything but selected blocks from the main content.

Lest say you can set page to full width and place tabs in default position in content. Then set limit gallery + info block width and also limit width for bottom block where you placed rest of the block. In this case you will get everything on the page with limited width but tabs which will stay full width. This is just one of the examples.

Gallery Layout - this options allows you to show product images in Magento default fotorama gallery or as grid in one or two columns. Additionaloptions appear when you choose grid style for gallery. They described below.

Disable lazy load for Gallery - you can disable theme integrated lazy load feature for images in gallery, if lazy load is enabled in Theme Settings / General.

Show Custom Cursor for Gallery - you can enable theme styled cursor when you hover over product gallery.

 

Below set of options appear when you choose grid style for gallery. You can check example of gallery with grid on Canada, Spain and Australia demos.

Min Amount of Products for 2 Columns - you may have only for example one(or 3) image for some of the products with 2 columns grid enabled and it will look like a broken grid, so you can set min amount of images for 2 columns grid and if it is smaller then show it as one column.

Product Image Behavior in block - this option determin what will happed with product image if it is smaller or bigger than the grid. You can either align it ot center in grid or stretch.

options for grid gallery layouts

Carousel Gallery on Mobile - This option for product gallery grid layouts only. It allows you to transform product images grid which looks good on desktops but too long on small screens into a compact carousel See it in action on video below.

Carousel Gallery on Mobile - Breakpoint - you can set when exactly (on what screen size) to transform product images grid into a carousel.

options for grid gallery layouts

 

options for grid gallery layouts

Enable Gallery popup - default Magento fotorama comes with full screen image popup but in grid layout we disable fotorama. So to have the same functionality and show fullsized product images in popup we have added Photoswipe, which enabled with this option.

 

Sticky Product Description - this option will keep on the screen shortest block either gallery or info block when you are scrolling the page while the longest will be scrolled.

You can move blocks on product page to different position and one of this position is below gallery. Below is an example of how sticky description will work if you move tabs and related products below gallery.

 
 

Starting verion 1.4 you can set custom size for product gallery. Use Product Image size for gallery width - will set fixed size in px for gallery. Image size should be set in Product Images > Product Image Width. This option useful if you have very small images. Product Gallery Block Width % gives you move flexibility making gallery responsive. This version is used by default and has 55% value. 5% always goes to space between blocks. See examples below.

Gallery - 60%, Info - 35%

Gallery - 30%, Info - 65%

 
Self Hosted Video in Grid Gallery layouts

Starting verion 1.6.1 you can add video to product gallery. For grid gallery layouts only. This allows to add video directly in product gallery grid with autoplay.

To add self hosted video to gallery open to edit your product and expand "Video" section. See image below.

product gallery self hosted video options

Video for Gallery - You need to upload video in pub/media folder. Use one or all of the following formats: webm, mp4, ogg. Type video name in this field without file type, name only. E.g.: for "my-video.mp4" type "my-video". If you placed video lets say in folder named "video" then type "video/my-video." Module will look for pub/media/video/my-video.webm, pub/media/video/my-video.mp4, pub/media/video/my-video.ogg. If all formats will be found, they will be added as a fallback, one after another. For example iOS does not support webm but support mp4. We recommend to use mp4 format with H.264 codec, or atleast have it as a fallback. See Browser support table: https://en.wikipedia.org/wiki/HTML5_video

Position in Gallery - Video will not be added after images but will "replace" one of the images. Replaced image will be used as placeholder in case something is wrong with the video or browser doesn't support it. By default video will "replace" second image in gallery. So you should have at least 2 images added for product and for example if you set it to 3, then you need at least 3 images added for product.

Autoplay and Loop video - options allows to make video play enlessly as soon as it is loaded

Stop Video on Click - you can allow your customer to stop video to check some details. usefull for looped video without controls.

Show Video Controls - show default browser control for video: play/pause buttons, progress bar, etc.

 

Show on Hover in product Listing - you can also show this video instead of hover image for product listing (category pages, search results, olegnax product widgets). In order to make it work you need to have image set as hover image. Same as for "Position in Gallery" option, image will be used as a fallback in case video can't be played.

 
Tabs & Review Style & Position

Product Tabs Position You can change position of product tabs and move them to the right of the product image or in bottom block below the content.

Change Tabs to Accordion- selfexplamatory option, you can see example of accordion instead of tabs on image below, in minimal style.

Product Tabs Style - affect both tabs and accordion.

Reviews Block Position - you can move reviews block below related/upsell products, in bottom block after content or leave them in Magento default location inside of the tabs.

 
Controls for items in Product info block

This set of options allows you to enable, disabled and change position of various items in product info.

Enable Max Height for Description - this option will limit height of short descriontion on product page and will add show more/less link so you can expand/collapse it.

Show Category will show current product category above the title.

 

Enable Prev/Next Product Links - option add links to next and prev product in the sides of the screen with product name and image preview on hover. See image below.

 
Product Info Static block

Show additional content after Product Info Block - You can easily add additional content as the last item in product info section to all products. You can either choose cms block or set content in html editor directly in settings. In first versions of the theme cms block with athlete2-after-product-info-block identifier was used, theme still have a fall back to it if you don't choose any cms blocks.

 

You can set amount of products per row you can set amount of products per row for different screen resolutions for Related, Upsell and Cross-sell carousels. Also adjust position and alignment of slider arrows, dots and header.

Related/Upsell Disable Sliders Overflow - enable this option to show carousel items outside of the slider width. So with carousel columsn set to 3 you will see part of the 4th product. See example here: https://athlete2.com/ca/suede-classic-sneakers.html

Related Position, Upsell Position - allows you tto move related and upsell outside of the content in bottom block for which you can adjust width in settings described above.

 

Show Brand on Product page

You can show brand image above the Product Title on product page. In order to make it work you need to setup brands for Olegnax Brands extension first.

Use Alternative Brand Image - Allows you to add another brand image specifically for product page. You can use it either to show smaller/larger image than original or just to show another brand logo. Lets say you can have small, shape only logo for grid and full logo with text on product page. Original image used from brands slider original folder "wysiwyg/brands". Alternative image should be placed in "wysiwyg/brands/small" folder.

 

Custom Tabs

You can add any amount of custom tabs to product page. You can add tabs content from Static block or Attribute. Title field is the text on the tab action, second field is the id of attribute or static block which will be used as tab content. Other fields allows you to define where exactly to show your tabs. For example you can choose to show tab on specific product pge only. Leave empty to show on all products.

Note that custom tabs are set in default confing, not per store view. If you need to set different tabs per store view then you can do it in static block settings (Content > Blocks). Simply open your static block and choose specific store view. Now you can create another static block with the same identifier and set it for another store view.

You can also easily disable theme custom tabs functionality in case you want to use some extention.

 

Product Listing

Catetgory Page Settigns

Catalog (Category Pages) Layout, Search Results Page Layout - In Athlete2 Theme you can easily set layout for all category and search pages from admin panel, without editing xml files.

Full Width Category Pages - allows you to can make category pages with any layout full width.

Move Category Tile, Breacrumbs, Desc and Image in Content - you can move category title, description, breadcrumbs and image from default(above content) position to content (inside of the content wrapper). See exampleas below

Category Description - Default Position

Category Description - Default Position

 
Category Sidebar Settings

Sticky Sidebars and Content - We’ve made an exclusive script for sticky sidebar in our theme which automatically recognize what block should be sticky (sidebar or content) and how to position it depending on screen and its height.

If the height of block in smaller then the screen then it will be sticky to top as right sidebar on the example above. Otherwise it will be scrolled down and stick to its bottom position as content on example above.

Example of sticky sidebar

Filters Toggle Default State - Closed - Show filters in sidebar as opened or closed(collapsed) by default.

Filters Slideout Toggle Counter - You can enable/disable indication number on filters toggle to show how many filters selected even when they are closed. It will be shown on mobile and one column category layout with filters, see example: https://athlete2.com/index.php/br/men/tops-men.html

 
Grid Elements Control

Product listing Layout - You can choose layout for actions on products grid (grid examples on image below) and also enable disable each grid element separately using the options below. Check grid examples on preview.

Grid Items per row set of options allow you to set amount of products per row for different screen resolutions from desktop to mobile. First options for screens above 1160px. Tablet is below 1024px and Mobile below 640px.

Show category option will show the last category in hierarchy to which product is assigned just above the product name.

Show Quickview Button - You can show/hide quickview button here but you need to enable Olegnax Quickview extension in order to make quickview functionality work.

Show description on grid - enable this option to show product short description on grid. This is the same short description that shown on product page.

 
Second Image on Hover

You can enable disable hover image for grid but you need to assign it in your product first.

When you create/edit a product you will notice a new image role called Hover Image. Simply assign this role to an image that you want to be show on hover.

Open Images and Videos section of your product. Click on existing image or upload a new one.

Then select new role "Hover Image" for this image

 
Video on Hover

You can show video instead of image on hover on product listing as shown on example below. See "Self Hosted Video in Grid Gallery layouts" to learn how to set it up.

 
Show Brands

You can show brand image above the Product Title on product listing(categories). In order to make it work you need to setup brands for Olegnax Brands extension first.

Use Alternative Brand Image - Allows you to add another brand image specifically for product listing. You can use it either to show smaller/larger image than original or just to show another brand logo. Lets say you can have small, shape only logo for grid and full logo with text on product page. Original image used from brands slider original folder "wysiwyg/brands". Alternative image should be placed in "wysiwyg/brands/small" folder.

Make sure that "Used in Product Listing" is enabled for your brand attribute (in Store / Attributes : Product). Attribute which will be used for brands is defined in Olegnax Brands extension settings.

 
Ajax Cart Controls

You can disable ajax add to cart theme feature in case you have 3rd party extension with the same feature. Also you can stop showing minicart after product was added to cart.

 

You can enable promo line just below header and above footer. Choose where to show them with mutli-select and add your content in text area or choose static block. Use class at-hightlight to make text with hightlighted background color.

You can set 2 columns for banner areas and additional content area will appear where you can add content for second column. See example below.

Banner area with 2 columns above footer

 

You can add any content to the banner area, e.g. carousel slider. See example on this demo, just below header: https://athlete2.com/ca/

Carousel widget in banner area below header

 

You can add any content just above the footer. On our preview we added Brands Slider widget there. Simply choose desired static block or add content in textarea. By default content area is full width. Wrap your content in div with container class to make with the same width as other content.

<div class="container"> ... </div>

Example of additional content above footer - brands slider widget (Check it here):

Example of additional content above footer - 4 columns blocks with icons (Check it here):

 

Footer Layout option allows basically to change position of Newsletter block.

With Choose Footer Content Source options set you can either choose static block or add your footer content directly in settings content area.

Use the power of Bootstrap 4 to build your footer grid.

In early versions of theme it was only possible to add footer content using static block with athlete2-footer-content identifier. It will still work if you upgrade and don't set static block.

 
Newsletter block

You can adjust some basic styles of newsletter block here like big or small style and underlined input. More can be adjusted in Theme Appearance / Footer Newsletter Block.

You can aslo add content just below newsletter block. Simply choose static block or add your content directly in settings content area.

In early versions of theme it was only possible to add content below newsletter using static block with athlete2-footer-content-after-newsletter identifier. It will still work if you upgrade and don't set static block.

You can see where this and other footer blocks are located on footer diagram below.

 

Simply choose static block or add your content directly in settings content area. It will appear just below the footer but above the copyright. See athlete2-footer-content-after on image above.

In early versions of theme it was only possible to add additional footer content using static block with athlete2-footer-content-after identifier. It will still work if you upgrade and don't set static block.

 
How to add Facebook Like Button

To add facebook like button, go to Facebook Developer website adjust button settings and click Get Code in popup choose iFrame and copy the code. Then simply paste it to the static block.

 
Store Switcher

Don't confuse it with store view (language) switcher.

You can choose from two predefined positions for store switcher in footer or disable default position and add it anywhere in footer static block using magento default widget:

{{block class="Magento\Store\Block\Switcher" name="store_language" template="Magento_Store::switch/languages.phtml"}}

You can also adjust footer switcher colors and font size in Theme Appearance

 

We have replaced Magento default copyright area with our custom to allow HTML. Copyright line comes with 2 layouts to choose from. First one is 1 or 2 columns layout with main content on the left and additional on the right. Second layout is one column centered with bigger paddings.

To add additional copyright content, you can choose static block or add your content directly in settings content area.

In early versions of theme it was only possible to add additional copyright additional content using static block with athlete2-copyright-additional identifier. It will still work if you upgrade and don't set static block.

 

Contacts Page

You can choose between normal or one half split layout for contacts page. Make it full width and add content to 3 available areas. You can choose to show google map, image, or custom content in map block.

Since google maps become a partially paid service you may need to obtain your Goole Maps API key. However simple map is still free to use.

To find the coordinates of a place on Google Maps, follow the steps below.