Adding product details in builder

In this tutorial we will walk through using YOOtheme's Basic elements to add your shop product details to a page using dynamic content.

• If your reading this we assume you've followed the inital steps of adding product details to your product,, you will need at least one product to continue. If have not done these inital steps please learn how at the link below.

• Adding product details in CommerceLab Shop

Pricing with our without currency symbol

• Shipping

• Base price

• Price after tax

• Discount

• Price after tax with product discount

• Final Price

General Product information

• Available product stock

• SKU

• Short Description

• Long Description

• Product Category

• Display Product tags

---

Adding your shop product details with YOOtheme's basic "text" element

All of the product details listed above are available for use in YOOtheme's elements but in this tutorial will be using thier basic text element show information on your product page.

• Create a basic grid layout in builder

• Adding a product title & subtitle in builder

• if your following the full tutorial we've created a 2 column grid section in builder, added an our product image and added our shop product Title and Subtitle

• First we're going to make a new Text element below the title and add your short description

• In the left column of your page builder hover yourlowest element on the left side of the grid to see the blue + appear. Click that to open the element pop up area.

• Select the "text" element from the element area popup

• You are now ready to call in your short description via dynamic content from your shop product details.

• You will see a latin placeholder on your page until you add the dynamic content source.

• In the left column in the "advanced" tab go to the section called "dynamic content" and actviate the dropdown

• Select "product" from the list in the "CommerceLab Shop" section

• In the top left, click the "Builder" button to take you back to your headline content area

• Above the content area where you'd usually add your title, right below the save button you'll see the word "dynamic" click that button to select your conent source.

• short description" from the PRODUCT (CONTENT) section

• You've just added your text element and short decription

---

Adding ALL other shop Product product details with text or headline elements.

If you've made it this far in our tutorial series then you know how to add headline & text elements. With these two elements you can style and create a complete layout with all your product details. and all other basic elements can also show product into as well. You've learned how to add new elements & choose different dynamic content sources. Play with element style settings and add and remove margins. This will get your shop moving in the right direction.

Pricing with our without currency symbol

• Available product stock

• SKU

• Short Description

• Long Description

• Product Category

• Display Product tags

General Product information

• Shipping

• Base price

• Price after tax

• Discount

• Price after tax with product discount

• Final Price

In the next tutorial we will talk about the add 2 cart button element and our custom shop elements.