Art Storefronts Support Center

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

How To: Display Panel Art in the Wall Preview Tool

Follow

This article will walk you through how to remove the background color and drop-shadow from all images contained in an Art Print Store page when viewing them using the Wall Preview.  This article assumes that you have already created an Art Print Store page with uploaded images.

 

Here are the steps to remove the Background and Drop-shadow:

 

1.  Log in to your Art Storefronts control panel and click on the Theme tab.

 

 2.png

 

 

2.  Find your active theme and click on edit.  Your active active theme will have a green box around it.

 

 3.png

 

 

3.  Scroll down and click on Start Editing.

 

 4.png

 

 

4.  Scroll down and click on the CSS tab.

 

 5.png

 

 

5.  Copy / Paste the following code into the code box:

 

.YOUR-ART-PRINT-STORE-NAME .preview-wall-section .art-modal .frame-medium {
background: transparent;
border-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
transition:none;
-moz-transition: none;
-webkit-transition: none;
}

 

 6.png

 

 

 

 

6.  You will need to change YOUR-ART-PRINT-STORE-NAME to match the name of your Art Print Store page's name.  Make sure you use all lowercase and replace all spaces with hyphens.  In this example our Art Print Store page is named Polyptych Store, so our code would end up looking like this:

 

.polyptych-store .preview-wall-section .art-modal .frame-medium {
background: transparent;
border-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
transition:none;
-moz-transition: none;
-webkit-transition: none;
}

 

7.png

 

 

 

7.  Click on Save.

 

8.png

 

 

 

8.   Scroll up and click on View Live Site.

 

9.png

 

 

 

9.  Click on the link to your store.  Again, in this example we will use Polyptych Store.

 

10.png

 

 

 

10.  Select one of your images.

 

11.png

 

 

 

11.  Click on Wall Preview.

 

12.png

 

 

 

12.  Change the wall color and notice how the background and drop-shadow surrounding the image are now removed.

 

13.png

 

 

Here is what our image looked like before we added the code:

 

0.png

 

 

 

Here is what our image looks like after we added the code:

 

1.png

 

 

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

Comments