Hi,
I’m using Dawn Theme, is there a way to have the first collapsible row on product pages opened by default?
Kind regards
Topic summary
Main Issue:
Users want to automatically open the first collapsible row on product pages in Shopify’s Dawn theme by default.
Working Solution (Dawn Theme):
GemPages support provided a step-by-step code modification:
- Edit
main-product.liquidfile - Add
{% if block.settings.open %} open {% endif %}inside the<details>tag wherecollapsible_tabis found - Add a checkbox setting in the schema section to control the “Open by default” option
- Enable the checkbox in the theme customizer under Product settings
Implementation Notes:
- Multiple users confirmed this works for both Dawn and Craft themes
- Common mistake: Incorrect placement of the
>character causes “open” text to display instead of actually opening the row - For Craft theme: The
collapsible_tabcode is located around row 780
Unresolved Questions:
- One user reports the Craft theme already has an
open_first_collapsible_rowcheckbox in the code but it doesn’t appear in the admin interface - Request for similar solution for Prestige theme (unanswered)
- Question about adding a ‘Read more’ feature to the opened collapsible content (unanswered)
1 Like
Hello @troydewit ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your main-product.liquid theme file
-
Find collapsible_tab by Ctrl + F and add the below code inside the
tag
{% if block.settings.open %} open {% endif %}
- Find “type”: “collapsible_tab” and add the below code after “settings”: [
{
"type": "checkbox",
"id": "open",
"label": "Open by default"
},
- Finally, go to the Customize > choose Product and you can check this box to apply it
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
18 Likes
This did not work, it only typed “open” inside the row when the checkmark is clicked.
Is there a way to open the row instead of typing open inside?
Well nope it does work!!! be sure to check if the > is correctly placed when you follow the tutorial. Verify on the pictures provided by the amazing @GemPages
1 Like
Hi, is it possible to use this on the Craft theme, I’ve tried but I can’t find collapsible_tab in main-product.liquid . Any help would be much appreciated!
1 Like
“type”: “collapsible_tab” is there approx row 780. just search for type": and scroll down and you will find it eventually
It diesn’t work. The code has been added. But the page dispalys “open” characters before the content.
Can confirm this works with Craft Theme! Just need to make sure the first part of code is correct. This was were I had a mistake and it was not automatic open but only “open” text.
Thanks
Hey dear ! Do you have same for the prestige theme ? Thanks a lot
Hi, I am also looking for a solution like this in the Craft theme, but can’t get it to work.
Actually the function seems to be there:
and:
```markup
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
},
But I haven’t got such checkbox in the admin:
Here’s my complete collapsible_content.liquid:
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'collapsible-content.css' | asset_url | stylesheet_tag }}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if section.settings.caption != blank -%}
{{ section.settings.caption | escape }}
{% endif %}
{%- if section.settings.heading != blank -%}
##
{{ section.settings.heading }}
{%- else -%}
## {{ 'accessibility.collapsible_content_title' | t }}
{% endif %}
{%- if section.settings.image != blank -%}
{%- liquid
assign padding_multiplier = 1
if section.settings.layout == 'section'
assign padding_multiplier = 2
endif
assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
-%}
{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
(min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
calc(100vw - {{ mobile_padding }})
{%- endcapture -%}
{{
section.settings.image
| image_url: width: 3200
| image_tag:
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
{% endif %}
{%- for block in section.blocks -%}
{%- endfor -%}
{% schema %}
{
"name": "t:sections.collapsible_content.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "text",
"id": "caption",
"label": "t:sections.collapsible_content.settings.caption.label"
},
{
"type": "inline_richtext",
"id": "heading",
"label": "t:sections.collapsible_content.settings.heading.label",
"default": "t:sections.collapsible_content.settings.heading.default"
},
{
"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"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "heading_alignment",
"label": "t:sections.collapsible_content.settings.heading_alignment.label",
"options": [
{
"value": "left",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label"
}
],
"default": "center"
},
{
"type": "select",
"id": "layout",
"label": "t:sections.collapsible_content.settings.layout.label",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.settings.layout.options__1.label"
},
{
"value": "row",
"label": "t:sections.collapsible_content.settings.layout.options__2.label"
},
{
"value": "section",
"label": "t:sections.collapsible_content.settings.layout.options__3.label"
}
],
"default": "none"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "color_scheme",
"id": "container_color_scheme",
"label": "t:sections.collapsible_content.settings.container_color_scheme.label",
"info": "t:sections.collapsible_content.settings.container_color_scheme.info",
"default": "scheme-2"
},
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label"
},
{
"type": "header",
"content": "t:sections.collapsible_content.settings.header.content"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collapsible_content.settings.image.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
},
{
"value": "small",
"label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
},
{
"value": "large",
"label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.collapsible_content.settings.image_ratio.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "image_first",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
},
{
"value": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
}
],
"default": "image_second",
"label": "t:sections.collapsible_content.settings.desktop_layout.label",
"info": "t:sections.collapsible_content.settings.desktop_layout.info"
},
{
"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
}
],
"blocks": [
{
"type": "collapsible_row",
"name": "t:sections.collapsible_content.blocks.collapsible_row.name",
"settings": [
{
"type": "checkbox",
"id": "open",
"label": "Open by default"
},
{
"type": "text",
"id": "heading",
"default": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.default",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
"info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label"
},
{
"value": "apple",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label"
},
{
"value": "banana",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label"
},
{
"value": "bottle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label"
},
{
"value": "box",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label"
},
{
"value": "carrot",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label"
},
{
"value": "chat_bubble",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label"
},
{
"value": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label"
},
{
"value": "clipboard",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label"
},
{
"value": "dairy",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label"
},
{
"value": "dairy_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label"
},
{
"value": "dryer",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label"
},
{
"value": "eye",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label"
},
{
"value": "fire",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label"
},
{
"value": "gluten_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label"
},
{
"value": "heart",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label"
},
{
"value": "iron",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label"
},
{
"value": "leaf",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label"
},
{
"value": "leather",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label"
},
{
"value": "lightning_bolt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label"
},
{
"value": "lipstick",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label"
},
{
"value": "lock",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label"
},
{
"value": "map_pin",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label"
},
{
"value": "nut_free",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label"
},
{
"value": "pants",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label"
},
{
"value": "paw_print",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label"
},
{
"value": "pepper",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label"
},
{
"value": "perfume",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label"
},
{
"value": "plane",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label"
},
{
"value": "plant",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label"
},
{
"value": "price_tag",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label"
},
{
"value": "question_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label"
},
{
"value": "recycle",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label"
},
{
"value": "return",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label"
},
{
"value": "ruler",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label"
},
{
"value": "serving_dish",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label"
},
{
"value": "shirt",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label"
},
{
"value": "shoe",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label"
},
{
"value": "silhouette",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label"
},
{
"value": "snowflake",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label"
},
{
"value": "star",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label"
},
{
"value": "stopwatch",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label"
},
{
"value": "truck",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label"
},
{
"value": "washing",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
}
],
"default": "check_mark",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label"
},
{
"type": "richtext",
"id": "row_content",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
},
{
"type": "page",
"id": "page",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collapsible_content.presets.name",
"blocks": [
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
},
{
"type": "collapsible_row"
}
]
}
]
}
{% endschema %}
I hope you can tell me what’s wrong.
With kind regards,
- Johan.
God bless you sir
Amazing explanation, ty so much!
Hi! Is there a way to add a ‘Read more’ for the description inside the first collapsible row, which is open by default?