00 Days
00 Hours
00 Minutes
00 Seconds

Black Friday sale - up to 40% OFF

Grab this offer now

Documentation

Everything you need to get started with Blocksy Theme and Companion

Single Product

If you wish to customize the Single Product page, then this article is for you. We’ve made it super easy to make changes to the product page with our beloved and easy-to-use customizer.

We will not address the customization of the product title and page structure in this document, as we’ve published other articles which explain this in more detail. You can find more about these options here — https://creativethemes.com/blocksy/docs/post-types/single-posts/

Product Gallery

The Product Gallery settings will let you change up how the image gallery will show up on your pages. For our Free version, we are offering a classic layout, with a big representative image on the left, and extra thumbnails at the bottom. Members of our Premium subscription, will enjoy the addition of three more gallery types, each beautiful in its own way.

Type 1

Type 1 gallery offers a standard layout with the featured product image on the left, and thumbnails underneath it.

Type 3

The Type 3 gallery will display your product images in a nicely arranged grid on the left. Very useful in case you wish to showcase all your images at once.

Type 2

Type 2 offers a beautiful carousel view, emphasizing the featured image on top.

Type 4

Last, but not least, Gallery Type 4 will display a gorgeous carousel grid type of view at the top of the product page. This lets you streamline the page design, achieving a modern and minimalist look.

Gallery Options

The Gallery Options pane will let you adjust various design options for the image gallery. The options available here depend on which type of gallery you have selected. On the left image, we see the sample of options that are available with the Type 4 gallery.

There are handy controls that will let you adjust the image size and aspect ratio, enabling Lightbox, which will let your visitors take a better look at your products by giving them the opportunity to display the images full screen and even a little animation when you hover the mouse cursor on top of the images, which makes the website more interactive.


Product Elements

The Product Elements section will let you easily show or hide various elements for your product page. It will also give you the possibility to customize things such as colors and fonts for each supported element.

Things such as Product Title, Sale Badge, Star Rating, Product Meta and the Share Box, can easily be hidden from the main page, giving you flexibility in creating a modern look.

Under the Add to Cart section, you will find controls for the (😒) Add to Cart button, including width options, colors and fonts.


Page Elements



The Page Elements section will let you control the default WooCommerce elements on your Single Product pages.

You have options for the Product Tabs, which offer you two design choices.

Type 1

Type 2


The Related & Upsells screen, will offer you customization controls for the products that show up on the single product page. You have options such as the number of products shown and even device visibility options for each type of additional product.


The Floating Cart extension, which is part of our Premium package, will let your visitors always have access to the important information about your product. This extension will display a gorgeous bar at the top or bottom of the page (as long as the main cart actions aren’t in view), which will let your customer act upon the product that they’re checking out.

Floating Cart Extension in Action

Functionality Options

These options are super simple to configure and understand. First, the Sticky Summary function, will let your main actionable content of the product page to remain on the screen, no matter what the user’s scrolling interaction is. This is extremely useful in case you have a large gallery of photos for that specific product.

The AJAX Add to Cart option will simply let your visitors perform cart operations without refreshing the page. Important if you wish to minimize interactions with the webpage and keep the users focused.

Not the solution you are looking for?

Please check other articles or open a support ticket.