how can i change this custom section collection into this

[Manishuk01]

how can i change this custom section collection into this

can anyone edit the below 

my website - https://g8tiyz-ui.myshopify.com/?_ab=0&_fd=0&_sc=1

reference link - https://www.posterized.in/

 

<section class="all-collections">
  <h1>Featured Collections</h1>
  <div class="collection-container">
    <div class="all-collections-wrapper">
      {% for collection in collections %}
        <div class="collection-card">
          <img
            width="300"
            height="300"
            loading="lazy"
            src="{{ collection.featured_image | image_url}}"
          >
          <h3>{{- collection.title | link_to: collection.url }}</h3>
        </div>
      {% endfor %}
    </div>

    {% comment %}
      <div class="scroll-buttons">
        <button class="scroll-left">&lt;</button>
        <button class="scroll-right">&gt;</button>
      </div>
    {% endcomment %}
  </div>
</section>

<style>
  .all-collections {
    background: {{ section.settings.background }}
    ;
    color: {{ section.settings.text_color }}
    ;
    padding: 10px;
  }

  .collection-container {
    position: relative;
    overflow-x: scroll;
  }

  .all-collections-wrapper {
    display: flex;
    transition: transform 0.3s ease; /* Add smooth transition effect */
  }

  .collection-card {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .collection-card h3 a {
    color: black;
    text-decoration: none
  }

  .collection-card a:hover {
    text-decoration: underline;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const wrapper = document.querySelector('.all-collections-wrapper');
    const scrollLeftButton = document.querySelector('.scroll-left');
    const scrollRightButton = document.querySelector('.scroll-right');

    scrollLeftButton.addEventListener('click', function () {
      wrapper.scrollBy({
        left: -300, // Adjust based on your card width
        behavior: 'smooth',
      });
    });

    scrollRightButton.addEventListener('click', function () {
      wrapper.scrollBy({
        left: 300, // Adjust based on your card width
        behavior: 'smooth',
      });
    });
  });
</script>

{% schema %}
{
  "name": "all-collections",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#F4F4F4"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#000000"
    }
  ],
  "presets": [
    {
      "name": "all-collections"
    }
  ]
}
{% endschema %}

[Dan-From-Ryviu]

By default, your theme has the option to add a collection list. Please add more collections and set it to display 3 columns on desktop. If you customized the code for this section, please revert it to the original version.

[Manishuk01]

this is not default section  i code this because I customized default collection already 

and i am not able to add default collection section on default setting 

 

[topnewyork]

@Manishuk01 

If I recommend a tutorial, would you want to watch it?

[Manishuk01]

yes please share

and also i am currently watching this video - https://youtu.be/6IAVHWvcC5A?si=LfmyDqosLZ-qp9dZ

[topnewyork]

@Manishuk01 

Watch this video, I hope it will solve your issue.

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[topnewyork]

@Manishuk01 

Go to the appropriate Liquid file (collection.liquid or a custom section file).

Add the following code:

{% if collection %}
<div class="collection-banner">
<h2>{{ collection.title }}</h2>
{% if collection.image %}
<img src="{{ collection.image | img_url: 'large' }}" alt="{{ collection.title }}">
{% endif %}
</div>
{% else %}
<p>Collection not found.</p>
{% endif %}