How do I add custom text and hyperlink directly under the price on the product page?

dwassner
Tourist
24 0 3

This is one of my product pages:

https://wholesaleblocks.com/products/48-mini-cinder-blocks-on-a-pallet

My theme is motion

All product pages will need the same text and hyperlink. I need to link to another page on the site

thank you

Replies 8 (8)

Niki_K
Shopify Partner
447 45 124

Hi @dwassner,

go to online store -> edit code. Then find the file product-template.liquid.

In this file, find this class: product__price. Under this piece of code (the entire code for rendering the price), insert this piece of code: 

<a href="URL to another page">Clickable text for redirecting to another page</a>

e.g.

<a href="www.myshopifystore.com/contact">Contact</a>

 

Hope it helps!

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.
dwassner
Tourist
24 0 3

Thank you. I have searched in and cannot find this code anywhere in:

'product-sections-template.liquid'

'product-form.liquid'

'product-template.liquid' in sections'

'product-template.liquid' in snippets

 

Is there anything else it could be called?

Niki_K
Shopify Partner
447 45 124

Hi @dwassner,

I would say it has to be either in the product-template.liquid or product-sections-template.liquid (I'm not using this theme but I think it's gonna be similar). 

I used the Firefox developer tools, see the screenshot. Here I found the relevant class (you can also search for the price piece of code by searching for another part on the page and then find the relevant piece of code).

 

Snímek obrazovky 2021-04-08 v 21.16.18.png

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.
dwassner
Tourist
24 0 3

awesome, thank you

dwassner
Tourist
24 0 3

So the hyperlink is working now, but it is going to the following page:

https://wholesaleblocks.com/products/wholesaleblocks.com/pages/shipping

 

This is the code I have:

<a href="wholesaleblocks.com/pages/shipping">*Shipping Billed After Checkout - Click Here for Details</a>

 

There is a portion of the url that is automatically populating: 'https://wholesaleblocks.com/products/' and I am not sure how to remove this.

 

 

Also, is there a way to make the font blue and underline the portion that says 'click here', so it looks more like a hyperlink?

 

Thank you

Niki_K
Shopify Partner
447 45 124

Hi @dwassner,

the hyperlink. You should include: https://www, so that it looks like this: https://www.wholesaleblocks.com/pages/shipping.com

 

The font and the underline, you need to change the code to: 

<a href="www.myshopifystore.com/contact">xxxxx <span class="my_class">Contact</span></a>

 

And then, in the css file on Shopify, add this class and add this:

.my_class {
color: your_color;
text-decoration: underline;
}
Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.
dwassner
Tourist
24 0 3

Thank you.

So I am adding the css class code to another section of code? Will this impact anything else on the site?

I added the www. to the part of code with the url, but it is still automatically adding 'https://wholesaleblocks.com/products/' to the beginning of the url.   Is this because of the ahref part of the code?

I would ideally like the text on the product page to read: 

*Shipping Billed After Checkout - Click Here for Details

Hope this makes sense.

thank you

Niki_K
Shopify Partner
447 45 124

Hi @dwassner,

 

css class - yes, add it to another file: assets -> theme.scss.liquid (should be the same name as in my theme, I guess).

I won’t affect anything else if you use this class only on this piece of code.

Then, you should use another syntax:

<p>*Shipping Billed After Checkout <a class=“my_class” href=“URL”>Click here </a>For detail</p>

(Sorry for not inserting the code, somehow on my phone adding the code syntax isn’t working)

Adding www still not working? Try testing another page on your site (just a test if it does the same or not). If yes, I guess there has to be something in the code causing this issue. And also use a random external link as well. Just to find out where the problem lies.

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.