Installation

Magentist Theme

Professional design is essential for a successful ecommerce website. This Magento theme is the same design we trust our own website with, designed to attract customers to buy now and come back again and again. Now packed with even more features than our own website!

Step 1: Install Magento

Complete an installation of Magento on your site and create a Website, Store, and Store View.

Step 2: Upload Your Theme

After installing Magento on your site, upload your theme files to the appropriate folders, following the folder structure in which the theme is provided.

Step 3: Activate Your Theme

  1. Access the Admin Panel and navigate to System > Configuration.

  2. Select your Store View from the Current Configuration Scope drop-down menu in the upper left corner.

  3. Click on "Design" under the "General" section of the left side navigation.

  4. Under the "Themes" section, uncheck all of the check boxes titled "Use website."

  5. In each text field, enter the name of the folders containing the theme you wish to use.

    In this case, enter "magentist" (without quotes).

Step 4: Set Up Static Blocks

Header Promo: This block will contain the information displayed at the top of each page under the search box and account links. In our demo site, this is the banner that reads "More features than our own site! Learn more."

  1. From the top navigation, navigate to CMS > Static Blocks.

  2. Click the + Add New Block button.

  3. Enter a Title for the block, enter "header-callout" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.

  4. Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:

    <a href="{{store url=''}}new-features"><img style="margin-top: 10px; border: 2px dashed #555;" src="{{skin url=''}}images/media/header-callout.png" alt="Header Callout" /></a>

    Note: This code is provided as an example and may be edited to suit your needs. Each time that this static block is resaved, Magento's cache must be refreshed via System > Cache Management for the changes to take effect.

New Products Feed: This block will display new products on the homepage. In our demo site, these are the two rows of products under the slider.

  1. From the top navigation, navigate to CMS > Static Blocks.

  2. Click the + Add New Block button.

  3. Enter a Title for the block, enter "new-products" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.

  4. Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:

    {{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

    Note: This code is provided as an example and may be edited to suit your needs. Each time that this static block is resaved, Magento's cache must be refreshed via System > Cache Management for the changes to take effect.

Footer Promo: This block will contain the information displayed at the bottom of each page (under the footer links and copyright info). In our demo site, this includes the credit card images and the secured checkout banner.

  1. From the top navigation, navigate to CMS > Static Blocks.

  2. Click the + Add New Block button.

  3. Enter a Title for the block, enter "footer_promo" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.

  4. Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:

    <table width="518" border="0" cellspacing="0" cellpadding="0" style="border-right:1px solid #161616; float:left;">
    	<tr>
    		<td height="52" style="vertical-align:middle; color:#e3e3e3; font-size:12px; text-align:center;"><strong>All Major Credit Cards Accepted:</strong><img src="{{skin url=''}}images/media/cards.gif" style="margin-left:8px;" /></td>
    	</tr>
    </table>
    <img src="{{skin url=''}}images/media/secured-area.gif" style="float:right; margin-top:8px;" />

    Note: This code is provided as an example and may be edited to suit your needs. Each time that this static block is resaved, Magento's cache must be refreshed via System > Cache Management for the changes to take effect.

Twitter Feed: This block will display the Dynamic Twitter Feed on the homepage.

  1. From the top navigation, navigate to CMS > Static Blocks.

  2. Click the + Add New Block button.

  3. Enter a Title for the block, enter "twitter" (without quotes) as the Identifier, select your Store View, and set the Status to Enabled.

  4. Click the "Show/Hide Editor" button to disable the editor and enter code mode. Then, enter the following code to make your links appear exactly as it does on our demo store:

    {{block type="core/template" template="page/custom/tweets.phtml"}}
  5. Open the file /app/design/frontend/default/magentist/template/page/custom/Twitter_Cache.php and locate the following code (line 6):

    protected $twitter_account = 'magentist';
  6. Change the name "magentist" to your account name on Twitter.

Step 5: Set Up Your Homepage

  1. From the top navigation, navigate to CMS > Pages.

  2. Click on the "+ Add New Page" button.

  3. Enter your desired page title.

  4. For the home page, be sure to set your URL Key as "home" and select your store view.

  5. Select "Design" from the left side navigation and set Layout to "1 column."

  6. Select "Content" from the left side navigation and enter the content for your home page in the text area.

    To make your homepage appear as the example on our site, click the "Show/Hide Editor" button and enter the following code:

    {{block type="core/template" template="page/home.phtml"}}
  7. Set the Status to "Enabled" and click on the "Save Page" button in the upper right corner to save and activate your homepage.

    Note: To customize the content on the homepage, edit the file /app/design/frontend/default/magentist/template/page/home.phtml

Step 6: Set Up Language Selector Flags

If your store has multiple language views, follow these instructions. Otherwise, this step may be disregarded.

  1. Open the folder /skin/frontend/default/magentist/images/flags/

  2. Find the flags corresponding to each language view used in your store, and rename the image with the corresponding Store View name. For example, if you have a Store View in French with the view code "mystore_fr" you would find the French flag (fr.gif) and rename it "mystore_fr.gif"

  3. Log in to the Admin Panel and navigate to System > Configuration.

  4. Click on the "Easy Flags" tab on the left-side navigation, then set "Enable easy flags" to "Yes" and save your changes.

That's it! Congratulations

Just set up your categories and products, and you now have a beautiful, fully functioning ecommerce website!