Hi,
I’ve got some issues on my product page, I’d like to put the title on the left side of the Faq questions but I don’t know how to do it.
Somebody knows how to do it please?
Website: 6f3exa-pb.myshopify.com/products
Topic summary
A user needed help repositioning the FAQ title on their Shopify Dawn theme product page. They wanted the title to appear on the left side of the FAQ questions instead of above them.
Solution provided:
- Create a duplicate FAQ section to avoid affecting existing elements
- Add a new section file named ‘collapsible-content-2’ in the theme code editor
- Replace the default code with custom CSS that uses flexbox layout
- The new CSS positions the header container and FAQ grid side-by-side with responsive mobile stacking
Key technical details:
- Uses
display: flexwithalign-items: flex-startfor horizontal layout - Header takes 30% width (flex: 1), FAQ content takes remaining space (flex: 2)
- Switches to vertical layout on mobile screens (max-width: 750px)
Outcome: The solution was successfully implemented and marked as working perfectly by the original poster.
Hello, I do not see this section on your page to see what classes are being used.
1 Like
Gotcha, you’ll just want to create an entirely new element to use because you reuse this element already for other things. Any changes you make to this will change other things you don’t want to change.
This is easy though. Just go to edit your code and scroll down to sections.
- Click add new section and name it collapsible-content-2 (the default liquid selection is good)
- Click done
Replace the code you see there with this:
{{ '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;
}
}
.collapsible-content__grid-wrapper {
display: flex;
align-items: flex-start;
gap: 20px; /* Space between header and collapsibles */
}
.collapsible-content__header-container {
flex: 1;
min-width: 30%;
}
.collapsible-content__grid {
flex: 2;
}
@media screen and (max-width: 750px) {
.collapsible-content__grid-wrapper {
flex-direction: column;
}
}
{%- endstyle -%}
{%- if section.settings.caption != blank -%}
{{ section.settings.caption | escape }}
{% endif %}
{%- 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 %}
{%- for block in section.blocks -%}
{%- endfor -%}
{% schema %}
{
"name": "Collapsible Content 2",
"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": "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 %}
***Click save to save these updates
Now if you go back to your customizer you should see a new element you can add when you scroll to the bottom of the elements and should say Collapsible Content 2.
If you don’t see this you may need to refresh your page
1 Like
It is perfect thanks!