A Shopify user seeks to add collection tabs to their store using the Craft theme, inspired by a feature in the paid Pipeline theme. They want to avoid purchasing the theme just for this functionality.
Solution Provided:
Key Features & Customizations:
Ongoing Issues:
Status: The basic solution works for standard free themes, but theme-specific customizations remain unresolved for premium/non-standard themes.
Hi, I’m new to Shopify and coding and I want to create A collection tabs on my shopify store. Currently I’m using the craft theme and I would like to add a collection tab section[see the photo below for reference]. Can someone have the code for this and also I would appreciate if you would tell me how to do it. Thanks.
(from the Pipeline Theme) unfortunately this theme is paid and I don’t have the means to buy it since I’m also just aiming for the collection tabs.
Hi @qwertyuiioop ,
May I suggest to update code these steps:
{% if section.blocks.size > 0 %}
{% if section.settings.title != blank %}
## {{ section.settings.title }}
{% endif %}
{% assign tabContent = '' %}
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
- {{ collection.title }}
{% capture content %}
{%- for product in block.settings.collection.products limit: 8 -%}
- {% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{%- endfor -%}
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
{{ tabContent }}
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
Hi, Will this code work on Dawn Theme 10.0 ?
Hi, yes it will work on Dawn Theme 10.0 as well.
I have one more question about shopify
Hi can you help me the photos for each product is not appearing and can you also give me the code for the arrow here [see photo below]. Thank you very much!
Can we add button in Tab to view all products ?
Hi @qwertyuiioop , @wasimkhann
You can use code below to replace above
{% if section.blocks.size > 0 %}
{% if section.settings.useslider %}
{% endif %}
{% if section.settings.title != blank %}
## {{ section.settings.title }}
{% endif %}
{% assign tabContent = '' %}
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
- {{ collection.title }}
{% capture content %}
{%- for product in block.settings.collection.products limit: 8 -%}
- {% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{%- endfor -%}
{% if block.settings.viewall %}
View all
{% endif %}
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
{{ tabContent }}
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "checkbox",
"id": "useslider",
"label": "Use slider",
"default": true
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "checkbox",
"id": "viewall",
"label": "Show view all",
"default": true
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
@wasimkhann → Pls uncheck “use slider” to remove slider in the customize
@qwertyuiioop → Please uncheck “show view all” to remove “view all” button in the customize
@EBOOST it works! Thank you!
Can we use two products on mobile and four on desktop?
Hi @wasimkhann ,
You can replace code below to suite that one.
{% if section.blocks.size > 0 %}
{% if section.settings.useslider %}
{% endif %}
{% if section.settings.title != blank %}
## {{ section.settings.title }}
{% endif %}
{% assign tabContent = '' %}
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
- {{ collection.title }}
{% capture content %}
{%- for product in block.settings.collection.products limit: 4 -%}
- {% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{%- endfor -%}
{% if block.settings.viewall %}
View all
{% endif %}
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
{{ tabContent }}
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "checkbox",
"id": "useslider",
"label": "Use slider",
"default": true
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "checkbox",
"id": "viewall",
"label": "Show view all",
"default": true
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}
Thank You, It’s working.
Hi, how can I customize the slider button?? like make it large and adjust the position of it? Also How can I customize the font of the tabs? I already change the background color but I don’t how to change the font.
Hi @qwertyuiioop ,
You need add little CSS code to do it.
do you know the css code for it?
You can refer the document here https://www.w3schools.com/css/default.asp
To adjust the postion, font size, font style, color, background …
Can it be used for Crave or sense template?
Hi,
It’s possible