Custom liquid section

Shopify Discussion
1

hi there i have build a custom liquid section in my store which have static image on left and product slider on right but the issue is products in slider flicks and vanish when i refresh the page sharing the code m using can anyone please check whats the issue in code

<div class="products-slider-section" style="position: relative; padding: 10px;">
  
  <!-- Center-Top Heading -->
  <div style="text-align: center; padding-bottom: 10px;">
    <h2 style="font-family: sans-serif; font-size: 26px; font-weight: bold; color: black; margin: 0;">
      Chinese Sauces
    </h2>
  </div>

  <!-- Section Content (Static Image and Product Slider) -->
  <div class="content-wrapper" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;">
    
    <!-- Static Image Container (33.33% width) -->
    <div class="static-image-container" style="flex: 0 0 33.33%; padding-right: 10px;">
      <a href="https://sundip1.myshopify.com/collections/https-admin-shopify-com-store-sundip1-collections-chinese-sauce" title="Click to visit">
        <img src="https://cdn.shopify.com/s/files/1/0909/7229/1354/files/305816269_5405807899468614_8019581911003082720_n_dd647b6f-bad3-4e7b-8efc-94929c7fd1f2.jpg?v=1736331779" 
             alt="Static Image" 
             style="width: 100%; height: 400px; border-radius: 10px; object-fit: cover;">
      </a>
    </div>

    <!-- Product Slider Container (66.66% width) -->
    <div class="product-slider dawn-product-slider" style="flex: 0 0 66.66%; padding-left: 10px; padding-top: 10px;">
      <div class="carousel" data-flickity='{ "wrapAround": true, "autoPlay": true, "pageDots": false, "cellAlign": "center", "groupCells": "true" }'>
        {% for product in collections['chinese-sauce'].products limit: 10 %}
        <div class="carousel-cell" style="text-align: center; max-width: 270px; margin: auto;">
          <a href="{{ product.url }}" title="{{ product.title }}">
            <img src="{{ product.featured_image | img_url: '320x300' }}" 
                 alt="{{ product.title }}" 
                 style="width: 100%; height: 300px; border-radius: 5px; object-fit: cover;">
          </a>
          <h3 style="font-size: 16px; text-align: center; margin-top: 10px;">{{ product.title }}</h3>
          <p style="text-align: center; color: #666;">{{ product.price | money }}</p>
        </div>
        {% else %}
          <p style="text-align: center; color: red;">No products available in this collection.</p>
        {% endfor %}
      </div>
    </div>

  </div>
</div>

<!-- Flickity Styles -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<!-- Flickity Script -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var elem = document.querySelector('.dawn-product-slider .carousel');
    if (elem) {
      new Flickity(elem, {
        contain: true,
        autoPlay: true,
        pageDots: false, // Disable the dots
        cellAlign: 'center', // Center align the cells
        groupCells: true, // Group cells together for better alignment
        prevNextButtons: false, // Optional: Hide the prev/next buttons
        draggable: true, // Make it draggable
        wrapAround: true // Enable wrap around for infinite scroll
      });
    }
  });
</script>

<!-- Mobile Responsive Styles -->
<style>
  /* Mobile Styles */
  @media (max-width: 768px) {
    .content-wrapper {
      flex-direction: column; /* Stack content vertically on mobile */
      align-items: center; /* Center align all items */
    }

    /* Static Image on Mobile */
    .static-image-container img {
      width: 100%; /* Full width */
      height: auto; /* Maintain aspect ratio */
      object-fit: cover; /* Maintain image ratio */
      margin-bottom: 20px; /* Add space below the image */
    }

    /* Product Slider */
    .product-slider {
      width: 100%; /* Ensure slider takes full width */
    }

    .carousel {
      display: flex;
      flex-direction: column;
    }

    .carousel-cell {
      max-width: 100%; /* Full width for mobile */
      margin: 10px 0; /* Spacing between items */
    }

    /* Mobile Flickity Settings */
    .carousel {
      display: flex;
      flex-direction: column; /* Display items in a column */
      gap: 15px;
    }

    /* Mobile: Ensure only one product card per screen */
    .carousel-cell img {
      width: 100%; /* Set to full width of the container */
      height: auto; /* Maintain aspect ratio */
      object-fit: cover;
    }

    /* Increase product card size on mobile */
    .carousel-cell {
      width: 100%; /* Ensure each card takes full width */
      margin: 0; /* Remove any additional margins */
    }

    /* Customizing Flickity for 1 slide per screen */
    .carousel {
      display: grid;
      grid-template-columns: 1fr; /* One item per row */
      gap: 0px;
    }
  }
</style>
2

Hi @Nabeelshakil

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.flickity-viewport {
    overflow: unset !important;
}

Result:

websensepro_0-1736491428028.png
websensepro_0-1736491428028.png1366×603 439 KB

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

3

thanks for your solution but now the slider is overlapping the image on left

4

@Nabeelshakil

.carousel.flickity-enabled {
    overflow: hidden !important;
}
.flickity-viewport {
    overflow: unset !important;
}

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