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. Find your active theme and click on edit. Your active active theme will have a green box around it.
3. Scroll down and click on Start Editing.
4. Scroll down and click on the CSS tab.
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. 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. Click on Save.
8. Scroll up and click on View Live Site.
9. Click on the link to your store. Again, in this example we will use Polyptych Store.
10. Select one of your images.
11. Click on Wall Preview.
12. Change the wall color and notice how the background and drop-shadow surrounding the image are now removed.
Here is what our image looked like before we added the code:
Here is what our image looks like after we added the code:
