Hello,
I want to add the tab collection in shopify dawn theme.
like above mentioned.
Please help to resolve my problem.
Best,
Sohan
Hi @Sohan2198
The Dawn theme does not inherently include a tab element, so you need to code it yourself. This can be quite challenging, requiring at least a good understanding of HTML, CSS, and Liquid, you can refer this article https://community.shopify.com/post/1458169 or else you might need to hire a developer to code it for you, as it involves writing at least 50 lines of code. If you are not confotable with this option, another option is to switch to a theme that includes a tab element (e.g., Impulse or Empire theme). Alternatively, you can use a page builder to create this tab section. With a page builder, you can simply drag and drop elements, customize colors, and then add that section to your theme effortlessly.
Hope it helps!
Hello @Sohan2198 , I can do it for you. I have done it in some online stores. Please reply if you want to do it in the store.
Also can create some other sections if you go further with it.
Best regards,
Thanks!
I there ,
Please check this video I have created for you .https://youtu.be/hISksEL-Ero
In order to do this , You can add a section called tabbed-collections.liquid and add this code .
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{%- if section.settings.enable_quick_add -%}
{%- endif -%}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 1.2rem;
padding: 12px 20px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
button.tablinks {
border: none;
background: none;
font-size: 2.2rem;
padding: 12px 20px;
color: #000;
}
.outerdic {
margin: 0 auto;
}
}
.tab {
margin: 0 auto;
text-align: center;
display: block;
}
button.tablinks.active {
border-bottom: 3px solid #000;
}
.tabinner {
width: fit-content;
margin: 0 auto;
border-bottom: 1px solid #000;
}
.tabinner button {
font-family: var(--font-heading-family);
}
.outerdic .slider-counter {
display: none !important;
}
.final:after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
.final:hover::after {
content: "";
position: absolute;
top: var(--buttons-border-width);
right: var(--buttons-border-width);
bottom: var(--buttons-border-width);
left: var(--buttons-border-width);
z-index: 1;
border-radius: var(--buttons-radius);
}
a.center.final.button.button--secondary {
text-align: center;
margin: 0 auto;
width: 20rem;
display: block;
padding: 1.2rem;
font-size: 2.4rem
}
.extrapass{
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (max-width:749px){
a.center.final.button.button--secondary {
font-size: 1.8rem;
}
}
.extrapass a.center.final.button.button--secondary {
width: 30rem;
}
{%- endstyle -%}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = true
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
{%- if section.settings.title != blank -%}
## {{ section.settings.title | escape }}
{%- endif -%}
{%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}
{%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{% schema %}
{
"name": "PWC - Tab Collections",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection1",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "collection",
"id": "collection2",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "PWC- Tab Collection"
}
]
}
{% endschema %}
Hello @Rahul_dhiman
It working fine. but can we add the option no. column in desktop as well.
Thanks for your time.
Best,
Sohan
Hello @Rahul_dhiman
It working fine. but can we add the option no. row in desktop as well.
Thanks for your time.
Best,
Sohan
Yes that can be done .
But can you send a screenshot of what you need or an example
hello @Rahul_dhiman
Like this
hello @Rahul_dhiman
Any change
Hi @Sohan2198 I am currently out and away from my workstation.
will return today and do the changes.
hello @Rahul_dhiman ,
Any change ??
Hello @Sohan2198 ,
Sorry for late reply
Here is the updated code .
{% for block in section.blocks %}
{% if block.settings.collection %}
{% endif %}
{% endfor %}
{% for block in section.blocks %}
{% if block.settings.collection %}
{% assign collection = block.settings.collection %}
{%- for product in collection.products limit: section.settings.products_per_page -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
- {% 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,
lazy_load: lazy_load,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
{%- endfor -%}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Collections Tabs Blocks",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "Products per page"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "Columns on desktop"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"info": "Has cards info",
"default": "scheme-1"
},
{
"type": "header",
"content": "Image settings"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
}
],
"default": "adapt",
"label": "Image ratio"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "arch",
"label": "Arch"
},
{
"value": "blob",
"label": "Blob"
},
{
"value": "chevronleft",
"label": "Chevron left"
},
{
"value": "chevronright",
"label": "Chevron right"
},
{
"value": "diamond",
"label": "Diamond"
},
{
"value": "parallelogram",
"label": "Parallelogram"
},
{
"value": "round",
"label": "Round"
}
],
"default": "default",
"label": "Image shape",
"info": "Image shape info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "Show secondary image"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "Show rating",
"info": "Show rating info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "Enable quick add"
},
{
"type": "header",
"content": "Filtering settings"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "Enable filtering",
"info": "Enable filtering info"
},
{
"type": "select",
"id": "filter_type",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "horizontal",
"label": "Filter type",
"info": "Filter type info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "Enable sorting"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "Columns on mobile",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
]
},
{
"type": "header",
"content": "Padding settings"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
}
]
}
],
"presets": [
{
"name": "Collections Tabs Blocks",
"category": "Custom"
}
]
}
{% endschema %}
Thanks a lot @Rahul_dhiman ,
Can please help to make,
description, shipping accordion like this on pdp
