Product template
About Blum Product Template Section
By default, the Blum Product Template consists of 2 sections: Product Details and Product Recommendation. These sections cannot be removed, and can only be hidden on the Product template.
Aside from these 2 sections, you can freely add or remove any other sections on the Product template.
Access Blum Product Template Section
On the top center bar, click the dropdown button > Products > Choose products.
Blum Product Template Section Configuration
The Product Template section has several settings that can be adjusted. To change the product, on the top left sidebar, click on Change > Select product.
Blum Product Details Section Configuration
Edit General
You can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.
Edit Layout
You can simply:
- Remove padding top
- Remove padding bottom
Edit 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. The Media Ratio will only be applied to the main media.
- Square
- Portrait (2:3)
- Landscape (3:2)
- Adapt to image
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.
- Fill: The image will be nested within the ratio style you choose.
The Media shows Single With Thumbnail on large screen by default. You can also switch to the Gallery grid to display more product media.
- Single with thumbnails
- Gallery grid
You can also customize the Width on large screen:
- Wide
- Compact
For mobile view, the product media will show as a slideshow with only 1 image displayed at a time.
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.
The Media background option lets you change the background color when using the transparent image.
Edit 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.
Edit 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 the Sticky Purchasing Bar for mobile view.
For the purchase button on the sticky bar, you can either switch between the Add to Cart Button or the Dynamic Checkout Button.
You can also choose the position of the sticky bar between the 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.
If your product does not have any variants, the sticky bar will only show the Add to cart / Buy now button.
Blum Product Details Blocks Configuration
To show all information about your products, the Product Details section supports:
- Title
- Variant selector
- Purchasing
- Vendor
- Price
- Pickup availability
- Frequently bought together
- Extra information
- Basic description
- Custom liquid
- SKU
- Rating
- Popup
- Size guide
- Custom text
You can freely add more blocks to the 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, except for Popup content, Custom liquid, and Custom Text.
The settings for these block is similar to the Featured Product block settings.
To customize each item in the Product Details section, click on the block you want to edit.
Aside from these blocks, the Product Details section supports 3 more blocks to use on the Product page: Basic description, Pickup availability, and Popup content.
Edit ‘Pickup Availability’
Picking Availability shows a note shape, with the option to change the Accent Scheme between Main Accent and Extra Accent. The option to show Expected Pickup Time will also be enabled by default.
Edit ‘Popup Contents’
The blocks allow you to change the text and change the popup page. The contact forms in the selected page will not be displayed.
Blum Product Recommendation Section Configuration
The Product Recommendation section will show related products based on product information and orders.
Edit General
You can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.
You can change the heading content for the Product Recommendation section in the Heading box, or insert dynamic sources to replace the Product Recommendation section heading.
Edit Layout
By default, the 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.
You can also:
- Remove padding top
- Remove padding bottom
Frequently Asked Questions
What Sections Does Blum Product Template Include?
Product Details and Product Recommendation
What Is Blum Product Template?
Blume Product Template is essential for you to set up and promote your goods and store. You must pay detailed care into optimizing this section, as it’s the direct impact to conversion rate.