How to Add Products to Blog Post in Shopify
One of the reasons most people choose to add a WordPress blog to Shopify is because they find the Shopify native blogging platform very limiting when it comes to promoting and marketing their products. While WordPress’s Gutenberg page editor offers a more versatile and customizable platform where users can easily add products and offers to their blog posts, the same cannot be said for Shopify.
While Shopify can be used for blogging, the fact that its native editor does not offer an easy option to add products and offers to blog posts can be a deterrent for many. Fortunately, there are ways to get around this limitation and make it easier for users to take advantage of Shopify’s powerful e-commerce platform.
We want to explore some of the in-house methods we use here at GoldenWeb to add a product to a blog post on Shopify. By the end, you should better understand how to leverage Shopify’s platform to promote your products and increase sales.
Adding the Shopify Buy Button
One of our most popular ways to add products to a Shopify blog post is by using the Shopify Buy Button. This feature allows you to easily add a Buy Now button directly into your blog post so that readers can quickly purchase products from within the same page.
To set this up, you’ll need to first install the Shopify Buy Button channel app in your Shopify control panel. This is a free app that will allow you to add Buy Now buttons directly into your blog posts. Once installed, you can then use the app’s editor to customize the button as well as set up pricing and shipping options.
Once configured, you can simply copy and paste the code generated by the Shopify Buy Button app directly into your blog post. This code automatically creates a standalone cart system that is separate from the main cart of your Shopify store. As a result, customers can buy products directly from the blog post without having to navigate away from the page.
There are two main strategies for using the Buy Button to add products to your Shopify blog post. These are:
Promoting Single Products
You may want to use the Shopify Buy Button to promote a single product in a blog post. Maybe it’s a new product you’re launching, or an existing product that you want to highlight. You may write long-form content about the product and include a Buy Now button at the end. This allows you to turn readers into customers without requiring them to navigate away from the page.
In this scenario, we recommend you add the Buy Button in line with the product information within the blog post. Whether you place the product at the middle or end of the post, make sure it’s clear and easy for readers to find.
Then, go to the Buy Button sales channel and add this code snippet to your post:
<div id='product-component-1660766344922'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://mystore/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'sterner-stuff-test.myshopify.com',
storefrontAccessToken: '387d833fa5c9c9c914cc8ae347a09335',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '7220095516862',
node: document.getElementById('product-component-1660766344922'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
},
"text": {
"button": "Add to cart"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
Before adding the code, make sure you write the blog post on the Shopify blog post editor. Then, switch to the HTML mode. You will see several </p> tags in the content. This tag indicates the end of each paragraph. Paste the code just after </p> tag after the paragraph you want the Buy Button to appear.
When you switch back to the visual mode, you won't see the button. You need to save and preview the post to view it. By default, the product will sit at the left side of the post, in between two paragraphs. When you try to edit it in the no-HTML mode, you could damage the code and break the button.
You don't want this unattractive product section to disrupt the flow of your content. To keep things uniform and aesthetic, you can do either of these things:
Wrap Text Around The Buy Button
Wrapping your text around the product section is an easy way to make your post look professional. To do this, you need to edit the first line of the code snippet which looks like this:
<div id='product-component-1660766344922'></div>
To make the product float around the text, you must add what is known as style attribute. This attribute helps define the style rules for HTML elements. Edit the code to look like this:
<div id='product-component-1660766344922' style='float:left;padding-right:15px;'></div>
This will add a float and space between the product section and the adjacent text. Rememeber, never change the id attribute on this code. Doing so will break the button.
You can also change the float and padding to position the product section exactly where you want it in your post. For instance, if you want the product to appear on the right-hand side of your content, change the code to:
<div id='product-component-1660766344922' style='float:right;padding-left:15px;'></div>
This will make the product appear on the right side of your post with a padding of 15 pixels.
Center the Buy Button
The second option is to center the product section in your post. To do this, you need to modify the code snippet slightly. Change it so that it looks like this:
<div id='product-component-1660766344922' style='margin-left:auto;margin-right:auto;'></div>
This code tells your browser to automatically set the product section's margins. This will make your product appear centered on the page.
Promoting Multiple Products
You can add blogs to Shopify that aim to promote more than one product. Whether you’re adding recipes to a Shopify blog and you want to add products associated with it or just running a product promotion post, it can be a real pain to add multiple Buy Buttons on the same page.
Fortunately, we have a solution for you. One of our top recommendations is to add hyperlinks to the products you want to promote within your content. This is an excellent way to promote multiple products on a single post while keeping the overall look of your content neat and professional.
Adding a hyperlink is simple. Simply highlight your anchor text (the phrase or word that you want to link) and click the link button on your Shopify blog post editor. This will open up a window where you can enter the URL of the product page or choose an internal post to link to.
You can do this for as many products as you want and make sure that there's no interruption in the flow of your content.
At the end of the blog post, we like creating what is known as a "Collection" Buy Button. This is a special Buy Button that helps promote all the products featured on a page in a structured and organized way. You can use this feature to offer discounts, bundle products, or simply create an easy one-click purchase option for your readers.
To create this button, we first create a product collection and add all the products featured in your post to it. We make sure to add a catchy title to the collection and include a description of the items included in it.
Once we have created the collection, we then head over to the Buy Button channel. This time, instead of adding a single product, we select the "Collection" option, which will bring up our collection.
The app then generates a unique code snippet which we paste at the end of our blog post. This code snippet contains all the products we added to the collection. By default, Shopify makes this code look neat and professional by creating a grid-style product layout. Therefore, we don't recommend any manual tinkering or styling of the code. If you need to make changes, use the Buy Button customizer in the Shopify admin panel.
Other Ways to Promote Your Products
The methods we have shown you above are 100% free and powerful enough to help you promote any product featured in your blog post. However, you may be looking for a more comprehensive solution.
If this is the case, there are several Shopify apps that can help you do this. These apps enable you to create professional-looking product pages on your blog posts, with options like product images, multiple Buy Buttons, feature videos, and more.
Another option is using a WordPress subdomain. WordPress is a more feature-packed platform that allows you to create posts with images, videos, and product pages. However, this requires more time and effort to set up so it may not be the right fit for everyone.
Partner With a Shopify SEO Agency For Faster Results
Shopify SEO is a hard nut to crack. Many Shopify stores struggle to rank their products, resulting in poor sales performance. That’s why it's prudent to partner with an experienced Shopify SEO agency that can help you get the most out of your online store.
At GoldenWeb, we know that poor on-page SEO is a major problem that affects many Shopify stores. We, therefore, offer a comprehensive SEO audit that dives deep into your Shopify store’s technical setup. We look at your URL structure, product descriptions, images, redirects, and more to ensure that your store is SEO-ready.
We also optimize all the titles and meta descriptions of each page on your site, so they stand out in search engine result pages (SERPs). Our team ensures that your content is interesting, relevant and optimized for both users and search engines. This Shopify SEO case study is a great example of how we can help your store get the most out of organic search traffic.
Our Shopify SEO services also extend to link building. We create natural links from relevant high-authority magazines and media sties that help increase your website’s visibility in organic searches. This boosts your rankings on SERPs and ultimately helps you generate more sales. We do all this while keeping your Shopify SEO costs low and ensuring you’re getting the best possible ROI.
We don't want you to take our word for it. Book a free mini audit today and see for yourself why so many Shopify stores have trusted us with their SEO needs.
RomaDesignerJewelry.com
"GoldenWeb’s work has been amazing for us.
We already had a decent base with content and structure, but their work has positioned us to continue to make gains in very competitive areas."
ShopSolarKits.com
"Benjamin and his team have been great to work with, have proven themselves with a ton of results.
Benjamin goes out of his way to provide value in all areas of the business as he's an operator himself."
Copyright 2024 GoldenWeb LLC. All rights reserved.
Read some of our most popular blog posts...