Słynne linki do kategorii w stopce – Shoper

W pliku footer.tpl umieszczamy <div> z klasą „container” aby szerokość była dopasowana do layoutu strony i umieszczamy w nim linki do naszych kategorii:

<div class="container footer-section-links">    
    <h3>Główne kategorie</h3>
    <ul>
        <li><a href="https://www.smart-zegarki.pl/">Smartwatche</a></li>
        <li><a href="https://www.smart-zegarki.pl/pl/c/Smartwatche-meskie/14">Smartwatche męskie</a></li>
        <li><a href="https://www.smart-zegarki.pl/pl/c/Smartwatche-damskie/13">Smartwatche damskie</a></li>
        <li><a href="https://www.smart-zegarki.pl/pl/c/Smartwatche-dla-mlodziezy/20">Smartwatche dziecięce/młodzieżowe</a></li>
		<li><a href="https://www.smart-zegarki.pl/pl/c/Smartwatche-sportowe/17">Smartwatche sportowe</a></li>
        <li><a href="https://www.smart-zegarki.pl/smartwatche-z-pulsoksymetrem">Smartwatche z pulsoksymetrem</a></li>
        <li><a href="https://www.smart-zegarki.pl/z-krokomierzem">Smartwatche z krokomierzem</a></li>
        <li><a href="https://www.smart-zegarki.pl/gps">Smartwatche z GPS</a></li>
        <li><a href="https://www.smart-zegarki.pl/cisnieniomierz">Smartwatche z ciśnieniomierzem</a></li>
        <li><a href="https://www.smart-zegarki.pl/pulsometr">Smartwatche z pulsometrem</a></li>
        <li><a href="https://www.smart-zegarki.pl/z-funkcja-ekg">Smartwatche z EKG</a></li>
        <li><a href="https://www.smart-zegarki.pl/z-funkcja-rozmow">Smartwatche z funkcją rozmów</a></li>
        <li><a href="https://www.smart-zegarki.pl/do-200zl">Smartwatche do 200zł</a></li>
        <li><a href="https://www.smart-zegarki.pl/do-300zl">Smartwatche do 300zł</a></li>
        <li><a href="https://www.smart-zegarki.pl/do-500zl">Smartwatche do 500zł</a></li>
		<li><a href="https://www.smart-zegarki.pl/pasek-skorzany">Smartwatche - pasek skórzany</a></li>
		<li><a href="https://www.smart-zegarki.pl/pasek-silikonowy">Smartwatche - pasek silikonowy</a></li>
		<li><a href="https://www.smart-zegarki.pl/bransoleta">Smartwatche - bransoleta</a></li>
		<li><a href="https://www.smart-zegarki.pl/mesh">Smartwatche - mesh</a></li>
		<li><a href="https://www.smart-zegarki.pl/zloty">Smartwatche złote</a></li>
		<li><a href="https://www.smart-zegarki.pl/srebrny">Smartwatche srebrne</a></li>
		<li><a href="https://www.smart-zegarki.pl/rozowy">Smartwatche różowe</a></li>
		<li><a href="https://www.smart-zegarki.pl/czarny">Smartwatche czarne</a></li>
		<li><a href="https://www.smart-zegarki.pl/bialy">Smartwatche białe</a></li>
		<li><a href="https://www.smart-zegarki.pl/inne">Smartwatche - inne kolory</a></li>
    </ul>
</div>

Następnie CSS:

.footer-section-links {
	margin-bottom: 30px;
	border-top: 1px solid #E5E5E5;
}

.footer-section-links h3 {
	color: #000;
  	text-align: left;
	padding: 20px 0;
}


.footer-section-links ul {
	column-count: 4;
	text-align: left;
}
	
.footer-section-links ul > li {
	padding: 3px 0;
}
	
 @media (max-width: 767px) {
   .footer-section-links {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
   }
   
   .footer-section-links ul {
	 column-count: 3;
   }
   
   .footer-section-links ul > li {
		padding: 3px 16px;
	}
 }
	
@media (max-width: 450px) {
   .footer-section-links ul {
	 column-count: 2;
   }
 }
	
	@media (max-width: 400px) {
   .footer-section-links ul {
	 column-count: 1;
   }
 }

Uwaga: ilość linków w jednej kolumnie możecie kontrolować za pomocą stylu „column-count: x”