I need the exact design of the image attached
https://rugd-in.myshopify.com/
password: rugged
Thanks in advance
Topic summary
A user seeks to customize their Shopify store footer to match a specific design shown in an attached image. The store currently has a similar footer layout.
Current Issue:
- When using a single menu, items display horizontally on desktop
- On mobile devices, the footer menu appears in vertical position instead of maintaining horizontal alignment
Proposed Solution:
A support representative provided guidance to:
- Add menu items via Theme > Customize > Footer > Menu > Quick Links
- Apply mobile-specific CSS code using a media query (
@media screen and (max-width: 600px)) to control the mobile display separately - Use mobile simulator to verify the changes display correctly
Status: The discussion includes video tutorials and code snippets to help implement the customization. The solution involves adding custom CSS specifically targeting mobile devices while maintaining the desktop layout.
Hi @Sivadarshan
I hope you’re doing well.
I noticed that your store footer already has quite a similar design https://prnt.sc/dHpCSZ60ijp9
If you’d like to add additional options, simply go to Theme > Customize > Footer > Menu > Quick Links to add more items to your footer. You can refer to this video to understand better https://www.loom.com/share/4d9286237f3e498aa31d4770582c94f3?sid=a9bbb34a-8855-40bd-8b75-4206bef83bc7
At first, when you add more quick links, it will appear vertically like this, if you want to change it to horizontal, please refer to this video https://www.loom.com/share/6d1c9e8fef724603af26bb6202df1d02?sid=00f8a2ec-5b58-4a4d-abfc-b883bbe829be
I hope this helps, let me know if you have further questions or are stuck at any steps
Best regards,
Daisy
As I am using only single menu it shows in horizontal, if we add more menu list in footer it changes to horizontal menu, but when I check in mobile it is in vertical position
Hi @Sivadarshan
I see! To apply this change only for mobile, you’ll need to add the CSS code specifically for mobile devices. Use the mobile simulator to ensure it displays correctly on mobile only.
Please follow the steps shown in the video, but make sure to add the following code before the rest of your custom CSS:
@media screen and (max-width: 600px){
-- add code for mobile here --
}
I hope this would help
Best,
Daisy