The Magento shopping cart has wonderful tools like attributes that makes it easy for users to control custom content on your products. Recently, I have had a client that needs to display the same information over multiple products. So rather than manually adding it on one product, I thought it would be easier to link a custom cms static block to the product page. While this seems like an easy thing to do, Magento makes this a bit complicated to set up. So this tutorial is meant to show you how to do this! After this tutorial you will be able to control static cms blocks from any product in your Magento store.
So let’s begin.
Setting up your Custom Product Attribute.
First we need to set up a custom product attribute correctly in magento. This will let us create a few cms static blocks and link them to our product. First login to your magento backend and go to Catalog > Attribute > Manage Attributes. Once the page reloads click on “Add New Attribute”. This will take you to a page where you can set up your attribute.
First set your attribute code. In this example I set mine to product_color_set. Why? because I want to be able to control different product color sets, meaning color images, from the product page. Next, select change Catalog Input Type for Store Owner to “Dropdown”. Finally on this page make sure Allow HTML Tags on Frontend is set to “Yes”. If you would like to see my settings please refer to the image below.
Next click on “Manage Label / Options. Here you will add an admin and default store name. I set this to “Color Set” for both admin and default view. Finally on this page you want to add options. To do this click on the “Add Option” button. Here you will want to set the first box, or the admin box, to something that makes sense. This is the terms you will see on the product page. Next under the Default Store View box you will want to type in a name that you will use for the CMS static blocks. In this case I added something like hand_dyed_cotton, I also created one called hand_dyed_silk, which I will then later create a static block called hand_dyed_cotton. After you have added all of the different options you want click “Save”. You can view my set-up below.
Lastly for the attribute set up, we will have to associate the attribute with the proper product type. To do this go to Catalog > Attributes > Manage Attribute Sets. Here you should see, if you have set up, multiple attribute sets. In my case I only have one, default. Click on the one you want to add the drop down option to. Once the page reloads on the right hand side under “Unassigned Attributes” we should see the one we just created. In my case it is named product_color_set. Simply drag and drop this attribute to the middle column called “Groups” and place it under the group that makes most sense to you. For me, I placed it under “General” because I am going to have lots of products with these options. Next hit “Save Attribute Set”. Yay! you are now done with setting up the attribute. Next step creating a cms static block.
Navigate to the following location: CMS > Static Blocks. On the Static Blocks page click on “Add New Block”. Here add whatever content you would like to appear on the product page. Finally, and most importantly, set the Block Title and Identifier to the code you created under the drop down options section on manage attributes. So for my example, I created one called hand_dyed_silk. So under Identifier and Block title I would type hand_dyed_silk. I also created another drop down option called hand_dyed_cotton. Again, I would create a CMS block with the Title and Identifier set to hand_dyed_cotton. Remember, you can make the content section whatever you want! That is the whole point! For me under the content I added images for hand dyed cotton and different images for hand dyed silk.
Creating a product and setting up your custom attribute
Now navigate to Catalog > Manage Products. Then hit “Add Product” or find an existing item you might want to edit. If you add a new product, then fill out the regular needed information. But while you are doing that notice you now have an extra drop down menu, in my case it is under the “General” tab. On that drop down you can now choose the CMS block based upon what added in the attribute section on this tutorial. Now hit save and you are on to the final step.
Last set, adding your CMS static block to the product page.
Fire up your FTP client, login, and navigate to app/design/frontend/yourtemplatenamehere/yourtemplatelocationthinghere/template/catalog/product
Now download and back up view.phtml
On this page, wherever you want the static block to appear, add the following code.
Where you see product_color_set, you will want to change this to something else if you named your attribute set something differently.
That is it, save the file and upload it. Now refresh the page, and your cache if you have it turned on, and view your wonderful work!
If you have any questions please feel free to contact me.
Also be sure to check out my web site design portfolio.