Can anybody help with coding to add a view all button to my featured collections on the simple theme? Website is elitestopcreations.com. Would like a button for each featured collection.
Topic summary
A user running the Simple theme on their Shopify store (elitestopcreations.com) wants to add a “View All” button to each featured collection for better navigation.
Multiple solutions offered:
-
Custom Liquid code approach: Add a button link within the collection loop in
collection-list.liquidorfeatured-collection.liquid, pointing to{{ collection.url }}. Can be made toggleable via theme editor settings using a checkbox in the schema. -
CSS-only solution: Inject a “View all” pseudo-element using CSS
::afteron.collection-grid-item__title, styled as a button. This approach requires no Liquid editing—just add to Custom CSS. -
Collaborator access offers: Two developers offered to implement the code directly if given store access.
Current status: The user shared their collection-list.liquid code and requested a simple paste-ready solution. The discussion remains open with no confirmed implementation yet. A screenshot was provided showing the CSS method in action.
1 Like
Hey,
In order to show the view all button on the Featured collection required the custom code. Would you like to share the collab in the signature detail below so that I can take a look and add the custom view all button.
Looking forward to hearing back from you.
Thanks
Great question — adding a “View All” button for each featured collection is a smart way to boost user engagement and improve navigation.
Since you’re using the Simple theme, the featured collections section can be customized with a bit of Liquid and HTML. Here’s a basic version you can try adding inside your featured-collections.liquid (or the corresponding section file if it’s named differently in your theme):
liquid
CopyEdit
{% for collection in collections %}
{% endfor %}
You may need to adjust placement depending on your current layout, and add custom styling to match your brand (or use the existing .btn class from your theme for consistent design).
If you’d like, I can take a quick look at your theme code and make the update for you — or walk you through placing the code exactly where it belongs. I’ve done quite a few similar tweaks on Simple and other minimalist Shopify themes.
Let me know how you’d like to proceed — happy to assist!
— Shopify Theme Customization Expert | Helping You Enhance Your Store UX
Here is the code from collection-list.liquid. Is this what you need?
{% if section.settings.title != blank %}
## {{ section.settings.title | escape }}
{% endif %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% else %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% endcase %}
{% for block in section.blocks limit: section.blocks.size %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item' %}
{% endfor %}
{% if section.blocks.size == 0 %}
{{ 'homepage.onboarding.no_content' | t }}
{% endif %}
{% schema %}
{
"name": {
"cs": "Seznam kolekcí",
"da": "Kollektionsliste",
"de": "Kategorieliste",
"en": "Collection list",
"es": "Lista de colecciones",
"fi": "Kokoelmaluettelo",
"fr": "Page des collections",
"it": "Elenco delle collezioni",
"ja": "コレクションリスト",
"ko": "컬렉션 목록",
"nb": "Samlingsliste",
"nl": "Collectielijst",
"pl": "Lista kolekcji",
"pt-BR": "Lista de coleções",
"pt-PT": "Lista de coleções",
"sv": "Kollektionslista",
"th": "รายการคอลเลกชัน",
"tr": "Koleksiyon listesi",
"vi": "Danh sách bộ sưu tập",
"zh-CN": "产品系列列表",
"zh-TW": "商品系列清單"
},
"class": "index-section",
"max_blocks": 12,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Seznam kolekcí",
"da": "Kollektionsliste",
"de": "Kategorieliste",
"en": "Collection list",
"es": "Lista de colecciones",
"fi": "Kokoelmaluettelo",
"fr": "Page de liste des collections",
"it": "Elenco delle collezioni",
"ja": "コレクションリスト",
"ko": "컬렉션 목록",
"nb": "Samlingsliste",
"nl": "Collectielijst",
"pl": "Lista kolekcji",
"pt-BR": "Lista de coleções",
"pt-PT": "Lista de coleções",
"sv": "Kollektionslista",
"th": "รายการคอลเลกชัน",
"tr": "Koleksiyon listesi",
"vi": "Danh sách bộ sưu tập",
"zh-CN": "产品系列列表",
"zh-TW": "商品系列清單"
}
},
{
"type": "range",
"id": "grid",
"label": {
"cs": "Počet kolekcí na řádek",
"da": "Kollektioner pr. række",
"de": "Kategorien per Reihe",
"en": "Collections per row",
"es": "Colecciones por fila",
"fi": "Kokoelmia per rivi",
"fr": "Collections par rangée",
"it": "Collezioni per riga",
"ja": "行あたりのコレクション数",
"ko": "열 별 컬렉션",
"nb": "Samlinger per rad",
"nl": "Collecties per rij",
"pl": "Liczba kolekcji na wiersz",
"pt-BR": "Coleções por linha",
"pt-PT": "Coleções por linha",
"sv": "Produktserier per rad",
"th": "คอลเลกชันต่อแถว",
"tr": "Satır başına koleksiyon",
"vi": "Số bộ sưu tập trên mỗi hàng",
"zh-CN": "每行产品系列数",
"zh-TW": "每列商品系列數"
},
"min": 2,
"max": 5,
"step": 1,
"default": 3
}
],
"blocks": [
{
"type": "collection",
"name": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
},
"settings": [
{
"type": "collection",
"id": "collection",
"label": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
}
}
]
}
],
"presets": [
{
"name": {
"cs": "Seznam kolekcí",
"da": "Kollektionsliste",
"de": "Kategorieliste",
"en": "Collection list",
"es": "Lista de colecciones",
"fi": "Kokoelmaluettelo",
"fr": "Page des collections",
"it": "Elenco delle collezioni",
"ja": "コレクションリスト",
"ko": "컬렉션 목록",
"nb": "Samlingsliste",
"nl": "Collectielijst",
"pl": "Lista kolekcji",
"pt-BR": "Lista de coleções",
"pt-PT": "Lista de coleções",
"sv": "Kollektionslista",
"th": "รายการคอลเลกชัน",
"tr": "Koleksiyon listesi",
"vi": "Danh sách bộ sưu tập",
"zh-CN": "产品系列列表",
"zh-TW": "商品系列清單"
},
"category": {
"cs": "Kolekce",
"da": "Kollektion",
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fi": "Kokoelma",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"ko": "컬렉션",
"nb": "Samling",
"nl": "Collectie",
"pl": "Kolekcja",
"pt-BR": "Coleção",
"pt-PT": "Coleção",
"sv": "Produktserie",
"th": "คอลเลกชัน",
"tr": "Koleksiyon",
"vi": "Bộ sưu tập",
"zh-CN": "收藏",
"zh-TW": "商品系列"
},
"blocks": [
{
"type": "collection"
},
{
"type": "collection"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
Can you just paste what I need to add to the collection-list.liquid file? Its the simple theme. i don’t have whatsapp on my computer (only my phone)
Hello @Mere2680
Please send me the collaborator code. I will send you a store access request and give you a proper update.
Step-by-Step Instructions:
Go to your Shopify admin:
Online Store > Themes > Actions > Edit Code
Open this file:
sections/featured-collection.liquid
Find the collection object:
In most cases, you’ll find this at the top:
{% assign collection = section.settings.collection %}
Scroll near the bottom of the file, just after the loop that shows the products.
Add this code to show the View All button:
{% if collection != blank %}
View All
{% endif %}
Optional - Make it dynamic with theme editor:
You can also add a toggle in featured-collection.liquid schema to allow merchants to enable/disable the button from the theme editor.
At the very bottom of the same file, within the schema JSON:
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show 'View All' button",
"default": true
}
Then, wrap the View All button in a condition:
{% if section.settings.show_view_all and collection != blank %}
{% endif %}
