Move pagination under carousel

[TrendBlend]

Hello, my swiper pagination stays above my carousel in the cart popup i’m trying to create for my volume bundle offer. URL: https://interiorglows.com/products/glowcurtain-400-led-lights

It currently shows like this:

and I want the pagination to be under the item information.

It shows like that when you add multiple products to cart at the same time.

[Arif_Shopidevs]

You can add this css to show the pagginate in bottom

#popup-item-info .swiper-pagination {
    position: absolute!important;
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App
Hi @TrendBlend Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag

And here is result

Hope my solution will help you resolve the issue.Best regards,
Richard | PageFly

[TrendBlend]

Hello @PageFly-Richard it looks like this with those changes: CANNOT UPLOAD IMAGE IDK WHY I will send the image in a respond

Is it not easier to edit this using the javascript that creates the carousel or css, I tried doing so but I did not manage to solve the issue. Important part of Code for creating carousel:

// Create the swiper container if more than one item
    const swiperContainer = document.createElement('div');
    swiperContainer.classList.add('swiper-container');

    const swiperWrapper = document.createElement('div');
    swiperWrapper.classList.add('swiper-wrapper');

    // Loop through items and add them to the swiper wrapper
    updatedItems.forEach(function(item) {
      console.log("Fetching details for item:", item);

      // Fetch the variant details using the variant ID from itemsToAdd
      getVariantById(item.id).then(variant => {
        console.log("Fetched variant:", variant);

        if (!variant) {
          console.error(`No variant found for ID: ${item.id}`);
          return;
        }

        console.log(variant);
        // Extract product details
        const productTitle = variant.name;
        const productImage = variant.featured_image ? variant.featured_image.src : 'default_image_url';

        let comparePrice = (variant.compare_at_price / 100).toFixed(2);
        const quantity = item.quantity;

        // Create HTML for this item to add to the swiper
        const itemElement = document.createElement('div');
        itemElement.classList.add('swiper-slide'); // Each product gets its own slide
        itemElement.classList.add('cart-popup-slide');
        let productPrice;
                  if (discount == 0) {
           productPrice = (variant.price / 100).toFixed(2);     
} else {
                          if (comparePrice == 0) {
          comparePrice = (variant.price / 100).toFixed(2);
        }
         productPrice = ((variant.price / 100) - (discount*((variant.price).toFixed(2)/100))).toFixed(2);
}
        
        if (comparePrice != 0) {
        itemElement.innerHTML = `
          
            
            

              #### ${productTitle}
              

Quantity: ${quantity}

              

${currencySymbol}${comparePrice} ${currencySymbol}${productPrice}

            

          

        `;
        } else {

          itemElement.innerHTML = `
          
            
            

              #### ${productTitle}
              

Quantity: ${quantity}

              

${currencySymbol}${productPrice}

            

          

        `;
        }

        // Add each item element to the swiper wrapper (this will be in separate slides)
        swiperWrapper.appendChild(itemElement);

        console.log("swiperWrapper after appending item:", swiperWrapper);

        // Append the swiper wrapper inside the swiper container
        swiperContainer.appendChild(swiperWrapper);

        // Append navigation buttons for the swiper
        const swiperNavPrev = document.createElement('div');
        swiperNavPrev.classList.add('swiper-button-prev');
        swiperContainer.appendChild(swiperNavPrev);

        const swiperNavNext = document.createElement('div');
        swiperNavNext.classList.add('swiper-button-next');
        swiperContainer.appendChild(swiperNavNext);

                        // Append pagination (dots navigation)
        const swiperPagination = document.createElement('div');
        swiperPagination.classList.add('swiper-pagination');
        swiperContainer.appendChild(swiperPagination);

        // Add the swiper container to the popup content
        popupContent.appendChild(swiperContainer);

        
const swiper = new Swiper(swiperContainer, {
  slidesPerView: 1,   // Show 1 product at a time by default
  centeredSlides: true,  // Center the active slide
  loop: true,         // Enable looping of slides
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,  // 1 product on mobile
      spaceBetween: 10,  // Reduced space on mobile
    },
    750: {
      slidesPerView: 1,  // 1 product on tablet
      spaceBetween: 10,  // Keep some space
    },
    1024: {
      slidesPerView: 1,  // 1 product on desktop
      spaceBetween: 20,  // Normal space on desktop
    },
  },
});

[TrendBlend]

[TrendBlend]

Hello @PageFly-Richard I’m still struggling with this and made a new, clearer threat concerning the issue. If you have time and want to check it out for me: Swiper pagination shows wrong - Shopify Community