Introduction

This is the user guide to understanding how the Commerce Manager works and how to do several actions inside of it.

The Commerce Manager is inside the main menu of Yalo Studio.

Storefronts

To see the main Storefront list navigate to the main menu of Yalo Studio; on the main page, you will see a list of available Storefronts for the account you have selected. You will be able to see the Flow name, the phone number, and the language for the specific Storefront. Also, you will be able to see the current status of the Storefront.

❗️

If you change the account, this page will be refreshed with the current Storefronts list of the new account.

Create a new Storefront

To create a new Storefront, click on the NEW STOREFRONT button located in the top-right corner, then fill the form with Storefront’s name and owner’s email (by default, this is pre-filled with the currently authenticated user, but you could use another email instead).

Finally, click on the CREATE STOREFRONT button and you will be redirected to the Settings page (see update existing storefront section for more details):

Field Validations for a new Storefront:

• Name: it should be in slug-format
• Email: it should be a valid email address

❗️

If your role is of type user, you will not be able to create new Storefronts, you will be only able to edit existing ones.

🚧

If you don't have any Storefront, you will see an empty state with another blue button to create a new Storefront; the functionality of both buttons is the same.

Update existing Storefront

Let’s suppose you have an existing Storefront (or just create a new one as shown above), and you would like to start managing it, so you could click the SELECT button and navigate to the Storefront’s settings.

Settings

Once you are on the Settings page, you will see something similar to this with the information related to the selected Storefront:

📘

If you want to return to the Storefront’s list make, click on the Change Storefront button.

Basic configuration

This section allows you to modify the following settings: Bot Slug, Language, Currency, Price Format, and Bot Number. The Store Name field is read-only.

Once you are done with your changes, just make click on the SAVE button to persist your data; then you should see a confirmation message like the following:

Business rules

This section allows you to modify the following settings: Minimum Amount, Minimum Quantity, Maximum Quantity, Maximum Quantity, Pre-Filled Cart, Legal age validation, Suggested products, Returnable products, Payment methods (credit, credit card, and cash), Business hours, and select custom days for business hours.

Once you are done with your changes, just make click on the SAVE button to persist your data; then you should see a confirmation message like the following:

📘

You can always go back and update the settings as you need.

Unsaved changes alert

Let’s suppose you’re customizing your Storefront’s settings, and for any reason, you forget to save the changes before leaving the page. You will see an alert to let you decide between “leave and discard the changes” (cancel button) and “leave and save the changes” (ok button).

Branding

As you can see in the top menu there is an option to go to the Branding section. Once you are on the Branding page you will see something similar to this with the information related to the selected storefront:

Logo

To change the logo, you need to upload a new file, as shown below:

Once you clicked on the replace logo button, then you just need to select a new image from your file system.

This is how it’s going to look once the logo is uploaded.

🚧

The valid file extensions are png, jpg, jpeg, and SVG. Even though, the size is not validated at this moment, this would change in the future.

Colors

In the branding section, you can customize your Storefront’s colors in two ways: the first is by selecting primary and secondary colors from the picker color, and the second is by selecting a predefined color palette.

Custom color picker

The first way of customizing your branding’s colors is by selecting primary and secondary colors, as shown in the picture below.

Selected a predefined color palette

The second way of customizing your branding’s colors is by disabling the custom color switch and choosing a predefined color palette, remember you can always see that changes being applied in the live preview section.

Layout

If you want to change the default layout and category style, you can do it as shown below.

Changing category style

You can choose between the “Tabs” and “Selector” category styles for this section.

Use Categories View

For this section, you can choose which will be the main page, the default product list, or a list of all the categories that the store contains.

You can activate the categories view by clicking on the switch.

Live preview update

If you turn off the Category Page switch you will see the item list page that will be render once you click a category

Changing homepage layout

For this section, you can choose between three different homepage layouts, and toggle the description, price, and counter.

Changing favicon image

To change the favicon image, you need to upload a new file, as shown below:

If you pressed the browse button, then you just need to select a new image from your file system.

Once the favicon is updated you will see it in the live preview

📘

The valid file extensions are png, jpg, SVG, and ICO. Even though, the size is not validated at this moment, this would change in the future.

Update metadata title and description

To update the metadata title or description go to the bottom part of the branding page after the HomePage Layout section you will see a Metatags section with inputs for title and description

In this input, you can write the specific title that will appear in the browser tab and the description you desire for the metadata; for the case of the title, you can see it change in the live preview in the top part

📘

The limit of characters for the description field is 160.

Saving your changes

Once you’re happy with your customizations you can save them as shown below:

Publishing your changes

Once you’re happy with your customizations, you can publish them as shown below:

🚧

The order in which you save and publish your Storefront’s branding matters; make sure you save your changes first and then publish them.

Unsaved changes alert

Let’s suppose you’re customizing your Storefront’s branding, and for any reason, you forget to save the changes before leaving the page; you will see an alert to let you decide between leave and discard the changes (cancel button) and leave and save the changes (ok button).

Store Data

As you can see in the top menu there is an option to go to the Store Data section. Once you are on the Store Data page you will see something similar to this with the information related to the selected storefront:

Products

As you can see there is an option to go to the Products section. Once you are on the Products page you will see something similar to this with the products list related to the selected storefront:

Using the search feature

You can use the search product functionality to look for a product by name, then make click on the SEARCH button.

📘

You can search for your product's name, SKU, or description.

Prices

As you can see, there is an option to go to the Prices section. Once you are on the Prices page, you will see something similar to this with the prices list related to the selected Storefront:

Clients

As you can see, there is an option to go to the Clients section. Once you are on the Clients page, you will see something similar to this with the clients’ list related to the selected Storefront:

📘

You can always go back to the Store Data section by clicking ← Store Data button.