reeceballano

<div class="custom-product-lists">
    {% if collections['custom-products'].products.size > 0 %}
        {% for product in collections['custom-products'].products %}
            {% render 'custom-product-card', product: product %}
        {% endfor %}
    {% else %}
        <h1>No available products!</h1>
    {% endif %}

</div>

reeceballano

{% assign swatches = product.metafields.custom.swatches.value %}
{% assign materials = product.metafields.custom.materials.value %}

<div class="custom-product-card">
    <a href="{{ product.url }}">
        <img class="custom-product-image" width="auto" height="auto" loading="lazy" />
    </a>
    {% form 'product', product %}
        <input type="hidden" name="id" value="{{ product.variants.first.id }}">

reeceballano

const   sliderBtn = document.querySelectorAll('.slider__button'),
        sliderHolder = document.querySelector('.slider__holder'),
        slides = document.querySelectorAll('[data-bstr-slide] .slide');
let     slideWidth = Number(sliderHolder.offsetWidth),
        currentSlide = 0,
        currentSlideWidth = slideWidth;

for(const[i,s] of sliderBtn.entries()) {
    if(s.getAttribute('data-bstr-slider-button') == '+') {
        s.addEventListener('click', () => {

reeceballano

/**
* Accessing DOM created elements
* RBallano
* @params el = classname or id
*/

const findElement = (el) => {
    const check = setInterval(() => {
        const element = document.querySelector(`${el}`);
        if(element !== null) {