What's your biggest current challenge? Have your say in Community Polls along the right column.

add to cart button on complementary products with product variants

add to cart button on complementary products with product variants

dpzcr
Tourist
7 0 1

Hi, I recently was able to add an add-to-cart button for the complementary products on the product page of my Empire theme. It's working correctly and all but I forgot about some of the complementary products that have size and material variants. In that case, I would want to have the option of the button opening a modal or popup for certain products that have variants so the customer can choose the options without having to leave the same page. Essentially I want to modify my section to look exactly like the one in Dawn (I can modify the button with styles no problem). 

ask atc complementary modal.pngask atc complementary dawn.png

ask atc complementary dawn modal.png

basically look like the last two (I can change the CSS styling later)

Daniela
Webmaster | TPT
Reply 1 (1)

DaisyVo
Shopify Partner
988 126 141

Hi @dpzcr 

To implement an "Add to Cart" button for complementary products with size and material variants in the Empire theme, you can integrate a quick shop modal similar to the Dawn theme. Here's how to achieve this:

1-Enable Quick Shop Feature:

  • The Empire theme includes a quick shop modal feature, typically used in the "You May Also Like" section. You can leverage this functionality for your complementary products.

2-Modify Complementary Products Section:

  • Edit the code for the complementary products section to include a "View Details" or "Quick Shop" link/button for products with variants.
  • Ensure this link/button triggers the quick shop modal, allowing customers to select variants without leaving the current page.

3-Implement Quick Shop Modal:

  • Utilize the existing quick shop modal code from the Empire theme. This modal should display variant options and an "Add to Cart" button.
  • Ensure the modal functions correctly by testing it with products that have variants.

4-Style the Button:

  • Customize the "Add to Cart" button's appearance using CSS to match your store's design.

By following these steps, you can provide a seamless shopping experience, allowing customers to select product variants directly from the product page.



If you have other questions, I will also answer them.

 

Best regards,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution