Art Storefronts Support Center

Search for answers to your questions by entering keywords below, or look through our knowledge base.

How To: Add Your Own Wall Preview Images

Follow
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.

 

Please Note: This article requires custom code to be implemented on your site. If the code is altered or edited in any way outside of what is written, Art Storefronts will not have the ability to troubleshoot is and will ask that you remove the code fully and start over.

 

  1. 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.



  2. Once the template has been downloaded, open it in Photoshop.


  3. 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 you can press Control and Semi-colon at the same time.



  4. Save your template as a PNG file.


  5. Take your PNG and upload it to a non-ASF, external site. You can use something like Imgur, Flickr, Google Photos, or Photobucket.


  6. Right click on the image you uploaded and select Copy Image Address- save this for later. 


  7. Navigate to your Art Storefronts Site Manager and click on the tab labeled Themes.


    custom01.jpg
  8. Find the theme you are currently using (it should have a green border around it on the theme page) and click on the Edit button.


    custom02.jpg
  9. Click Start Editing.
    custom03.jpg

  10. Click on the tab labeled JS- which stands for Java Script.


    custom04.jpg
  11. 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, and these lines can be left out if you don't wish to remove any existing preview images. */
    $('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 replace the address in value with the address of your uploaded image, and change Image Description to show the name you wish to use on the dropdown menu of the wall preview tool. The option will be displayed at the end of the option list, if you have other options. If you wish to have it displayed at the end of the list, you should replace .append with .prepend */
    $('select.room-image-option').append('<option value="http://mysite.com/address.png" >Image Description</option>');
    // The remaining lines should be used without any changes.
    $('.modal-see-on-your-wall .room-image-option').trigger('change')
    });
    </script>


    custom05.jpg
  12. Paste the code into the box located on the JS tab. (Don't forget to replace the placeholder image address and description in the code)


    custom06.jpg
  13. Click Save.


    custom07.jpg
  14. 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 in the dropdown menu. It is ready and available for use. 


 

Was this article helpful?
1 out of 1 found this helpful

Comments