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?
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.
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.
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.
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.