Product template

About Product Template Section

By default, the 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 Product Template Section

On the top center bar, click the dropdown button > Products > Choose  Default products.

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.

Product Details Section Configuration

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.

Layout

You can simply:

• Remove padding top
• Remove padding bottom

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.

You can also enable the zoom function on click the media.

The zoom option will open the media gallery when click on the media

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 “Show Paginations As Number On Mobile” option will be enabled automatically to help track the number of images.

The “Show Media Thumbnails on Mobile” option will also be enabled by default, but you can disable both options if needed.

The Media background option lets you change the background color when using the transparent image.

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 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.

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
• Share

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.

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.

Popup content

The blocks allow you to change the text and change the popup page. The contact forms in the selected page will not be displayed.

Product Recommendation Section Configuration

The Product Recommendation section will show related products based on product information and orders.

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.

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

1. Can I remove the Product Details and Product Recommendation sections?

No, these sections cannot be removed but can be hidden on the Product template.

2. How do I customize the layout of product variants?

The variant selector block allows you to customize the layout and display of product variants.