Add "View all" button below featured collection

andrew133 · October 20, 2021, 12:44pm

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 · October 21, 2021, 6:01am

@andrew133

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

andrew133 · October 21, 2021, 2:25pm

Where can I find this section ?

KetanKumar · October 21, 2021, 3:26pm

@andrew133

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

andrew133 · October 21, 2021, 8:58pm

{% 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” }, { “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 · October 21, 2021, 8:59pm

{% 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”
},
{
“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 · October 22, 2021, 3:19am

@andrew133

yes please share us this file code

{% include ‘include-featured-collection’ %}

andrew133 · October 22, 2021, 6:57am

{% 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 %}

{% if title != blank %}

{% endif %}

{% if object.settings.collection_description and collection.description != blank %}

{% endif %}

{% if object.settings.collection_style == ‘slider’ %}

{% 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 %}

{% for i in (1..object.settings.products_limit) %} {%- assign per_slide_num = object.settings.products_per -%}

{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %} {{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}

{% endfor %}

{% endif %}

{% else %} {% if section_onboarding == false %}

{% render 'product-loop', limit: object.settings.products_limit | plus: 1, products: collection.products, products_per_row: object.settings.products_per %}

{% else %}

{% 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' -%}

{% capture num %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %} {{ 'product-' | append: num | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}

{% endfor %}

{% endif %} {% endif %}

KetanKumar · October 22, 2021, 7:09am

@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 %}

{% if object.settings.collection_style == 'slider' %}

{% 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 %}

{% for i in (1..object.settings.products_limit) %}
{%- assign per_slide_num = object.settings.products_per -%}

{% endfor %}

{% endif %}

{% else %}
{% if section_onboarding == false %}

{% else %}

{% endif %}
{% endif %}

View all

andrew133 · October 22, 2021, 9:24am

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 · October 22, 2021, 12:38pm

@andrew133

give me store url

andrew133 · October 22, 2021, 12:40pm

https://structureparis.com/
password: cewleu

andrew133 · October 22, 2021, 1:29pm

did you find something ? @KetanKumar

oscprofessional · October 22, 2021, 1:55pm

Hello @andrew133

You can try this code


      View all

Hope this will help you
Thanks

andrew133 · October 22, 2021, 2:34pm

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 · October 22, 2021, 6:39pm

@andrew133

yes you have just change ulr as you like

oscprofessional · October 23, 2021, 6:45am

Either you can add direct link in code with this code


      View all

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


      View all
    

/*add this code in schema*/
 {
      "type": "url",
      "id": "link",
       "label": "LINK"
  }

Topic		Replies	Views
How to add “view all” button to featured collection on flex theme Store Design	6	21	October 20, 2022
Adding a "View All" Button to the Featured Collections on My Homepage Store Design	8	105	December 7, 2022
Help Add a "View All" Button under all featured collections on Simple Theme Store Design design , collection-page , shopify-themes	2	9	June 28, 2025
Atlantic Theme - add "view all" below featured collection Technical Q&A	0	4	September 15, 2021
Create a "See More" button at the end of a Featured Collection in Home Page - BROOKLYN THEME Store Design	13	16	August 26, 2021

Add "View all" button below featured collection

{{ title }}

Related topics