{"id":1648,"date":"2021-12-28T20:00:33","date_gmt":"2021-12-28T20:00:33","guid":{"rendered":"https:\/\/support.webdinge.nl\/knowledge-base\/01-header\/"},"modified":"2022-02-03T09:23:32","modified_gmt":"2022-02-03T09:23:32","slug":"01-header","status":"publish","type":"ht_kb","link":"https:\/\/support.webdinge.nl\/en\/knowledge-base\/01-header\/","title":{"rendered":"01. Header"},"content":{"rendered":"\n

WebP<\/h2>\n\n

When you enable this feature, you convert all your images into WebP images. Read more about why this is important and how you can enable it here. <\/a><\/p>\n\n

We have a special discount promotion especially for users of our themes so that you can also use WebP.

\u2013 Up to 10,000 articles:<\/strong> from \u20ac29.95 for \u20ac19.95 per month<\/strong>
\u2013 Each additional batch of 5000 items:<\/strong> from \u20ac10 for \u20ac7.50 per month<\/strong>

The above numbers therefore concern “products” and not individual images. Simple calculation example: if you have 15000 products, you do not pay \u20ac39.95 per month but \u20ac27.45 per month. It doesn’t matter if your products have 1 or 10 images.

Use this form to request the position for your theme<\/a><\/p>\n\n

Logo<\/h2>\n\n

Upload your logo in this area. <\/p>\n\n

We recommend using an SVG logo as it is much sharper and more beautiful than any other file format. <\/p>\n\n

On this page you will find the dimensions<\/a><\/p>\n\n

SVG logo: <\/p>\n\n

Upload your logo under Tools > Files<\/strong><\/em> copy the link and paste it into Logo SVG.<\/p>\n\n

\"\"<\/figure>\n

You can include the same link in Mobile Logo SVG as well, but you can create a separate logo for your mobile webshop. <\/p>\n\n

\u2013 Logo dimensions<\/strong> : Choose here which logo style you want. Square or rectangular. The dimensions are there, but you can also<\/a> look here.Logo background<\/p>\n\n

– Logo background:<\/strong> Choose here whether you want to add a background color to your logo. If so, choose the color for the next setting.<\/p>\n\n

\"\"<\/figure>\n

\u2013 Logo background color:<\/strong> Choose the background color of your logo here. If your logo already has a color, turn off the Logo Background option. <\/p>\n\n

\u2013 Logo padding:<\/strong> Set here how much space you want around your logo. By that we mean the purple part in the picture below<\/p>\n\n

\"\"<\/figure>\n

\u2013 Favicon:<\/strong> This is the small logo in your browser, use a square image.<\/p>\n\n

\n\n

USP carousel<\/h2>\n\n

Set your Unique Selling Points (USPs) here. These are the points that distinguish your shop from other shops.<\/p>\n\n

\"\"<\/figure>\n

These are displayed in several places in your shop. Such as in the top bar, footer, product pages and the checkout. So make sure you use distinctive and short texts. For example, free shipping<\/strong> works less well than always free shipping<\/strong>.<\/p>\n\n

To make certain text in your USP bold<\/strong> , do the following:
Place the text you want to make bold between< b><\/b> tag.
So
<b> Always free<\/strong>< \/b> shipment. <\/p>\n\n

\n\n

Notification bar<\/h2>\n\n

With this bar you can show important messages directly to your customers. For example important shipping updates or special promotions with a discount code.<\/p>\n\n

\"\"<\/figure>\n
  • Activate notification bar<\/strong> : Enable or disable the notification bar.<\/li>
  • Notification bar visibility<\/strong> : Here you set whether the notification bar should always be visible throughout the entire webshop, or whether the notification bar can be closed.<\/li>
  • Notification bar code:<\/strong> Here you can enter a discount code.<\/li><\/ul>\n

    Header<\/h2>\n\n

    Set the background color and the text color for the header here. This is the area where your logo will appear. <\/p>\n\n

    \"\"<\/figure>\n
    • Header button hover color:<\/strong> This is the color for the buttons when you hover over them with your mouse. This is also the color for the “all categories” button.<\/li><\/ul>\n

      Navigation<\/h2>\n\n

      This section concerns your navigation, so it is very important. Since you have several options how you want to set the navigation, we have divided the settings into [general]<\/strong>, [vertical]<\/strong> and [horizontal]<\/strong>. General are the general settings. The rest corresponds to the navigation option you have chosen.<\/p>\n\n

      • [General]Navigation setup:<\/strong> Choose here where you want to show the navigation.<\/li><\/ul>\n
        \"\"
        Next to hero image<\/figcaption><\/figure>\n
        \"\"
        under the logo<\/figcaption><\/figure>\n
        • [General]Menu style:<\/strong> Choose here what kind of menu you want. A mega menu or a simple drop-down menu.<\/li><\/ul>\n
          \"\"
          Drop-down menu<\/figcaption><\/figure>\n
          \"\"
          Mega menu<\/figcaption><\/figure>\n
          • Mega menu last column content:<\/strong> Here you set what you want to show at the bottom of your mega menu.<\/li><\/ul>\n
            \"\"
            The brands in this category<\/figcaption><\/figure>\n
            \"\"
            The first 2 products in the category<\/figcaption><\/figure>\n

            1) When you choose “products”, the theme takes the first 2 products from the category. Furthermore, you get as title what the category is sorted by. In the above case, therefore, “Most viewed”.

            2) The “products” option only works when the category is a “product overview” category. So not when it’s a “catalog” or “text page”. As soon as the theme detects that no products are present, the bar will be hidden. <\/p>\n\n

            Mobile navigation<\/h2>\n\n

            Choose here on which side of the header you want to show the navigation button. The right side is more convenient to navigate for right-handed people. The left side is the default location for the button. <\/p>\n\n

            \"\"
            Left hand side<\/figcaption><\/figure>\n
            \"\"
            right<\/figcaption><\/figure>\n

            Create custom navigation in horizontal bar<\/h2>\n\n

            It is possible to add your own links in the horizontal navigation bar outside the standard links. That works the same as adding extra links in the footer.<\/p>\n\n

            \"\"
            “Theme presets” is a dropdown and “Theme documentation” a default link<\/figcaption><\/figure>\n

            There are 2 types of custom links. One is with a dropdown menu the other is just a normal link. <\/p>\n\n

            Normal text link<\/h4>\n\n

            To add a normal link just go to Design<\/strong><\/em>> Navigation<\/strong><\/em> . Then click on the Default<\/strong> menu. When you add links to this menu, they will be visible in the navigation. <\/p>\n\n

            \"\"<\/figure>\n