If you find that Art Storefronts does not offer a specific medium type that you need, and depending on your plan, you will be able to create a custom media type. This comes in handy if you want to offer art on round or odd shaped medias.
Creating a Custom Medium
Log in to your Art Storefronts Control Panel and click on the Art Print Store or Art Upload Store. We will be using the store titled Upload Store.
Click on the tab labeled Media.
Click on the button labeled Add Medium.
Provide your media a Name.
Choose a Default Medium Type.
Click Next.
Scroll down to the section labeled Use Default Or Custom Medium Type and select Custom.
Click on Manage Medium Types.
Click Add Medium Type.
Provide the Custom Medium with a Name.
Click Create.
On the next page you can alter or edit the Name of the Custom Medium.
There is a box labeled Body. This is where you can enter in custom coding to help alter the preview for this specific medium type on your Live Site.
Please Note: Technical Support cannot help you with the coding that goes into this sections. If you require assistance with this coding, you will need to contact a web designer. If you want to use our default coding, please check below for default code snippets below.
Do you want to customize how the medium type looks on the website?
You will need to contact a web developer. We recommend hiring someone who is experienced in both CSS and Javascript. You can find someone on Fiverr.com who is fairly cheap. We recommend hiring an Expert who you can pay at a decent rate to help you customize your website. Even this will still be cheap.
If you prefer to use our default medium codes, you can use the codes listed below.
Code Snippets For Default Mediums
Warning: If you customize the code snippet in any way whatsoever, the automatic preview may break, and we will not be able to support/troubleshoot custom code.
Canvas
<div class="canvas-wrap" style="display: block; overflow: visible;"> <div class="canvas-top" style=" max-width: 400px;"> <div class="clip"> ##{{ product.canvas_top }} </div> </div> <div class="canvas-main"> ##{{ product.canvas_main }} </div> <div class="canvas-left"> <div class="clip"> ##{{ product.canvas_left }} </div> </div> </div>
Please Note: The canvas preview will only show a mirrored image preview. When a user selects border color or overflow (if these options are available), it will not change. You will need to hire a developer to make that sort of customization for the time being.
Paper
<div id="paper_preview" class="art-preview shows-frame paper-preview" style="margin-bottom: 25px;"><div class="product-inner-container">##{{ product.photo }}</div></div>
Metal
<div class="metal-preview"> <div class="product-inner-container"> ##{{ product.photo }} </div> </div>
Wall Peel
<div class="wall-peel-preview" style="margin-bottom: 25px;">
<div class="product-inner-container">
<div class="container">
<img class="peel" src="http://res.cloudinary.com/decosites/image/upload/v1411479863/WallPeel_Errol_brrdgs.png">##{{ product.photo }}
</div>
</div>
</div>
Banner
<div id="banner_preview" class="art-preview banner-preview" style="margin-bottom: 25px;"><div class="product-inner-container"><div class="container">##{{ product.photo }}</div></div></div>