Bulk change collection lists to 2 columns on mobile view

Topic summary

A user needs to modify several hundred collection templates to display in a 2-column layout on mobile devices instead of the default single column.

Current Challenge:

  • Manually updating each collection template individually would be extremely time-consuming
  • Seeking a bulk or automated method to apply this change across all templates simultaneously

Technical Context:

  • This involves CSS customization for collection page layouts
  • The change specifically targets mobile viewport breakpoints
  • No responses or solutions have been provided yet

Status: The question remains unanswered and open for community input on potential bulk editing solutions or CSS workarounds.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

I have a few hundred collection templates and would like to change the collection lists on all of them to 2 columns on mobile view. Is there a way to bulk set all of them to 2 columns rather than going through each one and manually changing?

Technically, there are several ways.
Say, you can do multi-file Search and Replace to replace "mobile_product_card_size": "large" with "mobile_product_card_size": "small" (for Horizon family of themes)

But it would be easier to add a CSS code which will apply to all of them and force mobile view to 2 columns.
This can be done once, say in “Theme settings=> Custom CSS”.

Please share the link to a collection page on your store so I can check and provide the code.

Here is a link to one of the collection pages.

Quick Couplings - HTX Fluid Power

Try this code in “Customize”=>Theme settings(cog icon)=> Custom CSS:

@media (max-width:990px) {
  [class*=collection] .grid--1-col-tablet-down > .grid__item {
      width: calc(50% - var(--grid-desktop-horizontal-spacing) * 1 / 2);
  }
}

Shopify can be picky about “Custom CSS” settings, let me know if you get an error.

2 Likes

I see you already used code @tim_1 gave you and it worked. Dont forget to mark his answer as solution and give him a like.