Default/main product template
*Important when updating to Whisk 8.0.0 from version 7.0.1 or earlier
There is a breaking change on both product templates that should be addressed before the theme update is pushed live. For this default product template, make sure to add in the blocks titled "Variant selector" and "Buy Buttons". These used to be hard-coded into this product template, but we have added them as blocks to allow for more flexible layouts. For detailed instructions and information, watch this video:
As of Whisk 6.1.0, the theme also comes with an alternate product template called "Two columns". You can find that documentation here: https://support.coquelicot.io/article/86-two-column-product-template
The main product section is one of the most unique sections to the Whisk theme. On large desktop screens, the layout is 3 columns, then it collapses to 2 columns on smaller screens, and is only 1 column on mobile. In order to make this work seamlessly and keep the content in a good order for shoppers, the blocks on this section work a little differently than elsewhere. Let's start with going over the blocks in this section.
Fixed placement of variant picker and buy buttons
The variant selector, product form, and complementary products blocks have a forced placement on this product template that will not adjust based on where the blocks are placed within the theme editor. This was necessary to be able to split these blocks into the 3rd far right column when the screen is large enough to show all 3 columns on the product page. When the screen size gets smaller, the layout adjusts to 1 or 2 columns, the variant picker, product form, and complementary products will move below the all of the other product blocks, except for Details tabs. The Details tabs will always be at the bottom of the block stack. We did this in order to optimize for conversions buy keeping the buy buttons closer to the top of the page. An example of this layout is on our "Frulla" soft preset demo store. This product template layout looks and works best if the other block content is short, so that even when the page shrinks down to 1 or 2 columns, the buy buttons are towards the top of the page.
We understand that sometimes merchants need more flexibility with the placement of the product blocks, so for those cases, we created an alternate product template called "two-columns". In this layout, there is only ever a maximum of two columns and you have more control over where every block is placed, including the blocks for "Buy buttons" and "Variant selectors". An example of this layout is on our "Honey to the Bee" sharp preset demo store. Here's a link to the documentation for that template: https://support.coquelicot.io/article/86-two-column-product-template
Blocks
Variant selector
This block will display the variant selectors for the product. All options for how this displays are set in Theme Settings/Products and you can find the documentation for that here
Product form
Displays the "Add to cart" button and quantity selector for the product.
Show dynamic checkout buttons
Check this box to show any dynamic checkout options that you have configured for Payments. If you decide not to show them here, know that they will still be available options during checkout.
Show quantity selector
(Whisk v10.1.0 and above)
Uncheck this box to remove the quantity selector from the product template.
Product title
Text size
Select the size of the text for the title.
Description
This is the product description that is entered for each product in the Shopify admin. There are no customizable settings for this block.
Text size
Select the size of the text for the title.
Share
You can choose which social media share buttons you want to show by checking the box next to that platform option. The options are:
- Twitter or X (you can choose which icon to display)
There is also a button to copy the page url link to the computer's clipboard. This button will always display if this block is selected.
Price
Displays the product price. This price will automatically update when different variants with different prices are selected, and will show an original price crossed out next to the current selling price if the product is on sale. If your store in configured to have taxes included in the price of items, then a note will display here that reads, "Tax included." If you have a Shipping policy filled out for your store in the Shopify admin, a message will also show underneath the price that says "Shipping calculated at checkout" and it will be a link to your full Shipping policy. Example:
Show shop pay installment terms
You can choose to show Shop pay installment terms underneath the price if Shop pay is enabled for your store and by checking this box.
Vendor
No customizable settings here. It will just display the product vendor name.
Product subtitle
Displays the product subtitle for the product. For more information, see the documentation for Product subtitle.
Text size
Select the size of the text for the title.
Custom liquid
Add your own Liquid or HTML code here. See the Custom liquid documentation for more details.
Divider
This block adds a visual divider line with space above and below it. This is useful if you want help differentiating many blocks of content. Make sure your divider line looks good on all screen sizes as the layout shifts from 3, to 2, to 1 column.
Divider size
(Whisk 6.1.0 and above)
Choose between a thin or a thick line.
Details tab
Details tabs are the place to add custom content for your products, like ingredients, nutrition facts, sizing information, etc. They support images, text, and even page content. They can do so much, they deserved their own documentation. Learn more about how to configure Details tabs.
Details tabs will always show after every other block in this section, even if they are organized in the Shopify theme editor to be above them. This is intentional in order to keep the product form and shopping buttons higher up on the page on smaller screens when the layout is 1 or 2 columns. The detail tabs themselves will display in the order they are in the theme editor.
Custom button
(Whisk 11.0.4 and above)
Add a button that links to a URL. This can be used instead of an add to cart button for scheduling apps, preorders, etc.
Apps
You can add apps through this block. On the Whisk demo stores, we use this to show the star ratings for Shopify's Product Reviews app.
Inventory Status
(Whisk 6.1.0 and above)
Show the inventory status of a product or selected product variant when inventory is being managed through the Shopify admin. The "Track quanitity" checkbox needs to be checked on each product that you want to show inventory status on.
Font style
Choose the font that you want the inventory status to display in.
Text size
Select the size of the text for the status.
Make text bold
Check this box to make the text bold.
Show inventory status
Choose one of the options for when to show the inventory status:
"Always" — Status will show when a product is In stock, low inventory, or sold out.
"When stock is low or sold out" — Status will show when a product is low inventory, or sold out, not when it is in stock.
"Only when stock is low" — Only show status when a product has low inventory, not when it's in stock or sold out.
Low inventory threshold
Any inventory amount below this chosen number will qualify as "low inventory".
Show inventory count
Show the number amount left of inventory in the status notice. When unchecked, the notice will just simple say "In stock", etc.
In stock, low inventory, and out of stock colors
Choose a color for the notice to display in so it stands out in the layout. Make sure you choose a color that has enough contrast to be legible on top of your store's background color.
Single line text
Use this block for line item properties you want to display for a product.
Icon
(Whisk 6.1.0 and above)
Choose an icon to prepend to the line of text. Optional.
Text
The text that you want to display. You can also connect this dynamically to a product metafield.
Font style
Choose the font that you want the product title to display in.
Text size
Select the size of the text for the title.
Multi line text
Add rich text like paragraphs of content, links, and lists. Note: when using a dynamic metafield, the metafield cannot be a "rich text" content type. This is a Shopify limitation, this type of metafield will not work in a product section. Choose a "single line" or "multi line" metafield type instead.
Text
The text that you want to display. You can also connect this dynamically to a product metafield.
Text size
Select the size of the text for the title.
SKU/Barcode
Display the product or selected product variant's SKU and/or Barcode when it's available.
Font style
Choose the font that you want the product title to display in.
Text size
Select the size of the text for the title.
Show SKU
Check this box to display the SKU. The SKU will automatically be prefixed with the text "SKU:"
Show Barcode
Check this box to display the Barcode.
Barcode descriptor
Add a descriptor for the barcode that will be prefixed to the barcode. This is optional.
Countdown timer
For details on the timer, see our Countdown timer documentation.
Settings
Show breadcrumbs
Check this box to show breadcrumb links above the product information. The breadcrumbs will show the collection page that the visitor was on before they arrived on the product page if they came from a collection page. If not, they'll just see a link back to "Home".
Details tabs style
You can choose either to show the details tabs as Accordions or Buttons. Here's an example of each:
Accordions — Accordions are all collapsed by default.
Buttons — The first tab is open by default.
Media
If you have more than one image on the product, the images will display in a slideshow media gallery. You can give visitors two choices for how to navigate through the images on desktop and mobile.
Uncheck this box to keep the layout at 2 columns on large desktop screens.
Gallery layout options
Thumbnails
Arrows
Enable video looping
Check this box if you want videos to loop over and over when they are played.
Enable sticky media on desktop
Check this box if you want the images to stay at the top of the section as the page scrolls through the other content in columns on the section.
Shopping options
Show product quick add on page scroll
When this checkbox is selected, a header with the product name, dropdown options (if any), and button to add to cart will show once the visitor scrolls past this section.
Show pickup options if available
If you have Local Pickup enabled on your store, check this box to show those options here to entice visitors who want local pickup to purchase. This information will display underneath the product form with a link to see details.
Show dynamic checkout buttons
Check this box to show any dynamic checkout options that you have configured for Payments. If you decide not to show them here, know that they will still be available options during checkout.
Show recipient information form for gift cards
Available in Whisk versions 4.1.0 and greater
Check this box to add a form to the Gift Card product page that allows the customer the option to automatically send the gift card they purchase to a recipient besides themself.
Complementary products
See our page on "Product recommendations" for details about these settings.
Section spacing
(Whisk 5.0.0 and above)
Adjust top and bottom padding within the section.
Add space above or below
(Whisk 4.3.1 and below)
Depending on the sections that are above or below this section, you may want to add some extra space for a more pleasing layout.