Enhance the user experience of your Shopify store by converting footer links into an accordion format using custom development and Shopify custom code.
Please follow the below steps to implement the same.
HTML code
<h2 class="footer-block__heading inline-richtext">{{- block.settings.heading -}}
<strong class="_icon">+</strong>
</h2>
Please refer to the below screenshot, The Image is from the DAWN theme.
CSS & JavaScript Code
Put a small CSS code that will make <strong> to right in mobile.
<script>
$(function(){
let isExpanded=false;
$("._icon").hide();
if($(window).width()<=600) {
$(".footer-block__details-content").hide();
$("._icon").show();
}
$(".footer-block__heading").click(function() {
if($(window).width()<=600) {
isExpanded=!isExpanded;
const icon=isExpanded?"-":"+";
$(this).children("._icon").text(icon);
$(this).siblings(".footer-block__details-content").slideToggle();
}
});
});
</script>
<style>
@media(max-width:768px){
.__grt-toggle-header{float:right;}
}
</style>
The final screenshot with the code is provided below.
The Output
Related article :
effective upselling guide for shopiff , setup Build a gang sheet in Shopify store,
how to hide product price in shopify,how to create a stunning brand logo slider for shopify,slider banner in shopify Popup Code Installation Guide for Your Shopify Store,buy now button Inquire showing shopify,Different Custom Header Menus for Different Pages in Shopify,Creating an Instagram Icon Category Section in Shopify