How to create a hyperlink button in the product page dawn theme9.0?

MattLo
Excursionist
22 0 3

I would like my product page adding a button 'personalize' in product page and the button will be redirected to the customization pageURL. If possible, I want to maintain only the add to cart and personalize buttons only, the buy now button can be deleted. thanks

Replies 5 (5)

NomtechSolution
Astronaut
1245 113 145

To add a "Personalize" button on your product page and redirect it to a customization page, you can follow these steps:

  1. In your Shopify admin, go to "Online Store" -> "Themes".
  2. Find the theme you are using and click on the "Actions" button, then select "Edit code".
  3. In the theme editor, locate the file called "product.liquid" or "product-template.liquid". This file controls the layout and content of your product pages.
  4. Open the "product.liquid" or "product-template.liquid" file.
  5. Find the section where the "Add to Cart" button is located. It's usually marked with code like {% form 'product', product %} or {% form 'add', product %}.
  6. Below or above the "Add to Cart" button code, add the following HTML code for the "Personalize" button:

 

<a href="{{ product.customization_page_url }}" class="personalize-button">Personalize</a>
​

 

Make sure to replace {{ product.customization_page_url }} with the actual URL of your customization page. You can hardcode the URL if it's always the same, or you can set it as a metafield or product property and access it using Liquid variables.

  1. Save the changes to the file.
  2. Preview the changes and make sure the "Personalize" button is displaying correctly on your product page.
MattLo
Excursionist
22 0 3

Hello, thanks for the reply. However, I can find 'product.json' instead of 'product.liquid' in the theme. thanks

 

made4Uo
Shopify Partner
3803 713 1112

Hi @MattLo 

 

Is the customization link will be the same in all products? If so, please follow the instructions below.

 

1. From you Admin page, go to Online store > Themes > Customize
2. Go to you product page, click Add block under the product information

3. Add Custom liquid, and paste the code below to the textbox provided

Note: Change the "your-customization-url" to the url you have 

<a href="your-customization-url" class="button button--primary" style="width: 100%">Personalized</a>

 

See image with result here: 

made4Uo_0-1683747735254.png

 

To remove the Buy it now button:

 In the same page, click the Buy buttons, and uncheck the show dynamic checkout, see image below

 

made4Uo_1-1683747868401.png

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
MattLo
Excursionist
22 0 3

However, what if different product has its specific URL to direct for personalization? thx

 

malikaclover
Tourist
20 0 2

Hello im looking for something similar. Currently i am selling a set (clothes, a shirt and a pant) and on the product page there is buy it now button and id like to add another button on top that says "buy it separately" and give them two options of shirt or pant and once they click on any which will redirect the customer to the page where they can buy only the shirt alone. 

Could you please help? the individual products have already been uploaded on Shopify.