Grid system & Breakpoint Responsive

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date.

  • Handy version 4.0
  • Xstore version 1.0
  • Zeexo version 1.0
  • Bookshop version 2.0

Grid System

Bootstrap 4.0 grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.


Currently, We gives you four breakpoint views to preview and style your website for different device sizes.

Each view is used to style elements for a particular viewport range:

  • Large Desktop (Screens larger than 1200px pixels includes larger screens, such as desktop displays and laptops)
  • Desktop (Screens larger than 991px pixels includes larger screens, such as desktop displays and laptops )
  • Tablet - Landscape (screens larger than 767px)
  • Landscape - Portrait (sreens small than 768px)
  • Large Mobile (screens smaller than 576 px)
  • Small Mobile (screens smaller than 375px)

Base on Breakpoint, we use responsive controls for managing how many columns (or items) display per row on the Shopify Theme. Responsive option can be used for setting breakpoints and additional options within.