How do i move product description into collabsible row?
Topic summary
A user seeks to move their product description into a collapsible/accordion row on a Shopify theme.
Proposed Solutions:
-
Custom accordion code approach: One contributor shares liquid/HTML markup and jQuery code to create a custom accordion block. The code should be added as a ‘custom-accordion’ block in the theme schema and pasted before the
{% when 'price' %}section in the main-product.liquid file. -
Metafield approach (recommended): Another suggests creating a product metafield with a structure matching the desired collapsible rows, then using dynamic sources in the collapsible rows section. This method offers more flexibility for future content variations across different products.
Additional Details:
- For text formatting (like bold text), using a “rich text” type for metafield values allows customization without coding.
- CSS targeting can also be used to style specific elements (e.g.,
font-weight: 800for bold text). - An image/screenshot was shared showing the implementation.
The discussion remains open as the original poster asks follow-up questions about text formatting.
{% when 'custom-accordion' %}
{% if product.description != blank %}
- ###
{{ block.settings.description_title }}
#### {{ product.description }}
{% endif %}
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
You can use this code for product collapsible description first you add block in schema name is “custom-accordion” then my code paste main-product.liquid before {% when ‘price’ %}
The best way is a new metafield for your products.
Create a metafield, which will be assigned for each product. In metafield create a structure same as your desired collapsible rows. Assign created metafield for products. For each product add data to the metafield. In collapsible rows section use dynamic source for each block.
Why move the description isn’t good?
What if later you will need description + collapsible rows with different content?
I did that but how would i make some of the text bold?
Use a rich text type for each row_content value, inside your metafield definition. It will let you customize your text without code in future.
Target in CSS which you can bold element/text
like this:
.accordion-panel_des{
font-weight: 800;
}