Product Page anatomy

 

  1. Configurable Swatches

    Intenso uses the default implementation of Configurable Swatches. For information about how to configure the swatches please refer to Magento User Guide.

  2. Short Description

    This area is used to display the content of the Short Description field of the product.

  3. Product View - Static Block #1

    You can display any content you like in this area by using a Static Block with identifier product_view_block_1. If you imported one of the demos, this static block is automatically created for you. If not, just create a new static block with any content you like and be sure the Identifier of the block is product_view_block_1.

     

    In our demos we used this static block to insert the Share Buttons provided by a free service called AddThis. You just need to insert the JavaScript code and HTML content generated by that service in the Content area of the static block.

  4. Product Page Sticky Menu

    We have removed the tabs traditionally used on ecommerce pages in favor of a more modern and clean approach used by big stores like Amazon. The secondary menu located on the product page helps customers to easily navigate between the different sections of the page. The text displayed on the menu can be translated or modified by using the translation file located in app/design/frontend/intenso/default/locale/en_US/translate.csv.

  5. Customers Who Viewed This Item Also Viewed

    This section showcases a list of Up-Sell products. All products displayed in this section must be associated manually by using the Upsells tab of the product manager.

     

    In the Admin panel, navigate to Catalog > Manage Products, open the product and click the Upsells tab. There you can associate a list of products to be displayed in this area. The label Customers Who Viewed This Item Also Viewed can be translated or modified using the translation file located in app/design/frontend/intenso/default/locale/en_US/translate.csv.Upsells

  6. Product Description

    This area is used to display the content of the Description field of the product. You can use HTML tags in this area, images and organize the content using the grid system provided by Foundation 5.

  7. Product View - Static Block #2

    You can display any content you like in this area by using a Static Block with identifier product_view_block_2. If you imported one of the demos, this static block is automatically created for you. If not, just create a new static block with any content you like and be sure the Identifier of the block is product_view_block_2. You can also disable this static block and the Product Description area will take 100% of the available screen.

  8. Additional Information

    The content of this section consist of a list of attribute names and values. By default, this section is hidden because all default attributes of Magento are configured to not be displayed in the frontend. To configure your attributes to be shown in the frontend, navigate to Catalog > Attributes > Manage Attributes, open the attribute(s) you would like to shown in the frontend and set "Visible on Product View Page on Front-end" to Yes.

  9. Custom Info - Static Block #3

    You can display any content you like in this area by using a Static Block with identifier product_view_block_3. If you imported one of the demos, this static block is automatically created for you. If not, just create a new static block with any content you like and be sure the Identifier of the block is product_view_block_3. You can also disable this static block in case you don’t need to display any information in this section.

  10. Ratings & Reviews

    Ratings and reviews are enabled by default. Intenso includes and advanced extension that enhance the functionality of ratings and reviews by adding several features not included in the RWD or Default themes. Please be sure to configure the rating visibility before you start adding reviews to your store.

  11. Product Tags

    The product tags section uses the default functionality of Magento. Please refer to Magento User Guide for more information about how to configure and use the tags.

  12. Customers Who Bought This Item Also Bought

    This section showcases a list of Related Products. All products displayed in this section must be associated manually by using the Related Products tab of the product manager.

     

    In the Admin panel, navigate to Catalog > Manage Products, open the product and click the Related Products tab. There you can associate a list of products to be displayed in this area. The label Customers Who Bought This Item Also Bought can be translated or modified using the translation file located in app/design/frontend/intenso/default/locale/en_US/translate.csv.Related Products

 

 

Adding additional sections to the product page

Currently, the only way to add additional sections to the product page is by editing two templates from the theme. Please refer to this article before attempting to modify any template from the theme.

  1. Edit the following template to add the link of the new section to the menu bar of the product page:
    app/design/frontend/intenso/default/template/catalog/product/list/nav.phtml

    Add this code at the end of the file just before the closing </dl> tag: 
    <dt> </dt>
<dd data-magellan-arrival="custom-tab"><a href="#custom-tab"><?php echo $this->__('My New Tab'); ?></a></dd>
  2. Add an static block as the content for the new tab section:
    app/design/frontend/intenso/default/template/catalog/product/view.phtml

    Enter the following code just after line 180 (<?php echo $this->getChildHtml('product_additional_data') ?>): 
    <div class="product-collateral tags clearfix row">
    <p data-magellan-destination="custom-tab"><a id="custom-tab"></a></p>
    <h3>My Custom Tab</h3>
    <div class="small-12 columns">
    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('custom_tab')->toHtml(); ?>
    </div>
</div>
  3. Now create a new static block with identifier custom_tab and add to it any content you like.