How to make Dawn theme collapsible rows open downward?

Store Design
,

Topic summary

Issue: In the Shopify Dawn theme, opening certain collapsible rows causes the heading to jump upward, forcing the user to scroll back to view the content. The desired behavior is for the content to open downward beneath the clicked heading, without page jumping.

Suggested approach: Modify the theme’s JavaScript that handles the collapsible (accordion) behavior.

  • In Online Store > Themes > Edit code, locate the JS file (e.g., theme.js, scripts.js, or a section-specific file).
  • Find the function/event listener managing open/close of collapsible rows.
  • Adjust CSS-related logic (height, max-height, display) so expansion occurs downward. Example guidance: ensure values used for expansion are positive and increase height/max-height rather than using values that could simulate upward expansion.

Notes: No specific code snippet or exact lines were provided; guidance is high level and may require inspecting section-based JS.

Status: No confirmed fix or resolution in the thread. Action item is to identify and edit the relevant JS/CSS behavior; exact implementation details remain open.

Summarized with AI on January 27. AI used: gpt-5.
1

When I open some of my collapsible rows, the heading jumps upwards and I have to scroll back up to see the content. Is there a way to make the collapsible rows open downward instead? So the heading stays where it is on the screen (where I clicked it to open) and the content opens underneath, no page jumping around.

2

To make the collapsible rows open downward instead of upward, you can modify the JavaScript code responsible for handling the collapsible functionality. Here’s a general approach you can follow:

  1. In your Shopify admin, go to “Online Store” → “Themes” and click on “Actions” → “Edit code” for your current theme.

  2. Locate the JavaScript file that controls the collapsible behavior. This file could be named something like theme.js or scripts.js. If you’re using a theme with a section-based structure, you might find the code in a specific section-related JavaScript file.

  3. Open the JavaScript file and search for the code that handles the opening and closing of the collapsible rows. Look for a function or event listener related to the collapsible functionality.

  4. Within the code, you should find a part where the CSS properties for the collapsible rows are manipulated. Look for the properties like height, max-height, or display.

  5. Modify the code that controls the opening behavior of the collapsible rows to make them expand downward instead of upward. This can be done by adjusting the CSS properties mentioned above.

    For example, if the current code sets the height or max-height property to a negative value or a value that causes the content to expand upward, you can change it to a positive value or a value that allows the content to expand downward.