How can I modify my custom image slider code to select images from my files?

Store Design
, ,

Topic summary

A user needed to modify a custom image slider that originally only accepted product selections and automatically used product images. They wanted the ability to upload custom images directly from their files and manually link them to products.

Original Problem:

  • The slider code only allowed product selection via "type": "product" in the schema
  • Product images were automatically pulled using all_products[block.settings.product_item]
  • No option existed for direct image uploads

Solution Found:
The original poster resolved the issue by modifying the schema blocks section:

  • Changed block type from "product" to "image"
  • Replaced the product selector with "type": "image_picker" and "id": "custom_image"
  • Updated the liquid template to reference block.settings.custom_image instead of product data
  • This allows direct image uploads while maintaining the slider’s responsive layout and navigation settings

Additional Resources:

  • Another user asked where to implement this code for a similar Dawn theme carousel
  • A community member shared a video tutorial demonstrating how to upload different images while linking them to products or collections
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I have the code for a custom image slider. Unfortunately, you can only insert products there and it then uses the product image. I would like to be able to upload an image directly and then write a link to the corresponding product myself. In the following picture you can see how the slider looks like.

Does anyone have any idea how I should change the code so that I can select an image from my files and not a product?

Desktop:

Roxolot_0-1699030755074.png
Roxolot_0-1699030755074.png1318×496 337 KB

I have the code for a custom image slider. Unfortunately, you can only insert products there and it then uses the product image. I would like to be able to upload an image directly and then write a link to the corresponding product myself. In the following picture you can see how the slider looks like.

Desktop:

  

    ## {{ section.settings.title | escape }}
  

   

      {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product_item] %}
      

         
            
         
      

      {% endfor %}
   

  

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
  @media only screen and ( min-width: 1201px ) {
    {% if nav_range == 2 %}
    .dawn-product-slider .carousel-cell {
        width: calc(49% - 10px);
    }
    {% elsif nav_range == 3 %}
    .dawn-product-slider .carousel-cell {
      width: calc(32% - 10px);
    }
    {% elsif nav_range == 4 %}
    .dawn-product-slider .carousel-cell {
      width: calc(24% - 10px);
     }
    {% endif %}
  }
  .flickity-page-dots .dot {
    background: {{ section.settings.navigation_color }};
  }
  .flickity-button-icon {
    color: {{ section.settings.navigation_color }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Images Slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of images in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Images Slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ] ,
  "blocks": [
    {
        "type": "card",
        "name": "Image card",
        "settings": [
          {
            "type": "product",
            "id": "product_item",
            "label": "Choose the product you want to display"
          }
      ]
    }
  ] ,
  "presets": [
    {
      "name": "Image slider",
      "category":"Custom"
    }
  ]
}
{% endschema %}
2

I found a solution for my problem. This is one way of adding an image slider.


  

    ## 
      {{ section.settings.title | escape }}
    
  

  

    {% for block in section.blocks %}
    

      
    

    {% endfor %}
  

  

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and (min-width: 1201px) {
  {% if nav_range == 2 %}
  .dawn-product-slider .carousel-cell {
    width: calc(49% - 10px);
  }
  {% elsif nav_range == 3 %}
  .dawn-product-slider .carousel-cell {
    width: calc(32% - 10px);
  }
  {% elsif nav_range == 4 %}
  .dawn-product-slider .carousel-cell {
    width: calc(24% - 10px);
  }
  {% endif %}
}
.flickity-page-dots .dot {
  background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
  color: {{ section.settings.navigation_color }};
}
{% endstyle %}

{% schema %}
{
  "name": "Images Slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of images in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Images Slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Upload an Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image slider",
      "category": "Custom"
    }
  ]
}
{% endschema %}
1 Like
3

Where do we add this code? I have a similar problem and want to add a image carousel to the product page in Dawn theme

4

Here is a way according to your question. You can upload different images but connect any product or collection to it.