Add "View all" button below featured collection

[andrew133]

Hey, I would like to add the button "View all" behind some of my featured collections (Turbo Theme)
Can someone please help me?

https://structureparis.com
pw : cewleu

What I have : 

What I want below :  

Thanks

[KetanKumar]

@andrew133 

sorry for any issue can you please sent featured collection section code so i will check and update

[andrew133]

Where can I find this section ?

[KetanKumar]

@andrew133 

yes please go to edit code >>>> section >>> featured collection

[andrew133]

{% include 'include-featured-collection' %} {% schema %} { "name": "Featured collection", "class": "shopify-section--featured-collection", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Featured collection" }, { "type": "checkbox", "id": "collection_description", "label": "Show description", "default": true }, { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "radio", "id": "collection_style", "label": "Collection layout", "default": "grid", "options": [ { "value": "slider", "label": "Slider" }, { "value": "grid", "label": "Grid" } ] }, { "type": "header", "content": "Products" }, { "type": "range", "id": "products_per", "label": "Products per row", "min": 2, "max": 7, "step": 1, "default": 3 }, { "type": "range", "id": "products_limit", "label": "Limit products", "min": 2, "max": 50, "step": 1, "default": 9 }, { "type": "header", "content": "Advanced" }, { "type": "paragraph", "content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)" }, { "type": "text", "id": "css_class", "label": "CSS Class" }, { "type": "textarea", "id": "custom_css", "label": "Custom CSS" } ], "presets": [{ "name": "Featured collection", "category": "Collection" }], "templates": [ "index", "product", "page" ] } {% endschema %}

[andrew133]

<script
type="application/json"
data-section-type="featured-collection"
data-section-id="{{ section.id }}"
>
</script>

{% include 'include-featured-collection' %}

{% schema %}
{
"name": "Featured collection",
"class": "shopify-section--featured-collection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "checkbox",
"id": "collection_description",
"label": "Show description",
"default": true
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "radio",
"id": "collection_style",
"label": "Collection layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "header",
"content": "Products"
},
{
"type": "range",
"id": "products_per",
"label": "Products per row",
"min": 2,
"max": 7,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 2,
"max": 50,
"step": 1,
"default": 9
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "paragraph",
"content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"presets": [{
"name": "Featured collection",
"category": "Collection"
}],
"templates": [
"index",
"product",
"page"
]
}

{% endschema %}

[KetanKumar]

@andrew133 

yes please share us this file code

{% include 'include-featured-collection' %}

[andrew133]

{% comment %}
** Featured collection - dynamic **
- Draggable section
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}

