Instructions

Before getting started, ensure your account is set up correctly. Here are a few key points to understand before proceeding:

Lionheart2 Template Required – This guide is specifically for the Lionheart2 template.
Other Themes Compatibility – If you’re using a different theme, adjustments to the HTML/CSS will be necessary. If you’d like our team to apply this footer for you, please contact an account manager for an estimated invoice.
Copy & Paste HTML – Applying this footer requires a basic understanding of where to paste the code and what to replace. Detailed instructions are provided below. If you need assistance, feel free to reach out.
Backup Your Markup – Before making any changes, copy the existing code into a plain text editor (such as Notepad) and save it. This is the only way to revert custom HTML/CSS changes. Default settings will not restore your customizations.
Making Edits: The contact information displayed on the top portion of the footer is pulled from your account settings. The footer description is included in the html. To edit this, find (Ctrl+F) in the markup and replace. The links are populated with the record set Default Footer Navigation. The newsletter signup is an example but this would require a third party integration. Please reach out to an account manager if you need help with this.

Step 1: Account Setup

ALWAYS remember to make a backup of any code before you edit. Copy the existing code into a blank plain-text editor and hit save!

Home Page Layout HTML

Copy the Footies Footer to your clipboard:


 <!-- Page footer -->
    <footer class="footer-section">
        <div class="footie-container">

            <div class="footer-cta">
                <div class="footie-top-row">

                    <div class="footer--infoBox box1">
                        <div class="single-cta">
                            <i class="fa fa-map-marker"></i>
                            <div class="cta-text">
                                <h4>Find us</h4>
                                <span>{{layout.companyAddress1}},<br /> {{layout.companyCity}}, {{layout.companyState}} {{layout.companyPostalCode}}</span>
                            </div>     
                        </div>
                    </div>

                    <div class="footer--infoBox box2">
                        <div class="single-cta">
                         <i class="fa fa-phone"></i>
                            <div class="cta-text">
                                <h4>Call us</h4>
                                <span>{{layout.companyPhone}}</span>
                            </div>        
                        </div>
                    </div>

                    <div class="footer--infoBox box3">
                        <div class="single-cta">
                            <i class="fa fa-envelope-open"></i>
                            <div class="cta-text">
                                <h4>Mail us</h4>
                                <span>{{layout.contactEmail}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- End Footie CTA -->

            <div class="footer-content">
                <div class="footie-row">
                    <div class="footer--column col1">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="/"><img src="{{layout.imgixBaseURL}}/images/assets/footies-white.png" alt="{{layout.siteName}}" /></a>
                            </div>
                            <div class="footer-text">
                                <p>Footies is a demo store on the Liftoff Ecommerce Platform. Just for funsies.</p>
                            </div>
                        </div>
                    </div>
                    <div class="footer--column col2">
                        <div class="footer-widget">
                            <div class="footer-widget-heading">
                                <h3>Useful Links</h3>
                            </div>
                            <ul>
                            {{#each records.defaultFooterNavigation_order_asc_all}}
                                <li><a href="{{url}}" {{#if openInNewTab}} target="_blank" rel="noopener nofollow" {{/if}}>{{title}}</a></li>
                            {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- End Footie Content -->
        </div><!-- End Top Footer Content -->

        <div class="copyright-area">
            <div class="footie-container">
                <div class="footie-bottom-row">
                    <div class="text-left">
                        <div class="copyright-text"><p>© {{layout.siteName}}  {{layout.year}}</p></div>
                    </div>
                    <div class="text-right">
                        <div class="footer-menu">
                            <ul>
                                <li><a href="/">Home</a></li>
                                <li><a href="/terms-and-conditions">Terms of Use</a></li>
                                <li><a href="/privacy-policy">Privacy Policy</a></li>
                                <li><a href="/contact">Contact</a></li>
                                <ul class="cc-list">
                                {{#if layout.acceptsVisa}}
                                    <li><img title="Visa" src="{{@root.layout.imgixBaseURL}}/images/Visa.png" alt="Visa accepted here."></li>
                                {{/if}}
                                </ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End Legal -->
    </footer><!-- End Footer -->

Paste it into the Footer section on your Home Template.

Website > Design > Home Page Layout
Scroll down and look for the line that says 
Scroll down and look for the line that says </footer>
Select everything IN BETWEEN and paste to replace.

Step 3: Copy and Paste the Default Template

Repeat the steps above on the Default Layout.
Website > Design > Default Layout

Step 4: Copy and Paste the CSS Override

Copy the CSS.

Paste it into the CSS override of your account. You may paste it after any styles that already exist.
Adjust the Color Variables in the CSS to match your brand colors.

Instructions

Step 1: Account Setup

Home Page Layout HTML

Step 3: Copy and Paste the Default Template

Step 4: Copy and Paste the CSS Override