Banner with 4 columns [Debut Them] Code included

Solved
Highlighted
Tourist
4 1 0

Hi Guys,

I am trying to make a banner similar to the following sites: https://www.igloodeals.com/ https://idiggreenacres.com/

 

I new at this but I think I have a copy of the code. I just would like to know where do I add this for it to work?

 

I would appreciate any help.

 

<style>
  @media screen and (min-width: 1024px)
.highlight-banners-count-4 .highlights-banners-block {
    width: 25%;
}
</style>
 <div id="shopify-section-static-highlights-banners" class="shopify-section highlights-banners--section"><script type="application/json" data-section-type="static-highlights-banners" data-section-id="static-highlights-banners">
</script>

  <style>
    .highlights-banners-container {
      background-color: #f8f8f8;
    }

    .highlights-banners:before {
      background: linear-gradient( to right, #f8f8f8 10%, rgba(248, 248, 248, 0) 100%);
    }

    .highlights-banners:after {
      background: linear-gradient( to left, #f8f8f8 10%, rgba(248, 248, 248, 0) 100%);
    }

    .highlights-banners-block {
      color: #4d4d4d;
    }

    .highlights-banners-icon {
      color: #4d4d4d;
    }
  </style>
  <div class="highlights-banners-container">
    <div class="highlights-banners highlight-banners-count-4">
        <a class="highlights-banners-block" href="/pages/shipping-delivery">
              <div class="highlights-banners-icon">
                   <svg width="60" height="40" viewBox="0 0 60 40">      <path fill="currentColor" fill-rule="evenodd" transform="translate(-263.000000, -117.000000)" d="M289,151.5 C289,154.537566 286.537566,157 283.5,157 C280.462434,157 278,154.537566 278,151.5 C278,151.331455 278.007581,151.164681 278.022422,151 L271,151 L271,140 L273,140 L273,149 L278.59971,149 C279.510065,147.219162 281.362657,146 283.5,146 C285.637343,146 287.489935,147.219162 288.40029,148.999999 L301,149 L301,119 L271,119 L271,117 L303,117 L303,126 L316.723739,126 C317.85789,126 318.895087,126.639588 319.404327,127.652985 L320.786845,130.404226 C322.242105,133.300224 323,136.496398 323,139.737476 L323,148 C323,149.656854 321.656854,151 320,151 L316.977578,151 C316.992419,151.164681 317,151.331455 317,151.5 C317,154.537566 314.537566,157 311.5,157 C308.462434,157 306,154.537566 306,151.5 C306,151.331455 306.007581,151.164681 306.022422,151 L288.977578,151 C288.992419,151.164681 289,151.331455 289,151.5 Z M319.417229,134.516568 L319.417798,134.118058 C319.418189,133.844298 319.362374,133.573373 319.253808,133.32206 L317.177681,128.516129 L310.567164,128.516129 C310.014879,128.516129 309.567164,128.963844 309.567164,129.516129 L309.567164,134.330091 C309.567164,134.882376 310.014879,135.330091 310.567164,135.330091 L318.602544,135.330091 C319.052028,135.330091 319.416588,134.966052 319.417229,134.516568 Z M311.5,155 C313.432997,155 315,153.432997 315,151.5 C315,149.567003 313.432997,148 311.5,148 C309.567003,148 308,149.567003 308,151.5 C308,153.432997 309.567003,155 311.5,155 Z M283.5,155 C285.432997,155 287,153.432997 287,151.5 C287,149.567003 285.432997,148 283.5,148 C281.567003,148 280,149.567003 280,151.5 C280,153.432997 281.567003,155 283.5,155 Z M264,123 L280,123 C280.552285,123 281,123.447715 281,124 C281,124.552285 280.552285,125 280,125 L264,125 C263.447715,125 263,124.552285 263,124 C263,123.447715 263.447715,123 264,123 Z M267,128 L280,128 C280.552285,128 281,128.447715 281,129 C281,129.552285 280.552285,130 280,130 L267,130 C266.447715,130 266,129.552285 266,129 C266,128.447715 266.447715,128 267,128 Z M271,133 L280,133 C280.552285,133 281,133.447715 281,134 C281,134.552285 280.552285,135 280,135 L271,135 C270.447715,135 270,134.552285 270,134 C270,133.447715 270.447715,133 271,133 Z"></path>    </svg>                                      

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Free US Shipping
                </h4>
              

              
                To the lower 48 states
              
            </div>
          
            </a>
          
        
      
        
          
            <a class="highlights-banners-block" href="/pages/financing">
          
            
              <div class="highlights-banners-icon">
                
                  
            <svg class="icon-credit-card " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="48" height="37" viewBox="0 0 48 37">      <path fill="currentColor" fill-rule="nonzero" d="M45.918 8.348l-.005-3.205c0-1.788-1.127-3.086-2.908-3.086H5.217c-1.781 0-3.13 1.298-3.13 3.086l-.005 3.205h43.836zm.011 6.26H2.071L2.043 31.35c0 1.788 1.282 3.086 3.063 3.086h37.788c1.781 0 3.063-1.298 3.063-3.086l-.028-16.74zM5.217 0h37.788C45.962 0 48 2.178 48 5.143v26.236c0 2.965-2.149 5.143-5.106 5.143H5.106C2.15 36.522 0 34.344 0 31.379V5.143C0 2.178 2.26 0 5.217 0z"></path>    </svg>                                        

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Yes, We Finance!
                </h4>
              

              
                Buy now. Pay later.
              
            </div>
          
            </a>
          
        
      
        
          
            <a class="highlights-banners-block" href="/pages/30-day-price-match-guarantee">
          
            
              <div class="highlights-banners-icon">
                
                  
                        <svg class="icon-label-tag " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="40" height="47" viewBox="0 0 40 47">      <path fill="currentColor" fill-rule="evenodd" d="M28.916 6.543V.75h2.028v5.793h3.62c1.321 0 2.537.529 3.54 1.48 1.006.95 1.48 2.22 1.48 3.54v9.777c0 1.11-.264 2.273-.792 3.54-.529 1.268-1.162 2.273-1.955 3.012l-16.805 16.91c-.952.952-2.168 1.427-3.54 1.427-1.322 0-2.538-.475-3.49-1.427L1.432 33.23C.479 32.28.004 31.063.004 29.69c-.054-1.321.421-2.537 1.321-3.542L18.235 9.29c.794-.793 1.797-1.427 3.066-1.955 1.268-.529 2.432-.793 3.54-.793h4.075zm0 2.008h-4.128c-.847 0-1.745.21-2.748.634-1.003.423-1.796.898-2.378 1.532L2.803 27.522c-.582.634-.846 1.321-.846 2.167-.052.793.266 1.532.846 2.114l11.521 11.572c.634.583 1.321.847 2.168.847.846 0 1.531-.318 2.114-.847L35.462 26.52c.582-.582 1.11-1.375 1.532-2.378.423-1.003.634-1.904.634-2.748l.002-9.83c0-.793-.318-1.532-.898-2.114-.582-.582-1.321-.898-2.114-.898h-3.674v4.67a3 3 0 0 1 1.242.772c.582.582.898 1.32.898 2.113 0 .847-.318 1.532-.898 2.114-.582.582-1.32.898-2.114.898-.846 0-1.531-.318-2.113-.898-.582-.582-.898-1.32-.898-2.114 0-.846.318-1.531.898-2.113.29-.317.608-.542.957-.687V8.551zM11.934 30.725a.986.986 0 0 1-.7-1.686l8.569-8.568a.986.986 0 0 1 1.397 0 .986.986 0 0 1 0 1.397l-8.568 8.568a.98.98 0 0 1-.698.29zm3.37 3.576a.986.986 0 0 1 0-1.397l3.845-3.844a.986.986 0 0 1 1.397 0 .986.986 0 0 1 0 1.397l-3.844 3.844a.986.986 0 0 1-1.397 0z"></path>    </svg>                            

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Price Match Guarantee
                </h4>
              

              
                Up to 30 days after purchase
              
            </div>
          
            </a>
          
        
      
        
          
            <div class="highlights-banners-block">
          
            
              <div class="highlights-banners-icon">
                
                  
      <svg class="icon-chat " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="45" height="44" viewBox="0 0 45 44">      <path fill="currentColor" fill-rule="nonzero" d="M36.474 42.863a1 1 0 0 1-1.648.882l-11.638-10.12H7a7 7 0 0 1-7-7V7a7 7 0 0 1 7-7h31a7 7 0 0 1 7 7v19.625a7 7 0 0 1-7 7h-2.711l1.185 9.238zm-3.458-11.238H38a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5H7a5 5 0 0 0-5 5v19.625a5 5 0 0 0 5 5h16.936l10.22 8.887-1.14-8.887zM9.889 22C9.4 22 9 21.55 9 21s.4-1 .889-1h6.222c.489 0 .889.45.889 1 .002.55-.398 1-.887 1H9.89zm.055-5C9.425 17 9 16.55 9 16s.425-1 .944-1h15.112c.519 0 .944.45.944 1 .002.55-.423 1-.942 1H9.944zm0-6C9.425 11 9 10.55 9 10s.425-1 .944-1h15.112c.519 0 .944.45.944 1 .002.55-.423 1-.942 1H9.944z"></path>    </svg>                                              

                
              </div>
            

            <div class="highlights-banners-text">
              
                <h4 class="highlights-banners-heading">
                  Chat with Us
                </h4>
              

              
                We're here to help!
              
            </div>
          
            </div>
          
        
      
    </div>
  </div>

</div>

<style>
  .highlights-banners-container{display: flex;justify-content: center;}
    .highlight-banners-count-4{display: flex;}
    .highlights-banners-block {display: flex;padding: 20px;}
    .highlights-banners-text {padding-left: 20px;}

    @media only screen and (max-width: 600px) {
      .highlight-banners-count-4{display:block !important}
    }
</style>

 

0 Likes
Highlighted

This is an accepted solution.

Add below code in your file after the include nav-menu in theme.liquid file and check once,

 

<div class="highlights-banners-container">
    <div class="highlights-banners highlight-banners-count-4">
        <div class="highlights-banners-block">
          <div class="highlights-banners-icon">
          <svg width="60" height="40" viewBox="0 0 60 40">      <path fill="currentColor" fill-rule="evenodd" transform="translate(-263.000000, -117.000000)" d="M289,151.5 C289,154.537566 286.537566,157 283.5,157 C280.462434,157 278,154.537566 278,151.5 C278,151.331455 278.007581,151.164681 278.022422,151 L271,151 L271,140 L273,140 L273,149 L278.59971,149 C279.510065,147.219162 281.362657,146 283.5,146 C285.637343,146 287.489935,147.219162 288.40029,148.999999 L301,149 L301,119 L271,119 L271,117 L303,117 L303,126 L316.723739,126 C317.85789,126 318.895087,126.639588 319.404327,127.652985 L320.786845,130.404226 C322.242105,133.300224 323,136.496398 323,139.737476 L323,148 C323,149.656854 321.656854,151 320,151 L316.977578,151 C316.992419,151.164681 317,151.331455 317,151.5 C317,154.537566 314.537566,157 311.5,157 C308.462434,157 306,154.537566 306,151.5 C306,151.331455 306.007581,151.164681 306.022422,151 L288.977578,151 C288.992419,151.164681 289,151.331455 289,151.5 Z M319.417229,134.516568 L319.417798,134.118058 C319.418189,133.844298 319.362374,133.573373 319.253808,133.32206 L317.177681,128.516129 L310.567164,128.516129 C310.014879,128.516129 309.567164,128.963844 309.567164,129.516129 L309.567164,134.330091 C309.567164,134.882376 310.014879,135.330091 310.567164,135.330091 L318.602544,135.330091 C319.052028,135.330091 319.416588,134.966052 319.417229,134.516568 Z M311.5,155 C313.432997,155 315,153.432997 315,151.5 C315,149.567003 313.432997,148 311.5,148 C309.567003,148 308,149.567003 308,151.5 C308,153.432997 309.567003,155 311.5,155 Z M283.5,155 C285.432997,155 287,153.432997 287,151.5 C287,149.567003 285.432997,148 283.5,148 C281.567003,148 280,149.567003 280,151.5 C280,153.432997 281.567003,155 283.5,155 Z M264,123 L280,123 C280.552285,123 281,123.447715 281,124 C281,124.552285 280.552285,125 280,125 L264,125 C263.447715,125 263,124.552285 263,124 C263,123.447715 263.447715,123 264,123 Z M267,128 L280,128 C280.552285,128 281,128.447715 281,129 C281,129.552285 280.552285,130 280,130 L267,130 C266.447715,130 266,129.552285 266,129 C266,128.447715 266.447715,128 267,128 Z M271,133 L280,133 C280.552285,133 281,133.447715 281,134 C281,134.552285 280.552285,135 280,135 L271,135 C270.447715,135 270,134.552285 270,134 C270,133.447715 270.447715,133 271,133 Z"></path>    </svg>                                          
          </div>
        <div class="highlights-banners-text">
            <h4 class="highlights-banners-heading">
              Free Worldwide Shipping
            </h4>
            Anywhere in the world, we've got you covered.
        </div>
        </div>
        <div class="highlights-banners-block">
          <div class="highlights-banners-icon">
            <svg class="icon-smile " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">      <path fill="currentColor" fill-rule="nonzero" d="M22.5 45C10.074 45 0 34.926 0 22.5S10.074 0 22.5 0 45 10.074 45 22.5 34.926 45 22.5 45zm0-2C33.822 43 43 33.822 43 22.5S33.822 2 22.5 2 2 11.178 2 22.5 11.178 43 22.5 43zm13.643-15.795c-.632 1.307-4.253 7.848-13.613 8.164-.187.007-.37.01-.55.012-9.146 0-12.967-7.845-13.127-8.183-.27-.574-.063-1.271.464-1.568.527-.296 1.172-.068 1.444.5.146.31 3.56 7.173 11.7 6.916 8.343-.282 11.451-6.242 11.78-6.92.276-.569.925-.788 1.448-.491.525.296.73 1.001.454 1.57zM16.947 16.299c0 1.656-.884 3-1.973 3-1.09 0-1.974-1.345-1.974-3s.885-2.999 1.974-2.999 1.973 1.344 1.973 3zm14.986 0c0 1.656-.883 3-1.972 3-1.088 0-1.973-1.345-1.973-3S28.87 13.3 29.96 13.3c1.092 0 1.972 1.344 1.972 3z"></path>    </svg>                  
          </div>
        <div class="highlights-banners-text">
            <h4 class="highlights-banners-heading">
              Satisfaction Guaranteed
            </h4>
            30 Day, Money-Back 100% Guaranteed.
        </div>
        </div>
        <div class="highlights-banners-block">
          <div class="highlights-banners-icon">
    		<svg class="icon-chat-alternate " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="48" height="43" viewBox="0 0 48 43">      <path fill="currentColor" fill-rule="nonzero" transform="translate(-356.000000, -121.000000)" d="M381,153.103862 L381,154.526017 C381,156.635218 379.258885,158.345064 377.111111,158.345064 L368.117955,158.345064 L361.652358,163.866117 C361.420822,164.063829 361.069917,164.03978 360.86859,163.812402 C360.764575,163.694928 360.716614,163.539414 360.736781,163.385006 L361.252518,159.43622 L361.39503,159.43622 L361.270648,159.297405 L361.39503,158.345064 L360.417329,158.345064 L360.292947,158.206249 L360.274817,158.345064 L359.888889,158.345064 C357.741115,158.345064 356,156.635218 356,154.526017 L356,143.819047 C356,141.709845 357.741115,140 359.888889,140 L361,140 L361,127.683332 C361,123.99223 363.994718,121 367.688889,121 L397.311111,121 C401.005282,121 404,123.99223 404,127.683332 L404,146.42053 C404,150.111632 401.005282,153.103862 397.311111,153.103862 L394.720549,153.103862 L395.852737,161.923761 C395.887423,162.193974 395.804931,162.466124 395.626026,162.671703 C395.279743,163.069614 394.676187,163.1117 394.277945,162.765706 L383.157118,153.103862 L381,153.103862 Z M392.548661,151.194338 L397.311111,151.194338 C399.949805,151.194338 402.088889,149.057032 402.088889,146.42053 L402.088889,127.683332 C402.088889,125.04683 399.949805,122.909523 397.311111,122.909523 L367.688889,122.909523 C365.050195,122.909523 362.911111,125.04683 362.911111,127.683332 L362.911111,146.42053 C362.911111,149.057032 365.050195,151.194338 367.688889,151.194338 L383.871803,151.194338 L393.637832,159.679125 L392.548661,151.194338 Z M370.888509,142 C370.400085,142 370,141.549712 370,141 C370,140.450288 370.400085,140 370.888509,140 L377.111486,140 C377.59991,140 377.999995,140.450288 377.999995,141 C378.001659,141.549712 377.601578,142 377.11315,142 L370.888509,142 Z M370.888414,137 C370.400043,137 370,136.549712 370,136 C370,135.450288 370.400043,135 370.888414,135 L385.11158,135 C385.599952,135 385.999995,135.450288 385.999995,136 C386.001659,136.549712 385.601621,137 385.113245,137 L370.888414,137 Z M370.888414,132 C370.400043,132 370,131.549712 370,131 C370,130.450288 370.400043,130 370.888414,130 L385.11158,130 C385.599952,130 385.999995,130.450288 385.999995,131 C386.001659,131.549712 385.601621,132 385.113245,132 L370.888414,132 Z"></path>    </svg>
          </div>
        <div class="highlights-banners-text">
            <h4 class="highlights-banners-heading">
              Chat With Us
            </h4>
            We are responsive to support messages 24/7.
        </div>
        </div>
        <div class="highlights-banners-block">
          <div class="highlights-banners-icon">
            <svg class="icon-lock-alternate " aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="28" height="37" viewBox="0 0 28 37">      <path fill="currentColor" fill-rule="evenodd" transform="translate(-206.000000, -121.000000)" d="M209.230769,138 L208.153846,138 C206.961262,138 206,138.964008 206,140.16 L206.079772,155.84 C206.079772,157.035992 207.041034,158 208.233618,158 L231.846154,158 C233.038738,158 234,157.035992 234,155.84 L233.920228,140.16 C233.920228,138.964008 232.958966,138 231.766382,138 L230.689459,138 L209.230769,138 Z M220,143 C221.652709,143 223,144.402348 223,146.128804 C223,147.441758 222.217874,148.564809 221.114286,149.028545 L221.114286,153 L219.057143,153 L219.057143,149.084398 C217.86784,148.668178 217,147.50884 217,146.128804 C217,144.402348 218.347291,143 220,143 Z M213.784135,135 C213.784135,135.552285 213.33642,136 212.784135,136 L212,136 C211.447715,136 211,135.552285 211,135 L211,128.385573 C211,124.313259 214.453985,121 219.748886,121 C225.043788,121 228.5,124.313312 228.5,128.385573 L228.5,135 C228.5,135.552285 228.052285,136 227.5,136 L226.71592,136 C226.163636,136 225.71592,135.552285 225.71592,135 L225.71592,128.385573 C225.71592,125.785409 223.506085,123.669023 219.748942,123.669023 C215.991799,123.669023 213.784135,125.785409 213.784135,128.385573 L213.784135,135 Z"></path>    </svg>     </div>
        <div class="highlights-banners-text">
            <h4 class="highlights-banners-heading">
              Secure Checkout
            </h4>
            We use encrypted SSL security for protection.
        </div>
        </div>
    </div>
</div>

Also add the below css in your themes main css file.

<style>
.highlights-banners-container {background-color: #f8f8f8;}
.highlights-banners {position: relative;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;height: 6.25rem;outline: 0;}
.highlights-banners-block {top: 1.875rem;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;width: 100%;color: #4c5154;text-decoration: none;}
.highlights-banners-icon {width: 2.25rem;height: 2.25rem;margin-right: 20px;background-position: center;background-size: contain;background-repeat: no-repeat;}
.highlight-banners-count-4 .highlights-banners-block {width: 15.625rem;}
.highlights-banners-block, .highlights-banners-icon {color: #4d4d4d;}
.highlights-banners-icon svg {width: 100%;height: 100%;max-width: 2.875rem;max-height: 2.875rem;}
.highlights-banners-text {width: calc(100% - 1.875rem);min-width: 0;padding-right: 20px;font-size: 0.875rem;line-height: 1.4;}
.highlights-banners-heading {margin: 0;}
@media screen and (min-width: 1024px){}
	.highlights-banners {height: auto;padding-top: 36px;padding-bottom: 36px;}
	.highlight-banners-count-4 .highlights-banners-block {width: 25%;}
	.highlights-banners-icon {width: auto;height: 2.875rem;}
	.highlights-banners-text {font-size: 16px;}
}
@media screen and (min-width: 860px){
	.highlights-banners-text {width: calc(100% - 3.125rem);}
}
@media screen and (min-width: 680px){
	.highlights-banners-icon {width: 2.5rem;height: 2.5rem;}
}
</style>

Let me know if you face any issue.

Thank you :)

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
0 Likes
Highlighted
Tourist
4 1 0

Hey, 

 

I appreciate your help. I am still having a bit of trouble when I add the css it doesnt work. I added it to the bottom of my theme.scss.liquid page is that the correct location? 

0 Likes
Highlighted
Tourist
4 1 0

This is an accepted solution.

I have figured it out it was only playing up do to a copying error. Do you know how I can make this banner appear jus below my nav menu at the top

0 Likes
Highlighted

Hi

Yes i can. But for this i need to know your website link.

 

Thank you :)

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
1 Like
Highlighted
Tourist
3 0 0

Hey pinkal, where do add that second code? i know it's in theme.scss.liquid right? but where exactly in that file?

 

Update: i found it, Thank you very much! But how do you optimize it on mobile? so they show down each other?

0 Likes
Highlighted
Tourist
7 0 0

Hi! 

 

Im trying to implement your code but I couldn't work out where to put it. Im currently using the Venture theme and wanted to place it between my Best Sellers and Collections on my home page. 

 

https://bourkefashion.com/

 

Your help would be immensely appreciated! 

0 Likes
Highlighted
New Member
1 0 0

Thanks, it worked for me.
However, on the cell phone the banner is compressed. I can't see it completely, nor can I slide it to any side ... is there any way to adjust it?

0 Likes
Highlighted
Tourist
6 0 1

Did you found a solution for that, the same problem here?

0 Likes
Highlighted
Tourist
6 0 1

Can you help me with this, I have a problem with mobile view?

0 Likes