Dawn 10.0.0 - how to add 'Add To Cart' Button On Product Recommendation Section

[Claudiaaa]

Hi, could you tell me how can I add an 'Add to cart button' on the suggested product section at the end of the product page please? 

[ZestardTech · Accepted solution]

Hello @Claudiaaa 

In the Dawn theme version 10.0.0, adding an "Add to Cart" button on the product recommendation section requires modifying the theme's code. Follow these steps to accomplish it:

1.Access your Shopify theme editor: From your Shopify admin, go to "Online Store" and click on "Themes." Locate the Dawn theme and click on "Actions" > "Edit Code."

2.Find the product-recommendations.liquid section: In the theme editor, navigate to the "Sections" directory and locate the product-recommendations.liquid file. This file controls the product recommendation section.

3.Locate the code for displaying the product recommendations: Look for the code that generates the product recommendations within the product-recommendations.liquid file. This code may vary based on the specific implementation in the theme.

4.Add the "Add to Cart" button code: Within the product recommendation code, you'll need to add the code to display the "Add to Cart" button for each recommended product. Here's an example of how you can create the button:

<form action="/cart/add" method="post" class="add-to-cart-form">
<input type="hidden" name="id" value="{{ recommended_product.variant.id }}" />
<button type="submit" class="add-to-cart-button">Add to Cart</button>
</form>

Replace recommended_product.variant.id with the appropriate Liquid variable or object that holds the variant ID for each recommended product.

5.Style the button: To style the "Add to Cart" button, you can add custom CSS styles. Locate the theme's CSS file (usually named styles.scss.liquid or theme.scss.liquid) and add styles for the .add-to-cart-button class to adjust the button's appearance.

6.Save and test: After making the changes, save the file and preview your product pages. Check the product recommendation section to ensure that the "Add to Cart" button is displayed and functions correctly.

Remember to thoroughly test the functionality and design of the "Add to Cart" button across different devices and screen sizes to ensure a consistent and user-friendly experience.

Please note that modifying the theme's code requires a good understanding of HTML, Liquid, and CSS. If you're not comfortable making these changes yourself, it's recommended to consult with a Shopify developer or the theme's support for assistance.

[ZestardTech]

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

[HELDERWRLD]

Hello @ZestardTech 
I tried to do on mine, but the file "product-recommendations.liquid" does not exist.
Can you help me please?

Link: https://diversusoficialsite.myshopify.com/

But i want also to add on Cart, like the example.

[gr_trading]

Yes, recommendations can be added in cart too

[macrofitbyppf]

Is this applicable to Refresh too?

[gr_trading]

code is generic in nature and yes it will work for any theme.