In this article, you’ll learn about another Shopify element: adding products to cart.
About adding products to cart
The “Add product to cart” element is used to add an add to cart button to any product. This element is essential for any product listed on the page. When the customer clicks this button, the product/product will be automatically added to the customer’s cart.
You can check more details in the video tutorial below.
Note that instead of finding it in the sidebar, you can use the search function to find the element.
add product to cart element configuration
The Add to Cart element comes with a number of parameters that allow you to fine-tune the appearance of your content for optimal conversion rates.
When dragging and dropping the “Add Product to Cart” element to the editor page, there are 2 options for “Product Source”:
- automatic
- custom product
Note that if you are using the “Add Product to Cart” element in the “Product Page”, you can select the “Product Source” option. However, when you use this element in a “General Page”, the “Product Source” option is disabled by default and “Custom Product” is selected.
If you select Automatic, the products assigned when this product page was created will be displayed in the page editor. The Automatic option is the default option when you use the Add Product to Cart element.
Select an element in the layout to view its parameters.
| General option parameters | |
| 1. Content |
|
| 4. Properties | You can read more here . |
| 5. Visibility | You can read more here . |
| 6. Animation effects | You can read more here . |
| style option parameter | |
| 1. Button state | There are two states, regular and hover. |
| 1. Overall | You can read about all these parameters here . |
| 2. Margins | You can read about all these parameters here . |
| 3. Typesetting and printing | You can read about all these parameters here . |
| 4. Background | You can read about all these parameters here . |
| 5. Border | You can read about all these parameters here . |
| 6. Display | You can read about all these parameters here . |
| 7. Custom CSS | You can read about all these parameters here . |
Previous article
