How to change Multicolumn to 2 rows on mobile?

Store Design

Topic summary

Goal: Change the Shopify Multicolumn section to display 2 rows on mobile instead of 3.

  • Proposed fix: Add custom code in theme.liquid right after the tag (Online Store > Theme > Edit code).

  • Initial code (not visible in the transcript) was provided to achieve the 2-row mobile layout.

  • Concern raised: Using an element ID is brittle because Shopify regenerates IDs when columns are removed/added.

  • Update: The helper revised the code to target a class selector instead of an ID to avoid issues with changing IDs. The exact updated snippet is not shown here.

  • Assets central to understanding: a screenshot illustrating the desired 2-row layout and code snippets (both code blocks are not visible in the transcript).

  • Status: Likely addressed with the class-based approach, but there’s no explicit confirmation from the requester that the final code worked. Discussion appears near resolution, pending confirmation.

Summarized with AI on January 6. AI used: gpt-5.
4

Code updated
1 Like