Web Store Creation & Settings

Custom Styling the Design Studio

Use Custom Coding to Style your Designer

If you know how to use Custom CSS, you have the flexibility to style your design studio. This is extremely useful for basic branding and identity into the design studio.

IMPORTANT:

InkSoft does not offer technical support for custom styling. This is an advanced option and should only be used by an experience web designer/developer who has the working knowledge of CSS.

Step 1: 

Download and Use Our CSS Starter Template

Take advantage of our clearly commented CSS file as a guide/ starting point for your custom styling. 

null

Step 2

Upload images

If you are using custom icons and/or images- you will want to upload these to your 'Store Files' area within your admin portal. This feature will allow you to upload and manage your custom files. 

Once you upload your files, you will want to copy the direct URL of the image. You will then paste the direct URL into the Custom CSS File. 

Navigate to Store Files

  • Hover over Webstores
  • Click on the Store you want to edit
  • Click Advanced
  • Click Store Files
null

Looking for additional information on Store Files?

Store Files

CSS Example

When loading gif animation, you want to make sure to update the background image URL, as well as the height and width of the image.

#loaderImageAnimator {
background-image: url(http://stores.inksoft.com/images/publishers/6601/stores/mbwolf/5c958a6d-1fea-4848-8943-bf5b05b17f40.gif);
height: 64px;
left: -20px;
position: relative;
width: 64px;
}

Step 3 

Insert CSS Path into Design Studio Embed Code

Within Line 6 (within the image below) of the Design Studio Embed Code, you will see Insert URL Path. This is where you will upload your Custom CSS File.

Looking to access your Embed Code?

Embed Design Studio

The path is CssPath: 'Insert your URL to CSS file here'

null

Custom Styling 

The intent of this function is to control basic styling such as fonts, colors and images. 

You have the ability to style the following elements in the Design Studio:

  • TYPOGRAPHY
  • LOADING OVERLAY
  • WELCOME MODAL
  • LEFT PANEL ACTIONS
  • BUTTONS
  • PREVIEW HEADER TOOLS ( Includes Zoom, Select All, Duplicate, Layers, Undo, Redo)
  • COLORS IN DESIGN PANEL
  • EDIT TEXT PANEL
  • COLOR TOOLTIPS
  • LAYER MANAGER PANEL
  • ART LOCATIONS PANEL
  • SHARED MODAL STYLES
  • IMAGE UPLOAD MODAL
  • SAVE AND SHARE MODAL
  • QUOTE MODAL
  • CHECKOUT MODAL