Dynamically loading a Section with parameters

Retired Boards Appdev Store Design
1

Hi guys. I found the way how to dynamically load Section with parameter by using a query string via fetch. By dynamically loading the section on demand, we can save our resources and boost rendering speed. If you have a better solution please share the information for all Shopify developers. Thank you.

Fetching the section as follows:

Then call this function and parse the query string in the Section.

2

I’m trying this on a product page on Debut theme and it does not show the section. What could be the problem?

3

Hi I use vantage theme and it works well on product page. Did you call the function?

4

Thank you for the reply. Yes, and I see the error in console:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

when I click on it it shows the HTML code for the whole page starting with tag so I must be doing something wrong.

5

Here’s my code:

, could you explain your code a bit so I can find the problem. When you “append” the section - does it get appended at the end of the tag? How does it know to ad a section when you call

data[“sectionname”]?

6

I do see “test melasma begin” in console, but not “test append melasma” if that helps.

7

I just found you fetched wrong domain it should be

/?sections=melasma

not “/?target”. This url supported by Shopify to call section

8

Changed to section but still the same error.

9

Where did you place the call to function?

10

It’s just normal web development. Programmers have to choose when they call the function. I don’t know when do you call it.

11

Could you please add your section’s code here? I am thinking mine might be in a wrong format.

12

It’s just an ordinary Section. You don’t need to change Section format and I can’t share mine for security.

13

That’s the section rendering api,

Docs are here https://shopify.dev/api/section-rendering