How to add a button in product page that pops up a size chart

Solved
Highlighted
Tourist
11 0 1

I have created 3 pages with different size charts according to the different clothes I offer.

I want to add a button in my product page that pops up the page (size chart). 

For example, I have a page created with size chart for tops and bras. So my goal is that when the customer is looking at a bra/top, they have a button or text that says "view size chart" in the product page, and if they click it, it pops up the page that I already created with the size chart for bra/tops.

Can someone please help me? I am comfortable at editing code.

0 Likes
Highlighted

this is to show popup 

 

<!-- Remember to include jQuery :) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

 

<div id="ex1" class="modal"> <p>Thanks for clicking. That felt good.</p> <a href="#" rel="modal:close">Close</a> </div> <!-- Link to open the modal --> <p><a href="#ex1" rel="modal:open">Open Modal</a></p>

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
Shopify Expert
3535 543 843

This is an accepted solution.

Hi @Emiliofp 

Yes you can do that b following.

You have to add different tag in product and then show size chart button base in this condition so user redirect to relevant page base on your category.

Like add "bra_top" tag in one product.

now open section->product->template.liquid file and add bellow code:

 

{% for tag in product.tags %}
     {% if tag  contains 'bra_top' %}     
            <a href="/pages/bra_top" class="btn">View size chart</a>
     {% endif %}
  {% if tag contains 'other' %}
<a href="/pages/other" class="btn">View size chart</a>
{% endif%} {% endfor %}

like that add all condition

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
11 0 1

This worked perfectly! thank you very much.

I just have one question, can I change the button that we just created? First the button is not a large button, so it looks a little bit weird since my shop now button is a large one. Also, I would like the background to be white and have a surrounding black line instead of a solid background, and the letters to be black. Is this possible?

0 Likes
Highlighted
Shopify Expert
3535 543 843

Yes, add button like this:

 <a href="/pages/other" class="btn size_btn">View size chart</a>

Add css in Asset->theme.scss file at bottom:

.size_btn{background: white; color: black; border: 1px solid black;}

Change color if you want.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
11 0 1

That worked again, thank you very much!!

Is there a way to make the page pop up instead of taking customers out of the product page?

0 Likes
Shopify Expert
3535 543 843

Yes then you have to create popup on page and open popup base on your product page using this link

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
23 0 0

Hi there,

 

I've just added this functionality to my product pages but the pop-up isn't showing. It was working on my previous theme but have just updated the theme and assuming I haven't copied over some part of the code...

 

See this product page for example: https://prettybrave.com/collections/new-season/products/hi-top-rainbow?variant=31673804488835

 

Can someone please help me with this? 

 

Thanks!

0 Likes
Highlighted
Shopify Expert
3535 543 843

Hi,

So if you have added exact same code then it must work on any theme, but as i can see you have issue in your theme.js file may be that can affect on you popup Js code? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
23 0 0
Yes it must be, what issues can you see with the theme.js file?

Thanks!
0 Likes