How do I do a vertical footer/multicolumn in the footer

Shopify Discussion
1

Hi,

I was looking through other websites and noticed they had a vertical column, and many links in the footer. For example, if you scroll down on the Nike website they have it. Does anyone know how to add one using the dawn theme?

2

Hi @ayaanj0208

We can customize the footer in the Dawn theme to show Vertical links & multicolumn contents. Here are the steps to do it -

  1. Go to your store’s Shopify admin.

  2. Click on Online Store > Themes > Customize

  3. Go to Footer section in the left menu

  4. Add the footer links & description that needs to be shown

The dawn theme will show these sections in the form of columns. Here is a sample image to show the added sections.

dawn-footer.png
dawn-footer.png2869×2368 609 KB

I hope you find this helpful.

Thanks & Regards,

Scale-up print

1 Like
3

Thank You this really helped but how do I get the pages to show up as well?

4

Hi @ayaanj0208

We are glad that our previous reply helped you.

About the link pages in footer to show up as well, you can attach the page link for each of footer menu item which will allow your website visitor to click & open the page.

Here are the steps to apply page link with the menu item -

  1. Go to Shopify Admin > Online Store > Navigation

  2. Select Footer menu

  3. Click on the menu item > Edit

  4. Select the page from dropdown to link with menu item

Also, for details please refer to our demo video where we have given the demo for linking pages with the footer menu https://youtu.be/x5m9wP2RRLA

Thanks & Regards,

Scale-up Print

5

Hello, when I try this my footer links come up horizontally. Is there a way to make them vertical columns?

6

Hi @TheBogeyBunch ,

I hope you are doing well!

The horizontal alignment of the footer links is because of the CSS code of the current theme. One of the way to display the links in vertical columns is using the Custom CSS options present in the theme settings.

Based on the CSS class applied on the footer link element, here is the Custom CSS code you can use -

.footer-block__details-content{
  display: grid !important;  
}

Here is the image for the reference-

scaleupprint_0-1704180494537.png
scaleupprint_0-1704180494537.png1071×707 155 KB

For details about how to apply Custom CSS in the theme settings of Shopify you can refer to this video https://youtu.be/nPja-jHwmPc

Please let me know if more details are required.

Thanks & Regards,

Scale-up print

7

Not working for me .Is there any option to display footer section text, image quick link vertically .Thanks for the help .