Hi, I am trying to add a column of 4 ‘reasons to shop with us’ icons with text, that show directly above the footer on all pages. Ideally with a background colour.
I have found some information on doing this with SVG icons but only for product pages. I would also like the column to be responsive , so they stack in one or two icons on mobile depending on screen size. I am using Turbo theme, any help appreciated
Hi.
Most likely there is no response is because there is not enough information.
Shopify has many, many themes/templates so without a url/address, code or a screen capture would be near impossible to help.
Regards,
Jon
Hi, apologies, first time posting on here. I am using turbo theme by out of the sandbox. I am trying to achieve something similar to the screenshots, with a text column with icons immediately above the footer on all pages. I would also like the section to be responsive on mobile, so each icon with text may appear stacked above the next on a narrow screen. I hope that is more clear
Here is an example of how it can be done.
The first column use a link/href.
Disregard the images, I used base64 so I did not have to post them.
[Edit] I added simple mobile/responsive
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Hi Jon, thanks for this, where should I paste the code for it to appear above the footer on every page?
That’s really up to you where if goes.
Are you familiar with liquid templates?
There is usually a footer template (Sections) you can manipulate to your liking.
To be clear the images I provided are placeholders, you will need to use your Shopify image url from your image uploads.
(you may already know this)
Regards,
Jon
Development: jcbellc.com
I pasted it right at the top of the footer.liquid and it worked perfectly, yes I am aware to change the images, am I also able to add SVG there? Final question is it possible to add a colour background to the box? Thank you that worked great, also the first one seems to highlight as a link? Is it possible I can remove the link? many thanks
You are welcome and here you go.
I added a background color and a svg file.
There are comments to show where you can change values if needed.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Hmm.
I posted the new code with the changes, though it said it was marked as spam.
I will check back later to see if it went through.
Regards
Thanks I would really appreciate that Jon
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
Donec molestie ac sapien et varius. Vivamus interdum tortor ac orci cursus tincidunt.
I added comments so you can change the values as needed.
(color and icon height)
There is also a svg example.
Regards,
Jon
Thanks Jon, this is exactly what I was after, the only issue I am having, with my lack of coding skill, is when I paste the SVG example three times in a row it doesn’t display correctly. Am I doing something wrong in copying the SVG code and pasting it in place of the other two?
Worked it out… Thanks Jon, you are a genius, really appreciate it!
Hi Jon, so I added a fourth icon and typed in some phrases in place of the lorem ipsum text, which were less words, for example ‘free shipping’ which narrowed the section (even with the added icon) so it did not fill the full width of the screen.
I added some extra padding to each icon which seemed to fix it on desktop but in mobile view the icons are showing like this, with the section not filling the screen, should I just keep adding more padding to each icon? The section is great I am just trying to work out how to make sure it fills the full width of the screen on desktop, mobile and tablets.
