Kalles 4.0
Search…
Product Form
This block will allow you to configure Product Swatch, Add to Cart button, Checkout, Grouped Product and Advance Product Type option. This is the most important block in the Product Main option.
In Theme Customize > Go to Product page > Choose Product Main option > Click Add block button to add the Product form block to the Product information next to the product image.
Add the Product form block to the Product main option, then drag it to any position that you wanna show it. Example: Show the Product Meta below the Product form (Add to Cart button):
Click on the Product form block, the settings sidebar will open and you guys can configure some options below:

1. Product Swatch

  • Selector type: You can choose a variant selector type here. The Kalles theme version 4.x has a total of 6 selector types for the Product Swatch, you can choose those settings to see how it looks like.
For example, you can see some styles in the images below:
Selector type: Block
Selector type: Circle
Selector type: Dropdown
  • Color selector type: You can choose a Color selector type here. We have a total of 10 selector types for the Color Swatch, you can choose those settings to see how it looks like.
For example, you can see some Color swatch styles in the images below:
Color selector type: Radio
Color selector type: Variant Image
  • Enable adapt to first swatch image variant checkbox: Once you tick on this checkbox, the ratio of the Color Variant image will adapt to the ratio of the first product variant image that you configured in the Shopify backend.
  • Color selector size: You can choose the size for the color swatch color/ image here. This option only works with color swatches, variant image types.
  • Show quantity selector checkbox: Tick on this checkbox to enable quantity selector.
  • Enable wishlist/ compare checkbox: Tick on this checkbox to enable Compare/ Wishlist buttons next to the Add to Cart button.
  • Enable button full-width checkbox: Tick on this checkbox to enable the Add to Cart button - layout fulll-width.
  • Button round corners: You can configure the border-radius for the Add to Cart button, if this option is 0px, the Add to Cart button is a square button.

2. Add To Cart Button

  • Add to Cart animation: You can choose an animation for the Add to Cart button here. The Kalles theme has a total of 7 animations for Add to Cart button, you can choose one of these animation styles for the Add to Cart button.
You can check some Add to Cart animation styles in the video below:
  • Loop time (seconds): This option allows you to configure the time that you wanna replay the animation for Add to Cart button. Example: I set 6 seconds, which means after every 6 seconds, the Add to Cart animation will auto replay.
  • Button Transform Text: Choose text transformation for the text on Add to Cart button here. We have 3 transformations: Uppercase, Capitalize and Lowercase.
  • Enable button icon: Tick on this checkbox to Enable the Add to Cart button icon.
  • Button Style: You guys can choose a Style for the Add to Cart button here. Our theme has a total of 4 button styles for the Add to Cart button.
  • Button Color: Configure the color for the Add to Cart button here. You can choose one of 5 button color available styles.
  • Button Hover Effect: Please choose an effect for the Add to Cart button here. We have total of 10 effects for you to choose. You can enable one of the available effects to see how it work when you hover over the button.

3. Dynamic Checkout Buttons

  • Show dynamic checkout buttons checkbox: Tick on this checkbox to enable the Buy it now button on the product page.
  • Button Transform Text: Choose text transformation for the text on the Buy It Now button here. We have 3 transformations: Uppercase, Capitalize and Lowercase.
  • Button Color: Configure the color for the Buy It Now button here. You can choose one of 5 button color available styles.

4. Grouped Product

You can read more this article to know how to configure Grouped products.

5. Advance Products Type

You can read more this article to know how to configure the Advance Products Type option.