# CommerceLab Shop Documents
Welcome we are transitioning our documentation to Gitbook to make it easier for us to manage and add to our base quicker. Look for more updates to this in the near future.
# Adding Domains & Watchful Key
All of your CommerceLab subscriptions are tied to a Watchful Key and in most cases need domain validation. Let's walk through it.
## What is a Watchful Key?
Your Watchful Key authorizes installs, updates & usage of our components and add-ons.
* Upon creating an account with CommerceLab a Watchful Key is autmatically created and added to the subscriptions section of your account.
* Make sure you have your Watchful Key ready when installing CommerceLab Shop. It will be needed to complete the install.
## Where to find your Watchful Key
Your Watchful Key is located above your subscriptions in your members area.
* First login then go to: login >> My Subscriptions
***
## Domains and usage authorization
all CommerceLab software requires that the domain you are using our components & add-ons on is authorized for use. You will need to add the domain you are using our components & add-ons on to your subscriptions.
#### Grandfather Members & Agency VIP Tiers 1 & 2
Pro2Store Grandfather & Beta Members: You are not required to add domains to your CommerceLabShop subscription as your usage of CommerceLab Shop is unlimited. You will be required to add domains to your add-on subscriptions.\
\
Agency VIP Tiers 1 & 2: You are not required to add domains to your subscription for any components or add-ons.
***
## Adding domains to a subscription
## Step 1 - Go to your subscriptions to add your domain
After purchasing a new component or add-on you will need to add your domain to that subscription.
* Go to your members dashboard and navigate to >> My subscriptions and find the subscription you'd like to add your domain to.
* Click the manage domians button
## Step 2 - Click manage domains
* A drop down will appear the will allow you to add our domain.
* Add your domain WITHOUT https\:// or www the system does not need this.
## Step 3 - Domain registered & ready for use.
* Upon submmission your domain is locked in and registered for use with your subscription.
***
## Changing a domain for your subscription.
By default domains are locked into your subscription and are not allowed to be changed unless authorized by CommerceLab support.\
* If you've made a mistake in entering your domain, your website has switched domain names or any other isssues, please click the lock button on your domain in your subscription. We will be able to see your account and change it for you if applicable.\
# CommerceLab Shop Documentation
Welcome to CommerceLab Shop Documentation here you can find useful information that'll allow you to easily setup and configure your COmmerceLab Shop
# Getting Support
{% hint style="info" %}
**Good to know:** depending on the product you're building, it can be useful to explicitly document use cases. Got a product that can be used by a bunch of people in different ways? Maybe consider splitting it out!
{% endhint %}
# Component install
{% hint style="info" %}
**Good to know:** depending on the product you're building, it can be useful to explicitly document use cases. Got a product that can be used by a bunch of people in different ways? Maybe consider splitting it out!
{% endhint %}
# Installing on an existing site or fresh Joomla 4 setup.
{% hint style="info" %}
**Good to know:** your product docs aren't just a reference of all your features! use them to encourage folks to perform certain actions and discover the value in your product.
{% endhint %}
* [Don't feel like reading watch the youtube video](https://youtu.be/_9UFWRs78P8?t=110)
{% embed url="" %}
#### We Recommend you already have YOOtheme installed
Although not necessary for install you will need YOOtheme page builder or a YOOtheme theme installed in order to use the component.
## Step 1 - Download CommerceLab Shop
* Download the CommerceLab Shop Package from you My Downloads area in your members dashboard.
* You may need to login or create an account on the CommerceLab website.
* Note: Make sure you have Yootheme Pro installed! Get it here:
## Step 2 - Install in Joomla 4
* Go to the administration area of your Joomla 4 website, and navigate to\
Extensions >> Manage >> Install and go to the "Install Package File" tab.
## Step 3 - Begin Post instal setup wizard
* The installation should take a few seconds while the file uploads and Joomla installs the CommerceLab Shop Component, modules, and plugins.
* Once this process is done, you should see a success message.
## Installation Notes:
* CommerceLab Shop requires the INTL PHP extension. This usually comes packages with PHP7+ but may need to be installed by your hosting provider if not already installed.\
\
If your having trouble with your install please contact our support team.
# Post Install Setup Wizard
{% hint style="info" %}
CommerceLab Shop comes with a hand step-by-step initial setup process that allows you to set up a currency and create essential pages with one click.
{% endhint %}
* Note you will need you watchful key we recommend you have it ready for your inital install.
* [Don't feel like reading watch the youtube video](https://youtu.be/_9UFWRs78P8?t=164)
## Step 1 - Launch CommerceLab Shop setup wizard
* Click the launch CommerceLab button and let's begin.
## Step 2 - Enter your Watchful Key
* Your watchful key is connected to the domain so it's important you have added your domain to your watchful key before installation. You will be prompoed to enter your Watchful Key
#### If the Watchful Key & Domains
If the domain has not been entered into your account or linked to an active subscription you you will have trouble go further.\
\
You will need to verify your domain, upgrade the subscription to add more domains, or renew / purchase a new subscription.[How to add a domain to your account](https://app.commercelab.shop/index.php?option=com_content\&view=article\&id=447\&catid=71\&Itemid=931)
## Step 3 - setup the basics of your shop
* Add your shops name, Shop email address and select the default currency you'd like your shop to have.\
\
(We recommend you make sure the currency is correct before taking orders as previous orders will adjust final totals to the new currency value uf changed later.)
* lastly, select your country.
## You're all set!
* Your shop is ready for you to start building. Like an empty canvas ready for you to get your shop off the ground.
# Quickstart Demo Install
{% hint style="info" %}
**Good to know:** depending on the product you're building, it can be useful to explicitly document use cases. Got a product that can be used by a bunch of people in different ways? Maybe consider splitting it out!
{% endhint %}
# Installing From a Quickstart Demo
{% hint style="info" %}
**Good to know:** your product docs aren't just a reference of all your features! use them to encourage folks to perform certain actions and discover the value in your product.
{% endhint %}
## Quickstart CommerceLab Shop + YOOtheme theme pack
Installing a theme demo on a server requires some basic knowldege of how to create a MY SQL database on a server and PHP 7+ which is usually presetup for you. This install guide will get you from installing through setup.
* [If your looking to install CommerceLab Shop on Joomla 4 by itself - Go here](https://app.commercelab.shop/index.php?option=com_content\&view=article\&id=398\&catid=71\&Itemid=931)
* [Don't feel like reading watch the youtube video](https://www.youtube.com/watch?v=gy4GpfIDXys)
***
## Database Preparation
*
* Make sure your new website domain is setup and pointing to your server.
* Go to your PHP cpanel or application and create a new database. Have your new\
\
1\. Database Name\
2\. Database Username\
3\. Database Password\
\
You will need these at the ready for the installation.
*
* Note: You're gonna want to pre-check your PHP settings to make sure you are set to 7+ or higher.
***
## FTP Access Requirements
* Configure your FTP Server access: You will need to be able to login to your server to add files to your server in the Public\_HTML folder.
* When you've opened your public html folder proceed to step 3.
***
## Downloading your Quickstart Theme from CommerceLab
* Go to the Download the theme you'd like to use just go to My Downloads >> Quickstart Themes and select the dtheme you'd like to use. Make sure youve logged in to view the proper download links.
[Go to theme downloads](https://app.commercelab.shop/index.php?option=com_content\&view=article\&id=217\&catid=47\&Itemid=931)
* After download unpack the zip folder on your computer so you can see the files.
***
## Upload your files via SFTP
* Drag the files to your public\_html folder and proceed with the upload.
* Note: If you are missing any files from the folder or had erors with the upload we recommend reu;ploading the files to ennsure you've got them all on your server.
#### Cpanel file unpacker
You can also use a cpanel file manager uncompress feature. Some FTP programs also have this built in. If you use this please skip ahead.
***
## Quickstart Setup & installation
## Step 1 - Navigate to the domain you've enetered where the installation lives.
* The following server checks allow for a smooth install of your demo quickstart. If you have any green checks disaply a red no please contact either us or your hosting provider for advanced support.
* If lights are green. Click the button in the top right corner and proceed. If you're experiencing any checks not green you will need to contact your server administrator or your host for support.
## Step 2. Add your database information
* You're ready to add those database credentials you setup earlier
* NOTE: localhost is the typical setting for most servers available. Leave this here unless otherwise specified by your host to change.
* If all goes smoothly you will seethis messsage after submitting your credentials.
* Click the next step button
## Step 3. Add your CommerceLab Watchful Key
Enter your Watchful key to validate your subscription and domain.
## Step 4. Add your website administrator credentials
Just like a Joomla installer enter your website credentials.
* Click the next step button when you've added new credentials for your website properly.
## Step 5 - Remove the installation directory
## Step 6 - your site is now ready for you to get started.
#### At this point your site will not be displayed properly until you install YOOtheme Builder
Your site will be defaulted to the Joomla 4 template Cassiopia for the moment. Don't be alarmed. We will fix this in the next steps outlined below.
***
## Post install YOOtheme builder install
In order to stay in accordance with licensing laws. Your will need an active YOOtheme membership in order to use YOOtheme on this install. We will walk yout through getting this setup.\
\
Don't be alarmed your site on the frontend won't look correct untill you do these next steps.
## Step 1 - Download builder from YOOtheme.com
* Nativagate to YOOtheme.com >> Page Builder
* Download the latest Page Builder for Joomla
[Go to YOOtheme.com/Pagebuilder](https://yootheme.com/page-builder)
## Step 2 - Install builder in your new Demo quickstart Joomla 4 extension installer
* in Joomla 4 Nativgate to systems >> Install >> Extensions
* Install the YOOtheme Page Builder
## Step 3 - Activate the YOOtheme Template
* Navigate back to System >> Site templates
* Click into in "Site Template Styles"
* Click the grey button and Change the default temaplte from "Cassiopea - Default" to "YOOtheme - Default"YOOtheme should now be default.
* Your website will now be activated and ready for you to build with the demo theme.
# First Product Setup
# Creating your first product category and product article through Joomla
In this lesson we're going to walk through the basics of setting up product categories and the products that they hold.\
\
We are assuming you have general Joomla knowledge if you don't you can learn about joomla categories and articles at the links below.
* [What is a Joomla Article](https://app.commercelab.shop/what-is-a-joomla-article)
* [How Joomla categories work](https://app.commercelab.shop/how-joomla-categories-work)
* Skip the reading watch the video
{% embed url="" %}
## Setting up a CommerceLab Shop Category.
Commercelab Shop uses the Joomla Category and Articles system. There is no assignment of a category to CommerceLab Shop rather the articles that are in it which set to be a CommerceLab Shop
* Categories and sub-category systems when using YOOtheme page builder for dynamic content work as they would with product categories.
## Step 1 - Navigate to Joomla Categories
* In the Joomla 4 administration panel of your Joomla 4 website navigate to\
Content >> Categories. Click the + to create a new category.
## Step 2 - Name your category
* Name your category >> Save & Close.
[](https://app.commercelab.shop/categories-and-product-setup#js-4bfd)
* That's it you've made your first product category. There is alot more you can do with categories such as making parent categories and sub-categories, but this is the basics.
***
## Creating your first product article
Setting up a general product page can be done in two ways. In Joomla Articles or in your CommerceLab Shop admin dashboard.\
\
We're going to walk through creating a product using Joomla articles. If you'd like to learn about adding products in CommerceLab Shop the link below will give you those instructions.
* [Create your first product page in builder](https://app.commercelab.shop/create-your-first-product-page-in-builder)
* [You can also bulk impoort joomla articles inside CommerceLab Shop](https://app.commercelab.shop/create-your-first-product-page-in-builder)
## Step 1 - Navigate to Joomla articles
* In the Joomla 4 administration panel of your Joomla 4 website navigate to\
Content >> Articles. Click the + to create a new category.
## Step 2 - Title Your article
[](https://app.commercelab.shop/categories-and-product-setup#js-559d)
## Step 3 - Assign your category to the article
* Let's make sure we've assigned the new product article to the new category. In the sidebar of your new product article you will see a category dropdown. Activate that dropdown and select your new category.
[](https://app.commercelab.shop/categories-and-product-setup#js-5894)
## Step 4 - Turning a Joomla article into a CommerceLab Shop Product article.
* Let's make this article into a CommerceLab Shop product article.\
\
From the articles tabs above the content area select the tab CLS ON/OFF
[](https://app.commercelab.shop/categories-and-product-setup#js-5b78)
* Step 4a - Flip the switch to YES "Set as a CommerceLab Shop Product".
[](https://app.commercelab.shop/categories-and-product-setup#js-5dd8)
* Step 4b - Click the Save button in the top right corner of the article to activate the article as a CommerceLab Shop product article.
[](https://app.commercelab.shop/categories-and-product-setup#js-60b1)
* Step 4c - Congratulations! Your product is now activated.
* If you've used YOOtheme Page builder in the past you'll notice that in the general content area where you'd usually see a link to YOOtheme Page uilder has been replaced with a link to the CommerceLab Shop product details page as CommerceLab shop works with dynamic content.
[](https://app.commercelab.shop/categories-and-product-setup#js-63d1)
#### Note: You cannot have general website articles mixed in with CommerceLab Shop activated articles
When you add a CommerceLab Shop product article to a category that category becomes a CommerceLab Shop Category. Adding a article not activated to a Shop cateogry will result in a frontend system messge to remove or assign that article to be a product article.
## Step 5 - Save and New, Save & Close, or Click the link to go to your product details page.
* You're all set to repeat this step for making a new product page in Joomla or you can start creating more products in the CommerceLab Shop Dashboard.
# Creating a product & adding product details in CommerceLab Shop
CommerceLab Shop is 98% integrated with YOOtheme Pro's Page builder. Using dynamic content sources making our shop system headless by design.
* If you're reading this we assume you've followed the inital steps of adding product details to at least one product. If have not done this inital steps please learn how at the link below.
* [Adding product details in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
## Navigating to your product in Page Builder
There a couple ways to get to your product in Page builder. Even if you're a seasons YOOtheme user there is a new way to navigate to page builder.
## In a shop's product details
* Head to your CommerceLab Shop Component dashboard and click "Products" in the sidebar and then enter into the product details. Click the builder button at the top to take you directly to your product in Page builder
[](https://app.commercelab.shop/make-a-product-page#js-684d)
## From the CommerceLab Shop dashboard
* When in the CommerceLab Shop Dashboard click the home button. then dropdown the page builder links. Click the >> "Home" link
* This link will drop you on you home page in builder.
* Using this method will require a shop menu item for you product first to get to your product page. If you haven't done this use the method above to get to your product page.
[](https://app.commercelab.shop/make-a-product-page#js-6ca4)
## From your Home Dashboard in Joomla
* If you've already created a Joomla menu item for your shop category or your first product. You can use the YOOtheme link on your Joomla 4 dashboard
* Using this method will require a shop menu item for you product first to get to your product page. If you haven't done this use the first method to get to your product page.
[](https://app.commercelab.shop/make-a-product-page#js-70e2)
## If you've navigated using the first method and are creating your first empty product page you should land at a page that looks like this.
[](https://app.commercelab.shop/make-a-product-page#js-72a2)
* Please continue to the next step to create your grid layout on the page.
# Product setup in Page Builder
# Overview / Navigating to builder
CommerceLab Shop is 98% integrated with YOOtheme Pro's Page builder. Using dynamic content sources making our shop system headless by design.
* If you're reading this we assume you've followed the initial steps of adding product details to at least one product. If have not done this initial steps please learn how at the link below.
* [Adding product details in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
***
## Navigating to your product in Page Builder
There a couple ways to get to your product in Page builder. Even if you're a seasons YOOtheme user there is a new way to navigate to page builder.
## In a shop's product details
* Head to your CommercerLab Shop Component dashboard and click "Products" in the sidebar and then enter into the product details. Click the builder button at the top to take you directly to your product in Page builder
[](https://app.commercelab.shop/make-a-product-page#js-e451)
## From the CommerceLab Shop dashboard
* When in the CommerceLab Shop Dashboard click the home button. then dropdown the page builder links. Click the >> "Home" link
* This link will drop you on you home page in builder.
* Using this method will require a shop menu item for you product first to get to your product page. If you haven't done this use the method above to get to your product page.
[](https://app.commercelab.shop/make-a-product-page#js-e8bd)
## From your Home Dashboard in Joomla
* If you've already created a Joomla menu item for your shop category or your first product. You can use the YOOtheme link on your Joomla 4 dashboard
* Using this method will require a shop menu item for you product first to get to your product page. If you haven't done this use the first method to get to your product page.
[](https://app.commercelab.shop/make-a-product-page#js-ecf5)
## If you've navigated using the first method and are creating your first empty product page you should land at a page that looks like this.
[](https://app.commercelab.shop/make-a-product-page#js-ee92)
* Please continue to the next step to create your grid layout on the page.
# Creating a grid layout in builder
YOOtheme uses a grid based system to create page layouts in builder we're going to walk through creating a simple grid for your products.
* 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](https://app.commercelab.shop/adding-products-in-commercelab)
***
## New layout overview
When you first arrive at your product page won't see much but a few article mapped fields will show from your into image and decription.
* In the page builder area (left column) click the button that says "New Layout"
* If you don't see "new layout" then you have not clicked the "builder" button first in the side menu.
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-7e4d)
* You'll notice the content on the page will dissappear. That'sa good thing., your Joomla product article is now activated to be used with YOOtheme.
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-80f1)
***
## Creating multiple columns on a page
* Before we add content we're going to going to split the page into two columns.
* Hover the box on the left with + sign BUT don't click it we will do this later.
* When hovering the + box notice on the right side the small pencil tool.
* click that pencil to open your pages grid layout settings.
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-8666)
* Now that you are editing your grid, click the box that says "whole"
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-88cb)
* Select the grid layout you'd like to use. In this tutorial we're going to use "halves"
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-8b28)
* Click the back back to builder button with the arrow after you've added your grid layout. This will take you back toyour page builder.
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-8dc4)
* You will now notice that there are two + signs in the section inyour builder. You can now add content to either of these section on your page.
[](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder#js-902f)
* Saving your layout along the way is important to make sure your safe. When you see the blue button light up that saves "save layout" that means you have not saved. Click that button and it will go grey. Your work is now saved. Do this more often then not.
* When you save your changes are live on your website. It's that simple to make changes to your website. Just change whatever you'd like and save.
The possibilities are limitless when it comes to the content you can add to your page. in this tutorial we will be covering the basics. Let's start with adding your full image.
# Adding product image in builder
In this tutorial we're going to map a product image to your CommerceLab Shop website page in Page Builder
* In order to map an image to a product page in Page Builder you will need to have at least one product with an images.
* [Addding a product in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
***
## Adding your product image
If you've follwed the past tutorial of creating a grid layout you should be seeing two + boxes inside your first section.
* If you've follwed the past tutorial of creating a grid layout you should be seeing two + boxes inside your first sectio on the left colum on for your page builder.
* [Creating your first grid layout in page builder](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder)
* Now let's click the left + button to open to checkout our Page Builder elements
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-af56)
* We are going to click the element call "Image" from the element selections in the "basics" area of the popup.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-b1d7)
* You have just added your first element to a a product page.
* Notice when you hover the left box you added your element, a blue line shows around the box on inage on the left, that shows you which element on the page your editing.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-b4e3)
* This also applys for hovering over. the element on the page the element on the left have the blue box around it to show you what your about to edit.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-b776)
## Before we add the image a quick note to new YOOtheme users.
* While you can add conent directly to page builder to display on this page as you will explore later, YOOtheme has another way to add content and that is through what is called "Dynamic content". This display method takes content from your sites database without having to render files and information on the page directly which greatly slows page load time. This method makes YOOtheme and CommerceLab Shop the fastest options for Website building and eCommerce available.
* Now let's add the Full image you added in your CommerceLab Shop product details.
* On the left column click the element box that says Image to open the image options
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-bc53)
* This is where you would normally add a image thorgh your media library but we're not doing it this way.
* In the tabs to the right under the save button select the "Advanced" tab
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-bf59)
* You will see the dropdown for "dynamic content" below. Click that to activate the drop down.
* Go to the section "CommerceLab Shop" and select "Product" as you are editing the page right now that is the product you've just created so we want to see the image from that product.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-c387)
* Now head back to your image options by clicking the builder button once.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-c60a)
* You will now notice that above where you would regualarly select an image, directly above it on the right there is the word "Dynamic". Click that word to slect your dynamic content source.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-c86c)
* There are two ways to find your dynamic content source for your Full image for your product in CommereceLab Shop type it in, or scroll down.
* Select "Full Image" from the "Product (media) area.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-cb96)
* After you make the selection, the image will display on your page.
[](https://app.commercelab.shop/adding-your-commercelab-shop-product-images#js-cdf4)
* You can now click the builder button on the top to go back to your sections and keep adding more deatils.
* Don't forget to save.
* If you've entered page builder from your CommerceLab Shop Product you can very easily naviagate back to your product details page by clicking the close button in the top left.
# Adding product Title & Subtitle in builder
In this tutuorial we will be walking through how to use the basic YOOtheme Elements to add your shop prduct information to a YOO theme Pagebuilder page with 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](https://app.commercelab.shop/adding-products-in-commercelab)
***
## Adding your shop product title with YOOtheme's basic "headline" element
If you're following the tutorials you;ll know where we're at. You can asl ogo back with the links below.
* [Create a basic grid layout in builder](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder)
* [Adding a shop product image in YOO theme Page builder](https://app.commercelab.shop/adding-your-commercelab-shop-product-images)
* Let's add your shop product title
* Click on the box in the (left column) with the + sign
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-1266)
* From the elements area popup window in the basics area select "Headline"
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-1500)
* You will see default text "headline" on your and the headline + box will now be filled with the healdline element in the left column
* Click the "advanced" text link just below the save button to open advanced settings. We're going to call in the title of your product via dynamic content
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-183d)
* 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
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-1b84)
* In the top left, click the "Builder" button to take you back to your headline content area
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-1dfa)
* In the top left, click the "Builer" button to take you back to your headline content area
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-206a)
* 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.
* Select "Title" from the basics section
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-2376)
* You've just added your first product title.
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-25cb)
***
## Styling your shop product title
* Let's change the Size, color and remove the bottom margin of your headline
* Click the settings tab while in your headline element
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-2a73)
## Sizing your headline
* In the style section, select the stlye dropdown to see your sizing options. For this tutuorial let's go with "Heading Small"
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-2d6d)
* You will see your Product title size increase on the right page
* Don't forget to save your work thus far by clicking the save button that displays in blue everytime you make a change.
* Play around with this till you have it as you see fit
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-311d)
## Changing the colors of your headline
* While still in your settings tab select the "color" dropdown
* Colors are controlled by your overal site style settings which will be covered in another tutuorial, for this tutuorial we will select primary
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-3547)
* You will notice the color changes on th headline on the right page.
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-37ca)
## Changing the headline margins
* We're going to remove the bottom margin from the headline so when we add our shop product subtitle & title it will sit under the headline nicely.
* While still in the the settings area of your headline scroll down to the area called "general"
* Click the button that says "remove bottom margin"
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-3c5c)
* You won't see any changes in on the page as we have not added your substitle yet.
* Let's add your subtitle. Leave the element & head back to to your layout builder main page.
***
## Adding your subtitle using YOOtheme page builders basic "headline" element
Adding your shop product subtitle is the same as adding your shop product. We will add another headline element below the title headline element to display the subtitle the same way as the headline.
* While back in your main builder hover headline element you've just made.and below it you will see a + Sign in a blue circle this will allow you to make a second element directly below the first one.
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-421c)
* While back in your main builder hover headline element you've just made.and below it you will see a + Sign in a blue circle this will allow you to make a second element directly below the first one.
* You will now see two elements stacked in the right box and on your screen and a new headline on your page.
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-4520)
* Just like in your headlines click into your new element then got to the "advanced" section.
* Go to the Dynamic content dropdown and from the dropdown select "Product"
* Go back to your elements main page and this time select "Subtitle from the "dynamic" button that is above the content section
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-48d2)
* You will now see your subtitle on the page.
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-4b7d)
***
## Changing the subtitle style
* Just like in your headline navigate to the "settings" area in on your subtitle element
* For the subtitle title size: Find the style dropdown in your "settings" area and change your headline style in the dropdown to "Heading H4"
* Let's leave the color default for the subtitle unless you'd like it to be a color.
* Let's adjust the margin just like the title. Instead of removing to bottom margin we will remove the top margin this time
[](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-builder#js-50fa)
* Congratulations, you should see your title and subtitle sitting close together and styled.
# 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](https://app.commercelab.shop/adding-products-in-commercelab)
## 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](https://app.commercelab.shop/create-basic-grid-layout-in-yootheme-page-builder)
* [Adding a product title & subtitle in builder](https://app.commercelab.shop/adding-a-shop-product-info-in-yootheme-page-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.
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-24d1)
* Select the "text" element from the element area popup
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-2770)
* 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.
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-2a97)
* 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
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-2da9)
* In the top left, click the "Builder" button to take you back to your headline content area
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-2fff)
* 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
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-333c)
* You've just added your text element and short decription
[](https://app.commercelab.shop/adding-shop-product-info-in-yootheme-page-builder#js-3598)
***
## 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 custom shop elements in builder
Your add 2 cart button product variants, checkbox options, total price, quantity selector are all handled by CommerceLab Shop Custom elements and will be displayd in the elements selection area popup just like all other elements. You will use these elements to initate to allow users to begin the purchasing process.\
\
Make a product page as minimal or extensive as you'd like. The only element required is the Add 2 Cart element.
* If you are on this page, we assume you have general knowelege of YOOtheme builder as outlined in this full tutorial or have used YOOtheme in the past. If you're new to YOOtheme you can start start from the beggining with the link is below.
* [Products in page builder & navigating to it](https://app.commercelab.shop/make-a-product-page)
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-5ecc)
***
## Add 2 Cart Button Element
The add 2 cart button element displays the add to cart button on the product details page of your website.
* Drag and drop this element in your page where ever you'd like
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-633c)
* Set it to take users directly to their cart or trigger your cart module to active.
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-65b2)
* There are plenty of style setting for you to change the color, size and add marings to your button.
***
## Checkbox options Element
Add the checkbox options you might have added to your shop product details directly to your Shop page.[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-6983)
* in the style settings you can choose how you'd like your Checkbox options to be displayed.
* Adding a checkbox option adjusts the product price on the products page. The customer will see the adjsuted total
* The addition will be shown in the cart & checkout seperate from the product price.
***
## Product Variant Element
Add the checkbox options you might have added to your shop product details directly to your Shop page.
* In the style settings you can choose how you'd like your Product Variants to display.
* Customers choosing a product variant changes the product depending if the variant has a SKU or not.
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-70b9)
***
## Quantity Element
This element lets cusomters select to buy multiple of the same product.
* Style it as you need in the style settings
* Added quantities reflect in cart & Checkout for purchase
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-753e)
***
## Static Price Element
While you can use dynamic sources to display pricing information this element can show all prcing options
* Style it as you need in the style settings
* Added quantities reflect in cart & Checkout for purchase
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-79a4)
***
## Total Element
The total element shows adjusted prices depending on the options they choose automatically on the page.
* Style it as you need in the style settings
* Reflects the final product price after options have been selected on the page
[](https://app.commercelab.shop/adding-shop-product-pricing-in-yootheme-page-builder#js-7e0e)
# Creating Custom Fields for a product and displaying them in YOOtheme Page Builder on a product page
This this tutorial we will show you how to make a field group, create a extra custom field for your product, edit it in your product details and add it to your product page in YOOtheme page builder.\
\
This comes in handy when you might need extra places to put product information. You can make as many as you want for your products.
* If you're on this page you should have at least one product page setup so we can set the custom fields to the product. If you have not you can learn how to here.
* [Adding product details in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
***
## Adding a custom field group
* A field group is the category that holds houses a group of custom fields. This keeps your custom fields organized in Joomla.
* Navigate to your field groups. In the sidebar of Joomla go to Content >> Fields Groups
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-35b0)
* When you are in the field groups area click the "New" button to create a new field group
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-3853)
* Enter your field group title
* Make sure it is set to "published"
* Save & Close
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-3c99)
* You have made your field group. Now on to making a custom field.
***
## Adding a custom field
* Navigate back the sidebar menu of Joomla and Click the tab that says "Fields" and go in.
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-4185)
* Click the "New" button at the top of the page.
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-440a)
* Title your new custom field
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-469c)
* In this tutorial we are making an extra text box for extra product information.
* Set the type to "Text"
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-49c6)
* Set the filter to "Raw" This let's us use HTML in our custom field
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-4c77)
* In the sidebar of this area make sure the custom field is published
* Select the Field group you just made
* Select the your products category for which products should have this custom field in it's product details in CommerceLab Shop.
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-5090)
* Save & Close
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-52ea)
* Save & Close
* You've just made a custom field and assigned it to your product category. Now let's head into commerceLab Shop and add details to this custom field.
***
## Add content to a custom field in a CommerceLab Shop product
* Go to Components >> CommerceLab Shop >> Products >> and open a product in the category you've assign the custom field to
* At the very bottom of the producct details you will see a new section has appeared called Custom fields.
* Add new product information in the field you did not have a place for before.
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-5998)
* Let's add this new content to your product page in YOOtheme page builder
***
## Adding your new custom field to your product page in YOOtheme page builder
We're going to bring this new custom field content into your product details page via the CommerceLab Shop Dynamic content source.
* At the top of your product details page click the button that says "builder".
* Don't worry you're product details will auto save when you click the button.
* This will take you directly to your prduct page in YOOtheme builder
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-6078)
* You will be back on your product page
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-62ee)
* Now in builder create a new "Text" Element
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-651c)
* In the text element area select Advanced tab and in the dynamic content source set it to "Products".
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-6783)
* Click the builder button to go back to your Text elements content area and click the word "dynamic" above the content area.
* Scroll down to the bottom of the list and select your custom field
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-6a8d)
* Congratualtions you have added your first custom field to a produc!
* Don't forget to to click the blue save button. If it's blue your page is not saved.
* Click the close button in the top left corner and you will be brought right back to your product details to make edits if needed.
[](https://app.commercelab.shop/adding-a-shop-product-custom-fields-in-yootheme-page-builder#js-6e96)
# Show your product anywhere in your website
CommerceLab Shop uses dynamic content to display product details you can do this on a product page or anywhere on a website using dynamic content "custom sources".
* In this tutorial you will need one or more products in your shop. To follow along you might want to have at least two categories with two products in them. I you need help adding products here is a link.
* [Adding products in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
***
## What are custom dynamic content sources in YOOtheme?
Custom dynamic content sources allows you in a page builder element to select a specific category or categories to show joomla articles or in this case shop activated product articles.\
\
You can also select dynamic modifers to show product articles that have specific tags or not, and even go as far as show prodcut articles if they contain a specific word in them.
***
## Single item vs multiple Item YOOtheme elements
There are teo types of element groups that YOOtheme page builder comes standard. "Basic" elements which show one item and "Multi item source" elements which can show multiple items from a shop category.\
\
We will demonstrate how to add a product, to a basic single item element & how to add multiple items to a multi-source item element any where on your site below.
* Basic single item elements
[](https://app.commercelab.shop/show-shop-product-info-anywhere-in-your-site-in-yootheme#js-ca8c)
* Multiple item elements
[](https://app.commercelab.shop/show-shop-product-info-anywhere-in-your-site-in-yootheme#js-cd33)
***
## Calling a single products details to anywhere on your website
In this tutorial we will show you how to make a panel, display your products information, intro image & link the product to your products page.\
\
Assuming you have a YOOtheme enabled website page created where you want to dispaly a specific product on that is NOT that products details page and know how to get to it let's continue.
* If you don't know how to create an article and activate it with YOOtheme or get to it, here's a tutorial.
* [Creating a Joomla article + YOOtheme & assign it to a menu item](https://app.commercelab.shop/what-is-a-joomla-article)
* Go to the builder page where you'd like your product information to be displayed.
* Add a new element to the page from the basic elements section in the elements area popup window called "Panel"
[](https://app.commercelab.shop/images/documentation/panel.png)
* Open the panel content area and select the "advanced" text from the top menu on the left column
* Select The Dynamic Content source "Custom Product" then head back to your the panel content section
[](https://app.commercelab.shop/images/documentation/custom_product.png)
* A new selection area will appear right below dynaminc conent that will say "Select Manually
* Click where is says "select article" and select the product article you'd like to link to this panels content area.
[](https://app.commercelab.shop/images/documentation/selectman.png)
* Head back to your panel elements content area
* Above each content area in the panel you will see the word "dynamic" This is where you can now assign your products details that you select to show in the pane.
[](https://app.commercelab.shop/images/documentation/dynaaa.png)
* Add your products title in "title"
[](https://app.commercelab.shop/images/documentation/addtitle.png)
* In Meta add your products price with curreny symbol in the "Meta" area
[](https://app.commercelab.shop/images/documentation/metaprice.png)
* Add your products price with curreny symbol in the "Meta" area
[](https://app.commercelab.shop/images/documentation/metimages/documentation/contentshort.pngaprice.png)
* We want to put the word "price" in front of the price
* Where the dynamic content was added in the meta content area click the pencial icon
[](https://app.commercelab.shop/images/documentation/click_the_pen.png)
* Add the word before the price to the "before" field. Add a space after the word as well.
[](https://app.commercelab.shop/images/documentationimages/documentation/addword.png/click_the_pen.png)
* Add your products intro image in the images dynamic content
[](https://app.commercelab.shop/images/documentation/introimagedyn.png)
* Then scroll down and add your link
[](https://app.commercelab.shop/images/documentation/link.png)
* Lastly Name your link
[](https://app.commercelab.shop/images/documentation/link.png)
* If you've follwed these steps you will see your Panel on the page has been loaded with the content from your product!
* There are many style settings for your panel from title size to image, panel color, meta styles and more and play around with these to get your style just right.
***
## Calling a multiple products details to anywhere on your website with the "grid" element
In thie section we're going to make a basic YOOtheme multiple item "Grid" element. This will allow you to show a group of products you choose in a category in a grid and link the products with product details.
* Go to the builder page where you'd like your product information to be displayed.
* Add a new element to the page from the "multiple item" elements section in the elements area popup window called "Grid"
[](https://app.commercelab.shop/show-shop-product-info-anywhere-in-your-site-in-yootheme#js-f6e4)
* Head back to your Grid Content area and select "add new item"
* Click into your new item then go the the "Advanced" tab below the save button
* This time when seleting the items dynamic content source in the dropdown we're going to choose "Custom Products" from the CommerceLab Shop Section.
* You will see after you make the selection an area will appear below it for you to select which categories you'd like show products from. You can select as little or as many as you'd like.
* Scroll down further and let's make sure if you're displaying more than 10 products you see them all set the item number to the total to 100 this will make sure you see all products from the categories you've selected.
* in this section there are many other settings to set which products to plsplay, featured only, by tags or match or don't match
* You can also change the order by selecting article order and change the direction of the aritlces here.
* Head back to your Grid's Content section and you'll see the word "Dynamic Content" Above every content area for the grid item.Let's add your products details.
[](https://app.commercelab.shop/images/documentation/dynaaa.png)
* Set your dynamic content source "Title" in the title section to display your products titles
[](https://app.commercelab.shop/images/documentation/addtitle.png)
* Set the dynamic source for Meta to "Base price" to show the base price of all your products
[](https://app.commercelab.shop/images/documentation/metaprice.png)
* We want to put the word "price" in front of the price
* Where the dynamic content was added in the meta content area click the pencial icon
[](https://app.commercelab.shop/images/documentation/click_the_pen.png)
* Add the word before the price to the "before" field. Add a space after the word as well.
[](https://app.commercelab.shop/images/documentationimages/documentation/addword.png/click_the_pen.png)
* Add your short description to the dynamic content tab to show all short descriptions of your products to the grid.
[](https://app.commercelab.shop/images/documentation/metimages/documentation/contentshort.pngaprice.png)
* Let's add your products intro images to your grid
[](https://app.commercelab.shop/images/documentation/introimagedyn.png)
* Let's dynamically link all products in the grid to theire product details pages by selecing link
[](https://app.commercelab.shop/images/documentation/link.png)
* Let's rename all the links in your products grid to "product details"
[](https://app.commercelab.shop/images/documentation/link.png)
* Contratulations you've just made a product display grid that shows multiple products, that you can add anywhere on your website!
* You can create as amny of these as your site desires
* There are many style settings to choose from that weill allow you to style this grid of products and it can be placed anywhere on your website.
[](https://app.commercelab.shop/images/documentation/muktiple_gird_finish.png)
# Product image gallery add to builder
In this tutuorial we're going to talk through how to create a repeatable custom field add images in your products details in commerceLab and display it on your products details page in YOOtheme builder as a slideshow.
* If you're on this page you should have at least one product page setup so we can set the custom fields to the product. If you have not you can learn how to here.
* [Adding product details in CommerceLab Shop](https://app.commercelab.shop/adding-products-in-commercelab)
***
## Sub-form custom field overview
Multiple source custom fields in Joomla 4 work a little different then in Joomla 3 and are alot more versatile. Instead of creating a repetable custom field you will be creating multiple custom fields assigning them activating them for sub form use and then assigning them to a sub form custom field.\
\
This allows for more options as well as using a media custom field in multiple sub forms. If you have mutplie image galleries in a product you only have to make the media custom field once with the settings.
* At this point we assume you have a field group created and are ready to assign your new suub form custom field for your image gallery to it.
***
## Adding a "Media" custom field and and assigning it for subform use
* Navigate back the sidebar menu of Joomla and Click the tab that says "Fields" and go in.
[](https://app.commercelab.shop/create-add-custom-field-image-gallery-a-shop-product-page#js-1d65)
* Click the "New" button at the top of the page.
[](https://app.commercelab.shop/create-add-custom-field-image-gallery-a-shop-product-page#js-202b)
* In this tutorial we are making an extra text box for extra product information.
* Set the type to "Media"
* Title your new custom field accordingly for images
* Set the the button "only use in a subform to "Yes"
* Set the directory to to folder you want your images to be pulled from.
* This makes it faster to open the media directory folder you have your images in. You do not need to do this step. You can still access all your images in your media library when selecting images.
[](https://app.commercelab.shop/create-add-custom-field-image-gallery-a-shop-product-page#js-2b93)
* In the sidebar of this area make sure the custom field is published
* When selecting for subform use only you'll notice category selection dissappears this is because you will define this when you make your sub form field.
* Select your field group
* Save & Close
* Back to the home page of your custom fields area.
***
## Creating a Img Alt custom "Text" Field
We're going to add image alt text to our images for SEO purposes. Just like creating a media custom field we'ere going to now create a "Text" Custom field.
* In the custom fields areas create a new custom field.
* Name your custom field "Gallery Image Alt Text"
* From type area select "Text" from the drop down.
* Set the the button "only use in a subform to "Yes"
* Assign this new item to your to your field group
* Save and close back to your Custom fields homepage
***
## Creating a sub-form and adding your "Media" & Image Alt "Text" custom fields to it.
* Create a new custom field
* Name it
* From the type selection select Subform
* Scroll to the bottom of this area and select your image gallery "Media" from the drop down
* Next let's add our alt "text" custom field to our Sub form
* Click the top right + Button to create a new field area within the sub form.
* In the new area that has appeared select your Image alt "text" Custom field
* Assign your New sub form to the product categories you'd like to add image galleries to in your product details.
* Save & Close
* You're all set. Note you can make as many of these sub forms as you'd like for your products you might need mutliple image galleries you can do it by duplicating the above steps.
* Let's add some images to your product details in CommerceLab Shop
***
## Adding your images to a sub form custom field in a CommerceLab Shop product
* Go to Components >> CommerceLab Shop >> Products >> and open a product in the category you've assign the custom field to
* If you've assigned your subform of your Sub form correctly, at the very bottom of the products details you will see your new sub form custom field.
* Add new product information in the field you did not have a place for before.
* Click the green button that says add your first row.
* You will now see your Image gallery selection custom field & your Image alt text custom field ready to populate content.
* Add your image and your alt text to your first gallery image
* To add another field set, click the + sign in the bottom right corner below the alt text you've just added.
* Make a few images so you can show multiple images in your upcoming prodcut page gallery in in the products YOOtheme page builder page.
* If you'd like to delete one, click the Lock icon in the bottom corner of the section.
* Your now ready to pull this added content into your products YOOtheme page builder details page.
***
## Adding your custom field image gallery to your product details page in YOOtheme Page Builder
We've made it to the end we're not going to add your new image gallery to your products details page.
* At the top of your product details page click the button that says "builder".
* Don't worry you're product details will auto save when you click the button.
* This will take you directly to your prduct page in YOOtheme builder
[](https://app.commercelab.shop/create-add-custom-field-image-gallery-a-shop-product-page#js-68ea)
* You will be back on your product page
* Now in builder click the + to create a new element
* In the Multiple Item section select the "Slideshow" element.
* Click into the slideshow element
* Select "Advanced" tab and in the dynamic content source set it to "Product".
[](https://app.commercelab.shop/create-add-custom-field-image-gallery-a-shop-product-page#js-71ad)
* After you select go directly below it the the "multiple item source" dropdown and select your gallery. it will be named whatever you've named your subform in custom fields.
* Go back to your slideshow content area. Let's assign the sub form details to your your slideshow content using dynamic content.
* Choose from the dropdown "URL"
* Save your page then click the close button you will be brought back to your products cetails in CommerceLab Shop.
* There are plenty of settings in the slideshow element to make your slideshow look how ever you want. As well as add thumbnails.
* Enjoy this and make it look however you'de like.
* You now have an image gallery for your product
* Note you can use this image gallery now anywhere on your site.
# Core Modules
# Currency Switcher Module Setup
When you install CommerceLab Shop your currecy swticher module is also installed. let's walk through getting it to display and your styling options:
#### Make sure you have more than one currency setup in your shop first
The currecnly Switcher module requires your store to be setup to show multiple currecnies. If you have not done this yet please do this first.\
\
If you are not using multiple currencies you do not need to configure this module.
* [Setting up multiple currencies](https://app.commercelab.shop/currencies)
***
## Navigating to your currency switcher
* The currency swticher is a Joomla module that can be placed anywhere on your website or in YOOtheme elements.
* Your going to want to make sure you havemultiple currencies to use by enabling the ones you need in your currencies settings in CommerceLab Shop.
* [How to enable currencies](https://app.commercelab.shop/currencies)
* Naviagte to >> Content >> Site Moduules in the main joomla menu.
* Now that your in modules click into your currency switcher module
[](https://app.commercelab.shop/currency-switcher-module#js-b4fa)
## Choose how you'd like it to look
* You have some options depending on you'd like it to looks.
[](https://app.commercelab.shop/currency-switcher-module#js-b817)
Position it in either "Navbar", "Header", "Toolbar Right", or "toolbar left". These are the primary positions you can put it when using YOOtheme to display above page content.\
\
Make sure it is published.
--------------------------
[](https://app.commercelab.shop/currency-switcher-module#js-b9c1)
* Assign the currency Switcher to all pages
[](https://app.commercelab.shop/currency-switcher-module#js-bc1f)
* Save & Close
[](https://app.commercelab.shop/currency-switcher-module#js-be86)
* Your currency switcher module will now display on all pages.
* Play around with the styles and see what looks best on your website.
# Desktop Cart Module Walkthrough
CommerceLab Shop cart is a Joomla module pre-installed when you installed. You can display your cart module on all or some of your website pages depending on your needs.\
\
Let's walk through how to setup your cart for both mobile and desktop usage.Don't feel like reading? Watch the video.
***
## Finding your desktop cart module
We're going to be heading into your joomla Site Modules section to activate your cart module and place it in the position you'd like it to be displayed.
## Step 1 - Head to your Joomla Site modules section.
* To get to your Site Modules in the Joomla side bar go to:\
Content >> Site Modules
* Do not click the + sign this time as the module is already in your modules area ready to be setup just not actived. Click the workd "Site Modules" to conitnue.
## Step 2 - Locate the CommerceLab Shop - Desktop Cart Module
[](https://app.commercelab.shop/desktop-cart-module-setup#js-2841)
* You are now ready to setup your Shoping Cart module.
* Let's click into your module and get some basic setting taken care of to show your cart on pages. You can adjust thestting later in the
***
## Desktop Cart Module Settings overview
By default your module is ready to show. This is your modules settings, notice the tabs below to the title, each one of these tabs has a different set of settings to change the way your cart module shows and acts on your site. Adjust these as you need.[](https://app.commercelab.shop/desktop-cart-module-setup#js-4dfa)
***
## Activating your cart module
While in your module settings. In the right colum change the status of your module from "unpublished" to "published".[](https://app.commercelab.shop/desktop-cart-module-setup#js-50ab)
* Activating your cart module is reason 1 of 3 why your cart might not be showing if you're having trouble seeing it.
***
## Positioning your desktop cart module
There are 2 primary positions and 2 secondary positions by default when using YOOtheme you might want your desktop cart to display depending on your websites look and feel. We will walk through them
* First you can find the postions dropdown in the right hand column in your cart module settings.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-6ca2)
## YOOtheme activated desktop module positions
As YOOtheme uses the content area of an article to allow you to use thier Page Builder system to create dyamic page layouts so only a few module positions are available to display modules on all or some pages.Just type in one of these words into the module position search field and it will appear. As explained above.
* Header
* Navbar
* Toolbar Left
* Toolbar Right
## Positions walkthrough
* Header: This will display your module to the far right of the menu but inline with the menu items.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-7469)
* Navbar: This will display your module in line directly after the menu items.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-76fa)
* Toolbar Right: This will display your cart module above the menu in a toolbar.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-9a29)
* Toolbar left: This will display your cart module. in most setups above your logo in the toolbar.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-9ca0)
* Positioning is reason 2 of 3 why you your cart module might not be dispplayed on your website. Make sure it is in the position you'd like.
***
## Displaying your desktop cart module
Next we will let's make sure your cart module position shows on your website.
* In your cart module settings navigate to the "Menu Assignment" tab
* Set the dropdown to show on "All Pages"
* If you'd like to select which pages you'd like this cart module to display on you can choose "Only on selected Pages" or "On all pages except these selected" and choose from a list of your menu items where you'd like to display or not.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-a3ad)
* This is reason 3 of 3 why your desktop cart module might not be displaying on your website.
## Save & Close
* If you've followed these steps your desktop cart module will be displayed on your website. Make sure to save and close.
[](https://app.commercelab.shop/desktop-cart-module-setup#js-c8e7)
* If you've followed these steps your desktop cart module will be displayed on your website. if it is not displaying please go back through this tutorial.
\
# Mobile Cart Module Walkthrough
Your Mobile cart module is a clone of your Desktop Cart module just configured differently.\
\
In this tutorial we're going to walk through setting up your mobile cart module to display on tablet & mobile devices.Don't feel like reading? Watch the video.[First things first. Since the release of YOOtheme's new beta a new module position was added. You will need to first update to the beta release. If you have not already done this you will need to do this first.](https://app.commercelab.shop/updating-to-yootheme-beta)
* [Updating to YOOtheme Beta](https://app.commercelab.shop/updating-to-yootheme-beta#find)
***
## Find the mobile cart module
## Step 1 - Head to your Joomla Site modules section.
* To get to your Site Modules in the Joomla side bar go to:\
Content >> Site Modules
* Do not click the + sign this time as the mobile cart module is already in your modules area ready to be setup just not actived. Click the workd "Site Modules" to conitnue.
## Step 2 - Locate the CommerceLab Shop - Mobile Cart Module
[](https://app.commercelab.shop/cart-module-basic-setup-2#js-c352)
* You are now ready to setup your mobile cart module.
* Let's click into your module and get some basic setting taken care of to show your cart on pages. You can adjust thestting later in the
***
## Mobile Cart Module Settings overview
By default your module is ready to show. This is your modules settings, notice the tabs below to the title, each one of these tabs has a different set of settings to change the way your cart module shows and acts on your site. Adjust these as you need.\
\
[](https://app.commercelab.shop/cart-module-basic-setup-2#js-c879)
***
## Activating your cart modules
While in your module settings. In the right colum change the status of your module from "unpublished" to "published".[](https://app.commercelab.shop/cart-module-basic-setup-2#js-cb04)
* Activating your mobile cart module is reason 1 of 3 why your cart might not be showing if you're having trouble seeing it.
***
## Positioning you mobile cart module
To display your cart on tablet ins mobile devices we're going to be using the new positon released by YOOtheme called "Navbar Mobile"[](https://app.commercelab.shop/cart-module-basic-setup-2#js-ceb6)
* First you can find the postions dropdown in the right hand column in your cart module settings.
[](https://app.commercelab.shop/cart-module-basic-setup-2#js-d12b)
* Positioning is reason 2 of 3 why you your cart module might not be displayed on your website. Make sure it is in the position you'd like.
***
## Assigning cart modules to pages in your site
Next we will let's make sure your cart module position shows on your website.
* In your cart module settings navigate to the "Menu Assignment" tab
* Set the dropdown to show on "All Pages"
* If you'd like to select which pages you'd like this cart module to display on you can choose "Only on selected Pages" or "On all pages except these selected" and choose from a list of your menu items where you'd like to display or not.
[](https://app.commercelab.shop/cart-module-basic-setup-2#js-d821)
* Assigning to your websites pages is reason 3 of 3 why you your mobile cart module might not be displayed on your website. Make sure it is in the position you'd like.
## Save and close
[](https://app.commercelab.shop/cart-module-basic-setup-2#js-db56)
# Core Shop Pages
# Checkout Page
Unit tested for security the CommerceLab Shop checkout is one of the most versatile checkout sytems available on the market.\
\
LIke all Joomla articles your CommerceLab Shop checkout page is just like any other YOOtheme enabled article. This makes it 100% customizable with any available YOOtheme elelments and dynamic content. Get creative with your customer checkout experience.\
\
It's easiest to setup your checkout if you have products in it we advise you to have a least one product ready to test the functions.
***
## Navigating to your checkout page to start designing
In the sidebar of Joomla navigate to to your CommerceLab Dashboard
* Components >> CommerceLab Shop >> Dashboard
[](https://app.commercelab.shop/checkout-page#js-80e0)
## Then navigate to and click "Page Builder" to see the dropdown, then click "checkout".
[](https://app.commercelab.shop/checkout-page#js-82b8)
## YOOtheme Pagebuilder will open and go directly to your checkout page
* Element positioning is done via drag and drop on the left and you can see the changes you make live on the right.
[](https://app.commercelab.shop/checkout-page#js-85a2)
* By default, we've laid out a simple store checkout for you to get started when you first intalled the component. Feel free to change this as you'd like.
* Note: Your shop with the default configuration is only steps away from taking orders.
***
## Custom shop checkout elements
Your shop comes with our custom shop elements that make up the core checkout functions. To be added to your checkout page via drag and drop.[](https://app.commercelab.shop/checkout-page#js-8a3b)
* Depending on your shop needs you can also add these elements anywhere else on your site including your cart, product pages or anywhere else for that matter to display cart information, allow users to login or enter a coupon code.
* Each element is loaded with settings if you'd like to have a deepr look at the element settings click the link below.
* [Link to custom elements deep dive](https://app.commercelab.shop/checkout-page#)
## Custom shop checkout elements
Let's walk through the basics of the checkout elements that you can use and if their needed or not to complete a checkout.
## Cart Items element
* This element shows the cart items a customer are planning purchase. You can adjust quantities or remove items prior to checking out.
[](https://app.commercelab.shop/checkout-page#js-914a)
## Cart Summary Element
* This element shows your calculated pricing totals of product pricing, taxes & discounts.
* Not required complete checkout - The checkout will complete without this element but it's highly recommended.
* \* Shipping totals are hidden until a address is added.
* \* Discount codes will are hidden untill a discount code is entered.
* The Tax and pricing layout can be adjusted to stay compliant for just about any shop around the world.
[](https://app.commercelab.shop/checkout-page#js-9704)
## User Form Element
* This element allows users to login to their account, register an account, or checkout as a guest. You can choose what to display in the settings. Example you only want guest checkout or you require users to register.
* Not Required to complete a checkout - If you do not have this element on your checkout page and you have configred it in your settings properly. The checkout can complete and the customer will default to guest.
* Note: This element can be used in place of the core Joomla login module. you can use it anywhere in your site as many times as you'd like.
[](https://app.commercelab.shop/checkout-page#js-9b87)
## Address Form Element
* This element allows users to add their shipping a billing information. There are many settings and style options to choose from depending on your checkout page layout. As well as ordering what to show first billing or shipping and the order in which the fields display as well as size.
* Required to complete a checkout - You will need this element on your checkout page to complete the checkout as it is linked to your chosen payment gateways.
[](https://app.commercelab.shop/checkout-page#js-9f23)
## Checkout Notes Element
* This element allows users to add notes to their order thatw ill display to you in the order details in your CommerceLab Shop dashboard. Choose the size add plaeholder text easily in the settings.
* Not required to complete a checkout - It is not mandatory to have checkout notes in your checkout.
[](https://app.commercelab.shop/checkout-page#js-a304)
## Coupon Field Element
* This element allows users to add discount codes you might make for promotions or users upon checkout. That you make in your CommerceLab Shop.
* Not required to complete a checkout - It is not mandatory to have the coupon fields element to complete a checkout. Add it only if you need.
[](https://app.commercelab.shop/checkout-page#js-a6da)
## Terms Checkbox Element
* This element makes your T\&Cs mandatory before completing the checkout and links to your terms and conditions page automatically.
* Not required to complete a checkout - It is not mandatory to have the Terms and Conditions to complete a checkout
[](https://app.commercelab.shop/checkout-page#js-aa87)
* As you've seen you can get away with a very minimial checkout or add every element
* Each module is packed with settings for 100% custmization from titles to margins. You can cusmize just about any aspect of these elements.
***
## Payment Gateways
CommerceLab Shop comes with 3 payment gateway YOOtheme elements. Easily add any of these by dragging and dropping them on your final step multi-page checkout or one page checkout.
## Offline Pay Element
* Complete the checkout without taking payment the order will be marked as pending in your orders dashboard untill you accept payment and change the order status to completed.
## Stripe Element
* Use stripe API to process orders. Easily manage your payment the setuptakes no more than a 15 minutes to start taking payments.
* If your ready to start setting up your Stripe payment gateway click the link below
* [How to setup your Stripe Payment gateway](https://app.commercelab.shop/stripe-checkout-included)
## Paypal Element
* Start quick and process your orders using Paypal. You can take payments from anywhere in the world. Quickly.
* If your ready to start setting up your Paypal payment gateway click the link below
* [How to setup your Paypal Payment gateway](https://app.commercelab.shop/paypal-checkout-included)
***
## One Page or Multi-Page checkout.
There really are no limits to the the checkout page layouts. You can make a one page checkout. or multipl page checkouts to create a fully immersive checkout for your customers.
## One Page Checkout
* Simply drag and drop, configure your elements and and style your checkout easily.
[](https://app.commercelab.shop/checkout-page#js-bbf9)
## Multi Page checkout
* Multipage checkout flows are possible as all the checkout elements work independently of each other.
* Change the checkout page link in your CommerceLab Configuration settings to direct users to the first step of your checkout
* This will begin the checkout process. Then add the elements to each page you'd like the process to be laid out. it's that simple. Style each page with YOOtheme elements like any other page.
* In the case of you using anayltics and metrics on shopping sales funnel tracking and checkout conversions, this makes quick work of adding code to the steps.
[](https://app.commercelab.shop/checkout-page#js-c0dc)
* Enjoy the freedom to create immersive checkout expireinces for your customers!
# Store Cart Page
Getting your cart setup is simple. Your cart page is Joomla article powered by YOOtheme Page Builder. You can easily setup your cart to look and feel, being 100% customizable however you'd like while still displaying important cart information.\
\
It's easiest to setup your cart if you have products in it we advise you to have a least one product ready to test the functions.
***
## Default cart page upon install
When you install CommerceLab Shop your cart page (Joomla article) was created automatically and has some preset styles for you to easily begin editing. These provide some basic settings to get you off the ground.
* This demo page displays a link to your checkout.
***
## Getting to your cart page
In most cases the only way to see your cart module will be through your cart module but unless you create a direct link in a button element. you'r going to need a direct link to edit the look and feel of this page.\
\
If you need to setup your cart module the link is here.
* [Desktop Cart Module Walkthrough](https://app.commercelab.shop/desktop-cart-module-setup)
## Step 1 - Go to your CommerceLab Shop Dashboard
* Components >> CommerceLab Shop >> Dashboard
## Step 2 - In your CommerceLab Shop sidebar
* Navigate to Page Builder and click on Cart
* YOOtheme Page Builder will open up the cart article ready for you to start editing the page. You can now edit this page like any other YOOtheme enabled article.
[](https://app.commercelab.shop/store-cart-page#js-8ad5)
***
## CommerceLab Shop Cart Elements
First let's walk through the CommerceLab Shop Cart & checkout custom elements. These display your shoppers cart data and allow for you to add some extra functionality pre-checkout.
#### Cart Items Element
Add this to your cart page to see cart items, adjust quantities or remove items prior to checking out.[Element settings](https://app.commercelab.shop/cart-items-element)
#### Cart Summary
Show your customer the total price prior to checking out. Any adjustments made in your cart will show. In the case they want to spend a certain amount of money.[Element Settings](https://app.commercelab.shop/checkout-cart-summary-element)
#### User Login Form
Allow shoppers to login prior to checkout. You can also use this on your checkout page and anywhere else you'd like on your website.[Element Settings](https://app.commercelab.shop/checkout-userform-element)
#### Discount Code
All shoppers to add their discount code prior to checkout allowing them to see the adjusted total of their cart.[Element Settings](https://app.commercelab.shop/discount-code-element)
***
## Styling your cart page
All styling is handled by the YOOtheme page builder style settings so your shop pages will model every style setting you configure.
* When in YOOtheme Page Builder simply navigate to\
\
Page Builder >> Style\
\
All your site style settings will be available to make adjustments.
***
## Adding YOOtheme default elements
Any elements from the default YOOtheme library can be used on a cart& checkout pages making all core pages 100% customizable. Have fun building this out to be what ever you'd like. All dynamic content sources can be used just like any other page from your website.
* You can be used any elements or pro layouts on your cart page.
[](https://app.commercelab.shop/store-cart-page#js-a562)
# Order Confirmation Page
When your customers complete their orders and the transaction has been successfully completed your order confirmation page will be displayed.\
\
Pre-configured on install & activated as a YOOtheme Pagebuilder Joomla article. You can easily make a fun order confirmation page using CommerceLab Shop short codes to display order details and any of the YOOtheme Builder elements and dynamic content.\
\
Let's walk through how this is setup
***
## Order Confirmation Overview
Order Confirmation is ready to take orders out the gate.
* By this point we imagine you've at least sandbox tested your product to checkout. If yo've installed from a quick start demo you will already have two orders so you will see this page.
[](https://app.commercelab.shop/order-confirmation-page#js-c49c)
***
## Getting to your Order Confirmation page
In most cases the only way to see your cart module will be through your cart module but unless you create a direct link in a button element. you'r going to need a direct link to edit the look and feel of this page.\
\
If you need to setup your cart module the link is here.
* [Desktop Cart Module Walkthrough](https://app.commercelab.shop/desktop-cart-module-setup)
## Step 1 - Go to your CommerceLab Shop Dashboard
* Components >> CommerceLab Shop >> Dashboard
## Step 2 - In your CommerceLab Shop sidebar
* Navigate to Page Builder and click on Cart
* YOOtheme Page Builder will open up the Order confirmation page article ready for you to start editing the page. You can now edit this page like any other YOOtheme enabled article. You can style it just about any way you'd like.
***
## Order Dynamic Content Source
You can use the order dynamic content source to display order information just about anywhere on your website for your customers.[](https://app.commercelab.shop/order-confirmation-page#js-d116)
## Truly limitless style with over 50 order & customer details to to use in your YOOtheme page builder elements as dynamic content sources
[](https://app.commercelab.shop/order-confirmation-page#js-d2ab)
## Be as conservative or creative as you'd like with your order confirmation page for the first time.
***
## Adding YOOtheme default elements
Any elements from the default YOOtheme library can be used on a order confirmation pages making all core pages 100% customizable. Have fun building this out to be what ever you'd like. All dynamic content sources can be used just like any other page from your website.
* You can be used any elements or pro layouts on your cart page.
[](https://app.commercelab.shop/order-confirmation-page#js-d6cc)
# Terms & Conditions Page
## Terms & Conditions Page
Your Terms & Conditions page is pre-installed and configured upon installing CommerceLab Shop and is directly linked to the Terms & Conditions element you can use on your Checkout page.\
\
It is not mandatory to have a terms & conditions page in your shop but it's there if you need.\
\
The T\&Cs page is nothing more than a YOOtheme builder page so it can be styled how ever you'd like. There is no limits to what you can make it look like.
***
## Navigating to your Terms & Conditions Page to start designing
In the sidebar of Joomla navigate to to your CommerceLab Dashboard
* Components >> CommerceLab Shop >> Dashboard
[](https://app.commercelab.shop/terms-conditions-page#js-c929)
## Then navigate to and click "Page Builder" to see the dropdown, then click "checkout".
[](https://app.commercelab.shop/terms-conditions-page#js-caf7)
## YOOtheme Pagebuilder will open and go directly to your terms & condtions page
* Element positioning is done via drag and drop on the left and you can see the changes you make live on the right.
[](https://app.commercelab.shop/terms-conditions-page#js-cdcf)
* By default, we've laid out a simpleterms 7 condtions page for you to get started when you first intalled the component. Feel free to change this as you'd like.
***
## Terms and conditions in checkout
* By default, we've laid out a simpleterms 7 condtions page for you to get started when you first intalled the component. Feel free to change this as you'd like.
When you select to have terms in conditions in your checkout page to be required in your global configuration settings and add the element to your Checkout page in YOOtheme builder. You can directly link to the terms and condtions page automatically just by adding it.\
\
Just click the box to link terms & condtions and you're all set. If a customer would like to read the terms and condtions the page will load in a new wnidow.[](https://app.commercelab.shop/terms-conditions-page#js-d304)[](https://app.commercelab.shop/terms-conditions-page#js-d418)
# Shop Settings
# Customer Order Dashboard
Easily manage your users orders with an intuitive dashboard and simple layout. Easily view orders and prep them for shipping or work with offline payments and confrm or deny orders.
* Navigate to your orders Dashboard by going to the CommerceLab Shop dashboard then in the sidebard cliekc "Orders"
[](https://app.commercelab.shop/orders-dashboard-customers#js-bc3d)
* Click into an order and review the details of an order for processing.
* Change the status of an order, to send your shipped email, or confirmed order if using offline payments.
[](https://app.commercelab.shop/orders-dashboard-customers#js-bf8e)
# Shop Emails & Settings
## Shop emails & how they work
Your shop comes ready for sales with ready to use email management system to send customers their order details and send admin the order notice.
* Navigate to your Email Menager by going to the CommerceLab Shop dashboard then scroll down to and activate the "settings" dropdown and go to "Email Manager"
[](https://app.commercelab.shop/email-settings#js-98b1)
***
## Email types
* Thank you email: Triggered automatically when an order is completed.
* Order completed email: This is sent to users for Offline payments when you set the order to completed.
* Refunded: This email is sent in the case of a refund automatically when set to refunded in the order dashboard.
* Pending: Offline Orders the first come in will be set to pending until changed to to comfirmed.
* Confirmed email: This is sent to admin when a new order is confirmed.
* Denied Email: For offline payments and triggered in the order details to send to the customer. Letting them know the order was denied.
***
## Multilingual Emails by Country
* Duplicate the emails and make your shop internation. If your Joomla website is activated to have multiple languages you easily create emails in different languages and depdending on the language detected will determine which email to send in which language.
[](https://app.commercelab.shop/email-settings#js-a1a6)
***
## Global site & order details email shortcodes
* Rememebr that applying tax happens on a product level. You will define the type of tax that each product will have appplied and that will equate to the final price at checkout.
[](https://app.commercelab.shop/email-settings#js-a4f6)
# Setting up Currencies
CommerceLab Shop must always have a default currency set, whether or not you're using the Currency Switcher Module.
#### Note
A default currency is usually set during the Setup Wizard Process, however, it important to be sure that a default currency is selected in the CommerceLab Shop backend component.
## Activating a Currency
CommerceLab Shop comes with every currency you could need to run a store anywhere in the world. All you need to do is activate the currencies you need. To activate a currency to CommerceLab Shop, follow these steps below.
## Step 1
* Navigate to the CommerceLab Shop Component and look for "Currencies" on the sidebar menu in the settings dropdown.
* This will load a currency table with all available currencies.
## Step 2
* Find the currency you wish to activate. You can find the currencies you need by either using the text search:
* Or by reordering the table:
## Step 3
* Activate your chosen currency by clicking the "x" icon to turn it green:
## Step 3
* Now that your currency is activated, set a "rate". A rate is how the currency will convert in relation to your default currency (which is always set to rate = 1).\
\
So if your default currency was say, Euro and you just activated Pound Sterling, then you might want to set the "rate" of Pound Sterling to "0.91".\
\
(
\
Now your new currency will be available in the currency switcher module.
# Setting up Countries & Zone Taxes
Countries control taxes so it's important to check these settings prior to store launch.
* You're going to want to Global Configuration and check if the parameters there are set up as required for your use case.
* [See Global Configurations overview](https://app.commercelab.shop/global-configurations)
* Navigate to your Countries by going to the CommerceLab Shop dashboard then scroll down and active the settings dropdown where you will see the countries "Countries"link. Click that.
* Here is a list of all countries you can add a new country or activate them by clicking the red dots as well as change your default.
* Note: We recommend re-saving your default country after install, just click into it and re-save to ensure it's working properly.
## Country options, tax rates
* We've gone far into taxes per country to be in accordance with the new laws emerging. you can add "standard rate" "Reduced Tax Rate" "Extra Tax Rate" All equated to checkout which you assign in yto your product when being created.
* EU VAT comes predefined with CommerceLab Shop via API if you enable it it will calculate for products.
***
## Country "Zones"
* Zones are directly below the countries tab in the sidebar of your CommerceLab Shop sidebar in the settings area.
* If you are taxing your products based on the customer's address, beside the countries where you are shipping be sure to set the tax rates for each zone (state) within the country. By Default, zones inherit the country's tax rate(s), but that can be changed for each zone if required.
* Rememebr that applying tax happens on a product level. You will define the type of tax that each product will have appplied and that will equate to the final price at checkout.
# Global Configurations
Your commerceLab Shop Global Configrations manage some core functions and systems for your shop. We will walk through the tabs in your shop to get you acclimated with settings you can change to configure your shop a little more to your needs.
* Navigate to your Config settings by going to your CommerceLab Shop Dashboard >> Settings >> Config
* Or through Joomla 4 >> Systems >> Global Configuration >> CommerceLab Shop
[](https://app.commercelab.shop/global-configurations#js-3916)
## Global Settings tab
* The tab you land on when you first enter the CommerceLab Shop Configurations area.
* Your Shop name: Used on invoices and such
* Shop Logo: Used on invoices
* Brand Color: Used on invoices
* Shop Email Address: Used to send shop based admin emails to you
[](https://app.commercelab.shop/global-configurations#js-3efd)
## The next section of dropdowns define which pages are your core pages.
* By default on install these pages are already pointing to the YOOtheme articles created for your core pages upon install but you can adjsut these to be whate ever you'd like it you need.
* By default on install these pages are already pointing to the YOOtheme articles created for your core pages upon install but you can adjust these to be whatever joomla article you'd like if you needif you'd like. .
[](https://app.commercelab.shop/global-configurations#js-4294)
* Lastly you can set the access level of which your store prouct categories are reachable if this is a private shop you would set the access level to registered
[](https://app.commercelab.shop/global-configurations#js-44f7)
***
## Global Tax Settings
* our advnaced tax settings allows you to easly define your tax needs by the country you live in
[](https://app.commercelab.shop/images/documentation/global_tax.png)
***
## Checkout
* Allow guest checkout without registration, Require biolling or not or require T\&Cs on all orders.
[](https://app.commercelab.shop/images/documentation/checkoutglobal.png)
***
## Orders
* Orders prefix: Set your order prefix such as "CLS-" which would come infron of the numbers.
* Order Inital Number: Start your order count from where ever you'd like. Example: CLS-0345 would start the next would be CLS-0346
* Invoice Inital Number: Start your invoice numbers like Order numbers
* Allow guest checkouts & Append guest Order to logged in users.
* Comfirmation page expiry: The time the order confirmation page will hold your cutomers order details before the order confirmation page removes information. A user will no longer see their order details on the order confirmation page after this set time.
[](https://app.commercelab.shop/images/documentation/ordersglobal.png)
***
## Update
* Where you add your watchful key from the CommerceLab Shop Website.
[](https://app.commercelab.shop/images/documentation/watchful_key_Instert.png)
***
## Permissions
* Set what access levels are allowed to do what actions in the backend of commerceLab Shop comes in handy if you have staff doing different types of tasks in your shop.
[](https://app.commercelab.shop/images/documentation/permissions.png)
# Discount Codes
CommerceLab Shop comes with a simple to use discount tool to give your customers discounted pricing applied at checkout if entered correctly.
* Navigate to your discounts by going to the CommerceLab Shop dashboard then scroll down to the "Discount Codes" tab and click in.
* Click the "Add Discount" button from the right column
[](https://app.commercelab.shop/using-discounts#js-fc09)
* Here you can select a options such as "Amount" "Percent" or "Free Shipping"
* Create the coupon code
* Select your start or stop date
* Set the max usage
* Remember to publish it
[](https://app.commercelab.shop/using-discounts#js-013e)
# Countries, Zones & Shipping Rates
## Setting up Countries & Zone rates for weight based shipping prices
Countries & Country Zones or regions control your shipping rates. The countries you have enabled via your countries tabs will be available to add shipping rates to.\
\
There a two types of shipping in CommerceLab Shop Flat Rate or Weight based this section applies to weight based shipping pricing.\
\
You can select in a product details if the product is "weight based", "Flat rate" or "No shipping" cost.
***
* Navigate to your "Country Shipping Rates" by going to the CommerceLab Shop dashboard then scroll down and activate the settings dropdown where you will see the countries "Country shipping rates". Click that.
* Here you will see a blank page where you can add your first country. Click "Add Country Shipping Rate" from the right sidebar.
[](https://app.commercelab.shop/shipping-setup#js-ce7a)
* Only the countries you have actived through your countries tab will show. here for you to define the rates for this country.
* Select your wieght to & from range
* Repeat this for the same country to create different rates based on package weight.
* Set the cost for this range
* Add shipping and handeling if applicable.
[](https://app.commercelab.shop/shipping-setup#js-d3ed)
***
## Zone shipping rates
* This time Navigate to your "Zone Shipping Rates"
* Here you will see a blank page where you can add your first country zone shipping rate.
* Again you can define multiple weights ranges depending on your products.
[](https://app.commercelab.shop/shipping-setup#js-d89c)
# Core Add-ons
# Gallery View
[Buy Gallery View Core](https://app.commercelab.shop/gallery-view-core)The Gallery View Core Add-on is cross system add-on which is why we call it a core add-on to the primary systems of the CommerceLab Component.\
\
Replacing the need to create Image galleries with custom field subforms with your product images. This add-on makes quick work out of making galleries of images, reorganizing them and assigning them to any Multiple item element in YOOtheme page builder.[](https://app.commercelab.shop/images/documentation/gallery.gif)
***
## Download & Setup
* [Purchase the Gallery View Core Add-on](https://app.commercelab.shop/gallery-view-core)
* [If you've recently purchased this add-on Download the add-on from your "my Downloads" Area in your account.](https://app.commercelab.shop/my-downloads)
* Make sure to add your domain where your shop lives to your subscription. You will need this configured to use the add-on in your shop.
* [Adding a domain to my add-on subscription](https://app.commercelab.shop/watchful-key)
* Install your new add-on in the joomla extensions >> Install of your website where you have CommerceLab Shop.
***
## Gallery View Overview
The gallery view core add-on is not a YOOtheme element you will not find a element in YOOtheme. It is 100% dynamic content that uses YOOtheme Multiple itemssource functions to create repeatable images as you would with any other repeatable custom field.
* Directly after install you can go to any product and you will now see a new area directly under your Full and intro images.
* Click the big + sign to make your first Image gallery
* You can select as many images as you'd like and weathc how fast they load.
[](https://app.commercelab.shop/images/documentation/galleryview.png)
* Drag and drop the order. This is how they will show in your dynamic content source.
* That's it you've made your first Image gallery
[](https://app.commercelab.shop/images/documentation/draga.png)
***
## Gallery View as a Dynamic Content source
* CommerceLab uses it's own sources for products. They are below YOOtheme's sources in the dynamic content drop down called "CommerceLab Shop" while you might use YOOthemese custom sources for articles activated with custom fields you will need to choose ours for products.
* Now save & head to your Products page builder page
* Select any Multiple Item Source element that uses images such as "slideshow"
* Click into the element and add 1 new item
* Click into the item you've created and got to the "Advaced" tab under the save button.
* You will see the dynamic content dropdown, activate it and select CommerceLab Shop "Product Gallery"
[](https://app.commercelab.shop/images/documentation/prodcutgallery.png)
* Now go back to your content area of the item and add the source to your images area. and assign the source.
[](https://app.commercelab.shop/images/documentation/commercelabshopgallery.png)
* Congratulations yo've made your gallery in seconds!
[](https://app.commercelab.shop/images/documentation/gallery1.png)
***
## We have big plans for the gallery core add-on as it is a core add-on it will integrate in the future with all of our systems and even other add-ons.
* If you have an idea please let us know we'd love to hear it. Mainly the next move will be to integrate it wit the grid & filter add-on.
# Payment Gateways
# Mollie Advanced Pay Setup
[Buy Mollie Advanced Pay Add-on](https://app.commercelab.shop/mollie-checkout)Use the Mollie advanced pay check add-on to create a one page checkout which increase conversions overlaying your shop website. This is a great toption for mobile heavy traffic shops.\
\
VAT ID is required to use mollie checkout, with over 50 payments methods accepted around the world\
\
We're going to walk through the download setup and install.[](https://app.commercelab.shop/images/mollie1.png)
***
## Download & Setup
* [Purchase the mollie advanced Pay add-on](https://app.commercelab.shop/mollie-checkout)
* [If you've recently purchased this add-on Download the add-on from your "my Downloads" Area in your account.](https://app.commercelab.shop/my-downloads)
* Make sure to add your domain where your shop lives to your subscription. You will need this configured to use the add-on in your shop.
* [Adding a domain to my add-on subscription](https://app.commercelab.shop/watchful-key)
* Install your new add-on into the site where your CommerceLab Shop Component using Extensions >> Install
***
## Setting up a website profile in Mollie payments website
When in your newly setup dashboard, we first need to setup a website profile. From the side bar naviagte to settings >> Website profile
* Fill out your business details and add the site where your site lives.
[](https://app.commercelab.shop/mollie-advanced-pay-setup#js-0e21)
* Then select your payments you'd like to accept.
[](https://app.commercelab.shop/mollie-advanced-pay-setup#js-108e)
* Personalize your checkout
[](https://app.commercelab.shop/mollie-advanced-pay-setup#js-12f1)
***
## Getting your mollie API Keys
* From the side bar go to Developers >> API Keys. to grab you live and test keys
[](https://app.commercelab.shop/images/Keys.png)
***
## Mollie Advanced Pay Plugin Configuration
* Navigate to your Joomla 4 >> Plugins section and search for "Mollie"
* Click into "Mollie Advanced - CommerceLab Shop"
[](https://app.commercelab.shop/images/mollieplug.png)
* This is where you'll be entering your "Sandbox" credentials you saved then toggle the switch to "Live mode"
* Add your test webhook end point secret
* Leave "User Browser Locale?" Leave as yes. This is for advanced usage
* Remember to turn live mode off for testing. Save & Close
[](https://app.commercelab.shop/images/addmollie.png)
***
## The Mollie Advanced element
Naviage to your checkout page. In your YOOtheme page builder under "COMMERCELAB PAYMENT (ADVANCED)" elements you can find your MOllie Advnaced element and drag this on to your page. To begin the setup and testing.
* Drag this onto to your checkout page and begin configuring tests on your checkout.
[](https://app.commercelab.shop/images/MOLLIEA.png)
# Stripe Advanced Pay
[Buy Stripe Advanced pay](https://app.commercelab.shop/stripe-advanced-checkout)Use the stripe advanced pay check add-on to create a one page Stripe checkout which increase conversions overlaying your shop website. This is a great toption for mobile heavy traffic shops.\
\
We're going to walk through the download setup and install.[](https://app.commercelab.shop/images/overview6a4ea4b380bea93a5be8a820f3eb7c35.gif)
***
## Download & Setup
* [Purchase the stripe advanced Pay add-on](https://app.commercelab.shop/stripe-advanced-checkout)
* [If you've recently purchased this add-on Download the add-on from your "my Downloads" Area in your account.](https://app.commercelab.shop/my-downloads)
* Make sure to add your domain where your shop lives to your subscription. You will need this configured to use the add-on in your shop.
* [Adding a domain to my add-on subscription](https://app.commercelab.shop/watchful-key)
* Install your new add-on into the site where your CommerceLab Shop Component using Extensions >> Install
***
## Getting to Stripe.com
Youre going to need your Stripe credentials for sandbox testing on your site check and live credntials when you're ready to start taking real payments.
* You can get your credentials from inside your stripe account
*
***
## Getting your Stripe testing keys
* When in your stripe account click the button "Developers" in the top right corner
[](https://app.commercelab.shop/images/documentation/cllickdev.png)
* Toggle the switch now next to the "developers link to "Test Mode"
[](https://app.commercelab.shop/images/documentation/testmode.png)
* Copy and save your Test "Publishable Key" & "Test Secret key" you'll need these for your Stripe Plugin
***
## Getting your live publishable key and creating a secret live key
* Toggle the "test Mode" Switch to off
* Click the create button "Create a secrect Key"
* Name it
* Copy your new Secret Live Key. You will only be able to see it once so make sure to copy it and save it somewhere secure.
[](https://app.commercelab.shop/images/documentation/create_secret.png)
***
## Creating a Stripe webhook
* You will need to create a webhook end point back to your shop for both test mode and live mode. Do these steps in both test mode and live mode.\
\
Your CommereLab Shop is listening for the results of the transaction to either tell your customer something went wrong or the transaction was completed and show them the order confirmation page.
* Go to your "webhooks" section from the left menu when in the "developers" area
* Click the "Add an End Point" button.
[](https://app.commercelab.shop/images/documentation/crete_a_webhook.png)
* Name your webhook
* Add this endpoint URL. (The URL is the same for both test and live mode).
https\://**your.domain**/index.php?option=com\_commercelab\_shop\&paymenttype=stripeadvanced
**NOTE:**
Be sure that your end point is accessible from a browser, you will see a confirmation message.\
All sites that have online payment should be using forced and valid SSL certificates (httpS), Stripe itself will block any interaction if not.
* Add a description that describes what happening such as "listneing for transaction details"
* Then click the "select events" Button
[](https://app.commercelab.shop/images/documentation/select_events.png)
* Search for these endpoints and add them.
* Save your test and live test end point secrets.
[](https://app.commercelab.shop/stripe-advanced-pay-setup#js-4c6c)
***
## Apple Pay Setup
* Next go to Settings >> Branding in Stripe to style your new stripe avdaced Pay Setup
* [Click this link to learn how to activate Apple pay if you'd like to use it](https://support.stripe.com/questions/enable-apple-pay-on-your-stripe-account)
[](https://app.commercelab.shop/stripe-advanced-pay-setup#js-50c6)
***
## Stripe Branding can be done in your stripe account settings.
* Next go to Settings >> Branding in Stripe to add some simple style options to your checkout like colors and logo icon.
*
[](https://app.commercelab.shop/stripe-advanced-pay-setup#js-54e9)
***
## Stripe Plugin Configuration
* Navigate to your Joomla 4 >> Plugins section and search for "Stripe"
* Click into "System - CommerceLab Shop Stripe Advanced"
[](https://app.commercelab.shop/images/stripead.png)
* Add your background image that will display behind order details on the left of the one page checkout.
* This is where you'll be entering your "Sandbox" credentials you saved then toggle the switch to "Live mode"
* Add your test webhook end point secret
* Leave "User Browser Locale?" Leave as yes. This is for advanced usage
* Remember to turn live mode off for testing. Save & Close
[](https://app.commercelab.shop/images/documentation/stripe_live.png)
***
## The Stripe Advanced element
Naviage to your checkout page. In your YOOtheme page builder under "COMMERCELAB PAYMENT (ADVANCED)" elements you can find your Stripe Advnaced element and drag this on to your page. To begin the setup and testing.
* Drag this onto to your checkout page and begin configuring tests on your checkout.
[](https://app.commercelab.shop/images/stripeadvanced.png)
# Stripe Checkout (Included)
Included with your CommerceLab Shop component is the payment gateway by Stripe let's walk through setup and configuration of this add-on to get you started taking payments.
## Getting to Stripe.com
Youre going to need your Stripe credentials for sandbox testing on your site check and live credntials when you're ready to start taking real payments.
* You can get your credentials from inside your stripe account
*
***
## Getting your Stripe testing keys
* When in your stripe account click the button "Developers" in the top right corner
[](https://app.commercelab.shop/images/documentation/cllickdev.png)
* Toggle the switch now next to the "developers link to "Test Mode"
[](https://app.commercelab.shop/images/documentation/testmode.png)
* Copy and save your Test "Publishable Key" & "Test Secret key" you'll need these for your Stripe Plugin
***
## Getting your live publishable key and creating a secret live key
* Toggle the "test Mode" Switch to off
* Click the create button "Create a secrect Key"
* Name it
* Copy your new Secret Live Key. You will only be able to see it once so make sure to copy it and save it somewhere secure.
[](https://app.commercelab.shop/images/documentation/create_secret.png)
***
## Creating a Stripe webhook
* You will need to create a webhook end point back to your shop for both test mode and live mode. Do these steps in both test mode and live mode.\
\
Your CommereLab Shop is listening for the results of the transaction to either tell your customer something went wrong or the transaction was completed and show them the order confirmation page.
* Go to your "webhooks" section from the left menu when in the "developers" area
* Click the "Add an End Point" button.
[](https://app.commercelab.shop/images/documentation/crete_a_webhook.png)
* Name your webhook
* Add this end point URL. (The URL is the same for both test and live mode).
***
##
***
* Add a description that describes what happening such as "listneing for transaction details"
* Then click the "select events" Button
[](https://app.commercelab.shop/images/documentation/select_events.png)
* Search for these endpoints and add them.
* Save your test and live test end point secrets.
[](https://app.commercelab.shop/stripe-checkout-included#js-93d2)
***
## Stripe Plugin Configuration
* Navigate to your Joomla 4 >> Plugins section and search for "Stripe"
* Click into "Stripe Payment - CommerceLab\Shop"
[](https://app.commercelab.shop/images/documentation/stripefind.png)
* This is where you'll be entering your "Sandbox" credentials you saved.
* Add your test webhook end point secret
* Leave "User Browser Locale?" Leave as yes. This is for advanced usage
[](https://app.commercelab.shop/images/documentation/stripesandbox.png)
* Toggle the switch to live and enter your live keys
* Enter your live end point secret
* Leave "User Browser Locale?" Set to yes. This is for advanced usage
[](https://app.commercelab.shop/images/documentation/stripe_live.png)
* Remember to switch the toggle back to "live mode no" so you can test this properly.
* Save and close you're ready to go configure this on your checkout page.
***
## The Stripe standard element
Naviage to your checkout page. In your YOOtheme page builder under "CommerceLab Shop Payment (standard)" elements you can find your Stripe element drag this on to your page. To begin the setup and testing.
* Drag this onto to your checkout page and begin configuring tests on your checkout.
[](https://app.commercelab.shop/images/documentation/apypalelement.png)
# Paypal Checkout (Included)
Included with your CommerceLab Shop component is the payment gateway by Paypal let's walk through setup and configuration of this add-on to get you started taking payments.
***
## Getting to Paypal developers site
Youre going to need your paypal credntials for sandbox testing your sites check and live credntials when you're ready to start taking real payments.
* You can get your credentials from the Paypal developers site. Login with your paypal account info or create one.
*
## Creating Paypal sandbox credentials
* When in your Paypal developers area click the left hand menu item "apps & Credentials"
[](https://app.commercelab.shop/images/documentation/paypal_apps.png)
* With the "SandBox" toggle activated click the button "create app"
[](https://app.commercelab.shop/images/documentation/createapp.png)
* Name your new app
* And set your app type to "Merchant"
* Then Create the app
* Copy and save your "Sandbox Client ID" "Sandbox Secret" to use in the following steps you will need to add these to your plugin.
[](https://app.commercelab.shop/images/documentation/appcreate.png)
***
## Creating a live Paypal app keys
* Go back to "Apps & Credentials" tab by clicking the link in the left menu
* Toggle the Switch from "Sandbox" to "live"
* Click the button "Create app"
* Name your new "Live" App and continue
* Copy your "Client ID" & "Secret" keep this safe
* Note: There are no webhooks needed for this Paypal integration.
***
## Paypal Plugin Configuration
* Navigate to your Joomla 4 >> Plugins section and search for "Paypal"
* Click into "Paypal - CommerceLab\Shop"
[](https://app.commercelab.shop/images/documentation/search_paypal.png)
* This is where you'll be entering your "Sandbox" credentials
* Leave "User Browser Locale?" Set to yes. This is for advanced usage
[](https://app.commercelab.shop/images/documentation/sandenter.png)
* Toggle the switch to live and enter your live keys
* Leave "User Browser Locale?" Set to yes. This is for advanced usage
[](https://app.commercelab.shop/images/documentation/live_paypal.png)
* Remember to switch the toggle back to "live mode no" so you can test this properly.
* Save and close you're ready to go configure this on your checkout page.
***
## The Paypal standard element
Naviage to your checkout page. In your YOOtheme page builder under "CommerceLab Shop Payment (standard)" elements you can find your Paypal element drag this on to your page. To begin the setup
* Drag this onto to your checkout page and begin configuring tests on your checkout.
[](https://app.commercelab.shop/images/documentation/apypalelement.png)
## Blank Popup for Paypal Joomla configuration
Joomla needs to be configured if you are seeing a blank popup window at paypal checkout.
Please change system orgin header to be same-orgin. This will allow popups in System HTTP Headers plugin
# Now Payments
NOWPayments is **a non-custodial crypto payment gateway solution** that lets you accept online payments in a variety of cryptocurrencies - in a simple and fast way. The platform supports more than 50 currencies including stablecoins, tokens, as well as popular coins.
