Move size guide link below product description

Store Design
,
1

Hello,

I followed the Shopify instructions to make my own ‘product type’ pop up size guide from here:

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart

This is meant for vintage themes, but I’m using Taste them on 2.0.

It’s mainly worked but I’d like to tweak it.

Firstly I’d like to move where the text is to underneath the product description, rather than underneath ADD TO CART, as it currently is. I’ve tried finding the right place to paste the code but haven’t succeeded.

Screenshot 2023-02-09 at 23.31.50.png
Screenshot 2023-02-09 at 23.31.50.png2218×1208 156 KB

Also when you hover over the size guide, the mouse shows a blocked sign cursor, I obviously don’t want this and would want the usual finger button/link hover cursor. If the link could also underline when hovering that would be ideal.

Test site to view is https://va15lqj1ftozvt3l-55043031221.shopifypreview.com - you just need to click to enter.

There should be a size chart on everything that comes in sizes (not hats)

Any help appreciated, thanks!

2

Hi @Elliott94

This is Victor from PageFly - Landing Page Builder App

Regarding the problem of moving the description please follow these steps:

Online Store → Themes → Customize → Product Default.

Here you can move your elements.

PageFlyVictor_0-1675988986517.png
PageFlyVictor_0-1675988986517.png866×417 33.8 KB

About the “size guide” issue, You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

a.trigger-pop-up.btn:hover {

text-decoration: underline;

}

a.trigger-pop-up.btn {

cursor: unset !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

@Elliott94 - add this css to the very end of your base.css file and check, it should remove that block sign cursor and make it normal

a.trigger-pop-up.btn {cursor: pointer !important;}
4

Step 1 : Online Store->Theme->Edit code.

Step 2: base.css

Step 3: Paste the below code at bottom of the file → Save

.product-form .product-form__buttons .trigger-pop-up btn{
  cursor: pointer;
}
5

@PageFly-Victor Thank you very much for this, the link is now underlined. I also used the ‘pointer’ cursor, as suggested by @suyash1 and this works so thank you also.

In regards to changing the position of where the chart is located on the page, when I go to edit the layout within customisation it has grouped the size chart with the ADD TO CART button, so changing the order drags the button below the description also, which I do not want.

Is there a way to separate these so I can drag it below?

Thanks!

6

Hi @Elliott94
Sorry for missing your message.
I can’t access your website at the moment. If the problem is still not resolved can you share with me the page url so I can check it again.

Best regards,

Victor | PageFly