The Customizer

Permalink General settings

Preloader

Tick the Activate Preloader checkbox if you wish a loading animation to be displayed while the page loads..

Fonts

Hereby all fonts from the Google Fonts library can be embedded and used. At the moment there are about 950 different fonts available.

The font is installed and loaded locally on / from your own server. Therefore, the use is DSGVO compliant and requires no additional notice in the privacy policy.

You can download fonts, delete them, set them for headings and body text, or undo all changes and reset the fonts to default.

Social media

Tick the Activate Icons in Menu checkbox if you wish social media icons to be displayed in the header. Once you have done so, enter the respective URLs.

You can adjust the icon style. There are two options available.

Change the color of icons by clicking Select Color and selecting the color of your choice.

Activate or deactivate Share buttons on product pages and in posts by ticking or unticking the checkboxes for the respective platforms.

Permalink Header options

Logo

Logo
Specify which logo is shown in the header by selecting an image from the media library.

The Image Container Width parameter defines the size at which the logo is displayed. The Internal Logo Offset parameter enables you to adjust the spacing between the logo and the header around it.

Favicon
The favicon you select for your website will be displayed in the user’s browser tab.

Top Bar

You can activate a top bar here, which is displayed above the logo and the navigation. You have the possibility to set the background and text color and to create up to three columns. You can assign content to each of these columns: either a menu assigned to the menu position “Top Bar”, the social media icons or your own HTML. You can also set the alignment of each column.

Main Header

Layout
Here you can limit the header width to the width of the content, if you select “Content width”.
That means that the logo, the navigation, the social media icons etc. are aligned to the left and right of the content.
By default, the header is displayed in full width.

Set the height of the header here too. Please note that the header must be at least the same height as the logo.

You can also set a background color for the header and activate a shadow.

Navigation
Set a font color for the active menu item as well as inactive menu items and header components.

You can select separate settings for the mobile menu.

Sticky Header

Tick the Sticky When Scrolling checkbox if the header should always remain visible as the user scrolls down the page.

Where required you can set a different logo to the one used in the standard header. If you do not select a different logo the standard header will be used.

You can also set the height of the header, the width of the logo and the internal spacing between the logo and the header.

The settings you select here only apply to the sticky header and do not affect the standard header.

Dropdown style

Here you select the sub-menu type. You can choose between a classic Dropdown Menu (Simple Menu) or our Mega Menu.

If you have created a menu with subitems you can set the background color of the submenu and the font color of submenu items here.

You can also choose whether to use the images for the mega menu from the product categories or from the menu settings.

Search

Tick the Activate Search checkbox if you wish the header to include a search icon.

With “search method” you set whether the WooCommerce search or the WordPress search should be used.
If you have the “Ajax Search for WooCommerce” plugin installed, you can also select this as the search method here.

You can also choose whether the search function should be displayed as a dropdown or as a fullscreen lightbox.

If you select the dropdown style you can also set the width of the search field here.

Fields Text 1 and Text 2 appear under the search field if you select the lightbox style.

Where required you can also enter a placeholder text for the search function. The placeholder will be shown in the case of both styles.

Account

If you want to display an account icon in the header, you can activate it here. There are four different icons to choose from.

In addition, you can set whether the login dialog should open in a lightbox, and whether the user will be redirected to the My Account Page after successful login.

You also have the option to show the user a tick next to the user icon, whether he is logged in or not.

In addition, a drop-down menu can be displayed, including customer approach and logout link.

Any links can be added to the menu. Simply create a new menu and assign it the menu position “My Account”.

You can find further options for customer approach under Design -> Customizer -> WooCommerce -> My Account. There you can choose whether the user name, the first name or the first and last name should be displayed.

Permalink Blog

Select whether you wish the sidebar in blog archives to be displayed on the right or left-hand side of the page.

In order to have a read-more link displayed in the blog on overview and category pages, activate the option “Activate read more link” here.

By default, the link is then output with the link text “read more”. If you would like another link text instead, please enter it in “Alternative Read More Link Text”.

You can also set whether the main image in each post should be as wide as the post (standard) or as wide as the browser window (full width). The standard setting is to make the image the same width as the post.

Tick the Activate Reading Position checkbox if you wish a bar indicating the reader’s progress down the page to be included at the top of posts.

You can also activate and deactivate captions for image galleries.

Footer Top & Main Footer

If you have added content to the widget sections Footer Top and/or Footer Main you can set the color of text and the widget background here.

Footer Bottom

Tick the Activate Footer Bottom checkbox if you wish the Footer Bottom widget section to be shown beneath the aforementioned widget sections.

Where required you can also select a dedicated logo for the footer and enter user-defined text such as copyright information.

As in the case of the other two widget sections, you can also set the color of the font and background used in the Footer Bottom.

Social icons

If you have added one or more social media widgets to a widget section in a footer (and saved the corresponding links under Customizer → General Settings → Social Media) you can set the color and background color of those widgets here.

