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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025