Solved

How To Add 3 Columns On Featured Collection Section? (Ride Theme) (Mobile Only)

laserbeampq
Excursionist
30 0 2

For the featured collection section:

The number of columns on mobile is currently 2. On mobile it makes the product listings look way too big compared to the rest of the website. How do I add more columns?

 

url: wigmadcosplay.com

password: yellow

Accepted Solution (1)
SomeUsernameHe
Shopify Partner
455 49 83

This is an accepted solution.

This just adds 3-column css on top of 2-column css rules. Be careful using this as you will not be able to select the options in customize theme any longer. 

You should instead go edit the featured_collection code. 

Make sure to backup your theme before making any changes to it. 

Then go to Edit Code > Search for the file "featured-collection.liquid" 

On this page, you will scroll down to almost the bottom to this line of code:

 

 

{
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },

 

 

 

and replace it with this code: 

 

 

{
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        },
        {
          "value": "3",
          "label": "3 Columns"
        }
      ]
    },

 

 

 

and finally, at the VERY top of that same page, add the following CSS:

 

 

<style>
@media screen and (max-width: 749px) {
.grid--3-col-tablet-down .grid__item {
    width: 29%;
}
}
</style>

 

 


This will add the option in the Customize Theme section to now select 3 columns on mobile. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
6962 1318 1342

You can try to add this code to your online store > Themes > Edit code > Open theme.liquid file, add this code below under <head> element

 

<style>
@media(max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
    width: calc(31% - var(--grid-mobile-horizontal-spacing) / 3) !important;
}
}
</style>

 

Screenshot 2024-01-02 at 16.29.01.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

SomeUsernameHe
Shopify Partner
455 49 83

This is an accepted solution.

This just adds 3-column css on top of 2-column css rules. Be careful using this as you will not be able to select the options in customize theme any longer. 

You should instead go edit the featured_collection code. 

Make sure to backup your theme before making any changes to it. 

Then go to Edit Code > Search for the file "featured-collection.liquid" 

On this page, you will scroll down to almost the bottom to this line of code:

 

 

{
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },

 

 

 

and replace it with this code: 

 

 

{
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        },
        {
          "value": "3",
          "label": "3 Columns"
        }
      ]
    },

 

 

 

and finally, at the VERY top of that same page, add the following CSS:

 

 

<style>
@media screen and (max-width: 749px) {
.grid--3-col-tablet-down .grid__item {
    width: 29%;
}
}
</style>

 

 


This will add the option in the Customize Theme section to now select 3 columns on mobile. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee