All things Shopify and commerce
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>
Solved! Go to the solution
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>
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>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025