How to Increase the Number of Columns Beyond Shopify’s Default Limit

. Edit the Featured Collection Section Schema

The Featured Collection section likely has its own settings schema defined within the section’s file, not the global settings_schema.json. This will be located under the Sections directory.

Follow these steps:

1. Go to Shopify Admin → Online Store → Themes.
2. Select Actions → Edit Code.
3. In the left sidebar, look for the Sections folder.
4. Find and open the featured-collection.liquid file (or something similar, depending on your theme).

Inside this file, there will be a schema section at the bottom, which controls the settings for the Featured Collection. It will look something like this:

{
  "type": "range",
  "id": "columns_desktop",
  "min": 1,
  "max": 6,
  "step": 1,
  "default": 4,
  "label": "Columns for Desktop"
}

Here, you’ll adjust the max value to allow more columns. For example, to allow up to 12 columns, change the "max": 6 to "max": 12.

Updated version:

{
  "type": "range",
  "id": "columns_desktop",
  "min": 1,
  "max": 12,  <!-- Change max to 12 -->
  "step": 1,
  "default": 4,
  "label": "Columns for Desktop"
}

This will allow the theme’s admin interface to offer up to 12 columns as an option in the Featured Collection section.

2. Update CSS to Handle 12 Columns

Now that you’ve increased the number of columns in the schema, you need to ensure your layout can handle it. You need to adjust the CSS to accommodate 12 columns.

1. In the Assets folder, open the base.css or the relevant stylesheet for your theme.
2. Add the following custom CSS to the bottom of the file to adjust the width of the grid items for 12 columns:

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(8% - var(--grid-desktop-horizontal-spacing) * 3 / 12) !important;
  }
}

This code does the following:

• Sets the width of each grid item to approximately 8% (since 100% ÷ 12 columns = 8.33%).
• Uses the calc() function to account for the horizontal spacing between columns (var(--grid-desktop-horizontal-spacing)).
• The !important flag ensures that this style overrides any other conflicting styles.

3. Configure the Featured Collection Section in the Shopify Admin

• After saving the changes to your schema and CSS, go back to your Shopify Admin.
• Go to Online Store → Themes → Customize.
• Find the Featured Collection section.
• Now, when you edit the section, you should see an option to select up to 12 columns (or whatever limit you set in the schema).

4. Preview and Publish

• Once you’ve made these changes, preview your store to see how the new grid layout looks with 12 columns.
• If everything is working as expected, Publish your changes.