Website design - side button
Does anyone know how i can create a sticky button on the side of our website (example here.)
Hi Again,
Actually, finding such detailed requests around here isn't quite common. We usually provide services like these and much more to our Shopify premium support customers. Honestly, I stumbled upon this and wanted to help out. Anyway, the following code should do the trick. Let me know if you encounter any issues.
Terence.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
<style>
.menu-item > a {
text-decoration: none;
}
.menu-item > a:hover {
text-decoration: none;
}
.side-menu {
position: fixed;
background-color: #fff;
z-index: 100;
}
.side-menu ul,
.side-menu li {
margin: 0;
padding: 0;
list-style: none;
}
.side-menu > ul {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: inherit;
background: black;
padding: 20px 0;
}
.side-menu > ul > li {
flex-grow: 1;
}
.side-menu > ul > li > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 5px 10px;
transition: all 0.075s ease-out;
position: relative;
border-radius: inherit;
}
.side-menu > ul > li > a::before {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.1;
margin: 2px 0;
}
.side-menu > ul > li .links-text {
position: relative;
top: -2px;
color: azure;
writing-mode: tb-rl;
padding-top: 10px;
font-weight: 500;
font-size: 17px;
}
.side-menu-283 {
display: block;
top: 300px;
left: 0;
background: rgba(238, 238, 238, 1);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.side-menu-283 li > a::before {
font-size: 20px;
}
.side-menu-283 .side-menu-item-1 > a::before {
content: '★' !important;
font-family: icomoon !important;
color: white;
}
.side-menu-283 > ul .side-menu-item-1 > a {
color: rgba(238, 238, 238, 1);
}
</style>
<script>
window.onload = function() {
var sideMenu = document.createElement("div");
sideMenu.classList.add("side-menu", "side-menu-283");
var ul = document.createElement("ul");
var li = document.createElement("li");
li.classList.add("menu-item", "side-menu-item", "side-menu-item-1");
var a = document.createElement("a");
a.href = "https://novajetsoft.com/premium";
var span = document.createElement("span");
span.classList.add("links-text");
span.textContent = "Review";
a.appendChild(span);
li.appendChild(a);
ul.appendChild(li);
sideMenu.appendChild(ul);
var mTheme = document.getElementById("m-theme");
mTheme.insertAdjacentElement('afterend', sideMenu);
};
</script>
Community Blog Articles
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024
In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024