Please Note: The Wall Preview Tool may not be available on all plans. IF you do not have this feature and would like it, please e-mail cs@artstorefronts.com.
The Wall Preview is a feature that allows your customers to visualize your Art in different rooms or spaces. Art Storefronts offers several default rooms for you to use, but you do have the ability to add more rooms to fit your needs and the needs of your clients. If you are interested in adding more rooms to your wall preview, please use the guide below to complete the process.
Note: This article requires custom code to be implemented on your site, which we provide in this article. If the code is altered or edited in any way beyond what is listed, Art Storefronts will not have the ability to troubleshoot it and will ask that you remove the code fully and start over.
First, please download the following template.
Please Note: This template is 1500px by 723px. You cannot alter this sizing as it will cause issues with the Wall Preview tool.
Once the template has been downloaded, open it in Photoshop.
Place your furniture into the template.
Please Note: The height of the furniture cannot exceed 297px tall or it will interfere with the image within the Wall Preview.
A ruler line has been included to show the maximum height the furniture can be without causing issues. To load the ruler lines in Photoshop you can press Control and Semicolon at the same time.
Save your template as a PNG file.
Open your Site Manager, and go to the Extra Files section in the Jump To menu on the top right-hand section of the page.
Click on the Add Photos button to select your custom background image, then on Open to upload it here.
Right click on the copy url link above the uploaded image, and select the option to Copy the link or address - the exact language used will depend on your browser - and save this for later.
Navigate to your Art Storefronts Site Manager and click on the tab labeled Site Settings, and from there onto the Scripts tab below.
From here, scroll down until you see the section labelled <Body>.
Next, you’ll want to copy the following code and make sure to follow the directions in it exactly.
Please use the following code:
<script>$(window).on('load', function() {/* These lines remove the existing options. This is optional, andthese lines can be left out if you don't wish to remove any existingpreview images. */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1587646696/final_1.png"]').remove();/* Office */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441225355/living-room-1500w_x0uwxw.png"]').remove();/* Living Room */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441139687/bedroom-1500w_wgmcaq.png"]').remove();/* Bedroom */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441053683/nursery-1500w_gv7orm.png"]').remove();/* Nursery */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441053244/conf-room-1500w_yvgtgh.png"]').remove();/* Conference Room */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441140169/sitting-area-1500w_y2aigd.png"]').remove();/* Sitting Area */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441140279/cafe-1500w_yarlst.png"]').remove();/* Cafe */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441202430/lobby-1500w_awfvyf.png"]').remove();/* Lobby */$('select.room-image-option option[value="//res.cloudinary.com/decosites/image/upload/v1441140699/restaurant-1500w_ryhsl8.png"]').remove();/* Restaurant *//* The next line is used to set up your image. You will need to replacethe address in value with the address of your uploaded image, andchange Image Description to show the name you wish to use on thedropdown menu of the wall preview tool. The option will be displayedat the end of the option list, if you have other options. If youwish to have it displayed at the end of the list, you should replace.append with .prepend */$('select.room-image-option').append('<option value="Image URL">Room Name</option>');// The remaining lines should be used without any changes.$('#room_image_option').trigger('change');});</script>Paste the code into the <Body> field.
In the top part of the code, there are 8 sections that control the display of the default background options. Each one of these will remove the corresponding background menu item.
If you wish to leave any of these showing, you should delete the section of code for each one. For example, deleting this section of code will allow the option for “Living Room” to be displayed.
Near the end of the code is the section where you will add your custom image or images. You’ll need to copy this piece of code for each background image you are adding, and add the correct image URL and description for each one.
Click Save.
If you navigate to your Live Site and refresh the page. Then, use the Wall Preview Tool, you will now see your new wall preview option (or options) in the dropdown menu. It is ready and available for use.
