How to Add Products to the Store?

What You’ll Achieve by the End of This Guide: By following this step-by-step guide, you will get to know how to add products to the Store on your website.

Benefits of Adding the Products to Your Store:

Increased visibility: Your online store can help you establish your brand and increase your visibility among potential customers.
Expanding your reach: An online store allows you to sell your products to customers worldwide, potentially increasing your sales volume.
24/7 availability: Your store is open for business at all times, enabling customers to make purchases whenever they choose.
Detailed product information: You can provide detailed descriptions, images, and reviews of your products, helping customers make informed decisions.
Performance tracking: Track your store's performance metrics, such as sales, conversion rates, and customer satisfaction, to identify areas for improvement.

What do I Get if I Add my Products to the Store?

Online shopping offers customers a convenient and hassle-free experience, making it more likely for them to purchase. By providing a positive online shopping experience, you can build stronger relationships with your customers.

Steps to Add the Products to Your Store

1. Locate the Store:

In the Website editor locate the Store section and click on it.

Tip: Make sure to activate the Store app beforehand in the Hocoos Dashboard.

2. Add new product:

In the Store section click the Add Product button.

You will be directed to the Product’s page. Here, you can include important details about your product such as its name, price, description, SKU (Stock-keeping unit), and accompanying photos or videos.

Customizing Products

Use buttons to customize the product:

Click the Change image button to add or change the image.

Click the Settings button to see what other content you can add to the widget.

Use the Add button to place some more photos of your product.

To change the added photo or replace it click the Settings button. This button allows you to choose the type of file you want to upload here.

Use the Arrows to move the photos/videos of the product.

Customize the Product Description:

Tap the Hide Elements button to see what elements you can hide from the display.

Use the Toggle buttons to hide elements.

To change the rate for your product locate the Settings button near the stars and click it.

To edit the product name click on the text field. Here you can also change the color of the text and its style.

To change the product’s price click on it and fill in the right info.

Tip: There are two price options displayed: the original price, which is crossed out, and the discounted price, which appears next to it without a line through it. The crossed-out price represents what the cost was before applying the discount, while the non-crossed-out price is your actual current price after the discount has been applied. Rest assured, the current price will never be higher than the original, crossed-out price.

Write a good description for your product or use an AI writer to help you. Here you can also change the text color and style.

Tip: A well-written product description can significantly increase sales. Take the time to create detailed, informative, and engaging descriptions. Your efforts will pay off.

Click the In Stock field to set the number of products in stock. You can also use the Automatically track inventory button, by putting the tick in the checkbox.

Use the Hide/Show button to hide the Quantity and the Add to cart button.

Tip: This can be useful if you no longer have this product available.

Add new blocks right after the main product description or below the buttons set:

Tap the add New block button to display the block types available.

Tip: Here you can find the Product variations block, Shipping & Return block, Promo banner, and Guaranteed safe checkout blocks.

Here is a guide on setting product variations in the Store.

Link the button:

Use the Link option to connect the button to the link.

Tip: The button is linked to the Checkout page by default, but you can link the button to your website’s page, external resource, your products/service page, or a Pop-up.

Publish the Product:

When you are ready to show the product to your clients, tap the Published button, so your product will be visible on the website immediately.

You're Done! You’ve successfully learned how to add the product to the Store and are now ready to publish all the products needed.

Additional Customizing Features

Features to Customize Your Product:

At the top of the product widget locate the Widget design button.

Click the button to see the options it has to offer. Here you can change the widget’s Background and Text colors.

It’s also possible to choose the Slider Controls view.

Finally, by using this button you will be able to set the automatic slide play and choose the speed of automatic slide playing.

The next step is to hit the Change variation button.

In the change image block variation window, you need to decide what type of images will be posted. Here you should also decide whether it will be a slider, fixed images, or a gallery on scroll.

Don’t forget to tap the Save changes button once you’re done.

Adding the label to your product is a good idea. Click to put in the content you want.

Tip: Use ‘New’ and ‘On Sale’ labels to help customers find products easily.

Changing Arrows Style:

Locate the Design button for arrows. By using it you can choose the arrow’s style.

Decide what color for the arrows you prefer most.

Additionally, you have the option to enable autoplay for images and customize the duration between slides.

Creating Buttons Design:

The text on the buttons is editable. Tap on the text to display the text editor menu.

Tip: Try to use short and action-driven names for the buttons.

To change the button’s outward use the Design button.

Tip: In the Choose button colors section there are two options: Default and Hover. Both of them are used to change the Background, Border, and Text colors of the button. The Default option shows the button's normal color, while the Hover option shows how it looks when the client mouse over it.