How can I turn my quote reviews into a carousel display?

Store Design
, , ,

Topic summary

Converting a testimonials/quote list into a carousel in a Shopify (Dawn theme) section.

  • The author shares their current Liquid section code for “Testimonials,” which loops through blocks and outputs quotes and authors inside a .quotes-slider container.
  • Two screenshots illustrate the current list layout versus the desired carousel layout; these visuals are central to understanding the intended design change.

Latest update and guidance:

  • A responder states that Dawn does not include a built-in quote carousel feature; achieving the desired look requires custom CSS and jQuery (JavaScript library for DOM manipulation).
  • The original poster asks which specific CSS they should use, indicating they need concrete implementation steps.

Decisions/outcomes:

  • No concrete code solution was provided in the thread yet. No theme setting or built-in option was identified.

Status:

  • Unresolved/ongoing. Action needed: add custom CSS and jQuery to transform the .quotes-slider into a functional carousel. The store URL and password were provided for context and review.
Summarized with AI on January 21. AI used: gpt-5.
1

Hi all !

I need your help please, I added quote reviews and it display like a list and I want it to look like a carrousel, how can I edit the code to do it ?

I used that code:

{% if section.settings.title != blank %}

{{ section.settings.title | escape }}

{% endif %} {% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{% include 'icon-quote' %} {% if block.settings.quote != blank %}
{{ block.settings.quote }}
{% endif %} {% if block.settings.author != blank %} {{ block.settings.author | escape }} {% endif %}
{% endfor %}
{% endif %}

{% if section.blocks.size == 0 %}
{% include ‘no-blocks’ %}
{% endif %}

{% schema %}
{
“name”: “Testimonials”,
“class”: “index-section”,
“max_blocks”: 9,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Testimonials”
}
],
“blocks”: [
{
“type”: “quote”,
“name”: “Testimonial”,
“settings”: [
{
“type”: “richtext”,
“id”: “quote”,
“label”: “Text”,
“default”: “

Add customer reviews and testimonials to showcase your store’s happy customers.

”
},
{
“type”: “text”,
“id”: “author”,
“label”: “Author”,
“default”: “Author’s name”
}
]
}
],
“presets”: [
{
“name”: “Testimonials”,
“category”: “Text”,
“blocks”: [
{
“type”: “quote”
},
{
“type”: “quote”
},
{
“type”: “quote”
}
]
}
]
}
{% endschema %}

It looks like this

Capture d’écran 2023-08-22 à 10.05.03.png
Capture d’écran 2023-08-22 à 10.05.03.png2004×1134 134 KB

And I want it to look like this

Capture d’écran 2023-08-22 à 10.04.43.png
Capture d’écran 2023-08-22 à 10.04.43.png2016×930 45.8 KB

Store url :https://prettypleaseatelier.com

password: Naomi

Thank you for your help

2

You must add custom CSS and jQuery code to make it look like your request. Default option of Dawn theme does not have a quote feature.

1 Like
3

@Dan-From-Ryviu Thank you for your reply. I don’t know which CSS to use …