CommerceLab Shop
  • The Basics
    • CommerceLab Shop Documents
      • Adding Domains & Watchful Key
      • CommerceLab Shop Documentation
    • Getting Support
  • Installation
    • Component install
      • Installing on an existing site or fresh Joomla 4 setup.
      • Post Install Setup Wizard
    • Quickstart Demo Install
      • Installing From a Quickstart Demo
  • Getting Started
    • First Product Setup
      • Creating your first product category and product article through Joomla
      • Creating a product & adding product details in CommerceLab Shop
    • Product setup in Page Builder
      • Overview / Navigating to builder
      • Creating a grid layout in builder
      • Adding product image in builder
      • Adding product Title & Subtitle in builder
      • Adding product details in builder
      • Adding custom shop elements in builder
      • Creating Custom Fields for a product and displaying them in YOOtheme Page Builder on a product page
      • Show your product anywhere in your website
      • Product image gallery add to builder
    • Core Modules
      • Currency Switcher Module Setup
      • Desktop Cart Module Walkthrough
      • Mobile Cart Module Walkthrough
    • Core Shop Pages
      • Checkout Page
      • Store Cart Page
      • Order Confirmation Page
      • Terms & Conditions Page
    • Shop Settings
      • Customer Order Dashboard
      • Shop Emails & Settings
      • Setting up Currencies
      • Setting up Countries & Zone Taxes
      • Global Configurations
      • Discount Codes
      • Countries, Zones & Shipping Rates
  • Add-ons
    • Core Add-ons
      • Gallery View
    • Payment Gateways
      • Mollie Advanced Pay Setup
      • Stripe Advanced Pay
      • Stripe Checkout (Included)
      • Paypal Checkout (Included)
      • Now Payments
Powered by GitBook
On this page
  • Pricing with our without currency symbol
  • General Product information
  • Adding your shop product details with YOOtheme's basic "text" element
  • Adding ALL other shop Product product details with text or headline elements.
  • Pricing with our without currency symbol
  • General Product information
  • In the next tutorial we will talk about the add 2 cart button element and our custom shop elements.
  1. Getting Started
  2. Product setup in Page Builder

Adding product details in builder

PreviousAdding product Title & Subtitle in builderNextAdding custom shop elements in builder

Last updated 2 years ago

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.

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.

  • 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.

Adding product details in CommerceLab Shop
Create a basic grid layout in builder
Adding a product title & subtitle in builder