Shopify元素- 添加产品到购物车

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.

shopify elements product add to cart

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.

pagefly product add to cart element

Select an element in the layout to view its parameters.

pagefly product add to cart element

General option parameters
1. Content
  • Product Source: Product Source has 2 optional options: Automatic and Custom Products.
  • After adding to cart: After clicking the “Add to cart button”, there are 4 options for action
  • stay on this page
  • go to cart page
  • go to view page
  • Go to custom link page
  • Button Text: You can customize the button text by entering anything you want, in addition to the regular ones like “Add to Cart”.
  • Add Text : You can display the entered custom text when adding a product to the cart.
  • Post-Add Text : The entered custom text can be displayed after the product is successfully added.
  • Sold Out Text : Displays the entered custom text when the product is sold out.
  • Show Icons : Depending on each variant, you can choose whether to show icons and their positions left/right.
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 stateThere are two states, regular and hover.
1. OverallYou can read about all these parameters here .
2. MarginsYou can read about all these parameters here .
3. Typesetting and printingYou can read about all these parameters here .
4. BackgroundYou can read about all these parameters here .
5. BorderYou can read about all these parameters here .
6. DisplayYou can read about all these parameters here .
7. Custom CSSYou can read about all these parameters here .

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now