Website design - side button

lunalucenteskin
Excursionist
20 0 4

Does anyone know how i can create a sticky button on the side of our website (example here.)Image 05-06-2024 at 10.36.jpeg

Replies 5 (5)

lunalucenteskin
Excursionist
20 0 4

Image 05-06-2024 at 10.36.jpeg

Dan-From-Ryviu
Shopify Partner
7917 1540 1569

Hi @lunalucenteskin 

Our app has sidebar feature to show featured reviews like that button. You can check demo store

Install Ryviu app to get this featured.

 

Best Regards,

Dan from Ryviu

- Does this help? Like and Accept solution to let me know
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

TerenceKEANE
Shopify Partner
511 86 78

Hi,

 

It could be done with a bit of effort. When you click the button, will it go directly to a specific page? We need a bit more detail.

 

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
lunalucenteskin
Excursionist
20 0 4

Hi Terence, 

 

Yes it should be linked to a specific page on our website!

 

Kind regards

TerenceKEANE
Shopify Partner
511 86 78

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>

 

 

shopify.head.jpg

 

 

TerenceKEANE_0-1717601897448.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites