Masonry Theme


Some features only apply to Masonry themes published after December 2015
(v. 2.4.0 or higher)​


For a quick way to get started with your theme settings, select a preset matching one of our four Masonry demo stores. Remember, applying a preset to your theme will overwrite your current theme settings.


Page Layout

Choose from three page options for the width of a standard page across the store.

Image Sizes

Select whether to enable larger images for thumbnail images across the store. Disabling this option can improve page load times.

Tile style

The Masonry layout is based around tiles and most of the content of pages sits within tiles, albeit large ones. Choose the tile box width, margin between boxes, corner style and whether to show a margin around the product image.


Extensive color settings allow you to refine your store design. Choose colors for your text, buttons, navigation, product labels and social media icons. Use an image or color for your store background. Customize the tiles by choosing colors for the tile main and lower backgrounds, box shadow and inner borders.


Choose from 25 hand picked fonts which are automatically scaled from your base font size to achieve perfect proportions.



Choose whether your logo image or store name is displayed at the top of the sidebar. We recommend using an image which is the same width as the sidebar as set in Customize Theme → Sidebar → Layout → Width of the Sidebar. If you have a retina image, then load an image double this size.


Choose your preferred width for the sidebar. This is used for the navigation on desktop screens. The footer menu from your store can be displayed in a second column using the setting show second navigation column. Should your menu include a lot of links, the option to indent the third tier of the menu may be useful.

Tip: If you'd like to add a gap in your menu options list, this can be done by adding in an empty link row. Simply add a new link to the menu where you want the space to show. Set the text to   and set it to link to a Web Address of #.

Tip: If some of your menu options are already expanded when you visit your homepage, this is just a simple set up issue - not a bug, and you won't need to alter any code to fix it. The likely problem here is that you have set the top menu items to link to your homepage. So when you visit the homepage, it intentionally expands these items. You need to set each of these top-level menu items to link to # - the hash/pound symbol.

The customer account register link and newsletter sign-up can also be shown in the sidebar. Enter your MailChimp form action URL to sign people up to your Mailchimp list.

Another great feature of the sidebar is the option to show page content above the copyright line at the bottom of the sidebar. On smaller screens, this page content will appear at the bottom of all pages like a traditional footer.

Home page

Choose to show a page of welcome text on your home page. On larger screens this text can also be displayed in a slide out drawer

Tip: The welcome text is shown at the top of smaller screens.  If you don't want your welcome text to have this prominent position on mobile devices choose none for the welcome text. Page content can still be shown on the home page using the featured content option instead.

Home page - slideshow

Select up to five slides to show with overlay text. The slideshow type enables you to determine how the images are displayed on smaller screens. The font for the homepage slideshow overlay is set in Customize Theme → Typography.

Looking for royalty free stock photos? Try here:

Stock Images

Upload up to three images here with links and alt text. The images will either show at the top of the page, or underneath the slideshow.

Choose up to six pages of content to show underneath the featured images. You can include text, images, video etc.

Tip: This Shopify article explains more about adding video and other content responsively. For Instagram, you'll need to use a third party service for your code.

Choose a collection of products to feature on the home page.

Tip: It's also possible to show a larger version of product images by adding the tag meta-image-large to the product you wish to enlarge.

Choose from up to twelve collections to show in tiles on your homepage. Select the tile size, border and title options.

Home page - blog

Choose to show a blog row of the most recent three blog articles from your chosen blog which can be positioned above or below the product tiles.

Product page

Choose whether to show the product type, tags or vendor. The product description can be positioned beside or under the product images and options.

Related products

Show related products from the same collection on the product page.

Please note, versions 2.4.0 to 2.4.2 inclusive (Jan-June 2016) do not include support for related products.

Collection page

The theme gives you control over the product thumbnails on your collection page. Select the number of products per page, decide whether to show an additional paging control above the products and whether to enable infinite scroll.


The collection description can be shown in a header either at the top of the collection page or, on larger screens, in a slide out drawer. In addition to the collection title and description, a product tag filter and sorting dropdown can also be shown. If you have sorted the products in your collection manually then show 'Featured' sort option means the customer can also choose this sort order.

Product thumbnails

Choose the display method for the product price and title. Smaller screens don't support the on hover options, so if you would still like to display the product information below the thumbnail image choose the setting show title and price on mobile screens, when normally shown on hover.

The quick view enables customers to purchase products direct from the collection or home page.

Product thumbnail labels

The theme includes labels for on saleout of stock, low inventory or items with a custom tag. Please note, the low inventory label will only work for products with a single variant. To create a custom label, you'll need to make use of product tags. Give your product a tag beginning with 'meta-label-' and follow that up with the text you want to show. You can enter exclamation marks and spaces without a problem, but no commas. Example "meta-label-Brand new!"

Specific product thumbnail ratio

These settings let you set a fixed size for all the product block images to give your store a more uniform look. Choose your preferred thumbnail image ratio from the options landscape, portrait or square.

Tip: It's also possible to show a larger version of product images by adding the tag meta-image-large to the product you wish to enlarge.

Blog page

Your blog header can be shown at the top of the page or, on larger screens, in a slide out drawer. Choose from a grid or list layout on the blog page. Decide if the blog author should be shown. The blog article featured image will be shown on the blog overview page, choose whether to show it on the article page too.

Social media

Configure links to social media, select the icon size and position.


The theme includes Shopify's multi-currency functionality. Be sure to configure your money formats following these instructions.

Cart page

Determine what should happen when a customer adds a product to the cart. Choose to stay on the current page or, if this option is not selected, the customer will go straight to the cart page. (Please note this stay on current page option will not run within the Theme Editor, so you'll need to preview your store to see this pop up message in action.)

Select whether to show a terms and conditions checkbox and link through to the relevant page. A shipping calculator option is also provided.

Continue shopping
Your Order

You have no items in your cart