Shopify themes, liquid, logos, and UX
Hello,
I have been working on making a custom reviews section on my product page, i have been able to make it PC friendly, but i cant figure out how to make it mobile friendly.
Example website of how i want it: https://anna-lea.nl/products/casual-sweatshirt
My website: https://aliva-amsterdam.nl/products/smukke-anti-cellulite-leggings
I will also add the code i am using. and a picture of what section I am talking about
Thanks in advance 🙂
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .custom-reviews.static .below-reviews { display: flex; flex-wrap: wrap; gap: 20px; } .custom-reviews.static .reviewsItems { width: calc(33% - 10px); margin-bottom: 0; } h2.reviw_title { margin: 8px 0; } .blw-data p { margin: 0; font-size: 14px; line-height: 23px; } .blw-data i.fa.fa-star { color: #01aa0a; } .rating--area { display: flex; justify-content: space-between; align-items: center; } .top-head { display: flex; align-items: center; justify-content: space-between; } .rating-text { text-align: right; font-size: 16px; color: #01aa0a; } span.customSlArrow { width: 45px; height: 45px; padding: 14px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 100%; cursor: pointer; } .top-head h3 span { color: #01aa0a; } .top-head h3 { text-align: center; font-size: 25px; line-height: 27px; } span.customSlArrow.leftArrowCR { transform: rotate(90deg); } span.customSlArrow.righttArrowCR { transform: rotate(-90deg); } .revie-parent { background: #fceadc; padding: 17px 38px; } .footerReviews { margin-top: 22px; } .blw-data { background: #fff; padding: 12px 13px; } .custom-reviews.static .slick-list { margin: 0 -7px; } .top-head.centr { justify-content: center; } @media (max-width: 767px) { .top-head h3 { text-align: center; font-size: 18px; line-height: 23px; } .custom-reviews.static .slick-list { padding: 0 20% 0 0 !important; } span.customSlArrow { display: none !important; } .below-reviews .slick-prev:before, .below-reviews .slick-next:before { color: #01aa0a; } } </style> </head> <body> <div class="custom-reviews static"> <div class="page-width"> <div class="revie-parent"> <div class="top-head centr"> <h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3> </div> <div class="below-reviews"> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <h2 class="reviw_title"></h2> <p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p> <div class="footerReviews"> <span>Review by <b>Emma</b></span> </div> </div> </div> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <h2 class="reviw_title"></h2> <p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p> <div class="footerReviews"> <span>Review by <b>Floris</b></span> </div> </div> </div> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p> <div class="footerReviews"> <span>Review door <b>Lisa</b></span> </div> </div> </div> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p> <div class="footerReviews"> <span>Review door <b>John</b></span> </div> </div> </div> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p> <div class="footerReviews"> <span>Review door <b>Karen</b></span> </div> </div> </div> <div class="reviewsItems" style="" aria-hidden="true" tabindex="0"> <div class="blw-data"> <div class="rating--area"> <div class="ratnmbr"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </div> <div class="abtrate">Excellent</div> </div> <p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p> <div class="footerReviews"> <span>Review door <b>Sophie</b></span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Hi @Alllways
Please update your code to this.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.custom-reviews.static .below-reviews {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.custom-reviews.static .reviewsItems {
width: calc(33% - 10px);
margin-bottom: 0;
}
@media (max-width: 767px) {
.custom-reviews.static .reviewsItems {
width: 100%;
}
}
h2.reviw_title {
margin: 8px 0;
}
.blw-data p {
margin: 0;
font-size: 14px;
line-height: 23px;
}
.blw-data i.fa.fa-star {
color: #01aa0a;
}
.rating--area {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-text {
text-align: right;
font-size: 16px;
color: #01aa0a;
}
span.customSlArrow {
width: 45px;
height: 45px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
.top-head h3 span {
color: #01aa0a;
}
.top-head h3 {
text-align: center;
font-size: 25px;
line-height: 27px;
}
span.customSlArrow.leftArrowCR {
transform: rotate(90deg);
}
span.customSlArrow.righttArrowCR {
transform: rotate(-90deg);
}
.revie-parent {
background: #fceadc;
padding: 17px 38px;
}
.footerReviews {
margin-top: 22px;
}
.blw-data {
background: #fff;
padding: 12px 13px;
}
.custom-reviews.static .slick-list {
margin: 0 -7px;
}
.top-head.centr {
justify-content: center;
}
@media (max-width: 767px) {
.top-head h3 {
text-align: center;
font-size: 18px;
line-height: 23px;
}
.custom-reviews.static .slick-list {
padding: 0 20% 0 0 !important;
}
span.customSlArrow {
display: none !important;
}
.below-reviews .slick-prev:before,
.below-reviews .slick-next:before {
color: #01aa0a;
}
}
</style>
</head>
<body>
<div class="custom-reviews static">
<div class="page-width">
<div class="revie-parent">
<div class="top-head centr">
<h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
</div>
<div class="below-reviews">
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
<div class="footerReviews">
<span>Review by <b>Emma</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
<div class="footerReviews">
<span>Review by <b>Floris</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Lisa</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
<div class="footerReviews">
<span>Review door <b>John</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Karen</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
<div class="footerReviews">
<span>Review door <b>Sophie</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you!
Is it possible to make it swipable on phones, see example picture
Hi @Alllways
You can try to update code like this and check if it workings
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.custom-reviews.static .below-reviews {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.custom-reviews.static .reviewsItems {
width: calc(33% - 10px);
margin-bottom: 0;
}
@media (max-width: 767px) {
.custom-reviews.static .reviewsItems {
width: 100%;
}
}
h2.reviw_title {
margin: 8px 0;
}
.blw-data p {
margin: 0;
font-size: 14px;
line-height: 23px;
}
.blw-data i.fa.fa-star {
color: #01aa0a;
}
.rating--area {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-text {
text-align: right;
font-size: 16px;
color: #01aa0a;
}
span.customSlArrow {
width: 45px;
height: 45px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
.top-head h3 span {
color: #01aa0a;
}
.top-head h3 {
text-align: center;
font-size: 25px;
line-height: 27px;
}
span.customSlArrow.leftArrowCR {
transform: rotate(90deg);
}
span.customSlArrow.righttArrowCR {
transform: rotate(-90deg);
}
.revie-parent {
background: #fceadc;
padding: 17px 38px;
}
.footerReviews {
margin-top: 22px;
}
.blw-data {
background: #fff;
padding: 12px 13px;
}
.custom-reviews.static .slick-list {
margin: 0 -7px;
}
.top-head.centr {
justify-content: center;
}
@media (max-width: 767px) {
.top-head h3 {
text-align: center;
font-size: 18px;
line-height: 23px;
}
.custom-reviews.static .slick-list {
padding: 0 20% 0 0 !important;
}
span.customSlArrow {
display: none !important;
}
.below-reviews .slick-prev:before,
.below-reviews .slick-next:before {
color: #01aa0a;
}
}
</style>
</head>
<body>
<div class="custom-reviews static">
<div class="page-width">
<div class="revie-parent">
<div class="top-head centr">
<h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
</div>
<div class="below-reviews">
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
<div class="footerReviews">
<span>Review by <b>Emma</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
<div class="footerReviews">
<span>Review by <b>Floris</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Lisa</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
<div class="footerReviews">
<span>Review door <b>John</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Karen</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
<div class="footerReviews">
<span>Review door <b>Sophie</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
window.cartStrings = {
error: `Er is een fout opgetreden bij het bijwerken van je winkelwagen. Probeer het opnieuw.`,
quantityError: `Je kunt maar [quantity] van dit artikel toevoegen aan je winkelwagen.`
}
window.variantStrings = {
addToCart: `Aan winkelwagen toevoegen`,
soldOut: `Uitverkocht`,
unavailable: `Niet beschikbaar`,
}
window.accessibilityStrings = {
imageAvailable: `Afbeelding [index] is nu beschikbaar in gallery-weergave`,
shareSuccess: `Link gekopieerd naar klembord`,
pauseSlideshow: `Diavoorstelling pauzeren`,
playSlideshow: `Diavoorstelling afspelen`,
}
</script><!-- "snippets/revy-bundle-script.liquid" was not rendered, the associated app was uninstalled -->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.custom-reviews.static .below-reviews').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 9999999,
settings: "unslick"
}, {
breakpoint: 768,
settings: {
dots:false,
infinite: true,
speed: 300,
arrows: true,
slidesToShow: 1
}
}
]
});
$('.below-reviews.slidesslidr').slick({
dots:false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
}
]
});
$("body").on("click","span.customSlArrow.leftArrowCR", function(){
$('.below-reviews').slick('slickPrev');
});
$("body").on("click","span.customSlArrow.righttArrowCR", function(){
$('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
centerMode: true,
autoplay:true,
infinite: true,
speed: 300,
slidesToShow: 3,
centerPadding: '0px',
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '25px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '20px',
slidesToShow: 1
}
}
]
});
$("body").on("click",".slider.slider--mobile .slider__slide img", function(){
console.log("success");
});
function getimage(){
setTimeout(function(){
var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
$('ul.mob---slides li').removeClass('active');
$('ul.mob---slides li[inds='+inds+']').addClass('active')
},10)
}
$('ul.mob---slides li').click(function(){
var inds=$(this).attr('inds');
$('ul.mob---slides li').removeClass('active');
$(this).addClass('active')
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
})
</script>
<script>
$('a.cstm-tbn').click(function(e){
e.preventDefault();
$('.product-form__buttons button.product-form__submit')[0].click();
})
function randomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
setInterval(function(){
$('.getviditors').text(randomInt(40,70))
},10000)
$('.getviditors').text(randomInt(40,70))
</script>
</body>
</html>
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
It doesnt work 😞 I receive an error message, see pictures
My mistake, please update code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.custom-reviews.static .below-reviews {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.custom-reviews.static .reviewsItems {
width: calc(33% - 10px);
margin-bottom: 0;
}
@media (max-width: 767px) {
.custom-reviews.static .reviewsItems {
width: 100%;
}
}
h2.reviw_title {
margin: 8px 0;
}
.blw-data p {
margin: 0;
font-size: 14px;
line-height: 23px;
}
.blw-data i.fa.fa-star {
color: #01aa0a;
}
.rating--area {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-text {
text-align: right;
font-size: 16px;
color: #01aa0a;
}
span.customSlArrow {
width: 45px;
height: 45px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
.top-head h3 span {
color: #01aa0a;
}
.top-head h3 {
text-align: center;
font-size: 25px;
line-height: 27px;
}
span.customSlArrow.leftArrowCR {
transform: rotate(90deg);
}
span.customSlArrow.righttArrowCR {
transform: rotate(-90deg);
}
.revie-parent {
background: #fceadc;
padding: 17px 38px;
}
.footerReviews {
margin-top: 22px;
}
.blw-data {
background: #fff;
padding: 12px 13px;
}
.custom-reviews.static .slick-list {
margin: 0 -7px;
}
.top-head.centr {
justify-content: center;
}
@media (max-width: 767px) {
.top-head h3 {
text-align: center;
font-size: 18px;
line-height: 23px;
}
.custom-reviews.static .slick-list {
padding: 0 20% 0 0 !important;
}
span.customSlArrow {
display: none !important;
}
.below-reviews .slick-prev:before,
.below-reviews .slick-next:before {
color: #01aa0a;
}
}
</style>
</head>
<body>
<div class="custom-reviews static">
<div class="page-width">
<div class="revie-parent">
<div class="top-head centr">
<h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
</div>
<div class="below-reviews">
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
<div class="footerReviews">
<span>Review by <b>Emma</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
<div class="footerReviews">
<span>Review by <b>Floris</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Lisa</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
<div class="footerReviews">
<span>Review door <b>John</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Karen</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
<div class="footerReviews">
<span>Review door <b>Sophie</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.custom-reviews.static .below-reviews').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 9999999,
settings: "unslick"
}, {
breakpoint: 768,
settings: {
dots:false,
infinite: true,
speed: 300,
arrows: true,
slidesToShow: 1
}
}
]
});
$('.below-reviews.slidesslidr').slick({
dots:false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
}
]
});
$("body").on("click","span.customSlArrow.leftArrowCR", function(){
$('.below-reviews').slick('slickPrev');
});
$("body").on("click","span.customSlArrow.righttArrowCR", function(){
$('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
centerMode: true,
autoplay:true,
infinite: true,
speed: 300,
slidesToShow: 3,
centerPadding: '0px',
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '25px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '20px',
slidesToShow: 1
}
}
]
});
$("body").on("click",".slider.slider--mobile .slider__slide img", function(){
console.log("success");
});
function getimage(){
setTimeout(function(){
var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
$('ul.mob---slides li').removeClass('active');
$('ul.mob---slides li[inds='+inds+']').addClass('active')
},10)
}
$('ul.mob---slides li').click(function(){
var inds=$(this).attr('inds');
$('ul.mob---slides li').removeClass('active');
$(this).addClass('active')
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
})
</script>
<script>
$('a.cstm-tbn').click(function(e){
e.preventDefault();
$('.product-form__buttons button.product-form__submit')[0].click();
})
function randomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
setInterval(function(){
$('.getviditors').text(randomInt(40,70))
},10000)
$('.getviditors').text(randomInt(40,70))
</script>
</body>
</html>
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Still doesnt work as a slider on phone
Code updated
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.custom-reviews.static .below-reviews {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.custom-reviews.static .reviewsItems {
width: calc(33% - 10px);
margin-bottom: 0;
}
@media (max-width: 767px) {
.custom-reviews.static .reviewsItems {
width: 100%;
}
}
h2.reviw_title {
margin: 8px 0;
}
.blw-data p {
margin: 0;
font-size: 14px;
line-height: 23px;
}
.blw-data i.fa.fa-star {
color: #01aa0a;
}
.rating--area {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-text {
text-align: right;
font-size: 16px;
color: #01aa0a;
}
span.customSlArrow {
width: 45px;
height: 45px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
.top-head h3 span {
color: #01aa0a;
}
.top-head h3 {
text-align: center;
font-size: 25px;
line-height: 27px;
}
span.customSlArrow.leftArrowCR {
transform: rotate(90deg);
}
span.customSlArrow.righttArrowCR {
transform: rotate(-90deg);
}
.revie-parent {
background: #fceadc;
padding: 17px 38px;
}
.footerReviews {
margin-top: 22px;
}
.blw-data {
background: #fff;
padding: 12px 13px;
}
.custom-reviews.static .slick-list {
margin: 0 -7px;
}
.top-head.centr {
justify-content: center;
}
@media (max-width: 767px) {
.top-head h3 {
text-align: center;
font-size: 18px;
line-height: 23px;
}
.custom-reviews.static .slick-list {
padding: 0 20% 0 0 !important;
}
span.customSlArrow {
display: none !important;
}
.below-reviews .slick-prev:before,
.below-reviews .slick-next:before {
color: #01aa0a;
}
}
</style>
</head>
<body>
<div class="custom-reviews static">
<div class="page-width">
<div class="revie-parent">
<div class="top-head centr">
<h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
</div>
<div class="below-reviews">
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
<div class="footerReviews">
<span>Review by <b>Emma</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
<div class="footerReviews">
<span>Review by <b>Floris</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Lisa</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
<div class="footerReviews">
<span>Review door <b>John</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Karen</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
<div class="footerReviews">
<span>Review door <b>Sophie</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.custom-reviews.static .below-reviews').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 9999999,
settings: "unslick"
}, {
breakpoint: 768,
settings: {
dots:false,
infinite: true,
speed: 300,
arrows: true,
slidesToShow: 1
}
}
]
});
$('.below-reviews.slidesslidr').slick({
dots:false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
}
]
});
$("body").on("click","span.customSlArrow.leftArrowCR", function(){
$('.below-reviews').slick('slickPrev');
});
$("body").on("click","span.customSlArrow.righttArrowCR", function(){
$('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
centerMode: true,
autoplay:true,
infinite: true,
speed: 300,
slidesToShow: 3,
centerPadding: '0px',
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '25px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '20px',
slidesToShow: 1
}
}
]
});
$("body").on("click",".slider.slider--mobile .slider__slide img", function(){
console.log("success");
});
function getimage(){
setTimeout(function(){
var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
$('ul.mob---slides li').removeClass('active');
$('ul.mob---slides li[inds='+inds+']').addClass('active')
},10)
}
$('ul.mob---slides li').click(function(){
var inds=$(this).attr('inds');
$('ul.mob---slides li').removeClass('active');
$(this).addClass('active')
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
})
</script>
<script>
$('a.cstm-tbn').click(function(e){
e.preventDefault();
$('.product-form__buttons button.product-form__submit')[0].click();
})
function randomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
setInterval(function(){
$('.getviditors').text(randomInt(40,70))
},10000)
$('.getviditors').text(randomInt(40,70))
</script>
</body>
</html>
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
On my phone it looks like this now...
Example website of how i want it: https://anna-lea.nl/products/casual-sweatshirt
Please remove css code that I provide at the first time and check again
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I already removed the CSS from before. And i just copied and pasted the last CSS you send me but it doesnt work...
Hi @Alllways
Sorry for the late reply, I must have tried the code directly on my side, and here is the final code updated
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.custom-reviews.static .below-reviews {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.custom-reviews.static .below-reviews .slick-arrow {
display: none !important; }
@media (min-width: 768px) {
.custom-reviews.static .reviewsItems {
width: calc(33% - 10px);
margin-bottom: 0;
}
}
h2.reviw_title {
margin: 8px 0;
}
.blw-data p {
margin: 0;
font-size: 14px;
line-height: 23px;
}
.blw-data i.fa.fa-star {
color: #01aa0a;
}
.rating--area {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-text {
text-align: right;
font-size: 16px;
color: #01aa0a;
}
span.customSlArrow {
width: 45px;
height: 45px;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
cursor: pointer;
}
.top-head h3 span {
color: #01aa0a;
}
.top-head h3 {
text-align: center;
font-size: 25px;
line-height: 27px;
}
span.customSlArrow.leftArrowCR {
transform: rotate(90deg);
}
span.customSlArrow.righttArrowCR {
transform: rotate(-90deg);
}
.revie-parent {
background: #fceadc;
padding: 17px 38px;
}
.footerReviews {
margin-top: 22px;
}
@media (max-width: 767px) {
.blw-data { margin: 0 10px; }
}
.blw-data {
background: #fff;
padding: 12px 13px;
}
@media (max-width: 767px) {
.blw-data { margin: 0 10px; }
}
.custom-reviews.static .slick-list {
margin: 0 -7px;
}
.top-head.centr {
justify-content: center;
}
@media (max-width: 767px) {
.top-head h3 {
text-align: center;
font-size: 18px;
line-height: 23px;
}
.custom-reviews.static .slick-list {
padding: 0 20% 0 0 !important;
}
span.customSlArrow {
display: none !important;
}
.below-reviews .slick-prev:before,
.below-reviews .slick-next:before {
color: #01aa0a;
}
}
</style>
</head>
<body>
<div class="custom-reviews static">
<div class="page-width">
<div class="revie-parent">
<div class="top-head centr">
<h3>Vertrouwd door <br> <span>350 000+</span> klanten.</h3>
</div>
<div class="below-reviews">
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Fantastisch! De aankomst van de tweede bestelling, ik wacht weer met spanning! Kwaliteitsproducten en uitstekende service. Ik beveel het zeker aan!</p>
<div class="footerReviews">
<span>Review by <b>Emma</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<h2 class="reviw_title"></h2>
<p>Absoluut perfecte maataanduiding en de pasvorm is fantastisch! Ik ben oprecht dankbaar. Bedankt voor de juiste levering!</p>
<div class="footerReviews">
<span>Review by <b>Floris</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft me echt verbaasd. Snelle verzending en hoogwaardige producten. Ik zal hier zeker weer winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Lisa</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop heeft een geweldige selectie en uitstekende klantenservice. Ik ben zeer tevreden met mijn aankoop.</p>
<div class="footerReviews">
<span>Review door <b>John</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Geweldige ervaring! Deze webshop heeft een uitstekende klantenservice en een ruime keuze aan producten. Mijn bestelling kwam snel aan en was in perfecte staat. Ik ben erg tevreden en zal zeker weer bij hen winkelen!</p>
<div class="footerReviews">
<span>Review door <b>Karen</b></span>
</div>
</div>
</div>
<div class="reviewsItems" style="" aria-hidden="true" tabindex="0">
<div class="blw-data">
<div class="rating--area">
<div class="ratnmbr">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="abtrate">Excellent</div>
</div>
<p>Deze webshop is mijn favoriet! De website is gebruiksvriendelijk, het assortiment is indrukwekkend en de verzending is altijd op tijd. Ik ben een loyale klant geworden en heb geen reden om ergens anders te winkelen.</p>
<div class="footerReviews">
<span>Review door <b>Sophie</b></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.custom-reviews.static .below-reviews').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 9999999,
settings: "unslick"
}, {
breakpoint: 768,
settings: {
dots:false,
infinite: true,
speed: 300,
arrows: true,
slidesToShow: 1
}
}
]
});
$('.below-reviews.slidesslidr').slick({
dots:false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
}
]
});
$("body").on("click","span.customSlArrow.leftArrowCR", function(){
$('.below-reviews').slick('slickPrev');
});
$("body").on("click","span.customSlArrow.righttArrowCR", function(){
$('.below-reviews').slick('slickNext');
});
$('.responsive').slick({
centerMode: true,
autoplay:true,
infinite: true,
speed: 300,
slidesToShow: 3,
centerPadding: '0px',
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '25px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '20px',
slidesToShow: 1
}
}
]
});
$("body").on("click",".slider.slider--mobile .slider__slide img", function(){
console.log("success");
});
function getimage(){
setTimeout(function(){
var inds=$('.topsldis li').find('button[aria-current="true"]').parent().attr('inds');
$('ul.mob---slides li').removeClass('active');
$('ul.mob---slides li[inds='+inds+']').addClass('active')
},10)
}
$('ul.mob---slides li').click(function(){
var inds=$(this).attr('inds');
$('ul.mob---slides li').removeClass('active');
$(this).addClass('active')
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+']')[0].click();
$('.product__media-wrapper .slider-mobile-gutter.topsldis li[inds='+inds+'] button').trigger('click')
})
</script>
</body>
</html>
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
No worries! I am grateful for you help!
It still does not work for me...
Im thinking, does it have to do with the fact that i need to update my theme? or should that have no effect?
Right now I am using: Sense 11.0.0
I'm tried on my Sense 10.0.0. Could I request access to your store so I can check and help you to make it works?
- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024