Modelo exemplo para o rodapé da loja virtual.

# HTML
{% set paginasInstitucional = store.dynamicPages({local:'1', text_upper:true}) %}
{% set paginasAjuda = store.dynamicPages({local:'2', text_upper:true}) %}
{% set infoPages = store.getInfoPages({text_upper:true}) %}
{% set footerText = store.footerText() %}
{% set redesSociais = store.socialIcons() %}
{% set widgetfb = store.widgetFacebook({width:'433', height: '300'}) %}
{% set pagamentos = store.paymentBrand() %}
{% set selos = store.securitySeal() %}
{% set widgetNews = store.widgetNews() %}

<footer class="block">
	{% if page != 'shop_cart' %}
	<section id="base" class="block">
        <div class="central">
            <div class="blc">
			{% if not global.var_bloquear_cadastros %}
                <h3 class="t">SUA CONTA</h3>
                <div class="links">
                    <a href="central/dados/">MINHA CONTA</a>
				{% if not global.var_mostruario %}
                    <a href="central/pedidos/">MINHAS COMPRAS</a>
                    <a href="carrinho/">MEU CARRINHO</a>
                {% endif %}
                </div>
            {% endif %}
                <h3 class="t">INSTITUCIONAL</h3>
                <div class="links">
                    {% if config.has_sobre %}
                        <a href="sobre/">SOBRE NÓS</a>
                    {% endif %}
					{% for page in paginasInstitucional %}
						{{ page|raw }}
					{% endfor %}
                	<a href="fale-conosco/">FALE CONOSCO</a>
                </div>
            </div>
            <div class="blc">
                <h3 class="t">PRECISA DE AJUDA?</h3>
                <div class="links">
                {% for page in infoPages %}
					{{ page|raw }}
				{% endfor %}
				{% for page in paginasAjuda %}
                    {{ page|raw }}
				{% endfor %}
                {% if not global.var_mostruario %}
                    <a href="central/pedidos/">ACOMPANHAR MEUS PEDIDOS</a>
                {% endif %}
                </div>
            </div>
        {% if footerText.base != '' %}
            <div class="blc">
                <h3 class="t">ATENDIMENTO</h3>
                <div class="txt">
                	{{ footerText.base|raw }}
                </div>
            </div>
        {% endif %}
            <div class="social">
			{% if redesSociais.raw|length >= 1 %}
                <div class="links">
				{% for item in redesSociais.raw %}
					{{ item|raw }}
				{% endfor %}
                </div>
            {% endif %}
            {% if widgetfb %}
                <div class="widget">
					{{ widgetfb.raw|raw }}
                </div>
            {% endif %}
            </div>
        </div>
    </section>
	{% endif %}

    <section id="secure" class="block">
        <div class="central">
		{% if pagamentos.brand|length >= 1 and not global.var_mostruario %}
            <div class="pgto">
                <h3 class="t">FORMAS DE PAGAMENTO</h3>
                <div class="pagamentos">
                	<div class="servicos">
					{% for gateway in pagamentos.gateway %}
						<span><img src="https://sistema.wbuy.com.br/img/loading-heart.svg" data-src="{{ gateway.icone }}" alt="Page com {{ gateway.nome }}" class="img-fluid lazy"></span>
					{% endfor %}
                    </div>
                	<div class="itens">
					{% for bandeira in pagamentos.brand %}
                        <span title="{{ bandeira.nome }}"><img src="https://sistema.wbuy.com.br/img/loading-heart.svg" data-src="{{ bandeira.icone }}" alt="{{ bandeira.nome }}" class="lazy"></span>
                    {% endfor %}
	                </div>
                </div>
            </div>
        {% endif %}
            <div class="selos">
                <h3 class="t">SEGURANÇA</h3>
				{% for selo in selos %}
					{{ selo|raw }}
				{% endfor %}
            </div>
		{% if page != 'login' and page != 'shop_cart' and not global.var_desabilita_news %}
            <div class="news">
                <h3 class="t">{{ widgetNews.title }}</h3>
                <div class="box">
                    <p>{{ widgetNews.subtitle1 }}<br>{{ widgetNews.subtitle2 }}</p>
                    <form id="frmNews" action="news_func.php" method="post" class="post">
                        <input type="email" name="email" class="input-block-level" aria-label="Digite seu e-mail aqui" required placeholder="Digite seu e-mail aqui">
                        <button type="submit">ME INSCREVER</button>
                    </form>
                </div>
            </div>
        {% endif %}
        </div>
    </section>
	{% if footerText.rodape != '' %}
		<section id="rodape" class="block">
			<div class="central">
				{{ footerText.rodape|raw }}
			</div>
		</section>
	{% endif %}
</footer>

// CSS
footer{
	overflow: hidden;
}

#base{
	width: 100%;
	float: left;
	padding: 30px 0;
	background-color: #f6f6f6;
	color: #666;
	
	.blc{
		width: 20%;
		float: left;
		margin-left: 15px;
		
		&:first-child{
			margin-left: 0;
		}
		
		.t{
			margin-bottom: 15px;
			font-size: 16px;
			line-height: 18px;
			font-weight: bold;
		}
		
		.links{
			width: 100%;
			float: left;
			margin-bottom: 15px;
			
			a{
				display: block;
				color: #666;
				font-size: 12px;
				line-height: 20px;
				transition: all .25s ease;
				
				&:hover{
					text-decoration: underline !important;
				}
			}
		}
		
		.txt{
			p{
				margin-bottom: 15px;
				font-size: 14px;
				line-height: 18px;
			}
		}
	}
	
	.social{
		width: calc(40% - 70px);
		float: right;
		margin-bottom: 40px;
		
		.links{
			float: left;
			margin-bottom: 15px;
			
			a{
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				float: left;
				margin-left: 10px;
				font-size: 20px;
				color: #FFF;
				
				&:first-child{
					margin-left: 0;
				}
				
				&:active{
					opacity: 0.8;
				}
			}
		}
	}
	
	.widget{
		width: 100%;
		float: left;
		min-height: 180px;
		background-color: #FFF;
		
		iframe{
			width: 100%;
		}
	}
}

#secure{
	width: 100%;
	float: left;
	padding: 30px 0;
	border-bottom: solid 5px #000;
	border-top: solid 1px #EEE;
	
	.t{
		margin-bottom: 15px;
		font-size: 16px;
		line-height: 18px;
	}
	
	.pgto{
		width: 40%;
		float: left;
		margin-right: 5%;
		
		.pagamentos,
		.servicos,
		.itens{
			width: 100%;
			float: left;
		}
		
		.servicos{
			margin-bottom: 10px;
			
			span{
				float: left;
				width: calc(25% - 6px);
				height: 50px;
				margin: 3px;
				padding: 10px;
				border-radius: 10px;
				background-color: #FFF;
				border: solid 1px #CCC;
				display: flex;
				justify-content: center;
				align-items: center;
				
				img{
					max-height: 35px;
				}
			}
		}
		
		.itens{
			span{
				width: calc(16.66% - 6px);
				float: left;
				margin: 3px;
				border: solid 1px #CCC;
				border-radius: 3px;

				img{
					max-width: 100%;
				}
			}
		}
	}
	
	.selos{
		width: 20%;
		float: left;

		img{
			max-width: 100px;
			max-height: 80px;
		}

		.selo-avaliacoes{
			width: 100px;
			background-color: #FFF;
			border: solid 1px #CCC;
			text-align: center;
			padding: 3px;
			border-radius: 3px;
			color: #000;

			.nota{
				font-size: 16px;

				.fa-star{
					color: #FFD700;
				}
			}

			.t{
				color: #666;
				font-size: 12px;
			}
		}
		
		a{
			margin: 0 10px 10px 0;
			vertical-align: middle;
			display: inline-block;
			
			&[href="#"]{
				cursor: default;
			}
		}
	}
	
	.news{
		width: 30%;
		float: right;
		margin-left: 5%;
		
		.box{
			width: 100%;
			float: left;
			padding: 15px;
			background-color: #000;
			color: #FFF;
			
			p{
				margin-bottom: 10px;
			}
			
			input{
				width: calc(100% - 120px);
				height: 30px;
				float: left;
				padding: 0 10px;
				color: #000;
			}
			
			button{
				&[type=submit]{
					width: 120px;
					float: left;
					background-color: #F60;
					color: #FFF;
					height: 30px;
					
					&:active{
						opacity: 0.8;
					}
				}
			}
		}
	}
}

#rodape{
	padding: 15px 0;
	text-align: center;
}

#seloEbit{
	display: inline-block !important;
}

@media screen and (max-width: 1024px) {
	#base,
	#secure{
		padding-left: 20px;
		padding-right: 20px;
	}
	#base .social{
		overflow: hidden;
	}
}

@media screen and (max-width: 800px) {
	#base{
		.blc{
			width: calc(30% - 15px);
		}
		
		.social{
			width: 100%;
			text-align: center;
			margin-top: 30px;
		}
		
		.widget{
			background-color: transparent;
		}
	}
	
	#secure{
		.pgto{
			width: 50%;
			margin-right: 0;
		}
		
		.selos{
			width: 50%;
		}
		
		.news{
			width: 50%;
			margin-left: 0;
			margin-top: 30px;
		}
	}
}

@media screen and (max-width: 598px) {
	#base{
		.blc{
			width: 100%;
			margin: 0 0 20px 0;
		}
	}
	
	#secure{
		.pgto,
		.selos,
		.news{
			width: 100%;
			margin: 0 0 20px 0;
		}
	}
}

@media screen and (max-width: 425px) {
	
}

@media screen and (max-width: 360px) {
	
}

@media screen and (max-width: 320px) {
	
}