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).
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.
Hey @Bath4All , it depends on what theme you’re using. You can try using Shopify Search & Discovery to choose complementary products for your website’s product pages.
After that you can adjust the appreance
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
Click Products.
Select Default product, or the product template that you want to edit.
Take one of the following steps:
If your product information section has a complementary products block, then click Complementary products.
If your product information section doesn’t have a complementary products block, then click + Add block, and then select Complementary products.
