Liquid Syntax Error: Expected id but found String, Custom Image Button [Shopify]

Question

I'm a beginner Shopify developer currently learning HTML/CSS/Liquid. Right now I'm trying to replace the 'Add to Cart' button with a custom .png image, making it clickable and functional.

In the product-template.liquid file, I found this block of code which I believe is the add to cart button:

<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}"> 
              <span id="AddToCartText">{{ 'products.product.add_to_bag' | t }}</span>

I uploaded the .png file I want to use to the Assets folder and located the asset url. I then found this block of code in a forum and changed it to match the existing button's id, type, name, etc.

<input src="{{ "ROLL_OVER_CTA_BUTTON.png" | "//cdn.shopify.com/s/files/1/0557/3304/9749/t/2/assets/ROLL_OVER_CTA_BUTTON.png?232" }} type="submit" name="add" id="AddToBag" class="btn"/>

When attempting to save the file, I keep getting an error that Liquid expected id but found string in the line with the .png file name and asset url. Is there something I can change/add to this code to get rid of the error and successfully create the custom image button or am I starting in the completely wrong direction?

Any help is much appreciated in advance!

Charles C. Charles C. · Accepted Answer · 2021-04-13T21:34:28

to get the URL from asset, use 'file_name.png' | asset_url

put image to the button

{% assign imgUrl = 'ROLL_OVER_CTA_BUTTON.png' | asset_url %}

<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}"> 
  
  <img src="{{imgUrl}}" alt="" class="" loading="lazy" width="" height="">

</button>

Liquid Syntax Error: Expected id but found String, Custom Image Button [Shopify]

1 Answers