Liquid, JavaScript, themes, sales channels
Hi,
I was wondering if there is a way to add suggested products +/- call to action button below blog posts? I am using the parallax theme. I am sharing blog posts to social media and getting traffic to the blog posts but not necessarily through to the product page.
Thanks.
You can add the products at the bottom of your blog post template, probably called article.liquid.
Couple ways to add them:
1) You can use Liquid to grab products, maybe from a certain collection. Then you can style with HTML and CSS.
You might do something like this:
{% for product in collections["THE_COLLECTION_HANDLE"].products limit: 6 %} <!-- This will pull in the product object of the first 6 products in that collection. From there you can display image, title, price, link, etc --> {% endfor %}
See the product object in the Liquid docs for reference: https://help.shopify.com/en/themes/liquid/objects/product
2) You can use a related products app and include a snippet to show on that page. Hard coding it (option 1) is the fastest way, but using an app might save you some dev time if you're not familiar with liquid.
3) You could create image graphics showing the product, put them at the end of the post, then link to the product page. A simple way would be to screenshot the product from your collection page... or maybe you create a PSD template to of your product cards then whenever you need an image you can swap in the photo and edit the text/price/reviews.
Blogging is great, glad to see you're using it effectively.
Hi! I was able to figure this out using the District theme to put a featured collection preview on my blog posts. My full write up on this is here: https://moderntribe.com/blogs/news/how-to-add-a-featured-collection-to-blog-post-in-shopify
Paste this below this section in article-template.liquid below the following 2 lines:
{{ article.content }} </div>
{%- assign tag = article.image.alt -%} {%- assign collection = collections[tag] -%} {%- assign product_limit = 8 -%} {% if collection.products.size > 0 %} <div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section"> <div class="wrapper"> <div class="grid"> <div class="box header"> <div class="image-table"> <div class="details"> <h4>Shop {{ collection.title | escape }}</h4> </div> </div> </div> {% for product in collection.products limit: product_limit %} {% include 'product-grid-item' %} {% else %} {% for i in (1..product_limit) %} {% include 'placeholder-product-grid-item' %} {% endfor %} {% endfor %} </div> <div class="box header"> <div class="image-table"> <div class="details"> <a href="{{ collection.url }}" class="button large outline">View more</a> </div> </div> </div> </div> </div> {%endif%}
@moderntribe do you have an option for debut theme? I'm getting error codes after following your steps.
Thanks for this, I was able to use it in my article posts, slightly different but the main thing is I was trying to pull the article.handle, and if statements, now I don't have to worry about all that.
Go to Shopify>Sales channels> Buy Button>highlight the selection> customize button >next>copy code> on blog change to view html and paste code at the end of the existing blog html> save>done. Collection will show below blog
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024