How can I create a clickable logo button on my landing page?

Store Design
,
1

Hello,

I had an idea for my shop. Basically, I want to add a picture of my shop logo on the landing page, and I want that picture to be a clickable button so that when a viewer clicks it, it directs them to the respective section.

The image enclosed depicts my idea. Is this possible?
Shop: kawaiiforus.com

Thank you very much!

c49f72e52638ea018d73566a05eaee40.png
c49f72e52638ea018d73566a05eaee40.png952×475 71.7 KB

2

Hello @KawaiiForUs

It is possible. You first need to get ID of the section you want to scroll to, then you set a link to the clickable image to #id

For example: The ID of the section is my-section, then set a link to #my-section to the image

A live demo here https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_bookmark

Hope that helps!

3

Hi @KawaiiForUs ,

You can use smooth scroll for it, see the following tutorial. Refer link

Hope it helps!

4

Hi @KawaiiForUs ,

This is PageFly - Free Landing Page Builder.

Thank you for your detailed information. Regarding this concern, you can achieve it in two ways:
1 - You can attach the link to the image (in the template file). This will not require to add any codes
2 - You have to use custom code to hard-coded the link for you to make it clickable

Please let me your link and where the image is, I will send you an instruction to do that

Best regards,
PageFly

5

Hi @KawaiiForUs

You can try the following steps:

  1. Identify where your image is. For example, the image below is the banner on the homepage

view (49).png
view (49).png2543×1350 496 KB

  1. Select the code section of the theme to be able to customize the code.

view (51).png
view (51).png2238×1221 361 KB

  1. Go to the file to be edited (depending on the theme, the location of the image will have a different file), in the image below, it will be the file sections/image-banner.liquid

view (52).png
view (52).png2552×1305 260 KB

  1. In the code that displays the image, wraps the whole code inside the tag “a” with the “href” attribute being the link of collections/all.

  2. Add a little CSS attribute to make the tag a link correct and beautiful

view (53).png
view (53).png2550×1351 846 KB

If it’s useful for you, please let me know by giving us a like or marking as a solution.