Is it possible to add an "add-on" option specifically for stickers on the t-shirt product page in Webflow?

Published on
September 22, 2023

Yes, it is possible to add an "add-on" option specifically for stickers on the t-shirt product page in Webflow. Here's how you can do it:

  1. Create an "Add-ons" collection:
  • Go to the Webflow Designer.
  • Open the Collections panel.
  • Click on the "+ New Collection" button.
  • Create a new collection called "Add-ons" or any name you prefer.
  • Add fields for the "Add-on Name", "Price", and "Image" of the sticker.
  1. Add stickers as add-on items:
  • Go to the Collections panel and open the "Add-ons" collection.
  • Click on the "+ New Item" button to add each sticker as an item.
  • Fill in the "Add-on Name", "Price", and "Image" fields for each sticker.
  • Save and publish the collection.
  1. Create a reference field on the t-shirt collection:
  • Go to the Collections panel and open the "T-shirts" collection (or any collection that represents the t-shirt products).
  • Create a new field named "Sticker Add-on".
  • Set the field type to "Reference".
  • Choose the "Add-ons" collection as the referenced collection.
  • Enable the "Allow multiple selections" option if you want to allow customers to select more than one sticker.
  1. Design the t-shirt product page:
  • Go to the Designer and open the t-shirt product page.
  • Drag and drop a Collection List onto the page where you want to display the stickers.
  • Bind the Collection List to the "Sticker Add-on" field of the corresponding t-shirt product.
  • Add elements inside the Collection Item to display the "Add-on Name", "Price", and "Image" fields of the stickers.
  1. Customization and purchase flow:
  • Add interaction or custom code to enable customers to choose stickers and add them to the cart.
  • You can use a checkbox, dropdown, or any other form element to allow customers to select the stickers they want.
  • When the customer selects a sticker, update the cart to include the additional cost of the sticker.
  • Make sure the selected stickers are included in the order details and confirmation emails.

By following these steps, you can add an "add-on" option specifically for stickers on the t-shirt product page in Webflow.

Additional Questions:

  1. How do I create a collection in Webflow?
  2. Can I add images to my collections in Webflow?
  3. How can I customize the checkout process in Webflow?