How to change number of columns on Product Page

#1. All Product Pages

You can edit the Product Page

Adjust this option.

This will affect all Product Pages

If you want to adjust the number of columns on mobile, click the Mobile icon

and click Edit Section

and adjust it here

#2. Specific Product Page

First, you need to find the Product Page ID (Shop Page or Category Page).

In my example, we have:

#collection-66c9dbfd06d2a16e01e84673

Next, use this code to Custom CSS box

/* Desktop - 4 columns */
@media screen and (min-width:768px) {
#collection-66c9dbfd06d2a16e01e84673 .products-list .list-grid {
    grid-template-columns: repeat(4,1fr) !important;
}
}
/* Mobile - 2 Columns */
@media screen and (max-width:767px) {
#collection-66c9dbfd06d2a16e01e84673 .products-list .list-grid {
    grid-template-columns: repeat(2,1fr) !important;
}
}