Setting up a basic theme

Setting up your first theme can be daunting if you don't know the basics of CSS so we've gone over a few simple modifications that you can make with a custom theme. 

You can create your theme by going to "Design > Themes" and clicking "Create Custom Theme". Once you have created your theme and have the CSS editor open you will be able to paste in these examples and change the values to change the look of your store.

Logo

Example CSS:

.header .logo {
    height: 160px; /* Height of the logo area */   
}
.logo {
    background:url(https://imageurl.com/); /* Background image */
    background-repeat:no-repeat; /* Background image repeating */
    text-indent: -9999px; /* Removes the store title */
}

The “.header .logo” section determines the spacing of what is displayed and so you can change the height of the space to allow more or less of the image you have linked, to show.

In the “.logo” section you can choose the image you would like to use as your logo by pasting a direct link to a hosted image you own in the “background:url” section.  You need to make sure that you are using the direct link to the image file where ever it is hosted.

The "text-indent" is very important as it essentially removes the name of the store so that the store name does not appear in the same place as the image. 

Text and Background

Example CSS:

body {
    font-size: 14px; /* Font size*/
    color: #A272E0; /* Text colour */
    background:url(https://imageurl.com/); /* Links the background image */
    Background-position:center; /* Chooses the background image position */
    background-repeat: no-repeat; /* Dicides the background image's repition */
}

You can change the font size by changing the number under the font-size option, with “14px” being the default size in a store.

Text colours can be picked using hex codes which you can find using a tool like Colorpicker. You will need to make sure that it has the “#” in front of the 6 digit code to be sure it works after "color: ".

The "background:url" option works exactly the same as the logo section, so you can take an image which you own and have hosted somewhere, and link directly to it to display it as your webstore's background.

The next option chooses the position of the background image. You can choose “center” “left” and “right”. The “background-repeat” options include repeating the image on the Y axis, X axis and on both axis as well:

  • “repeat-y;” - The image will vertically repeat.
  • “repeat-x;” - The image will horizontally repeat.
  • “repeat- xy ;” - The image will repeat both vertically and horizontally.

Still need help? Contact Us Contact Us