Meta Fields Coding Help

Solved

Meta Fields Coding Help

CGS-PDigital
Shopify Partner
7 1 1

I am attempting to create a section on my page to display links to product resources such as owner's manuals, etc. I have create three metafields for three types of documents (for starters) and now I'm trying to implement them into my product page template. However I keep getting the error: "can't include liquid syntax without valid dynamic sources". I've double-checked the links to these specific metafields and it's typed correctly in the code. I'm also trying to make it where the button doesn't show up if there is no data in the metafield for that particular product.

 

Can anyone offer an assist?

 

I'm using Empire 10.0.1 if that matters.

 

Thanks!

 

Current Code:

 

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Downloads</title>
<link rel="stylesheet" href="styles.css">
<style>
.downloads-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
padding: 20px;
}

.download-item {
display: block;
padding: 10px;
background-color: #1B175D;
border-radius: 5px;
text-align: center;
text-decoration: none;
color: white !important;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-item:hover {
background-color: #140e44;
color: white !important; /* Ensuring text remains white on hover */
}
</style>

 

<div class="downloads-container">
<a class="download-item" href="https{{product.metafields.custom.product_manual.value.url}}" download="">Owner's Manual</a>
<a class="download-item" href="https{{product.metafields.custom.product_spec_sheet.value.url}}" download="">Product Spec Sheet</a>
<a class="download-item" href="https{{product.metafields.custom.installation_guide.value.url}}" download="">Installation Guide</a>
<!-- Add more links as needed -->
</div>

<script>
document.querySelectorAll('.download-item').forEach(function(link) {
if (!link.href || link.href.includes('{{')) {
link.style.display = 'none';
}
});
</script>

 

Cozy Glow Stoves Product Page.png

Accepted Solution (1)

ProtoMan44
Shopify Partner
698 57 111

This is an accepted solution.

@CGS-PDigital  thanks for posting here.
can you please use this code or let me know if it not solve your issue.

 

<div class="downloads-container">
    <a class="download-item" href="{{ product.metafields.custom.product_manual.value.url }}" download="">Owner's Manual</a>
    <a class="download-item" href="{{ product.metafields.custom.product_spec_sheet.value.url }}" download="">Product Spec Sheet</a>
    <a class="download-item" href="{{ product.metafields.custom.installation_guide.value.url }}" download="">Installation Guide</a>
</div>

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Reply 1 (1)

ProtoMan44
Shopify Partner
698 57 111

This is an accepted solution.

@CGS-PDigital  thanks for posting here.
can you please use this code or let me know if it not solve your issue.

 

<div class="downloads-container">
    <a class="download-item" href="{{ product.metafields.custom.product_manual.value.url }}" download="">Owner's Manual</a>
    <a class="download-item" href="{{ product.metafields.custom.product_spec_sheet.value.url }}" download="">Product Spec Sheet</a>
    <a class="download-item" href="{{ product.metafields.custom.installation_guide.value.url }}" download="">Installation Guide</a>
</div>

 

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!