Product template
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
Product Details
Media
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.
- Square
- 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.
Square:
Portrait (2:3):
Landscape (3:2):
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.
Advanced Description
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.
You can also choose the position for the sticky bar between bottom right and bottom left for greater convenience and to avoid overlapping the live chat button or other information.
- Bottom right:
- Bottom left:
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.
Product information
To show all information from your products, Product Details section supports 11 blocks
-
Product meta
-
Variants and price
-
Purchasing
-
Basic description
-
Extra information
-
Size guide
-
Pickup availability
-
Popup content
-
Custom liquid
-
Custom text
- Product cross sell
Add Block
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:
Basic description, Pickup availability, Product cross sell.
Basic description
By default, Read More button is enabled to shorten the description when there are more than 150 characters. Disable this option will show full basic description
Pickup availability
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
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.
To improve the experience on mobile, you can choose to “Enable carousel on mobile” to show the collection list as a carousel instead of rows. “Show Navigation on mobile” will enable arrow navigation for mobile view only.
