How to create a floating/sticky/overlaid banner on my page with a hypertexted button in it?

Solved
Highlighted
New Member
3 0 0

Hi creative professionals!

 

I want to create a banner (a wide and short image) at the bottom of my Shopify home page and some other pages. 

 

The banner should be floating on the top layer and be fixed or sticky. By "fixed/sticky", I mean it does not move when page visitors are scrolling up and down through the page. It stays right at the bottom of the pages. 

 

And I want to add a button with hyperlink URL, or simply the whole banner is linked to the URL.

 

I know I'll have to edit the code in order to implement that, but I don't know where and how to start. The theme I currently use is Debut.

 

I hope that you guys could drop me some tips on this.

 

Massively appreciated,

Mike Friar

0 Likes
Highlighted
Shopify Expert
3903 559 938

This is an accepted solution.

Hi @Cgaga 

Follow this:

1. Open Layout->theme.liquid and paste bellow code  just before </body>

<div class="stick_img"><a href="your_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/service-i-3_981fc4da-86e2-496d-a4ad-269be40c2408_small.png?v=1569821692"></a></div>

 

2. Now add this css in Asset->theme.scss file at bottom:

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

Note: You can change image url and 'your_url' to url where you want to redirect. 

 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Excursionist
53 0 3

Thanks for providing the code, it's working well.

 

@Jasoliya  How can we include or exclude on serval pages??

 

Let's say below conditions:

1. I want to show this only on homepage

2. I want to show it on all products pages & homepage

3. I want to exclude this from cart/checkout pages.

 

0 Likes
Highlighted
Shopify Expert
3903 559 938

Add code in this condition

{% if template contains 'index' or template contains 'product'%}
//add code here that show on home and product page only
{% endif %}

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Excursionist
53 0 3

@Jasoliya  Thank you, this worked!

0 Likes