Size Chart Code Change from Button to Text

Solved
KatCook
Tourist
6 0 1

I have figured out how to install the size charts that I needed using the direction provided on Shopify. I managed to get it right and have setup 2 different size charts so one pulls for shoes and one for apparel based on product type. However I would like to be able to change the coding from a button to an image and text but do not know what code to use to do this, I would assume this requires a change in the snippet? Can someone give me a hand?

Current Button StyleCurrent Button StyleWhat I WantWhat I Want

0 Likes
HardikDavra
Shopify Partner
2257 351 969

Hello, @KatCook 

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatCook
Tourist
6 0 1

I have not made my edits live, they are in my back-up copy of my theme so you would not be able to access the changes. I used the instructions provided on this page to set my initial "size chart". After I had set the code I made edits. First I made 2 snippets one for apparel and one for footwear and I adjusted the code in each snippet from ""pages.size-chart.content"" to ""pages.apparel-size-chart.content" and ""pages.footwear-size-chart.content"" so that each snippet correlates with the pages I made of the sizes charts.

In the theme.liquid part of the code I added two pieces so that it will call either of the pages depending on the product type and changed the code from product.options to product.type

{% if request.page_type == 'product' %}
{% if product.type contains 'Apparel' %}
{% render 'apparel-size-chart' %}
{% endif %}
{% if product.type contains 'Footwear' %}
{% render 'footwear-size-chart' %}
{% endif %}
{% endif %}

In the product-template.liquid I added these 2 pieces of code right below the shipping info and above the add to cart button.

{% if product.type contains 'Apparel' %}
<a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}
{% if product.type contains 'Footwear' %}
<a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

I want to change this from a button to text with image.

0 Likes
HardikDavra
Shopify Partner
2257 351 969

Please remove "btn" from class

<a class="trigger-pop-up">See Size Chart</a>

 

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
KatCook
Tourist
6 0 1

@HardikDavra 

Perfect, it got rid of the button look and now I have the inline text I wanted. What code do I use to add the image before the text?

0 Likes
HardikDavra
Shopify Partner
2257 351 969

This is an accepted solution.

@KatCook 

Please Go to Online Store -> Themes -> Edit code -> Assets -> and upload the image which you want to show. Then copy that file name with extension and paste that name in place of 'image-name-with-extension'

<a class="trigger-pop-up"><img src="{{ 'image-name-with-extension' | asset_img_url: 'original' }}" />See Size Chart</a>

 

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
HardikDavra
Shopify Partner
2257 351 969

@KatCook  Thank you for the update.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes