I want to add a button to the Feature collection to go to the collection

[candice18]

I want to add a button that sits underneath the products and redirects to the featured collection.

I created a template based off of the original section code.

•  I added a checkbox to enable and disable the button
• a button that links

See desired results:

The problem is the section I created is not showing in the list in the webeditor.

Here is my code:

{%- liquid 
  assign stacked_products = false
  if section.settings.product_as_stacked
    assign stacked_products = true
  endif
  assign visibleItems = 4
  if section.settings.slider_full_width
    assign visibleItems = 5
    assign stacked_products = false
  endif
  if section.settings.over_image_product
    assign stacked_products = false
  endif
  assign collection = section.settings.collection
  assign collectionImage = collection.featured_image
  if section.settings.collection_image != blank
    assign collectionImage = section.settings.collection_image
  endif 
  if settings.product_image_style == 'landscape'
    assign productImageRatio = 75
  elsif settings.product_image_style == 'square'
    assign productImageRatio = 100
  elsif settings.product_image_style == 'portrait'
    assign productImageRatio = 125
  endif
-%}
<div class="{% if section.settings.slider_full_width %}featured-collection-fullwidth{% else %}{% if settings.layout_width == 'boxed' %}container{% else %}container-fluid{% endif %}{% endif %} featured-collection-products-stacked-{{ stacked_products }} yv-new-arrival-wrapper" style="--layoutRadius:{% if settings.layout_style == 'rounded' %}20px{% else %}0px{% endif %}">
  <div class="row {% unless stacked_products %}no-gutters align-items-center{% endunless %}">
    <div class="col-12 {% if section.settings.slider_full_width %}col-sm-12 col-md-12 col-lg-12{% elsif stacked_products %}col-sm-6 col-md-6 col-lg-6{% else %}col-sm-6 col-md-6 col-lg-5{% endif %}">
      <div class="yv-new-arrival-imgbox">
        <{% if stacked_products %}a href="{{ collection.url }}"{% else %}div{% endif %} class="small-trigger-element">
          {%- if collectionImage -%}
            {%- render 'lazy-image' image: collectionImage, width: '700x' -%}
          {%- else -%}
            {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
          <div class="yv-new-arriavl-content">
            <h4 class="featured-collection-title {% if section.settings.slider_full_width %}h2{% else %}h4{% endif %}" {% if settings.enable_animation %}data-aos="fade-up"{% endif %}>
              {%- liquid 
                if section.settings.collection_heading != blank
                  echo section.settings.collection_heading
                elsif collection != blank
                  echo collection.title
                endif 
              -%}
            </h4>
            {% unless section.settings.hide_description %}
              <p class="text-large featured-collection-desc" {% if settings.enable_animation %}data-aos="fade-up" data-aos-delay="100"{% endif %}>
                {%- liquid 
                  if section.settings.collection_desc != blank
                    echo section.settings.collection_desc
                  elsif collection != blank
                    echo collection.description | strip_html | truncatewords: 20
                  endif 
                -%}
              </p>
            {% endunless %}
          </div>
        </{% if stacked_products %}a{% else %}div{% endif %}>
      </div>
    </div>
    <div class="col-12 {% if section.settings.slider_full_width %}col-sm-12 col-md-12 col-lg-12{% elsif stacked_products %}col-sm-6 col-md-6 col-lg-6{% else %}col-sm-6 col-md-6 col-lg-7{% endif %}">
      {% if section.settings.slider_full_width %}
      <div class="{% if settings.layout_width == 'boxed' %}container{% else %}container-fluid{% endif %}">
      {% endif %} 
      {% liquid 
        assign autoAdaptWidth = false
        if section.settings.slider_full_width
          if collection.products_count < visibleItems and collection.products_count > 0
            assign autoAdaptWidth = true
          endif
          if section.settings.products_count < visibleItems
            assign autoAdaptWidth = true
          endif
        endif
      %}
      <div class="yv-new-arrival-sliderbox {{ visibleItems }} {% if autoAdaptWidth %}adapt-slider-width count-{{ collection.products_count }} {% endif %}  {% unless section.settings.slider_full_width %}content-overlay-{{ section.settings.over_image_product }}{% endunless %}" style="--layoutRadius:{% if settings.layout_style == 'rounded' %}10px{% else %}0px{% endif %}">
        {% if section.settings.heading != blank or section.settings.subheading != blank %}
        <div class="yv-new-arrival-slider-header">
          <p class="heading-subtitle">{{ section.settings.subheading }}</p>
          <{{ section.settings.seo_heading }} class="heading-title {{ section.settings.heading_size }}">
            {{ section.settings.heading }}
          </{{ section.settings.seo_heading }}>
        </div>
        {% endif %}
        {%- liquid
          assign enableSlider = false
          if collection != blank and collection.products.size > visibleItems
            assign enableSlider = true
          elsif collection != blank and collection.products.size == 0
            assign enableSlider = true
          elsif collection == blank
            assign enableSlider = true 
          endif 
          assign productLimit = section.settings.products_count
          if stacked_products
            assign productLimit = 6
          endif
        -%}
        <div class="yv-new-arriavl-slider {% unless section.settings.slider_full_width %}content-overlay-{{ section.settings.over_image_product }}{% endunless %}" 
          {% if enableSlider and section.settings.products_count > visibleItems and stacked_products == false %}
            data-flickity-slider='{"wrapAround":true,
                                   "cellAlign": "left",
                                   "dragThreshold":true,
                                   "contain": true,
                                   "resize": true,
                                   "prevNextButtons": true,
                                   "touchVerticalScroll": false,
                                   "pageDots": false,
                                   "arrowShape":"M36.7,76.9c1.9,1.4,1.9,3.8,0,5.7c-0.6,0.6-1.6,0.9-2.8,0.9c-0.9,0-1.9-0.3-2.8-0.9L2.2,52.8 c-1.9-1.4-1.9-4.3,0-5.7L30,18.3c1.4-1.4,3.8-1.4,5.2,0c1.9,1.4,1.9,4.3,0,5.7L10.2,50L36.7,76.9z M95.2,46.2c1.9,0,3.8,1.9,3.8,4.3 c0,2.4-1.9,3.8-3.8,3.8H13c-2.4,0-3.8-1.4-3.8-3.8c0-2.4,1.4-4.3,3.8-4.3H95.2z"}'{% endif %}
              tabindex="0" data-desktop-only>
          {%- if collection.products.size > 0 -%}
          {% liquid 
            for product in collection.products limit: productLimit
              assign productFormId = 'product-form-' | append : section.id | append : forloop.index | append : '-' | append : collection.handle
              assign mainClass = 'xsmall-product-card'
              assign delay = 50 | times : forloop.index
              if settings.enable_animation
                assign animationAttr = 'data-aos="fade-up" data-aos-delay="' | append : delay | append : '"'
              else
                assign animationAttr = ''
              endif
              render 'product-grid', product: product, productFormId : productFormId, productClasses: mainClass , animationAttr: animationAttr, imageSize : '255x', customRadius: true
            endfor 
          -%}
          {% else %}
          {%- for i in (1..productLimit) -%}
          <div class="yv-product-card xsmall-product-card product-grid-layout-rounded">
            <div class="animated-grid" {% if settings.enable_animation %}data-aos="fade-up" data-aos-delay="{{ 50 | times : forloop.index }}"{% endif %}>
              <div class="yv-product-card-img">              
                {%- if settings.product_image_style == 'landscape' %}
                  {{ 'product-placeholder-small' | placeholder_svg_tag: 'placeholder-svg' }}
                {%- endif %}
              </div>
            </div>
          </div>
          {%- endfor -%}
          {% endif %}
        </div>
        {% if section.settings.slider_full_width %}
        </div>
        {% endif %}
      </div>
      
      {%- if section.settings.enable_button %}
      <div class="text-center yv-cta-button">
        <a href="{{ section.settings.button_link }}" class="btn" style="min-height: 15px; min-width: 250px;">{{ section.settings.button_label }}</a>
      </div>
      {%- endif %}
      
    </div>
  </div>
</div>

<!-- Section settings -->
{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "checkbox",
      "id": "product_as_stacked",
      "label": "Display products as stacked"
    },
    {
      "type": "checkbox",
      "id": "slider_full_width",
      "label": "Display slider full width"
    },
    {
      "type": "checkbox",
      "id": "over_image_product",
      "label": "Display content over image"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Select collection"
    },
    {
      "type": "text",
      "id": "collection_heading",
      "label": "Collection heading"
    },
    {
      "type": "textarea",
      "id": "collection_desc",
      "label": "Collection description"
    },
    {
      "type": "checkbox",
      "id": "hide_description",
      "label": "Hide collection description"
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "checkbox",
      "id": "enable_button",
      "label": "Enable button"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link",
      "default": "/"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button Label",
      "default": "Shop Now"
    }
  ]
}
{% endschema %}

Please help and let me know if my code is right or if there is an easier way to accomplish this.

Im working with the Yuva theme