Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I'm currently customizing the Dawn 9.0.0 theme for my Shopify store and I'm trying to add a custom section for an image carousel. I've created a new .liquid
file in the "Sections" directory and named it custom-carousel.liquid
. The code in this file includes a schema for a new section, as well as CSS and JavaScript.
Here is the code I've added to custom-carousel.liquid
:
{% schema %} { "name": "Custom Carousel", "settings": [], "blocks": [ { "type": "carousel-image", "name": "Carousel Image", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "url", "id": "url", "label": "URL" } ] } ] } {% endschema %} {% style %} .carousel-image { display: flex; overflow-x: scroll; padding-left: 20px; /* adjust as needed */ } .carousel-image img { flex: 0 0 auto; margin-right: 10px; /* adjust as needed */ } .carousel-image img.expanded { transform: scale(1.1); /* adjust as needed */ transition: transform 0.3s ease-in-out; } {% endstyle %} {% javascript %} $('.carousel-image img').on('click', function() { $(this).addClass('expanded'); }); {% endjavascript %} {% for block in section.blocks %} <a href="{{ block.settings.url }}" class="carousel-image"> <img src="{{ block.settings.image | img_url: 'master' }}" alt=""> </a> {% endfor %}
After saving the file and returning to the Theme Editor, I tried to add the "Custom Carousel" section to my landing page, but it's not appearing in the list of available sections. I've verified that I saved the .liquid
file and that I'm working in the correct theme.
I'm aware that custom sections can only be added to the homepage in the Dawn theme by default. However, I'm trying to add this section to the landing page. Is there something I'm missing that would allow me to add custom sections to other pages in the Dawn theme? Or is there another reason why my custom section isn't appearing in the list?
Any help would be greatly appreciated!
Hey, I have the exact same issue right now. Did you manage to solve this problem?
Kind regards!
For everyone experiencing the same issue: My problem was that I didn't add a preset to my schema block! I added this:
"presets": [
{
"name": "Add your name here",
"category": "Custom"
}
]
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025