Two Products Per Row On Mobile Collection View

Store Design

Topic summary

A user wants to display two products per row instead of one on mobile collection pages. Two solutions were proposed:

Solution 1 (diego_ezfy):

  • Navigate to: Online Store > Themes > Actions > Edit Code
  • Open theme.liquid file
  • Locate the </body> tag (use CTRL/Command + F)
  • Paste provided code directly above the </body> tag

Solution 2 (PageFly-Noah):

  • Navigate to: Online Stores > Themes > More Actions > Edit Code
  • Open theme.liquid file
  • Paste provided code above the </head> tag instead

Both responders included code snippets and screenshots to guide implementation. The key difference is the placement location: one suggests inserting before </body>, the other before </head>. The discussion remains open with no confirmation of which solution was implemented or successful.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’d like to have my collection page when viewed on mobile to have two products per row instead of one. You can view it here: https://memoirekids.com/collections/all

2

@memoirekids

  1. From your Shopify Admin go to online store > themes > actions > edit code

  2. In your theme.liquid file, find the **(press CTRL + F or command + F on Mac)

  3. paste this code right above the tag:

diego_ezfy_0-1692730290041.png
diego_ezfy_0-1692730290041.png343×622 133 KB

Kind regards,
Diego

3

Hi @memoirekids

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyNoah_0-1692755225421.png
PageFlyNoah_0-1692755225421.png390×844 160 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly