How do I add a “view all” button centered below my featured collection on the home page. The button should link to a specific collection.
I would like to repeat this process for several different featured collection sections, where the “view all” button for each section would link to different collections (depending on the collection of the section)
using out of the sandbox flex theme
(I’m a beginner)
Welcome to the Shopify community!
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
And you can add it by the custom code.
Check out this link.
https://made4uo.com/blogs/journey-to-awesome-shopify-website/changing-editing-the-view-all-button-in-shopify
it will be helpful.
sorry any issue
can you please share Featured Collection section code so i will check and update
@Zworthkey Thank you for the reply and and resources for me to check out! The url for the shop is www.mikeohearn.myshopify.com
Much appreciated!
@KetanKumar Thank you for your reply, I think this is the right section you requested (posted in the spoiler). And just to reiterate, the “View all” buttons im looking for, I would like to be able to point to different collections depending on the section you are viewing.
ex, featured collection section 1 view all button goes to my “titan training” collection. Featured collection section 2 view all button goes to my “protein” collection, and so on.
{% comment %}
** Single featured collection **
{% endcomment %}
{%- assign title = section.settings.title -%}
{%- assign collection = collections[section.settings.collection] -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{% if collection != blank and collection.products != blank %}
{%- assign section_onboarding = false -%}
{% else %}
{%- assign section_onboarding = true -%}
{% endif %}
{% comment %} Check to see if enough products available to create slide {% endcomment %}
{% if section.settings.collection_style == ‘slider’ %}
{% if section.settings.products_limit > section.settings.products_per and collection.all_products_count > section.settings.products_per %}
{%- assign layout = ‘slider’ -%}
{% else %}
{%- assign layout = ‘grid’ -%}
{% endif %}
{% else %}
{%- assign layout = ‘grid’ -%}
{% endif %}
{% comment %} Section specific CSS {% endcomment %}
{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
{% if section.settings.width == ‘wide’ %}
width: 100%;
{% endif %}
}
{%
render ‘css-loop’,
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
{% comment %} JavaScript {% endcomment %}
{% schema %}
{
“name”: “Featured collection”,
“class”: “featured-collection-section jsFeaturedCollection”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Featured collection”
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “header”,
“content”: “Product”
},
{
“type”: “range”,
“id”: “products_per”,
“label”: “Products per row”,
“min”: 2,
“max”: 7,
“default”: 5
},
{
“type”: “select”,
“id”: “mobile_products_per_row”,
“label”: “Products per row on mobile”,
“info”: “Applied only when ‘Collection layout’ is set to ‘Grid’.”,
“options”: [
{
“value”: “1”,
“label”: “1”
},
{
“value”: “2”,
“label”: “2”
}
],
“default”: “1”
},
{
“type”: “range”,
“id”: “products_limit”,
“label”: “Limit products”,
“min”: 3,
“max”: 50,
“default”: 10
},
{
“type”: “checkbox”,
“id”: “align_height”,
“label”: “Align to height”
},
{
“type”: “range”,
“id”: “collection_height”,
“label”: “Product image height”,
“min”: 150,
“max”: 400,
“step”: 10,
“default”: 200,
“unit”: “px”,
“info”: “Applied when ‘Align to height’ is enabled. Learn more”
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “radio”,
“id”: “collection_style”,
“label”: “Collection layout”,
“default”: “grid”,
“options”: [
{
“value”: “slider”,
“label”: “Slider”
},
{
“value”: “grid”,
“label”: “Grid”
}
],
“default”: “grid”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Width”,
“default”: “wide”,
“options”: [
{
“value”: “standard”,
“label”: “Standard”
},
{
“value”: “wide”,
“label”: “Wide”
}
]
},
{
“type”: “checkbox”,
“id”: “show_gutter”,
“label”: “Show gutter”,
“default”: true
},
{
“type”: “range”,
“id”: “padding_top”,
“label”: “Top spacing”,
“min”: 0,
“max”: 80,
“default”: 20,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_bottom”,
“label”: “Bottom spacing”,
“min”: 0,
“max”: 80,
“default”: 20,
“unit”: “px”
},
{
“type”: “select”,
“id”: “animation”,
“label”: “Animation”,
“default”: “none”,
“options”: [
{
“value”: “none”,
“label”: “None”
},
{
“value”: “fadeIn”,
“label”: “Fade in”
},
{
“value”: “fadeInDown”,
“label”: “Fade in down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade in left”
},
{
“value”: “fadeInRight”,
“label”: “Fade in right”
},
{
“value”: “slideInLeft”,
“label”: “Slide in left”
},
{
“value”: “slideInRight”,
“label”: “Slide in right”
}
]
},
{
“type”: “header”,
“content”: “Advanced”,
“info”: “Learn more”
},
{
“type”: “text”,
“id”: “css_class”,
“label”: “CSS Class”
},
{
“type”: “textarea”,
“id”: “custom_css”,
“label”: “Custom CSS”
}
],
“presets”: [{
“name”: “Featured collection”,
“category”: “Collection”,
“settings”: {
}
}]
}
{% endschema %}
great thanks for code i have update custom code can you please update whole code
{% comment %}
** Single featured collection **
{% endcomment %}
{%- assign title = section.settings.title -%}
{%- assign collection = collections[section.settings.collection] -%}
{% comment %} Assign product length to be selected limit for onboarding {% endcomment %}
{% if collection != blank and collection.products != blank %}
{%- assign section_onboarding = false -%}
{% else %}
{%- assign section_onboarding = true -%}
{% endif %}
{% comment %} Check to see if enough products available to create slide {% endcomment %}
{% if section.settings.collection_style == 'slider' %}
{% if section.settings.products_limit > section.settings.products_per and collection.all_products_count > section.settings.products_per %}
{%- assign layout = 'slider' -%}
{% else %}
{%- assign layout = 'grid' -%}
{% endif %}
{% else %}
{%- assign layout = 'grid' -%}
{% endif %}
{% comment %} Section specific CSS {% endcomment %}
{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
{% if section.settings.width == 'wide' %}
width: 100%;
{% endif %}
}
{%
render 'css-loop',
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
View All
{% comment %} JavaScript {% endcomment %}
{% schema %}
{
"name": "Featured collection",
"class": "featured-collection-section jsFeaturedCollection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "header",
"content": "Product"
},
{
"type": "range",
"id": "products_per",
"label": "Products per row",
"min": 2,
"max": 7,
"default": 5
},
{
"type": "select",
"id": "mobile_products_per_row",
"label": "Products per row on mobile",
"info": "Applied only when 'Collection layout' is set to 'Grid'.",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "1"
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 3,
"max": 50,
"default": 10
},
{
"type": "checkbox",
"id": "align_height",
"label": "Align to height"
},
{
"type": "range",
"id": "collection_height",
"label": "Product image height",
"min": 150,
"max": 400,
"step": 10,
"default": 200,
"unit": "px",
"info": "Applied when 'Align to height' is enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022543913)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "radio",
"id": "collection_style",
"label": "Collection layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
],
"default": "grid"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wide",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "checkbox",
"id": "show_gutter",
"label": "Show gutter",
"default": true
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
}
]
},
{
"type": "header",
"content": "Advanced",
"info": "[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",
"settings": {
}
}]
}
{% endschema %}
Hello @KetanKumar ,
We’d like the Featured Collection section button on our homepage to take users to a different collection than the one being displayed.
We would like users to click the button in the Featured Collection section here:
And we want this to take them to a different (wider) collection here:
Rather than the featured collection:
Can we do this?
Many thanks!
