# TmgCode ConvertixCheckout Doc

TmgCode ConvertixCheckout Doc

# Installation

# Requirements

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io/). Luma-based storefronts are not supported.</p>

- <span style="white-space: pre-wrap;">Magento Community edition </span>`<span class="editor-theme-code">2.4.4-p9</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">2.4.5-p8</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">2.4.6-p7</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">2.4.7-p1</span>`<span style="white-space: pre-wrap;"> or higher</span>
- <span style="white-space: pre-wrap;">PHP </span>`<span class="editor-theme-code">8.1</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">8.2</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">8.3</span>`<span style="white-space: pre-wrap;"> or </span>`<span class="editor-theme-code">8.4</span>`
- [**Hyvä Themes**](https://hyva.io) **installed and activated**
- Composer 2.x
- OpenSearch configured
- SSH/CLI access to the Magento server

# Prerequisites

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io/). Luma-based storefronts are not supported.</p>

#### Before Installation

<p class="callout info"><span style="white-space: pre-wrap;">Before installing the module, </span>**it is strongly recommended to create a full backup of your Magento instance.**</p>

##### Backup your Magento 2 instance

<span style="color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">The backup feature is disabled by default. To enable, enter the following CLI command:</span>

```shell
php bin/magento config:set system/backup/functionality_enabled 1
```

**Then:**

```shell
php bin/magento setup:backup --code --db
```

##### Restoring Magento 2 instance

**First run:**

```
php bin/magento info:backups:list
```

To check your backups saved into filesystem.

**Then run:**

```
php bin/magento setup:rollback -f 1434133011_filesystem.tgz -d 1434133011_db.sql
```

<p class="callout info"><span style="white-space: pre-wrap;">Replace </span>**14134133011\_**<span style="white-space: pre-wrap;"> with your backup file name.</span></p>

##### Composer repository file backup

```
cp composer.json composer.json.bak
cp composer.lock composer.lock.bak
```

#### Recommended Testing Environment

Before deploying the module to a production store, it is strongly recommended to test the installation in a development or staging environment first.

Recommended environments:

- Development domain
- Staging server
- Local Magento instance

This helps validate:

- Theme compatibility
- Third-party module compatibility
- Checkout behavior
- JavaScript functionality
- Customizations specific to the store

Example:

```
dev.yourstore.com
staging.yourstore.com
```

# Installation Guide

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io). Luma-based storefronts are not supported.</p>

##### Maintenance Mode (Optional)

```
php bin/magento maintenance:enable
```

#### Installation Methods

##### **Method 1 - Composer Installation (Recommended**)

```html
composer require tmgcode/module-convertixcheckout
php bin/magento module:enable TmgCode_ConvertixCheckout
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
php bin/magento maintenance:disable
```

##### **Method 2 - Manual Installation**

**Extract the module archive into:**

```
app/code/TmgCode/ConvertixCheckout
```

**Then run:**

```
php bin/magento module:enable TmgCode_ConvertixCheckout
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
php bin/magento maintenance:disable
```

# Activation

# Activate module

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io). Luma-based storefronts are not supported.</p>

##### Activate module

**Go to :**

```
Admin -> Stores -> Configuration -> TMGCODE -> Convertix Checkout -> General
```

**Set:**

```
Enable Custom Checkout to YES
```

[![Enable-module.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/image.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/image.png)

# Configuration

# General configuration

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io/). Luma-based storefronts are not supported.</p>

![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/sELimage.png)#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">1. Enable Custom Checkout</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255); white-space: pre-wrap;">When disabled, the Hyvä fallback message will be shown instead. </span>

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">1. Checkout Layout</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">2 Columns: shipping steps left + order summary right. 3 Columns (onepage): address | shipping+payment | summary.</span>

<table id="bkmrk-3-columns-%28onepage%292"><colgroup><col style="width: 500px;"></col><col style="width: 500px;"></col></colgroup><tbody><tr><td>**3 Columns (onepage)**

</td><td>**2 Columns**

</td></tr><tr style="height: 10px;"><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/HHJimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/HHJimage.png)

</td><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/E5aimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/E5aimage.png)

</td></tr></tbody></table>

# Checkout Options

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io/). Luma-based storefronts are not supported.</p>

![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/xXMimage.png)#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">1. Enable Coupon Code</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">Show coupon code input in Order Summary. Customers can apply/remove coupons before placing the order.</span>

[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/9Xeimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/9Xeimage.png)

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">2. Show Step Numbers</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">Display numbered circles before each checkout section title.</span>

<table id="bkmrk-yesno"><colgroup><col style="width: 500px;"></col><col style="width: 500px;"></col></colgroup><tbody><tr><td>**YES**

</td><td>**NO**

</td></tr><tr><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/eMAimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/eMAimage.png)

</td><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/Zggimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/Zggimage.png)

</td></tr></tbody></table>

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">3. Guest Checkout Mode</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">Guest Checkout Only: no login option shown. Guest + Login: a login button is shown at the top of the checkout for non-logged-in customers.</span>

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">4. Guests Can Create Account During Checkout</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">When enabled, guests see an optional "Create account" checkbox in the shipping form. If checked, an account is created automatically after order placement using the checkout email and chosen password.</span>

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">5. Show Product Thumbnails</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">When disabled, product images are hidden in the Order Summary on checkout.</span>

<table id="bkmrk-yesno-1"><colgroup><col style="width: 240px;"></col><col style="width: 240px;"></col></colgroup><tbody><tr><td>**YES**

</td><td>**NO**

</td></tr><tr><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/cD9image.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/cD9image.png)

</td><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/GiVimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/GiVimage.png)

</td></tr></tbody></table>

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">6. Enable Edit / Delete Products in Checkout</span>

<table id="bkmrk-yesno-2"><colgroup><col style="width: 240px;"></col><col style="width: 240px;"></col></colgroup><tbody><tr><td>**YES**

</td><td>**NO**

</td></tr><tr><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/s7wimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/s7wimage.png)

</td><td>[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/zTBimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/zTBimage.png)

</td></tr></tbody></table>

# Appearance

## **ConvertixCheckout for Hyvä Theme**

<p class="callout warning"><span style="white-space: pre-wrap;">This module is compatible only with </span>[**Hyvä Theme**](https://hyva.io/). Luma-based storefronts are not supported.</p>

[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/4dZimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/4dZimage.png)

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">1. Primary Color</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">Used for buttons, step number circles, spinner and selected method highlights. Enter a hex value (e.g. #1d4ed8).</span>

**Unlimited color configuration using color picker.**

[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/ReUimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/ReUimage.png)

#### <span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">2. Primary Button Text Color</span>

<span style="color: rgb(48, 48, 48); background-color: rgb(255, 255, 255);">Text color on primary buttons. Default: #ffffff.</span>

[![image.png](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/scaled-1680-/SwKimage.png)](https://docs.tmgcode.ro/uploads/images/gallery/2026-05/SwKimage.png)

# Terms & Conditions