How to Make Custom Slideshow in Shopify Dawn Theme

Step 1: Access the Theme Code

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find your active theme (e.g., Dawn), click on Actions, then Edit code.

Step 2: Create a New Section

1. In the Sections directory, click Add a new section.
2. Name the section custom-slideshow and click Create section.

Step 3: Add Code to the New Section

Add the following code to your custom-slideshow.liquid file:

{% schema %}
{
  "name": "Custom Slideshow",
  "settings": [
    {
      "type": "number",
      "id": "slide_duration",
      "label": "Slide Duration (seconds)",
      "default": 5,
      "min": 1,
      "max": 60
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Slide Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Slide Title",
          "default": "Slide Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Slide Description",
          "default": "Slide Description"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Slide Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Slideshow",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<section class="custom-slideshow-section">
  <div class="slideshow-container">
    {% for block in section.blocks %}
      <div class="slide">
        <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.title }}">
        <div class="slide-content">
          <h2>{{ block.settings.title }}</h2>
          <p>{{ block.settings.description }}</p>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}" class="slide-link">Learn More</a>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</section>

<style>
.custom-slideshow-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.slideshow-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide {
  display: none;
  position: relative;
}

.slide img {
  width: 100%;
  display: block;
}

.slide-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.slide-content h2 {
  margin: 0;
  font-size: 1.5em;
}

.slide-content p {
  margin: 5px 0 0;
}

.slide-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 5px;
}

.slide-link:hover {
  background-color: #eee;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.custom-slideshow-section .slide');
  var slideIndex = 0;
  var slideDuration = {{ section.settings.slide_duration | default: 5 }} * 1000;

  function showSlides() {
    slides.forEach(function(slide) {
      slide.style.display = 'none';
    });
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = 'block';
    setTimeout(showSlides, slideDuration);
  }

  showSlides();
});
</script>

Step 4: Add the Section to a Template

1. In the Templates directory, open the template where you want to include the custom slideshow section (e.g., index.json for the homepage or page.json for a custom page).
2. Add the custom-slideshow section to the desired location within the template.

Example for index.json:

{
  "name": "Home",
  "sections": {
    "main": {
      "type": "main-collection",
      "settings": {}
    },
    "custom-slideshow": {
      "type": "custom-slideshow"
    }
  },
  "order": [
    "main",
    "custom-slideshow"
  ]
}

Step 5: Configure the Section in the Theme Customizer

1. Go back to your Shopify admin panel.
2. Navigate to Online Store > Themes, and click on Customize for your theme.
3. In the theme customizer, add the new Custom Slideshow section to your desired page (e.g., the homepage).
4. Add slides by clicking Add content and configuring each block with the image, title, description, and link.
5. Save your changes.

Summary

By following these steps, you can create a custom slideshow section in the Shopify Dawn theme:

1. Create a new section for the slideshow.
2. Add Liquid, HTML, and CSS to structure and style the slideshow.
3. Add JavaScript for the slideshow functionality.
4. Include the section in a template and configure it in the theme customizer.

This approach allows you to create a dynamic and visually appealing slideshow for your Shopify store.