Shopify Debut Theme Grid System Breakpoints

Even though Shopify has given the free responsive Debut theme and contains some cool features, if you are a seasoned developer, you immediately run into a road blocks. By default, Shopify Debut 2.1.0 (If you don’t know the theme version, here are the steps to find Shopify theme version) theme grid system breakpoints supports only 3 breakpoints.

1. Small (< 750 px) (class name starts with “small–“)
2. Medium Up (>= 750px ) (class name starts with “medium-up–“)
3. Everything else (class name does not have prefix)

Even though, Shopify Debut theme can supports Small (<750px), Medium (>=750px and < 990px), Large (>= 990px and <1400px) and Widescreen (>=1400px) breakpoints, you need to make a change in theme.scss.liquid in order to use it.