Creating your main Shop page with Blocksy is simple. We’ve designed the Product Archives section of the customizer just for that, letting even the most pretentious web designer achieve beautiful results. The advantage of doing it this way is that you get to see your changes being applied in real time, letting you make the critical design decisions you want.
Let’s check out the options that you have available.
Page Title
Inside the Page Title section, the first options that greet you are the two layout options. Type 1 will let you display a classic, beautiful, typographic look for your title and navigation breadcrumbs, while Type 2 will let you have a full bleed background image for your title container.
Type 1
Type 2
Next up, you have the elements you wish to display in your Page Title container. A few simple choices are available here, such as Breadcrumbs, the actual Page Title and the Description of the product category.
The Horizontal and Vertical Alignment options will let you align the information inside the container. Pretty self explanatory here 🙂
Left
Center
Right
Last, but not least, we have the Container Bottom Spacing option, which will let you adjust the distance between the page title container and the actual content of the page.
Shop Settings
The Shop Settings section will let you adjust general layout options for your product listings. Things such as the design of the product cards can be found here, as well as the number of products shown on each page and even granular controls for the product cards.
Let’s start by showcasing the two designs available for the product cards.
Type 1
Type 2
Next up, we have controls to display the number of products desired, on a per devices basis. Pretty simple stuff here.
Cards Options
The Cards Options pane will let you set a wide range of options for your product cards.
We have Image Controls, which will let you set the image ratio and size for your products, an option to hide or show the Rating of your product, an option that will let you display the Sale Badge, letting your users know if there’s a promo going on with one of your products and even the Product Category. As usual, you have the Content Alignment options, which will let you align the information horizontally — please note, this is only available for the Type 1 design choice.
The Cards Gap option will simply let you select a more compact or spaced out view for your products.
Page Elements
You have four important options here to configure. We start off with the Shop Sort setting, which will let you display the basic sorting choices for your customers, letting them sort the products by popularity, by the average rating, showing the latest products or the classic price sorting algorithm.
Shop Results Count will simply display how many results have been returned for your query.
The Sidebar option will let you present your users with more advanced filtering options, which can be set from the Appearance -> Widgets -> WooCommerce Sidebar section.
Pagination is quite a bit interesting. It will let you set the pagination (no pun intended) options for your shop pages. Standard, will display the classic page numbers and the previous/next buttons at the bottom of the page. Next/Prev will simply display those buttons at the bottom of the page, useful in case you wish to not let your visitors know directly how many products you have available for sale. Load More will let you have the page load additional products on demand. Once the user clicks on the button, the next set of products load in place. Infinite Scroll will let you load more products based on the user’s scrolling interaction, very useful if you wish to minimize page reloads and offer a speedy experience.
Product Catalog
The Product Catalog options will let you select if you wish to display the product categories on the same page with the products. This is useful in case you wish to enable a more visual navigation scheme for your visitors. There’s also a handy option that will let you select the default sorting algorithm for your shop page.