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

Store Design
, ,
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 %}
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.