Now that you know the basis and theory of implementing products on your shop, we advise you to check the following practical example to consolidate your knowledge and visualize the product implementation process in the editor.
A. At the Catalog Level
I am having a sale on my sneakers. I want to display the discounted sneakers on a catalog with only one product showing at the time and the product slide to change automatically, with the navigation being done at the bottom with circles.
1. Drag the Catalog Module on to the Page
2. Define Tags on Catalog Module Settings
As the seller only wants its sneakers to show on the catalog, he should add the tag "sneakers" on the Catalog Module Settings. Learn more about the Catalog Module settings here!
3. Define Settings
To fulfill the seller's requests, this is what must be done:
B. At the Cart Level
I want to have a small cart icon which color changes when my clients hover over it. Next to it, I wish to display the amount of products on the cart on a rounded icon.
1. Drag the Cart Button Module on to the Header
2. Define Cart Icon & Amount Settings
Style the cart and make sure to differentiate the color between states. To obtain a rounded icon, increase the radius of the border of the amount to the maximum. Learn more about the Cart Button Design here!
That's how to implement products!
This was only an example - you can style your catalog and cart in so many different ways; be creative with your choices! Now that your clients can see what products you are selling and have a cart that directs them to the checkout, they are ready to make a purchase.