Adding a custom background image to your store

From Spiffy Stores Knowledge Base

Revision as of 12:48, 5 April 2013 by Shawn (talk | contribs) (→‎Step 4)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Step 1

Create a plain text file on your computer using Notepad on a PC or Textedit on a Mac, and call it "custom.css".  Add the following text to it, and save it...

body {
   background-image: url(custom-background.jpg);
}


Step 2

Create your background image, and save it as "custom-background.jpg". If your background image is a gif or png file, then save is as "custom-background.gif" or "custom-background.png", but make sure that the image you are specifying in Step 1 has the same name.


Step 3

Log in to your store, and go to the "Design & assets -> Theme Editor" section. Upload both of these files in the section titled "Upload a new Theme file".


Step 4

Still in the the "Design & assets -> Theme Editor" section, click on your "Theme.liquid" file, which appears in the "Store Layout" section. An editor should open up allowing you to edit the HTML code that makes up your theme's layout.

Scroll through this code, looking in the "<head>" section until you find the last link to a css file. It may look something like this...

{{ 'hellothere.css' | asset_url | stylesheet_tag }}

Create a new line under this tag, and add in the following line of code. You can copy and paste it from here if you like;

{{ 'custom.css' | asset_url | stylesheet_tag }}

Click the save button at the bottom of the screen, and then click on the "preview your store" link in the top right of your Toolbox. You should see your new background image!