Settings

The Settings section allows you to manage how product information is displayed on the storefront. You can configure the display of total price and total units with customizable labels and positions, as well as upload a custom out-of-stock image to enhance the shopping experience.

Variant Total Price Settings

Show Total Price / Hide Total Price

• Option to enable or disable the display of the total price based on selected variants.

Position of Total Price

Choose where the total price should appear on the storefront.

• Top Position – Displays the price at the top of the variant..
• Bottom Position – Displays the price at the bottom of the variant..

Total Price Label

• Default: Total Price:
• This label appears next to the total price value.

Variant Total Units Settings

Show Total Units / Hide Total Units

• Option to enable or disable the display of total units (quantity) based on selection.

Position of Total Units 

Choose where the total units count should appear.

• Top Position – Displays the price at the top of the variant.
• Bottom Position – Displays the price at the bottom of the variant.

Total Units Label

• Default: Total Units:
• This label appears next to the total units value.

Out of Stock Image

• Upload a custom image to display when products are out of stock.
• The uploaded image will be stored securely and served via a unique URL.
• Supported formats: PNG, JPG, GIF, WEBP.

• Now, click on Save Settings

Front-End-Impact

• Go to the website homepage.
• Navigate to the Catalog page.
• Click on any Product.

• Variants are displayed according to the selected template type in app settings:

Swatch/Grid View

• Variants are displayed in a grid layout with product images.

Each variant block shows:

• Product image
• Price (with discount if applicable)
• Stock status (e.g., In stock / Out of stock)
• Attributes such as Color, Size, and Material

Dropdown Template

• Variants are displayed in a dropdown menu.
• Customers select options (e.g., Size, Color) from dropdowns before adding the product to the cart.

Swatch Template

• Variants are displayed as swatches (rectangular option boxes) such as Color, Size, and Material.
• Clicking on a swatch dynamically updates product details like price, stock status, and discount.
• Customers can select their preferred options and then proceed to add the chosen variant directly to the cart.

Circle Swatch Template

• Variants are represented with Circular Swatches (commonly used for colors).
• Customers can select a variant by clicking on a circle.
• On selection, the product details (price, stock status, attributes) update instantly.

Square Swatch Template

• Variants are represented with square swatches (commonly used for colors, sizes, or materials).
• Customers can select a variant by clicking on a square.
• On selection, the product details (price, stock status, attributes) update instantly.