To generate a PDF with images from your Shopify blog articles, you can use JavaScript to extract the necessary information and then use a library like jsPDF to create the PDF. Here's how you can modify your code to include the article images in the generated PDF: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> {%- assign feature_blog = section.settings.feature_blog -%} {%- assign feature_blog_articles = feature_blog.articles -%} {% schema %} { "name": "Blog Home Page", "settings": [ { "type": "blog", "id": "feature_blog", "label": "Feature blog" }, { "type": "text", "id": "section_title", "label": "Section Title", "default": "Feature Blog" } ], "presets": [ { "name": "Blog Home Page" } ] } {% endschema %} {% for article in blog.articles %} {% for comment in article.comments %} <a href="#">{{ comment.author }}</a> {% endfor %} {% endfor %} <div class="home-page section-blog"> <div class="container"> <div class="row"> <div class="col"> <div class="section-title"> {% if section.settings.section_title !='' %} <h2>{{ section.settings.section_title }}</h2> {% endif %} </div> <div class="bloginner-main"> {% for article in feature_blog_articles %} <div class="single-product-wrap"> <div class="product-image"> <div class="blog-item-badge"> <a href="{{ article.url }} " target="_blank"> {%- assign img_url = article.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="lazyload" src="{{ article.image.src | img_url: '2048x' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ article.image.src.aspect_ratio }}" data-sizes="auto" alt="{{ image.alt | escape }}"> </a> </div> </div> <div class="product-content"> <h3>{{ article.title }}</h3> <span>{{ article.excerpt }}</span> <div class="price-box"> {% for comment in article.comments %} <a href="{{ article.url }}">{{ comment.author }}</a> {% endfor %} </div> </div> <div class="lg-banner-info"> <a class="btn more-product-btn" href="{{ article.url }}">View More</a> </div> </div> {% endfor %} </div> </div> </div> </div> </div> <button onclick="createPdf()" id="cmd">Generate PDF</button> <script> // Your slick initialization code here </script> <script type="text/javascript"> function createPdf() { var doc = new jsPDF(); var yOffset = 20; // Initial y-offset for text {% for article in feature_blog_articles %} // Add article title to the PDF doc.text("Title: {{ article.title }}", 10, yOffset); yOffset += 10; // Adjust y-offset for the next line // Add article image to the PDF var img = new Image(); img.onload = function() { doc.addImage(this, 10, yOffset, 100, 100); // Adjust image dimensions as needed doc.save('sample-file.pdf'); // Save the PDF after adding the image }; img.src = "{{ article.image.src }}"; yOffset += 110; // Adjust y-offset for the next line {% endfor %} } </script> Run code snippetExpand snippet This code iterates over each article in the feature_blog_articles array and adds its title and image to the PDF using jsPDF. Make sure to adjust the image dimensions and offsets as needed to fit your layout.