<!-- Rating Section -->
<div class="rating-section">
<div class="stars">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<div class="rating-text">
Rated <strong>4.9/5</strong> by <strong>700+</strong>
<span class="badge">satisfied customers</span>
</div>
</div>

<!-- Styles -->
<style>
.rating-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin: 20px auto; /* Центрирование по горизонтали */
max-width: 90%; /* Адаптация под мобильные */
padding: 10px;
box-sizing: border-box;
}

.stars {
display: flex;
justify-content: center;
margin-bottom: 8px;
}

.star {
font-size: 22px;
color: #FFC107;
margin: 0 2px;
}

.rating-text {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}

.rating-text strong {
font-weight: bold;
margin: 0 4px;
}

.badge {
background-color: #FFC107;
color: #000;
font-size: 14px;
font-weight: bold;
padding: 4px 8px;
border-radius: 12px;
margin-left: 6px;
}
</style>

1) Перейдите в редактор темы - (Online Store - Customize)
2) Выберите вверху - (Product Page)
3) В открытой странице в разделе Template нажмите + и добавьте секцию с названием "Custom Liquid", дальше нажав на добавленный блок вставьте код указанный выше и нажмите "Save".

<div class="testimonial-carousel">
<div class="testimonial-card">
<div class="testimonial-profile">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" alt="Jenna R." />
</div>
<div class="testimonial-content">
<div class="testimonial-name-stars">
<span class="testimonial-name">Jenna R.</span>
<span class="testimonial-stars">*****</span>
</div>
<p class="testimonial-text">I really love this, arrived in 2 days exactly what I needed!</p>
</div>
</div>

<div class="testimonial-card">
<div class="testimonial-profile">
<img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" alt="Samantha L." />
</div>
<div class="testimonial-content">
<div class="testimonial-name-stars">
<span class="testimonial-name">Samantha L.</span>
<span class="testimonial-stars">*****</span>
</div>
<p class="testimonial-text">Amazing quality! Looks exactly like the photos!</p>
</div>
</div>

<div class="testimonial-card">
<div class="testimonial-profile">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&h=80&q=80" alt="Emily G." />
</div>
<div class="testimonial-content">
<div class="testimonial-name-stars">
<span class="testimonial-name">Emily G.</span>
<span class="testimonial-stars">*****</span>
</div>
<p class="testimonial-text">Fast shipping and super cute. Will buy again!</p>
</div>
</div>
</div>

<style>
.testimonial-carousel {
display: flex;
overflow-x: auto;
gap: 12px;
padding: 8px 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.testimonial-carousel::-webkit-scrollbar {
display: none;
}

.testimonial-card {
flex: 0 0 auto;
display: flex;
align-items: center;
background-color: #fff7e6;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
min-width: 250px;
scroll-snap-align: start;
font-family: sans-serif;
}

.testimonial-profile img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #f5c66e;
object-fit: cover;
}

.testimonial-content {
margin-left: 12px;
}

.testimonial-name-stars {
display: flex;
align-items: center;
margin-bottom: 4px;
}

.testimonial-name {
font-weight: 600;
font-size: 14px;
margin-right: 8px;
}

.testimonial-stars {
background: #fca311;
color: white;
padding: 1px 6px;
border-radius: 6px;
font-size: 12px;
}

.testimonial-text {
font-size: 13px;
color: #333;
line-height: 1.3;
margin: 0;
}
</style>

1. Откройте редактор темы: Online Store → Customize
2. В верхнем меню выберите: Product Page
3. На открывшейся странице найдите раздел Template, нажмите "+", добавьте секцию Custom Liquid
4. В появившемся блоке вставьте скопированный код
5. Нажмите Save — готово!