How to add Sold Out Products to New Page

[tuanphan]

By default, you can create a new Store Page, then move Sold Out products from current Store Page to new Store Page.

But in case you don’t want to do this, you can follow these steps to add sold out products to a page.

#1. First, edit Page > Add a People Section

#2. Choose Simple List

#3. You can enable Title, Image

#4. Next, find Store Page URL

#5. Next, hover Page (mentioned in #1) > Click Gear icon

#6. Click Advanced > Paste this code

<script>
document.addEventListener('DOMContentLoaded', function() {
    const STORE_PATH = '/store';
    const userItemsList = document.querySelector('.user-items-list-item-container');
    
    if (!userItemsList) return;

    function fetchStoreProducts() {
        fetch(STORE_PATH + '?format=json')
            .then(response => response.json())
            .then(data => {
                if (data && data.items) {
                    syncProductsWithList(data.items);
                }
            })
            .catch(error => {
                console.log('Could not fetch store data:', error);
            });
    }

    function checkIfSoldOut(product) {
        if (!product.variants) return false;
        
        return product.variants.every(variant => {
            if (variant.unlimited) return false;
            return variant.qtyInStock === 0;
        });
    }

    function createNewListItem(product) {
        const isSoldOut = checkIfSoldOut(product);
        const productUrl = `${STORE_PATH}/p/${product.urlId}`;
        
        const listItem = document.createElement('li');
        listItem.className = 'list-item list-item-basic-animation preFade fadeIn';
        listItem.style.padding = '10%';
        listItem.style.transitionTimingFunction = 'ease';
        listItem.style.transitionDuration = '1.5s';
        listItem.setAttribute('data-is-card-enabled', 'true');
        
        if (isSoldOut) {
            listItem.classList.add('sold-out');
        }
        
        listItem.innerHTML = `
            <div class="list-item-media" style="margin-bottom: 10%; width: 100%;">
                <div class="list-item-media-inner preFade fadeIn" data-aspect-ratio="original" data-animation-role="image">
                    <img alt="${product.title || ''}" 
                         src="${product.assetUrl}"                          class="list-image" 
                         style="display:block;object-position: 50% 50%;" 
                         loading="lazy" 
                         decoding="async">
                </div>
            </div>
            <div class="list-item-content">
                <div class="list-item-content__text-wrapper">
                    <h2 class="list-item-content__title preFade fadeIn" style="max-width: 100%;">
                        <a href="${productUrl}" style="text-decoration: none; color: inherit;">${product.title}</a>
                    </h2>
                </div>
            </div>
        `;
        
        return listItem;
    }

    function syncProductsWithList(products) {
        const soldOutProducts = products.filter(product => checkIfSoldOut(product));
        const existingItems = userItemsList.querySelectorAll('.list-item');
        
        soldOutProducts.forEach((product, index) => {
            if (index < existingItems.length) {
                const listItem = existingItems[index];
                const imgElement = listItem.querySelector('.list-image');
                const titleElement = listItem.querySelector('.list-item-content__title');
                const productUrl = `/store/p/${product.urlId}`;
                
                if (imgElement && product.assetUrl) {
                    imgElement.src = product.assetUrl;
                    imgElement.alt = product.title || '';
                }
                
                if (titleElement && product.title) {
                    titleElement.innerHTML = `<a href="${productUrl}" style="text-decoration: none; color: inherit;">${product.title}</a>`;
                }
                
                listItem.classList.add('sold-out');
                listItem.style.display = 'block';
            } else {
                const newItem = createNewListItem(product);
                userItemsList.appendChild(newItem);
            }
        });
        
        if (soldOutProducts.length < existingItems.length) {
            for (let i = soldOutProducts.length; i < existingItems.length; i++) {
                existingItems[i].style.display = 'none';
            }
        }
    }



    fetchStoreProducts();
});
</script>

#7. Remember to update Store Page URL

#8. Result