I want to change my layout for search results: I have this
but I want two products for column like this:
my theme is “broadcast” and this is the link https://joybebeboutique.com/ , password: stowdo
Topic summary
Goal: Adjust the Broadcast theme’s search results to show two products per column, matching a provided example.
Proposed solution: Add a small Custom CSS rule in Online Store > Themes > Customize > Theme settings > Custom CSS. Use a media query for mobile (max-width: 749px) targeting .search-page .grid and set the CSS variable --columns: 2 to render two columns on smaller screens.
Technical note: The media query confines the change to mobile widths; the Broadcast theme’s grid uses the --columns variable to control the number of columns. To affect tablets/desktops, modify or remove the breakpoint (e.g., increase max-width or apply the rule globally without the media query).
Outcome: Clear, actionable steps and code guidance were provided. No confirmation from the requester yet on implementation or results. The discussion appears open pending verification.
Attachments: Screenshots illustrate current single-column layout and desired two-column layout; the code snippet is central to the solution.
Hi @SPStore
You can change the layout of your search results page by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.search-page .grid {
--columns: 2;
}
}