{%- assign id = object.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign title = object.settings.title | escape -%}
{%- assign collection = collections[object.settings.collection] -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
{%
render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}

{% if collection == blank %}
{%- assign section_onboarding = true -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{%- assign products_length = object.settings.products_limit | plus: 0 -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}

<div class="{{ css_class }}">
<section class="section">
<div class="container">
<div class="one-whole column center homepage_content">
{% if title != blank %}
<a href="{{ collection.url }}">
<h2 class="title">{{ title }}</h2>
</a>
<div class="feature_divider"></div>
{% endif %}

{% if object.settings.collection_description and collection.description != blank %}
<div class="featured-collection__description">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
</section>

{% if object.settings.collection_style == 'slider' %}
<div class="js-product-slider homepage-product-slider full-width--true {% if object.settings.products_per == 2 or object.settings.products_per == 4 or object.settings.products_per == 6 %}even-num-slides{% endif %} featured-collection__products">
{% if section_onboarding == false %}
{% if collection.products.size > 0 %}
{% render 'product-slider',
limit: object.settings.products_limit,
products: collection.products,
per_slide: object.settings.products_per,
featured_collection: collection
%}
{% endif %}
{% else %}
<div class="slider-gallery products-slider products-length-{{ products_length }}"
data-products-per-slide="{{ object.settings.products_per }}"
data-products-limit="{{ object.settings.products_limit }}"
data-products-available="{{ products_length }}">
{% for i in (1..object.settings.products_limit) %}
{%- assign per_slide_num = object.settings.products_per -%}

<div class="gallery-cell thumbnail {% if products_length > per_slide_num %}visible-{{ object.settings.products_per }}{% else %}visible-{{ products_length }}{% endif %}">
<div class="product-wrap">
<div class="relative product_image">
<a href="#">
<object class="placeholder-image">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</object>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
{% if section_onboarding == false %}
<section class="section">
<div class="container">
<div class="one-whole column">
{% render 'product-loop',
limit: object.settings.products_limit | plus: 1,
products: collection.products,
products_per_row: object.settings.products_per
%}
</div>
</div>
</section>
{% else %}
<section class="section">
<div class="product-list collection-matrix">
<div class="container">
{% for i in (1..object.settings.products_limit) %}
{% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
{%- assign collection_group_thumb = collection_group | append : 'thumb' -%}
{%- assign collection_group_mobile = collection_group | append : 'mobile' -%}

<div class="{% render 'column-width', value: object.settings.products_per %} column {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %} thumbnail {% if settings.mobile_products_per_row == '1' %}medium-down--one-half small-down--one-whole{% else %}medium-down--one-half small-down--one-half{% endif %}">
<div class="product-wrap {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %}">
<div class="relative product_image">
<a href="#">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endif %}
</div>

[KetanKumar]

@andrew133 

thanks for code can you please update this 

{% comment %}
** Featured collection - dynamic **
- Draggable section
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}

{%- assign id = object.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign title = object.settings.title | escape -%}
{%- assign collection = collections[object.settings.collection] -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
{%
render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}

{% if collection == blank %}
{%- assign section_onboarding = true -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{%- assign products_length = object.settings.products_limit | plus: 0 -%}
{% else %}
{%- assign section_onboarding = false -%}
{% endif %}

<div class="{{ css_class }}">
<section class="section">
<div class="container">
<div class="one-whole column center homepage_content">
{% if title != blank %}
<a href="{{ collection.url }}">
<h2 class="title">{{ title }}</h2>
</a>
<div class="feature_divider"></div>
{% endif %}

{% if object.settings.collection_description and collection.description != blank %}
<div class="featured-collection__description">
{{ collection.description }}
</div>
{% endif %}
</div>
</div>
</section>

{% if object.settings.collection_style == 'slider' %}
<div class="js-product-slider homepage-product-slider full-width--true {% if object.settings.products_per == 2 or object.settings.products_per == 4 or object.settings.products_per == 6 %}even-num-slides{% endif %} featured-collection__products">
{% if section_onboarding == false %}
{% if collection.products.size > 0 %}
{% render 'product-slider',
limit: object.settings.products_limit,
products: collection.products,
per_slide: object.settings.products_per,
featured_collection: collection
%}
{% endif %}
{% else %}
<div class="slider-gallery products-slider products-length-{{ products_length }}"
data-products-per-slide="{{ object.settings.products_per }}"
data-products-limit="{{ object.settings.products_limit }}"
data-products-available="{{ products_length }}">
{% for i in (1..object.settings.products_limit) %}
{%- assign per_slide_num = object.settings.products_per -%}

<div class="gallery-cell thumbnail {% if products_length > per_slide_num %}visible-{{ object.settings.products_per }}{% else %}visible-{{ products_length }}{% endif %}">
<div class="product-wrap">
<div class="relative product_image">
<a href="#">
<object class="placeholder-image">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</object>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% else %}
{% if section_onboarding == false %}
<section class="section">
<div class="container">
<div class="one-whole column">
{% render 'product-loop',
limit: object.settings.products_limit | plus: 1,
products: collection.products,
products_per_row: object.settings.products_per
%}
</div>
</div>
</section>
{% else %}
<section class="section">
<div class="product-list collection-matrix">
<div class="container">
{% for i in (1..object.settings.products_limit) %}
{% comment %}{% assign collection_group = products | map: 'id' %}{% endcomment %}
{%- assign collection_group_thumb = collection_group | append : 'thumb' -%}
{%- assign collection_group_mobile = collection_group | append : 'mobile' -%}

<div class="{% render 'column-width', value: object.settings.products_per %} column {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %} thumbnail {% if settings.mobile_products_per_row == '1' %}medium-down--one-half small-down--one-whole{% else %}medium-down--one-half small-down--one-half{% endif %}">
<div class="product-wrap {% if settings.collection_secondary_image != blank and product.media[1] != blank %}has-secondary-media-swap{% endif %}">
<div class="relative product_image">
<a href="#">
{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endif %}
<div class="text-center view-all'>
<a href="{{ collection.url }}">
View all
</a>
</div>
</div>

[andrew133]

Thanks but the text "view all" appears but you cannot click on it to see the whole collection. And I wish it was a button.

 

[KetanKumar]

@andrew133 

give me store url 

[andrew133]

https://structureparis.com/
password: cewleu

[andrew133]

did you find something ? @KetanKumar 

[oscprofessional]

Hello @andrew133 

You can try this code

 <div class="text-center">
      <a href="{{ routes.collections_url }}" class="button">View all</a>
    </div>

Hope this will help you
Thanks

[andrew133]

Thanks, but I would like that the "View all" redirect to the specific collection and not all the collection.
And I wish that the "View all" was a button

[KetanKumar]

@andrew133 

yes you have just change ulr as you like

[oscprofessional]

Either you can add direct link in code with this code

<div class="center">
      <a href="/collection/your collection link" class="button">View all</a>
    </div>

or if u want to add dynamically then you have to create a json for link and call it in your html.
And then you can manage the link from customize section

<div class="center">
      <a href="{{section.settings.link }}" class="button">View all</a>
    </div>
/*add this code in schema*/
 {
      "type": "url",
      "id": "link",
       "label": "LINK"
  }