Hi all.. I am. Using karic shopify theme for my store. I have added many products into my store and accordingly created collections and shop page. Now it’s working perfectly in desktop view, but all the products into shop page and collections are displaying in single column in mobile view. Please help me to make it visible in 2 columns.
Hello @momsabhiruchi ,
Once check in the theme settings maybe there you will find an option to change it.
btw if not please share the store URL.
Thanks
Hey @momsabhiruchi ,
Ideally, your Shopify theme should have customization settings through which you can manage the number of products you want to show on the columns.
I would suggest you first check your theme customization settings. If your theme does not have the necessary customization settings, then this can be achieved by adding some additional CSS code. To provide you with the exact CSS code that will help implement this change, I’ll need your store URL to customize the CSS code according to your store’s specific selectors.
Hope this helps!
Regards,
Abhishek from Swym
Hi Swym, thanks for your quick response. I have checked my theme customization panel, and there is no option to change the appearance in mobile view. So please find the url to my store :
https://anothrone.myshopify.com/password
Password: ohwhew
Hi Guleria, Thanks for your quick reply. Please find my store url
https://anothrone.myshopify.com/password
Password: ohwhew
Try adding below code to the end of “responsive.css” file.
@media (max-width: 767px){
.category-products .products-grid.columns4 li.item {
width: 50%;
}
}
If you require further help, please don’t hesitate to reach out.
If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please hit Like and Mark it as Solution!
Hi @momsabhiruchi ,
Thanks for sharing your store URL, please follow the steps below to show 2 products per row on the mobile device.
- Open the code editor, as shown in the screenshot below.
- Create a snippet called ‘custom-product-grid-styles’ and add the below code:
- Include the ‘custom-product-grid-styles.liquid’ file in your “theme. liquid” file.
Add the following include code to your theme.liquid file.
{% render 'custom-product-grid-styles' %}
It would look something like below:
- Done? Save the file, and try previewing to confirm if the changes work for you. In the reference above, it looks something like below:
I hope this helps!
Regards,
Abhishek from Swym
Thank you so much Abhishek from Swym.. the code really worked well ..and i am so happy and greatful to You.. thanks a ton
Could you please help me with product page too .. I have tshirts of same design with different colors, and i want to display the particular tshirt when its color is chosen…i checked in theme , there is no option given for that..
Hey @momsabhiruchi ,
Thanks for letting me know that my solution helped you achieve the desired layout. If my response helped you, please consider giving it a like ( 
).
Hey @momsabhiruchi ,
First, please check if you have added images for each color variant of the t-shirts. If images aren’t assigned to each variant, they won’t change when you select different colors. Most Shopify themes have this feature to show the selected variant’s image. You can refer to this doc from Shopify about adding images for each variant, in case you haven’t added them already: https://help.shopify.com/en/manual/products/product-media/add-images-variants#add-images-to-existing-variants-individually
If you have already assigned images and it still doesn’t work, you should contact your theme developers for help. If you don’t have a developer, you can ask the theme developers. In case they are unable to help, you can hire a Shopify developer, who will take this up as a paid customization task, but eventually will fix this for you.
I hope this helps!
Thanks,
Abhishek from Swym
Thanks again for your quick response.
I am facing the same issue but the code did not helped getting the products into two columns.