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.
- 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 you can press Control and Semi-colon at the same time.
- Save your template as a PNG file.
- Take your PNG and upload it to a non-ASF, external site. You can use something like Imgur, Flickr, Google Photos, or Photobucket.
- Right click on the image you uploaded and select Copy Image Address- save this for later.
- Navigate to your Art Storefronts Control Panel and click on the tab labeled Themes.
- Find the theme you are currently using and click on the Edit button.
- Click Start Editing.
- Click on the tab labeled JS- which stands for Java Script.
- Next, you’ll want to copy the following code and make sure to follow the directions in it exactly
Please use the following code:
// this line removes all current options. This is optional. This line IS NOT required
// To add a new room, you will first need to replace the "value" attribute with the URL of your room image.
// Your image must be a transparent PNG file with no background, if you would like the wall color to shine through properly.
// Second, you will need to change the room name "New Test Option" to whatever you would like to appear in the dropdown menu.
// Third, the new option will appear at the bottom of the default list. If you would like to move it to the top, replace ".append" with ".prepend".
$('select.room-image-option').append('<option value=".png" >New Test Option</option>')
- Paste the code into the box located on the JS tab.
- 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 in the dropdown menu. It is ready and available for use.