Configure Product Summary - Blocks Content

Product Summary Blocks

In the Product Page > Product Summary option > Our theme allows customers to add blocks to configure the Summary option following what they want. The Kalles theme has a total of 21 blocks for the Product Summary option.

Remove Block button: If you wanna remove any blocks from the Product Summary option, you can click on this button to remove those blocks.

1. Product Title

This block allows you to add a Product title on the Product Page. In addition, you also can adjust the font size of the Product title here. When you click on the Product Title Block, you will see an option that allows you to adjust the font size for the Product Title.

2. Product Price, Review

This block allows you to add the Product price and Review option to the Product Single Page.

Varies Price settings: You can choose different settings for the Price here. We have the format: from $39, $39 – $59 and None. If you wanna disable the price, you can choose None. This setting can be seen very clearly on a Variant product. You can see the example images below to see the difference in the price settings:

Price Settings: None

Price Settings: From $39

Price Settings: $39 – $59

Text Save: If your product has compared price, you can choose to show Saved amount here or Discount percentage here.

Saved amount setting. Example: Save 19%

Discount percentage settings. Example: Save $25.01

Use Rating? checkbox: Please tick on this checkbox to enable Review stars next to the product price. If you wanna disable the review, please uncheck this checkbox.
Add Snippets Liquid: You can add the custom code here. If you want to use a review app that is incompatible with our theme, you can add app snippets reviews to show a ‘write reviews’ on the product page. It will work when you use the ‘Other app‘ review on General settings. This is an example: First one, you can go to this link to install Judge.me Product Reviews app. Second, you can copy & paste this code below to Add Snippets Liquid box on the Collapsible Review tab.

Code install:

{%- render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true -%}

Add the code in the option like the image below:

Note: You should contact the review app’s support team to ask for the embed code for integration.

3. Description

This option allows you guys add the Description option to the Product page.

Description mode: You can choose Description mode here, our theme allows choose Full Description and Short Description.
Short description: You can paste the content of the short Description here. And if you configure Metafield Short Description, you can choose here.
Excerpt length (integer): Please adjust the length of the Description option here.
Use Read more checkbox: Tick on this checkbox to enable the “Read more” button for the Description option.
Read more button title: You can enter the string that you wanna show on the Read more button here.

4. Live view

This is a fake feature – help customers boost sales on the store.

Icon/ IMG format: You can choose the format for the Live view icon here. Our theme supports showing icons or custom images here.
Icon Name: If you choose the Icon format, you can get an icon on Line awesome and paste the name of icon here, it will show on the Live view message.
Image upload: If you choose the Image format, you can upload your image here.
Use Fade Animation checkbox: Tick on this checkbox to enable the Fade Animation for the Live view icon.
Min/ Max fake real-time Visitor: This option allows you to configure the number of the minimum/ maximum visitor in the real-time of the Live view option.
Interval time: You can configure the time (seconds) that the number of visitors will change here. Example: The number of visitors will change every 3 seconds.
Live View Text box: You can add the content that you wanna show on the Live view message here.

5. Product Form

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 see in the image 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 replay.
Button Design: You guys can choose a design for Cluster Add to Cart buttons. The Kalles theme has a total of 3 designs for the Cluster Add to Cart buttons.
Button Text Transformation: Choose text transformation for the text on Add to Cart button here. We have 3 transformations: UPPERCASE, Capitalize and lowercase.

You guys can view the video below to see the different designs of Add to Cart button.

Product Swatch:

Swatch design setting: The Kalles theme has a total of 10 settings for the Product Swatch, you can choose those settings to see how it looks like.

Swatch color setting for Design: We have 2 designs for Swatch color: Circle and Square
Swatch Layout setting for Color/IMG variant: You can choose to show Swatch Color variant or Swatch image variant here.
Swatch Layout setting for Size variant: This option allows you to handle the size of the Swatch color variant. We have 4 sizes: Small, Medium, Large and Extra Large.

Show quantity selector checkbox: This option allows you to enable/ disable the quantity selector next to the Add to Cart button.
Use Add to Cart button fullwidth checkbox: This option allows you to enable/ disable the fullwidth layout for the Add to Cart button.
Show dynamic checkout button checkbox: This allows you to enable/ disable the Dynamic checkout (Buy It Now) button.

6. Brand Image

This option allows you to show the Brand image/ Vendor image of the product on the Single Product Page like the image below:

You guys can read more this article to know how to configure the Brand image option for the product.

7. Delivery Time

This option allows you to show the Delivery time message to the Single Product Page, like the image below:

The Delivery Time block has some options that you can configure in the same way that you can with the Live View block mentioned above.

Hide with ‘pre-order’ checkbox: Tick on this checkbox to hide/ remove the Delivery time message on all Pre-order products.
Delivery Start Date: Here, you can specify the number of days (counting from the current time) that you want to set as the delivery (start) date. Example: Today is January 01, 2022 and you set this option as 10 days, which means the time you need to prepare the product is 10 days and the product will be delivered to customers on January 10, 2022.
Delivery End Date: Here, you can specify the number of days (counting from the current time) that you want to set as the delivery end date. Example: Today is January 01, 2022 and you set this option as 15 days, which means the time you need to prepare the product is 10 days and the product will be delivered to customers on January 15, 2022.
Exclude Days From: This option allows you to configure the time is set for: Only Delivery or Shipping & Delivery.
Exclude Days: You can add the day in a week that you wanna exclude here. Example: Exclude Sunday from the Delivery time. This option also allows you to configure with Metafield – to set the different exclude days for specific products.
Delivery date format: The Kalles theme has a total of 12 formats for the date, you can pick a format that you wanna use
Delivery Time Cut Off: You can set the time of day you want to cut off the delivery here.
Text hours/ minutes: This option allows you can customize the text of the Text hours/ minutes. Example: In your language, the hours/ minutes is Stunden/Minuten.

8. Size Chart, Delivery, Ask a Question

These options help provide more detailed information about products.

8.1. Size Chart

Show Size chart: There are three options for you: None, All Product, and only products that have the variants name “Size”.
Position show Size chart: You can choose between Default and Show on swatch variants name “Size”.
Size Chart Type: There are two types for you, including IMAGE and HTML.
HTML Size Chart: Allows you to choose a page that you created for the size chart.
IMAGE Size Chart: This option allows you to upload an image for the size chart.
Enter variant name you want has a size guide.

8.2. Delivery & Return

Show Delivery & Return? checkbox: You can enable/ disable the Delivery & Return option here.
Add page Delivery & Return: Choose a page that you wanna show in the Delivery & Return option here.

8.3. Ask a Question form

Show Ask a question? checkbox: You can enable/ disable the Ask a question form here.

9. Product meta

This section allows you to enable/ disable Products vendors, Product SKU, Barcode, Availability, Product Category, Product tags.

10. Trust Badge

Updating the Trust Badge helps create customer trust regarding products.

The Trust Badge block has some options to configure below:

Message: This option allows you to enter text for Trust Badge. You also can adjust the font size for the message in the Font-size option.
Source IMG: You can choose between Image and SVG. You are allowed to customize both of these options.
Trust seal image: You can upload an image for Trust Badge. You also can change Image align, Image width.
SVG List: You can enter or delete SVG for Trust Badge here. You also can change the height for it here.

11. Product Social

You should show this section on your product page to connect your products to various customers via social media.

Social align: This option allows you to change position for Product Social, you can align it left or align it center.

12. Countdown Timer

If you want to use Countdown Timer, you must add Metafields for products first. Please click here to know how to add Meta fields countdown timer for a product.

The Countdown Timer block has some options to configure below:

Show Countdown Timer: Choose All products if you want to show a countdown for all products. Choose Only products had tag “has_stock_countdown” if you want to show the countdown for the specific product. (Please add the tags “has_stock_countdown” on the products first).
You are allowed to upload an icon/ image on the left of the message. You also can enable/disable Fade animation for them.
Message, Text Align, Font size: You can enter and adjust align, font size for the message.
Countdown Timer Loop In A Day: You can enable/disable Use loop countdown. Then, you can set the time for the countdown loop here.
You can change the showing text for: Days, Hours, Mins, Secs.
Countdown design: There are many designs for you to choose.

13. Inventory Quantity

This section helps you raise the conversion rate by creating a fake product quantity in stock, which makes customers decide to buy it quickly.

The Inventory Quantity block has some options to configure below:

This section allows you to choose between Icon or Image to show. You can upload an image from your device or choose an icon that you want, and enable/disable fade animation for them.
Stock: You can choose between Random and Default. If you choose Random, you can adjust the maximum quantity. If you choose Default, you can choose a specific number of stock.
Message: You are allowed to enter text, change font size and align.
Progress bar: You can enable/disable, change width, color.

14. Pickup availability

This section engages local shoppers by showing where items are available for pickup, right from the product page.

If you want to show this section, you must set local pickup location first. From Shopify Admin > Settings > Shipping and Delivery > Scroll down to Local pickup, click on Manage > Custom for Local pickup there. Kindly follow this instruction

15. Total sold flash

This section shows the number of products bought at a specific time and this is a fake feature that helps store owners boost sales. This builds customer trust and may result in a faster purchase.

The Total sold flash block has some options to configure below:

Icon/ IMG format: You can choose the format for the Total sold flash icon here. Our theme supports showing icons or custom images here.
Icon Name: If you choose the Icon format, you can get an icon on Line awesome and paste the name of the icon here, it will show on the Total sold flash message.
Image upload: If you choose the Image format, you can upload a custom image for this block here.
Use Fade Animation? checkbox: Tick on this checkbox to enable the Fade Animation for the Total sold flash icon.
Min/ Max quantity: The product quantity will be shown randomly. However, you can adjust the min/max product quantity that was sold via this option.
Min/ Max time: You can configure the number of the minimum/ maximum time that will show on the Total sold flash option.
Text: You can enter the content that you wanna show on the Total sold flash option here.

16. Text

This section allows you to give more information to customers. You can feel free to enter the text or add a link via this section. Once you add this section on Product Summary, it will show on all products.

Text show on all products: Add the content to the Text box > Save > The content will show for all products.
Text show for a specific product – configure via Metafield: You can configure follow this article.

17. Custom HTML

This section allows you to add custom HTML content to the Product Page. This block can work for all products or a specific product if you use Metafield.

Custom HTML show on all products: First one, you need to go to Online Store > Pages > Add a new page > Add the content/ image that you wanna show on the product page here. Then please add this block > Select the page that you just create > Save > The content will show for all products.
Custom HTML show for a specific product – configure via Metafield: You can configure follow this article.

18. Custom Liquid

This section allows you to add snippets or other Liquid code to create advanced customizations. Click on the Learn about Liquid button to get more information.

19. Collapsible Description/ Review/ Tab

You can read more this article to know how to configure the Collapsible Tabs.

Kalles Shopify Theme