Support Center

How to Change your Store Design

Last Updated: Sep 12, 2016 10:23PM EDT

 

How do I change design of my store? 

Current version allows you to change CSS styles of customer front-end. HTML is not available for editing.

That's made to ensure that you are able to upgrade easily. We believe that most HTML changes people do are outside of the store boundaries.

The store does not need those "change header HTML / change footer HTML" functionality. The site owner can change the looks of the whole site.

CSS capabilities are more than enough to allow you to make the store match the design of the rest of your site.

In most cases, you won't have to edit anything, not even the CSS. Just pick one of pre-defined schemes. The store is designed to fit well in most sites.

So, what you can change are colors, fonts, margins and images. What you can't change is interface logic.

How do I change CSS?

Open the control panel and proceed to: System Settings → Design → CSS Themes

You can pick from pre-defined schemes or create your custom version. You can find the list of all styles used by the store at the gray "Base CSS Theme" window at the page bottom.

Any style you specify will override the default one.

In order to create your custom scheme:

  • Click "New CSS Theme"
  • Copy the classes you want to override from the bottom window to upper one. Important: please don't copy the whole base theme to a custom one - you should copy only the rules that you want to change. 
  • Change the classes as you wish.
  • Name and activate your scheme.
  • Save changes (click the 'Save' button)
  • Reload customer interface page if it's open in your browser 

Example: copy the .minicart-caption class and change color from #4B5660 to #ff0000. "Shopping Bag" label inside Minicart Widget will turn red.

You can also create your own CSS styles and use them in HTML product descriptions.

How do I know CSS style name for the design element I want to change?

If you use Firefox

You can use Firebug add-on for Firefox browser. You can get it here: http://www.getfirebug.com/ There is a good video tutorial on Firebug: http://www.vimeo.com/3087755

If you use Internet Explorer

  • Launch IE
  • Press F12 to open the toolbar.
  • Press Ctrl-B to select element by click.
  • Click the element you want to look up.

If you use Chrome or Opera

Right click on the design element and select "Inspect element".

If you use Safari

First, enable Debug Menu to access Web Inspector. This is how you can do it on Mac: http://www.youtube.com/watch?v=VNC4Giu3mYQ This is how you can do it on Windows: http://lpetr.org/blog/archives/using-safari-web-inspector-on-windows When Debug Menu is activated, you can just right click any design element and select "Inspect element". There is a tutorial video on that: http://www.youtube.com/watch?v=rXdR5eIFZ8k
 

How do I target my CSS changes to some particular page or pages?

It is possible to apply some CSS rule only to some particular page in the store by changing the selector of the said rule.

How do I change the images used in UI?

You can do it by changing corresponding CSS style. For example, in order to change the bag icon in Minicart Widget, you need to:

  • Make sure your new icon is available on the Web. You can upload it to your web hosting or use image hosting like Flickr.
  • Find the CSS class that defines the icon. You can easily do it with Firebug, try it! If you do everything right, you'll find out that style name for the bag image is .minicart.
  • Change the background URL to your image URL (from icons/minicart.png to http://yoursite.com/yourimage.png).
  • Name and activate your scheme
  • Save changes and hit "reload" to see the changes in your shop. 

I want the same icons you use, but in different color

Not a problem at all! Take the archive with PSD files and open them in Adobe Photoshop or GNU GIMP. You can alter any colors then save image as GIF/PNG/JPEG.

These files are © 2009 Creative Development. But you are free to alter and use them as long as you do that for purposes of customizing your store.

There are so many styles ! I want to make my custom color scheme quick, how do I pick a set of styles need changing?

There are several pre-defined CSS schemes in the store. All schemes except the basic one are made as changes to  the basic. So you can use them as a shortlist of styles need changing. You can also use this 3d-party service to generate your new color theme quickly: www.ianholden.com/eshop_designer_home 

Oops. I did something wrong to CSS and messed up my store. How do I revert changes?

Just activate the standard scheme. It's empty and that means it does not override the basic CSS.

 

 

Liquid error: undefined method `gsub' for nil:NilClass

assistly@premium-webhelp.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete