> For the complete documentation index, see [llms.txt](https://jue-yuan-ti-cai-gousorganization.gitbook.io/bulk-image-butler/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jue-yuan-ti-cai-gousorganization.gitbook.io/bulk-image-butler/quick-start-guide-for-bulk-image-butler-online-mode.md).

# Quick Start Guide for Bulk Image Butler - Online Mode

### Welcome!

We're thrilled you've installed Bulk Image Butler. Here's a quick guide to help you get started!

We have video tutorials available here: <https://youtu.be/iaECYmlJsoQ>

#### Overview

Bulk Image Butler has two modes. Let's start with the simple `Online Mode`, which allows you to manage images directly on the product list page.

Let's get started!

**Adding Images**

1. **Go to `Bulk Image Butler` > `Product Images`**.
2. Find a product to add images to. For this example, we'll use `Straw Large Capacity Bag`.

   <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FWarm3TZa2RmoCQngVZWh%2Fimage.png?alt=media&amp;token=28ad6baf-eab0-4855-aa55-d5f47b1b312d" alt=""><figcaption></figcaption></figure>

We support two ways to add new images: `Drag and Drop` and `Click to Add`. Choose one method:

**a. Drag and Drop**

<figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FTxoKffsQoDOzc6oo0sre%2F%E6%8B%96%E6%8B%BD%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87.gif?alt=media&amp;token=9ab180a0-b550-47f1-aea3-945e997a0c0a" alt=""><figcaption></figcaption></figure>

* Select the images you want to upload, then drag them to the blue window and release the mouse. The images will be added to the page.

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2F2gdI04CmJRaaLQ0KBKTQ%2Fimage.png?alt=media&amp;token=c5caa4b6-60c0-494f-b22d-b9315caaaaa6" alt=""><figcaption></figcaption></figure>

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FJRZC7Wxn1k6k39MTIGfs%2Fimage.png?alt=media&amp;token=fa14f0f7-8dd6-4070-8af9-3b8c66aace68" alt=""><figcaption></figcaption></figure>

**b. Click to Add**

<figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FuCBjruh3uysyzUbafovl%2F%E7%82%B9%E5%87%BB%E4%B8%8A%E4%BC%A0%E6%8C%89%E9%92%AE%E4%B8%8A%E4%BC%A0.gif?alt=media&amp;token=e4b0ab04-886c-411c-82da-44644e920a4d" alt=""><figcaption></figcaption></figure>

* Click the `Add Image` icon. A file manager window will pop up. Select the images you want to upload. You can select multiple images at once.

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FklreZZUJH86xPkjimANG%2Fimage.png?alt=media&amp;token=acb93014-edd2-4d7e-be53-f1cad67e7822" alt=""><figcaption></figcaption></figure>

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FT2NQCmGe0hdiYHYO7zn3%2Fimage.png?alt=media&amp;token=99fa9175-2bcd-4ce6-a054-c4bc5e7e7927" alt=""><figcaption></figcaption></figure>

**Editing AltText, VAR, and Position**

1. **Edit AltText and VAR**

   <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FhR7Ky5TzYOYkrJbyNAZ2%2F%E7%BB%99%E5%9B%BE%E7%89%87%E5%88%86%E9%85%8DAltText.gif?alt=media&amp;token=9a00c344-88f4-40fc-b035-2337b998542c" alt=""><figcaption></figcaption></figure>

   * Click `ALT` or `VAR` below the image to open the edit window.

     <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FsvDdeqSsWUSY3XaT3yZV%2Fimage.png?alt=media&amp;token=470f761e-6bc6-4844-9411-4ce77c14cade" alt=""><figcaption></figcaption></figure>
   * Enter your content and click `Confirm`. If there's content, `ALT` and `VAR` will turn green.

     <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FUeITXOUl3ySPgqO1PjD8%2Fimage.png?alt=media&amp;token=672adcd7-ed87-42b3-8933-825f7cf9db15" alt=""><figcaption></figcaption></figure>

     <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FoYCFoTpQ7EVARPLjUOud%2Fimage.png?alt=media&amp;token=6b4d3dd7-0729-4d1f-941e-fedb9f46bab1" alt=""><figcaption></figcaption></figure>
2. **Change Image Position**

   <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FVgMY1BLr7IUVJitEkbcR%2F%E6%8B%96%E5%8A%A8%E7%A7%BB%E5%8A%A8%E4%BD%8D%E7%BD%AE.gif?alt=media&amp;token=6121a746-fbe6-4672-8685-a5a7ab582f50" alt=""><figcaption></figcaption></figure>

   * To swap the positions of the first and second images, click and drag the first image to the second image's position.

     <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FCdczixuYglyBAPyzySMT%2Fimage.png?alt=media&amp;token=bd5e7a78-5243-4117-9643-bbad10c712ff" alt=""><figcaption></figcaption></figure>

**Deleting Images**

* To delete an image, click the delete icon in the top-right corner of the image. The image will be deleted.

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FkYhIXLtMC53VAOHAfbqd%2Fimage.png?alt=media&amp;token=be8afdb3-1f1b-449e-a49b-1e6f5e1936af" alt=""><figcaption></figcaption></figure>

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FaCb3vOoQt8UVeJR8YEUz%2Fimage.png?alt=media&amp;token=9ba0b029-8a2b-40e8-938f-d30efcb98d7f" alt=""><figcaption></figcaption></figure>

#### Submitting Changes

<figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FgKXAhk8sJgJU6QlvoksD%2F%E6%8F%90%E4%BA%A4%E4%BB%BB%E5%8A%A1_3.gif?alt=media&amp;token=482e2e94-94bf-4512-80cb-739896a8f8aa" alt=""><figcaption></figcaption></figure>

* Click the `Submit` button. A confirmation box will appear. You can keep the default values and click `Confirm`.

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FKtbKZrj4E0e7ZePevewU%2Fimage.png?alt=media&amp;token=aec04bcf-84f4-4082-8520-5762bc6f5c58" alt=""><figcaption></figcaption></figure>

  <figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2Flw9IALoZhxaxBDhlfpvm%2Fimage.png?alt=media&amp;token=d0d4b0a2-d841-4b8a-8eea-35b16f277c84" alt=""><figcaption></figcaption></figure>

If everything is correct, your changes will be successfully submitted. Choose `Keep Me Here` to stay on the product list page.

<figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FhOF6qpheTCmC57BEn6iQ%2Fimage.png?alt=media&amp;token=c5557662-d19f-46df-af61-c1105a4936db" alt=""><figcaption></figcaption></figure>

You'll see that 4 new images have been successfully added to the product.

<figure><img src="https://2181722770-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTyOK0hWsjCpRtoqE4Zxz%2Fuploads%2FA3xOGjqzKdzRcx08j8bb%2Fimage.png?alt=media&amp;token=b236057c-794f-4c5d-b84b-dc141e04edcc" alt=""><figcaption></figcaption></figure>

#### Conclusion

Thank you for reading. Feel free to explore other documents. If you have any questions, please contact us.