This document will detail how to add item attributes to your storefront to further customize the item detail pages.

Item Attributes

Item attributes are item specific information that are additional to the defaulted item details. Attribute allow you to customize the data you are assigning to your items. Once an item attribute is created, a corresponding field will appear within the first tab of the item editor.

Adding a new Item Attribute

Storefronts Themes that do not have the Visual Builder integrated

Step 1 - Editing the Template

So, for example, let's say you wanted to assign a youtube video to be displayed on the item detail page.

...

To do this you would edit the template "templates/template_item.vm" and in the top commented section, you would add the following line:

...

The inclusion of the new item attribute wil appear like this in the template:
 

Next we need to add to the template the velocity code snippet that displays the new attribute in the template pages:

Image Added

<center>
#if ($item.getAttributeValue("youtube1") != "")
<h2>Product Video:</h2>
##<div class="videowrapper">
  $item.getAttributeValue("youtube1")
##</div>
#end
</center>

Step 2 - Configuring the attribute value for a specific item

After saving the changes to the template, navigate to the item editor and scroll down to the "Storefront Content" section of the first tab  in the item editor.

...

And here's the new 'youtube' attribute field configured with the youtube video 'embed' code:

Step 3 - Viewing the new attribute in the storefront item page

 Here's the view of the item page for thew item that has the Youtube embed code configured:

Image Added

Storefronts Themes that have the Visual Builder integrated

Follow these steps for Elements theme, which has the visual builder.

Step 1 - Navigate To And Edit The Item Page To Which You Wish To Add The Attribute

Navigate to the page you want to include the attribute and then click  the edit button tin enter the Visual Builder:

Step 2 - Click the Hiarchy menu choice along the right side of the page

Clicking the Hiarchy menu choice will open the hiarchy panel, scroll through the elements until you have the section you wish to add the new attribute highlighted.

Step 3 - Add the Item Attribute Element

Once you have the appropriate section of the page highlighted, click the "Add Element" button then search for "Item Attribute".