Installation

Goodybox Product Pack Theme

This is a unique Magento theme designed for a limited-time special offer on a bundle of products. This powerful promotional tool is designed both technically and aesthetically with your marketing success in mind.

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 "goodybox" (without quotes).

Step 4: Set Up Static Blocks

Home Content: This block will contain the information displayed at the top of each page (after the header). In our demo site, this includes the large image with the balloons and gift boxes, down to the first paragraph on the white background with the "Buy Now!" button.

  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 "home-content" (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/home.phtml"}}

    Note: To customize the content used in this block, edit the file home.phtml located in your theme folder at: /app/design/frontend/default/goodybox/template/page/home.phtml Then, refresh Magento's cache via System > Cache Management for the changes to take effect on all pages where this block is used.

Footer Promos: This block will contain the information displayed at the bottom of each page (before the footer links). In our demo site, this includes the two paragraphs titled "Promote Your Bundle" and "Disclaimer."

  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_promos" (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:

    <div class="col1-layout footer-promos">
    	<div class="col-main-top"></div>
    	<div class="col-main">
    		<div style="float:left; width:410px;">
    			<h3>Promote Your Bundle</h3>
    			<p>Use this space to provide further promotional information about your bundle package!  Cras congue imperdiet urna, vitae tincidunt odio laoreet eget.</p>
    		</div>
    		<div style="float:right; width:410px;">
    			<h3>Disclaimer</h3>
    			<p>Terms & Conditions, and other disclaimers may be posted in this space.  Donec vel nisl ante, a egestas lectus.  Mauris accumsan nisi a velit tristique semper.</p>
    		</div>
    		<div style="clear:both;"></div>
    	</div>
    	<div class="col-main-bottom"></div>
    </div>

    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.

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"}}
    {{block type="catalog/product_list" category_id="1" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/list-home.phtml"}}
    {{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}

    Note: The code provided shows that the second block uses the property category_id="1" Please change this value to the category ID of your stores root catalog. To find the category id of your root catalog, navigate to Catalog > Manage Categories and click on the name of your root catalog. The catalog ID will be displayed in the main page title next to the category's name, as shown in the screenshot below:
    https://secure.websitetemple.com/media/catalog/product/c/a/catalog-id.png

  7. Set the Status to "Enabled" and click on the "Save Page" button in the upper right corner to save and activate your homepage.

Step 6: Set Up Your Categories

The following instructions will set your category pages to mimic the homepage, as seen on our demo site. If you prefer a traditional category page layout, this step may be dismissed.

  1. Navigate to Catalog > Manage Categories and click on the name of one of your categories.

  2. Under the Display Settings tab, set Display Mode to "Static block and products" and set CMS Block to the "Home Content" block you created in Step 4.

  3. Save your changes and repeat these steps for the remaining categories.

Step 7: Creating Your Product Pack

Magento does not currently have the option of creating a bundle that is priced differently than the sum of its components, so your product pack will need to be created as a separate product.

  1. Create your bundle product, placing it in the root category and setting Visibility to "Search"

  2. Open the file /app/design/frontend/default/goodybox/template/page/home.phtml

  3. Find this code (line 3):

    <a href="<?php echo $this->getUrl('checkout/cart/add/product/178/') ?>">Get It Now!</a>
  4. Change "178" to the product ID of your new bundle product. This will enable the "Get It Now!" button on the homepage to add the bundle product to the cart, bypassing the product view page.

Step 8: Set The Expiration Timer

  1. Open the file /app/design/frontend/default/goodybox/template/page/html/header.phtml

  2. Find this code (line 39):   TargetDate = "12/24/2010 5:30 PM";

  3. Change the date and time between the quotes to the date and time that your offer is set to expire.

  4. Save your changes and refresh Magento's cache via System > Cache Management.

That's it! Congratulations

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