Shopping Template for Blocs

Introducing the new Shopping template for Blocs. Shopping is a high quality template designed specifically for online shops and e-commerce websites.

This month, I have released 5 new video tutorials covering e-commerce in Blocs 3. In one of the videos, I have shown you how to manually create an e-commerce store, but I thought it would be helpful to release a template designed specifically for online shops.

As a result, I am happy to share with you the newest template for Blocs – Shopping.

There are a few things I wanted to share with you about this template.


Special Navigation Bloc

The first bloc on all pages (placed in the global area) is covered by the second bloc of each page (placed in the dynamic area of each page). It is made visible via z-index settings in Code Editor. This gives us a cool transparent look on all pages, but it does require additional attention when editing. Nothing difficult, but it is something you should know.

Product Page Banner

Product page has a banner, which plays the role of a background for navigation. You can replace it with a solid color if you want. You can also place some title (with padding) to make it a page banner. This banner is hidden on SM and XS breakpoints, because I am using the regular navigation bar for mobile version of the template.

Tabben Content Area

Shop page is built around the Tabbed Content bric with 3 tabs. ALL, BRIGHT, and DARK. It means that there are 3 content areas (in DIVs) which you need to manage when adding the products to one of the categories. I recommend to add it first to the ALL, and then just duplicate and move to the BRIGHT or DARK (or whatever you decide to rename it to).

Utilize Duplicate Feature

I recommend to utilize Command + D (duplicate) feature as much as possible. I recommend to do that not just for this page or this template, but for all of templates from BlocsTemlates.com. I have spent many hours to make all blocs and brics look great all 4 breakpoints. When you create your own, these won’t be optimized. Just duplicate the ones I have built, edit the content, and you are good to go.

Purchase Button

For the purchase button, I just placed the regular Blocs button, but you can replace it with PayPal button, or any other similar service. You can also replace the whole product page with e-commerce platform. For more information about it, check the latest update to Mastering Blocs 3 course on eCommerce.

New to Blocs? Visit Blocs website

 Templates