How to add a close button to sticky foot banner?

Solved
New Member
3 0 0

Hi creative expert, tourists, and professionals,
Last week I made a sticky foot banner on my home page by writing the following code in the liquid script:

<div class="stick_img"><a href="my_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/banner.jpg?v=1576821060"></a></div>

as well as the following code in the css script:

.stick_img{position: fixed; bottom: 0; right: 0; z-index: 111;}

It looks great. However, I feel it a little bit like an obstruction if it cannot be closed. How could I add a close button like a "x" symbol wrapped by a small circle outside?
Looking to hearing from you, and wish you a Merry Christmas!
Best Regards,

Mike Friar

0 Likes
Shopify Partner
1199 245 319

This is an accepted solution.

Hello Mike,

You need to add X in html like this

<div class="stick_img"><a href="my_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/banner.jpg?v=1576821060"></a><spa class="close_btn">X</span></div>

And after to hide it use jquery, here you check 
Your jquery code will be like this

<script>
$(document).ready(function(){
  $(".close_btn").click(function(){
    $(".stick_img").hide();
  });
});
</script>

Note: you need to write css for X (close) to align it a/to your need 

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
Tourist
9 1 0

Thanks @Guleria for your help,

 

But how to make "closing" the image a one time action per user? because every time you refresh the page you will see it

Plus, how to make it show on specific pages?

 

Cheers,

0 Likes
Shopify Partner
1199 245 319

Hello @Kamal81 ,

You can use cookies concept for it.
You can use if condition to display on specific pages.

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Tourist
9 1 0

Hi @Guleria 

 

I used the following IF condition:

{% if template contains 'index' or template contains 'product' %}

 This IF condition to show the sticky image on home and product pages. But I need it to show on another bunch of pages as the following:

/pages/page1

/pages/page2

/pages/page3

 

How to add that to the condition?

 

Thanks for your support.

Cheers,

0 Likes