By default, Product template consists of 2 sections: Product Details and Product Recommendation. These sections cannot be removed, and can only be hidden on Product template.
Aside from these 2 sections, you can freely add or remove any other sections on Product template
In Product Details, you can customize the product media to gain the best CRO for your store. You can set the Media Ratio, Layout on Large Screen, width on large screen, and whether to show navigation and pagination on mobile, or show the zoom function.
The Blum theme supports 4 types of Media Ratio: Square, Portrait (2:3), Landscape (3:2), and Adapt to image. The Media Ratio will only be applied to the main media.
- Portrait (2:3)
- Landscape (3:2)
- Adapt to image
The Product Details section’s Media Layout shows Single With Thumbnail on large screen by default. Users can also switch to Gallery Grid in Media Layout On Large Screen to display more product media.
- Single With Thumbnail option
- Gallery Grid
If you choose the Single with thumbnails option for Large screen, the size of the media list on the left can be adjusted in the Thumbnail Ratio. There are 2 main types: Fit and Fill. Each type has 3 styles for you to choose.
Fit: The image will be scaled up and resized to fit the ratio style you choose. However, the image may be cropped to fit within the container.
For mobile view, the product media will show as a slideshow with only 1 image displayed at a time, and the option to Show Paginations As Number On Mobile will be enabled automatically to keep track of the number of images. The Show Navigation On Mobile option will be enabled by default as well, but you can disable both of these options if needed.
The image zoom feature is enabled automatically so customers can have a better look at the product. However, you can choose to disable this option.
In Advanced Description, you can show more content about your product using Static Page or Product Metafield in Content Source.
Static Page: Render all content from a fixed page to display on all products. To use this option, select Static Page in Content Source, then click on Select page.
- Product Metafield: Merchant must configure metafield of type “Reference” (which refers to a page for each product). Blum gets the metafield by name and renders the referred page content for each product. To use this option, select Product Metafield in Content Source, then enter Metafield Name.
Sticky Purchasing Bar
The Blum theme supports a sticky purchasing bar, which by default is set to be visible when scrolling down. This sticky bar will appear after the Add to Cart button and disappear after the product details end.
You can enable or disable product information on Sticky Purchasing Bar for mobile view. For purchase button on sticky bar, you can either switch between Add to Cart Button or Dynamic Checkout Button.
Please note that the position of the sticky bar will only be as you choose when the screen size is greater than 459px (tablet portrait and laptop/desktop devices). On devices with a screen size smaller than 459px, the sticky bar will show full width in the bottom center of the page.
Note that the sticky bar can only be visible on live view.
If your product does not have any variants, the sticky bar will only show the Add to cart / Buy now button.
To show all information from your products, Product Details section supports 11 blocks
Variants and price
- Product cross sell
You can simple add theme blocks by clicking on the “+” Add block icon.
You can freely add more blocks to your Product Details section. If you want to remove any block, click on the block you want to remove and choose Remove block. Each block can only be used 1 time only, except for Popup content, Custom liquid and Custom Text.
To customize each item in Product Details section, click on the block you want to edit.
Aside from these blocks, Product Details section supports 3 more blocks to use on Product page:
Picking Availability shows in paper note shape, with option to change Accent Scheme between Main Accent and Extra Accent. The option to show Expected Pickup Time will also be enabled by default.
Product Cross sell
The blocks allow you to change block titles in Heading box. You can feature 6 products at max in this block by clicking on Select product.
Product Recommendation section will show related products based on product information and orders.
You can change the heading content for Product Recommendation section at Heading box, or insert dynamic sources to replace Product Recommendation section heading.
By default, Product Recommendation section layout shows 4 items, with 2 items at min and 12 items at max. You can also change the number of items specifically for mobile view to be 1 or 2 items per row.