Permalink Colors

You can set a background color for your website here.
The color of buttons, links and other highlights can be set under Main Color. You can also adjust the color of headings and standard text as well as the color of “good news” notifications (e.g. “Item XYZ has been added to your cart”) and warnings (e.g. “ABC is an essential field”).

Permalink WooCommerce

Product images

If your product images are not displayed in focus you can change the width of the main image and preview images here.

Product catalog

Activate Hero image on Categories / Shop page
In addition to the normal WooCommerce settings, you can activate the display of Hero images on product category pages and the shop page here. These are then displayed below the navigation, above the normal page content.

Categories / Shop page Hero image size
You also have the option to display these hero images either as wide as the content (normal) or across the full width (full width).

Shop-Page Hero image
The Hero image for the shop page you specify directly here in Customizer. You can define the hero images for the product category pages in the backend under Products -> Categories -> Your category under “Hero Image”.

Shop-Page description
You also have the option to display a description text on the shop page. You enter this here in the customizer.
The category descriptions can be found as usual in your backend under Products -> Categories -> Your category under “Description”.

Category/Shop description position and color
New for you now is the possibility to set in Customizer whether the description texts above or below the products to be displayed and the selection of the text color of the description.

At products per column mobile (<767px) you can specify how many columns should be displayed on mobile devices.

In addition, Sidebar Position gives you the option of displaying the sidebar on product archives either left or right.

If you want to change the text for the sale label, you can do so by entering your desired text at Text for Sale-Bubble.

If you prefer to display the savings percentage instead, check the option Discount in % instead of “Sale!”.

If you want to hide the add to cart button that appears when you hover over a product image, then remove the check mark in the option Activate add to cart button for products.

Atomion automatically adds an animation to the product images on product archives which you can see when you mouse over a product image.
If you want to reverse or deactivate this animation you can do this by ticking the respective option.

Quick View
By activating this option, a quick view button will be displayed under each product image on product listings (overview pages, product blocks, cross sells, up sells, related products).

Clicking on the button opens an overlay which contains product informations and enables a quick switch between the products.

The variant of the previous / next product navigation, the button style, the hover effect and the colors can be adjusted.

Product page

Here you can set the style in which the product tabs (description, additional information, reviews) should be displayed on the product page.
You can choose between:

  • Sections – the tabs are displayed below each other, all tabs are always visible
  • Tabs – the tabs are displayed side by side, orientation left, only the selected tab is visible
  • Tabs centered – the tabs are displayed side by side, orientation in the middle, only the selected tab is visible
  • Accordion – the tabs are displayed one below the other, only the tabs that are open are visible

In addition, you can specify the color for the Add to cart button and the rating stars on the individual product pages in the “Colors” section.

The color for the sale label in the Sales Bubble option applies to both product archives and individual product pages.

With the option “Style” you can adjust the appearance of the up sells, and the related products.
You can either display them as a slider or a grid. If you choose the “Grid” option, you can also specify how many columns should appear. (1-5).
You will find similar options for cross sells in the customizer under WooCommerce -> Cart.

My Account

This section gives you the option to hide the Downloads, Addresses and Account Details tabs as well as the logo on the My Account page.

By “Customer approach” you can select whether the user name, the first name or the first and last name should be displayed in the Account menu.

Further settings for the account area in the header can be found under Design -> Customizer -> Header -> Account.

Cart

Mini Cart
Select the Dropdown option under Style if you wish the content of the cart to be displayed when a customer hovers their mouse over it. Select the Link style if you would prefer your customers to be forwarded directly to the cart when they click on the icon.

You can set the color and background color of the cart icon independent of your color settings for the header. It is also possible to set different colors for the cart depending on whether it is empty or items have been added to it. You can also set different colors that will only be applied when the website is viewed on a mobile device.

If you select the Dropdown style you can also set background, text, icon and separator colors for the mini cart that appears when the mouse hovers over the cart icon.

Tick the Display Tax Information in Mini Cart checkbox if you wish the mini cart to include tax information.

Cart Page
By activating the checkout progress indicator, it will be displayed during the checkout process.
There are three variants to choose from.
Which terms are used, can be easily determined with the respective page title.

With the option Style in the section Cross Sells you can adjust the appearance of the cross sells on the cart page.
You can either display them as a slider or a grid. If you choose the “Grid” option, you can also specify how many columns should appear. (1-5).
You will find similar options for up sells and related products in the customizer under WooCommerce -> Product page.

Wishlist

Tick the Activate Wishlist checkbox if you wish to offer a wishlist to registered, logged-in users. If the wishlist is active a heart icon is displayed in the header and on every product page.

You can also set the color of the icon when displayed on product pages.

If a user clicks the heart icon on a product page the corresponding product is added to their wishlist.

Permalink Additional JS

Here you can insert your own Javascript, which is then output either in the header or footer of your page.
Please note, <script> are not necessary.