How to Upload and Manage Images in the Shopblocks Image Library

What is the Image Library?

The Shopblocks Image Library is where you store and manage the images you’d like to use on your site.

Screenshot_2020-08-03_at_13.25.33.png

 

Navigation

At the top of the Image Library, you’ll find the tab navigation where you can choose to upload or select images that are already in your library.

 

Upload

On the Upload panel, you’ll find information about the types of images you can upload, and how many files you can upload at any given time.

Screenshot_2020-08-03_at_13.26.06.png

 

Library

On the Library panel, you can find a search box, search filters and an image panel where you click images to select them for use.

Screenshot_2020-08-03_at_13.26.26.png

 


At the top right of the Image Library there’s the Save and Close button, which closes the Image Library and saves your changes. The number of currently selected images is also shown here.

Screenshot_2020-08-03_at_13.35.15.png

 

Stock

To add Stock Images is simple. Once on the Image Library, select 'Stock'. Then type in the search bar what image kind you would like to add. All stock images inside Shopblocks are from Unsplash.  


Once you have selected an image, click the top left icon on the image to download into your library. This will automatically guide you back to the upload tab to check its upload progress.

 

Select

The Library panel is where all your previously uploaded images are stored. From here you can edit or delete an image, as well as select it to use it on the page you are editing.


Click on an image to select it and it will appear selected with a border. Click on the image again to deselect it. You’ll find two buttons with each image, a delete (rubbish bin) button, and an edit button.

Screenshot_2020-08-03_at_13.27.00.png


Type in the search bar and the Image Library will find all images matching your search term by searching through file names and any text associated with that image (such as ‘alt. text’ you specify on the Edit panel).

Screenshot_2020-08-03_at_13.36.26.png

 

Filters

You can use the filters section to narrow down your search or to view images that are associated with products or categories only, for example.

Screenshot_2020-08-03_at_13.30.34.png

 

Uploading images

The Upload panel allows you to copy images from your computer into the Image Library in as little as one click. Drag your image(s) from any file explorer/finder on your computer into the Upload panel and you’ll see the progress of each image upload.

Screenshot_2020-08-03_at_13.25.50.png


Alternatively, click on the ‘Select Files’ button and use your system’s file manager to select which files to upload.


A Quick Note About Upload Requirements


All files must be at least 256px by 256px in size. This is to make sure that all the images on your shop website are of a suitable quality, as customers tend to be put off by poor quality images. We encourage you to upload the highest resolution images possible below then maximum dimensions of 4096px by 4096px.

Screenshot_2020-08-03_at_13.29.43.png


The maximum dimensions for an image upload are 4096px by 4096px.

Screenshot_2020-08-03_at_13.29.58.png


The maximum file size of any one image is 20MB. File types that are permitted to be uploaded are jpg, jpeg, png, or gif.

Screenshot_2020-08-03_at_13.45.19.png

 

Editing Images

Edit an image by clicking on the edit icon found on each image in the Image Library either in the Upload panel or the Library panel.

Screenshot_2020-08-03_at_13.30.22.png

Screenshot_2020-08-03_at_13.27.13.png


Here you can change the name and alt. text of the image, and crop the image as desired.


To crop an image, click on the blue notepad in the top left of the image. Here, you can crop the image to square.


All images uploaded for products, categories and pages are made square by the Image Library for best results on all screen sizes. If the image you are uploading is not square, the Image Library will add extra white space around it to compensate. To remove this white space you can crop the image yourself.


You don’t need image editing software installed to resize – there are a number of free services available to resize and crop images:

Deleting Images

Click the delete button (rubbish bin) found on the image you wish to remove. Keep in mind that once an image has been deleted there is no getting it back.

Screenshot_2020-08-03_at_13.30.44.png


Always make sure you are absolutely certain that you no longer need to image you are attempting to delete. If your image is used on one or more products, categories or pages, for example, the Image Library will let you know and you’ll be able to abort the delete process if you wish.

Screenshot_2020-08-03_at_13.30.53.png