# Opencart

The Cloudimage Opencart Plugin will automatically adapt the image URLs in your Opencart site to deliver your images rocket fast over the Cloudimage multi-CDN infrastructure. You only need to register with Cloudimage and install the plugin in your Opencart Admin.

## Installation <a href="#od_6dc6f7bb" id="od_6dc6f7bb"></a>

### Prerequisites <a href="#od_d63bc98a" id="od_d63bc98a"></a>

To use the plugin, you need to have a Cloudimage account. You can create one on the [Cloudimage registration page](https://www.cloudimage.io/registration).\ <br>

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/WN4s3b3WslzIhKHr7Aen/image.png" alt=""><figcaption></figcaption></figure>

### Step 1. Download the plugin <a href="#od_27374794" id="od_27374794"></a>

To get the plugin, you need to open [Opencart Extension Marketplace](https://www.opencart.com/index.php?filter_license=0\&route=marketplace/extension&).

Then, search for "Cloudimage" in the search bar.

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/YiS7tvuKirahnX2KT5qH/o2.png" alt=""><figcaption></figcaption></figure>

Select the *Cloudimage by Scaleflex* plugin and click on *Download*. The *Download* button will be available on the right side. This will download the .*zip* file.

### Step 2. Install the plugin in Opencart <a href="#od_a86d9a27" id="od_a86d9a27"></a>

First, you need to log in to your Opencart Admin:

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/vhbBu9LwBDVUVoLV0yKY/o3.png" alt=""><figcaption></figcaption></figure>

Then, navigate to *Extension->Installer*.

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/RV9I5zY23YylfNxwFzMo/o4.png" alt=""><figcaption></figcaption></figure>

Click on "Upload" and upload the .zip file that you downloaded in the previous step:

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/Gay9s081iuQikeEXgq51/o5.png" alt=""><figcaption></figcaption></figure>

### Step 3. Activate the module <a href="#od_9b255244" id="od_9b255244"></a>

Navigate to *Extensions*->*Modifications* and select *refresh* in the Modification panel. Refresh button will be available on the top right corner as shown below:

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/CoXslaN5qhb8klwuByp9/o6.png" alt=""><figcaption></figcaption></figure>

Navigate to *Extensions*->*Extensions*->*Modules*.

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/VPrlNILMsniCyYkoDKyg/o7.png" alt=""><figcaption></figcaption></figure>

Select *Cloudimage* from the list of modules and click on *Edit*.

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/ZdhrPWHT9OCkXQNZvrHv/o8.png" alt=""><figcaption></figcaption></figure>

Enable the plugin and enter Cloudimage Token or CNAME

You need to enter your Cloudimage account token which you have received upon account creation (step 1).If you need a CNAME please contact our [sales team](https://www.cloudimage.io/en/contact-us).

<figure><img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/EmC1oEaTmMFUiJyElTVK/o9.png" alt=""><figcaption></figcaption></figure>

After you enter your token and save the changes, the plugin will start to deliver your images via Cloudimage.

### Configure <a href="#od_d0435609" id="od_d0435609"></a>

| Options                         | Descriptions                                                                                                                                                                              |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Remove v7 from URL              | If your token/CNAME was created after 20th October 2021 you need to tick this option.This option will remove the "v7" part from image URLs.                                               |
| Enable debug image overlays     | <p>For troubleshooting purposes to view details about resizing and compression.<br>Note:This will print information over your images.</p>                                                 |
| Cloudimage image output quality | To increase or decrease the quality of images delivered by cloudimage.Slide to the right to increase quality.                                                                             |
| Javascript Mode                 | To turn on responsive images,this option makes use of [Cloudimage javascrpt libarary](https://github.com/scaleflex/js-cloudimage-responsive). All img tags "src" is changed to "ci-src" . |

*When Javascript Mode is active, make sure that no other module is overwriting the plugin's delivery with "ci-src" image source.*