Liquid, JavaScript, themes, sales channels
My footer is acting up on the pages for each product.
https://thepettedpet.com/collections/all
password: miacri
Visit each of the products and scroll to the bottom.
I don't remember the exact time it happened but it was quite after some time of editing a code. It wasn't immediately after editing the code. Also, the second product is using the original product template. I just changed the pricing to coming soon. It was fine for a long time and now recently it's also showing a messed up footer.
Few users on Fiverr also suggested that the product pages appear fine for them. I tried chrome, Mozilla and Maxthon. For me, it's still the same on all.
On chrome mobile browser, with Desktop mode enabled, the footer is behaving as expected. So I'm not sure if the code is even causing this issue.
Note: The footer is shown as expected on all pages except the product pages.
Would be really grateful to the one who's able to help me sort this issue. I've been planning to go live for while now but it's been pending for this reason.
Regards,
Awais
Solved! Go to the solution
This is an accepted solution.
So your problem comes from the app VITALS, I think if you disable it the problem with the footer will be gone. If you like to keep it then go to the theme.scss in assets and write this code at the end of the file:
#shopify-section-footer .main-footer{
width: 100%;
}
#section-guarantee .grid.grid-uniform{
width: 100%;
}
Tips:
1. Before you make any changes to theme.scss file make local copy on your computer, shopify won't back up the assets files
2. After you have made the changes save the file and on the product page hit hard refresh ( ctrl / cmd + F5 ), repeat the process if no changes
Let me know if everything is in place
PLease place this code at the end of theme.scss
.site-footer .footer-item {
width: 25%;
}
Hi Param,
Unfortunately, It's still the same for me. Does it show messed up on your PC too or is it behaving as expected?
Please place this code also
.main-footer {
display: block !important;
}
@media only screen and (max-width: 600px) {
.main-footer {
display: flex !important;
}
}
Thanks for the support Param. Your suggestion came close to working. It fixed the issue however it created a really large are of blue that was in the footer that I had to scroll through.
This is an accepted solution.
So your problem comes from the app VITALS, I think if you disable it the problem with the footer will be gone. If you like to keep it then go to the theme.scss in assets and write this code at the end of the file:
#shopify-section-footer .main-footer{
width: 100%;
}
#section-guarantee .grid.grid-uniform{
width: 100%;
}
Tips:
1. Before you make any changes to theme.scss file make local copy on your computer, shopify won't back up the assets files
2. After you have made the changes save the file and on the product page hit hard refresh ( ctrl / cmd + F5 ), repeat the process if no changes
Let me know if everything is in place
Gracias amigo. It worked. It kind of centered the items a bit but hey at least the page is loading smoothly. Besides, mobile users won't be able to tell the difference.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024