Store Topbar – announce, cart, icons [ 2 ]

Header – Topbar – icons, cart, announce cta

Use cases

• Use this top bar with store header [ 1 ] or a site headers [ 1,3 or 5 ] to add optional header elements upon request e.g. phone icon, email icon, social icons, etc.
• Use this top bar on stores that use wishlists and want wishlist and cart icons in the header with the number of items in these beside the icons
• Don’t use this top bar on a header that already includes icons or cart 

Component breakdown

1. Announcement CTA – template uses a standard icon module and it can be changed to any kind of icon, any CTA text, can be inked anywhere, and is styled right within the module.
2. Store Icons – template uses a custom HTML module with the wishlist and cart shortcode in it along with a bunch of common icons like the user icon which can be linked to pages like account/login etc.

Custom code

This top bar layout uses custom HTML and CSS. If you click the HTML module, you’ll find the following code: 

Note: This section contains HTML. Importing the template can cause the custom code to break – after importing the template, you will want to replace the HTML in the module with the fresh HTML below.

<div class="headone">

    [wpmenucart]

</div>

<div class="headtwo">
    
    [ti_wishlist_products_counter]
    
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-user"></i>
    </a>

</div>

<!--     
    
    <a class="socicon" href="mailto:email@site.com">
        <i class="fas fa-envelope"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-facebook-f"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-twitter"></i>
    </a>

    <a class="socicon" href="tel:1234567890">
        <i class="fas fa-phone-alt"></i> (123) 456-7890
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-map-marker-alt"></i>
    </a>
        
    <a class="socicon" href="sms:0000000000">
        <i class="fas fa-mobile-alt"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-user"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fas fa-heart"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-linkedin-in"></i>
    </a>
        
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-instagram"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-pinterest-p"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-youtube"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-snapchat-ghost"></i>
    </a>
    
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-twitch"></i>
    </a>
        
    <a class="socicon" href="#" target="_blank">
        <i class="fab fa-tiktok"></i>
    </a>
      
    <a class="socicon" href="#" target="_blank">
        //replace this string with any icon from
        fontawesome.com/icons
    </a> 
-->

1. You can remove the wishlists shortcode if the customer is not using this feature on their site and you can use any of the preloaded icons in the commented out section to display icons as needed.
2. All items loaded in the div with the class “headone” will appear before the gray divider line with the cart, and all items loaded in the div with the class “headtwo” will appear after the gray divider line.
3. While in the builder, click the tools dropdown at the top left of the screen > then click Layout CSS / JavaScript – the CSS for the CSS styling applied to the custom HTML

.head-custom-icons .fl-html {
    display: flex;
    align-items: center;
    font-size: 15px;
    /*------uncomment for right align------*/
    /*justify-content: flex-start; */
    /*------uncomment for left align------*/
    justify-content: flex-end; 
    /*------uncomment for center align------*/
    /*justify-content: center; */
}
.head-custom-icons .fl-html a {
    /*change colors as needed ---
    --- remove color style to keep site's default link color*/
    color: #111111;
}
.head-custom-icons .fl-html a:hover {
    /*change colors as needed ---
    --- remove color style to keep site's default link hover color*/
    color: #444444;
}

/*------uncomment for cart on the left------*/
/* .headtwo {
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid #d6d6d6;
} */
/*------uncomment for cart on the right------*/
.headtwo {
    padding-left: 8px;
    margin-left: 8px;
    border-left: 1px solid #d6d6d6;
} 
.headone a, .headtwo a {
    margin: auto;
    padding: 0 4px;
}
/*-------CSS for styling the wishlists shortcode heart icon--------*/
a.wishlist_products_counter.top_wishlist-heart.top_wishlist-.no-txt.wishlist-counter-with-products:before {
    vertical-align: text-bottom;
    margin: 0;
}