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.

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):

1. Product Swatch

  • Selector type: You can choose a variant selector type here. For example, you can check the video below:

  • Color selector type: You can choose a Color selector type here. For example, you can see some Color swatch styles in the image below:

  • 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 check some Add to Cart animation styles in the video below:

  • Loop time (seconds): 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: Uppercase, Capitalize and Lowercase.

  • Enable button icon: Tick on this checkbox to Enable the Add to Cart button icon.

  • Button Style, Button Color, Button Hover Effect: config the style for the Add to Cart 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. You can know more on this article.

  • Button Transform Text: We have 3 transformations: Uppercase, Capitalize and Lowercase.

  • Button Color: Configure the color for the Buy It Now button here.

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.

[Private Offer] EComposer Partner Plan

Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)

  • Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.

  • Create advanced sections & add to Kalles with ease

  • Save up to 50 pages/sections

  • 100+ professional, stunning pre-designed templates

  • Anyone can build pages with live drag-drop editor

How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free

Cheers, The4.

Last updated