Best Way To Insert a Product Into Blog Post (No App)

Store Design

Topic summary

  • Request to update an existing code approach that embeds a product with an Add to Cart button directly inside a Shopify blog post, specifically without using an app.

  • The asker wants the previously shared solution adapted to the latest version of Shopify’s Refresh theme and links to the earlier discussion for reference.

  • No code, steps, or technical details are provided in this thread so far; it’s a continuation request for theme-specific compatibility rather than a new method.

  • Status: No responses or solutions posted yet. The thread remains open and unresolved.

  • Next needed: An updated code snippet or implementation guidance tailored to the current Refresh theme version (e.g., where to place the code and any theme-specific adjustments). The linked prior thread is central for context.

Summarized with AI on December 27. AI used: gpt-5.
1

Hello there! I wanted to continue the discussion I have linked below. I essentially want the code that was written but for the latest version of the Refresh Theme.

Continuing the discussion from Best Way to Insert a Product into a Blog Post with Add to Cart (Without Using an App):

2

@HaidenAMu19 Shopify uses shared template approach, so if you add any product to blog page, it will be visible for all the blog pages. Will it be ok?

1 Like
3

IMO the proper way is this:

  1. Create new blog post template – like the one you already have now, but with added “Featured product” section;
  2. Create a “Product reference” type metafield on your blog posts;
  3. Configure the “Featured product” section to use this metafield as a Dynamic source for the product setting;
  4. Assign this new blog post template to posts with metafield assigned.

I believe one can use Flow to update template for blog posts depending on whether metafield is set or not.

Alternatively, it is possible to have one template, but hide the “Featured product” section if there is no product selected with, say CSS like this:

/* hide product info section if it has no variant ID input (no product selected) */
product-info:not(:has([name=id])) {
  display: none;
}

This will work in any theme version and would be easy to re-do in another theme.

1 Like