Dynamic URL into Custom Liquid

Store Design
,

Topic summary

A user seeks to dynamically link a PDF URL within a custom Liquid template for a Shopify page. Currently, they have hardcoded the PDF URL in an <object> tag’s data attribute and want it to pull dynamically from page content.

Proposed Solution:

  • Remove the hardcoded URL from the <object> tag’s data attribute
  • Assign an id to the <object> element for JavaScript targeting
  • Use JavaScript to dynamically retrieve or construct the PDF URL
  • Update the data attribute using setAttribute() method

Implementation approach:

  • Start with an empty data attribute in the <object> tag
  • Define the PDF URL in JavaScript (can be fetched from API, meta tags, or page content)
  • Dynamically inject the URL into the element after page load

The solution allows flexibility to generate URLs based on specific page content rather than maintaining static links in the template code.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

URL: 1100 Series 50 Hour Service | Mahindra Direct Parts

Custom Liquid:

I would like the object data PDF URL to be a dynamic link to the page content, which would contain the URL for the required PDF

1 Like
2

Hi there,

This is Jay from Fast Bunde. I hope you are doing well.

To make the tag’s data attribute dynamic and pull the PDF URL based on the page content, you can use a combination of JavaScript and HTML.

Here’s an approach you could use:

  1. Add a placeholder in the data attribute of the tag that can later be replaced dynamically.
  2. Use JavaScript to retrieve or construct the PDF URL and update the data attribute dynamically.

Here’s how the code could look:

<div style="text-align:center;">
  <object id="dynamicPdf" width="900px" height="1850"></object>
</div>

<script>
  // Example: Retrieve the PDF URL dynamically (you can replace this with your logic)
  const pdfUrl = "https://cdn.shopify.com/s/files/1/0637/1187/1029/files/Mahindra_1100_Series_50_Hour_Service.pdf?v=17";

  // Set the `data` attribute of the object dynamically
  const pdfObject = document.getElementById("dynamicPdf");
  pdfObject.setAttribute("data", pdfUrl);
</script>

Explanation:- The tag starts with an empty data attribute.

  • JavaScript dynamically retrieves or constructs the PDF URL (pdfUrl).
  • Using setAttribute, the data attribute of the is updated to point to the desired PDF URL.

If you want the PDF URL to be generated or fetched based on some specific content on the page, you can replace the pdfUrl assignment logic with something like fetching data from an API, reading from a meta tag, or parsing content dynamically.

Let me know if you need help customizing this further!