slscart logo

How to add a floating image and link to a template

The following snippet shows a floating image (paypal logo) and text in a box. The image is a clickable link. It stays stationary while the page is scrolled. It does not show up on mobile devices. Note that this will appear on every page.

This requires adding css and html to your template.

Floating image link

1. Add this css to template's header just above </head>

<style>
div#ebb2 {
position:fixed;
top:20px;
right:20px;
width:177px;
color: green;
border:solid thin green;
z-index:100;
background-color: white;
}
div#ebb2 img {
display:block;
}
/*** mobile ***/
@media screen and (max-width: 800px) {
div#ebb2 {display:none;}
}
</style>

2. Add this HTML code just under <body>

This will create a clickable image and static text. Replace 'myimage' with your own image. Adjust the width and height to match. In this example, I used a paypal image as myimage.

<div id="ebb2">
<a href="https://www.dougthecook.com">
<img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo"></a>
<div class="txtcenter">Goto dougthecook</div>
</div>

2b. OR if you don't want a link, use this instead

This will create a static image and static text.

<div id="ebb2">
<img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo">
<div class="txtcenter">Goto dougthecook</div>
</div>

2c. OR if you want the text be a clickable link use this

This will create static image and clickable text.

<div id="ebb2">
<img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo">
<div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div>
</div>

2d. OR if you want both the image and text clickable, use this

This will create a clickable image and clickable text.

<div id="ebb2">
<a href="https://www.dougthecook.com">
<img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo">
</a>
<div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div>
</div>

2e: OR if you want only a clickable image, use this:

This will create a clickable image only.

<div id="ebb2">
<a href="https://www.dougthecook.com">
<img src="%SITE_URL%/images/myimage" width="177" height="57" style="display:block" alt="paypal logo">
</a>
</div>

2f. OR if you want only text clickable, use this

This will create a clickable text and no image.

<div id="ebb2">
<div class="txtcenter"><a href="https://www.dougthecook.com">Goto dougthecook</a></div>
</div>

 3. In the step 1 css

Note there is no height specified, which means the default height (height created by the image and text) will be used.

3. In the step 2 code

How it works

A 177px wide box is created around the div 'ebb2' and outlined in green using css. It is a fixed position from the top and right of the browser area. The z-index of 100 (pretty much) assures us the box will stay on top of every page. On mobile devices (less than or equal to 800 px in width) the floating box will not show up. Note the box uses the default height, determined by the image height and text height. The height can be specified by adding height: 150px; (for example)

***