Related blog posts

The Related Blog Posts section allows you to display relevant blog posts on your Product or Collection pages.

1. How to add the Related blog posts section:

Step 1: In Shopify admin, go to Online Store > Themes > Customize.

Step 2: In the top dropdown menu, select the Product or Collection page template you want to customize.

Step 3: Click Add Section and select Related Blog Posts.

Step 4: In the panel, scroll to the Blog section. By default, the News blog is assigned. Click Change to choose a different blog.

Step 5: Choose how to display blog posts:

• Product Tag: Blog posts will appear based on matching blog tags and product tags.
• Product Type: Blog posts will appear based on matching blog tags and product types.

Step 6:  Click Save.

2. How to customize the look of Related blog posts:

In Theme Editor, click on the Related blog posts section, on the new panel that appears on the right side, and make changes to the following settings:

In order to…	Make changes to this setting…
Change the heading’s content
Change the heading size	Drag or enter a specific number:
Add heading highlights	In the Heading field, put the text you want to highlight inside the [ ] brackets.
Change the heading highlight style	Under Marker, click to choose between Underline or Font highlight style:
Select the tag of your heading (for SEO purposes)
Change the number of posts shown	Under the Number of posts shown, adjust the number of posts by dragging the slider or entering a specific number.
Change the number of blog post columns on the Desktop	Under the Number of columns on desktop, set the number of columns using the slider or by entering a number.
Show the "Show More" button	Check this box to display the "Show more" button (only works if the carousel is disabled).
Show and change the position for  the “View all” button

3. How to customize Blog items in Related Blog Posts:

Step 1: In Theme Editor > Product Page/ Collection Page > Click on the Related Blog Posts section, and find the Blog Items settings.

Step 2: You can customize:

• Title size
• Content alignment: Left, right, or center.
• Show/Hide Featured Blog Posts
• Featured Image Ratio
• Item Background: Check the "Items Alternative Background" box to add a background to the blog items.
• Show/Hide Blog Post Information:
  • Author
  • Blog (the collection it belongs to)
  • Date
  • Excerpt
  • Tags and Lines
  • Comment Count
  • "Read Now" Button

4. How to set up a Carousel for Related Blog Posts:

Step 1: In Theme Editor, go to the Product Page or Collection Page.

Step 2: Click on the Related Blog Posts section.

Step 3: From here, check the box for the corresponding setting:

Enable Carousel on Desktop: This will activate the carousel on desktop devices.Enable Swipe on Mobile: This will activate the carousel on mobile devices.Enable Auto-play: Make the carousel auto-change after a certain amount of time.

Step 4: Set how often the slides change by dragging or entering a number under Change Sides Every.

5. Displaying Related Blog Posts with Metaobjects

Previously, you could only choose posts from a single blog, restricting relevant content for your customers. But now, in the 8.1 version of Eurus Theme, using Shopify's metaobject feature, you can assign related blog posts across different blogs without this limitation.

🧐 How to Set Up Related Blog Posts with Metaobjects

Step 1: Create a Blog Menu:

• Go to Content > Menus > Add menu.
• Name it "Related Blog Posts", or any names that you like.
• In Menu items, add all the blogs from your store, then click Save.

Step 2: Add Blog Post Tags:

• Go to Content > Blog posts.
• Click open a blog post, scroll down to the Tags section
• Assign a tag.

Step 3: Create a Metaobject:

• In Shopify admin, go to Content tab > Metaobjects > Add definition
• Name your metaobject
• Select Single line text
• A popup will show up, enter the Name and choose One value for this single line text field > Add > Save.

Step 4: Add entries to your metaobject 

• In Shopify admin, one more time go to Content > Metaobject 
• Click on the Metaobject name that you just created
• Click Add entry
• Enter the tags you used for your blog post in step 3 above.

Step 5: Create and Assign Metafields 

⭐ Create product metafield

• Go to Settings > Custom Data
• Under the Metafield definitions section, click on Products > Add definition
• Give your metafield a name (e.g., "Related Blog Posts"). You will also use this name for your Collection metafield later.
• Type: metaobject
• Reference: Select from the list or Type in the name of the metaobject you created in Step 4.
• Choose List of entries.
• Click Save.

⭐ Create collection metafield

• Follow the exact same steps as when you create the product metafield, just one different thing that this is for Collection.
• Make sure your Collection metafield has the same name as the product metafield you created before.

Step 6: Display Related Blog Posts on Product/Collection Pages:

• In the Theme settings, go to Product page or Collection page
• Add the Related Blog Posts section.
• In the section settings, find the Related Posts by Metafields field, enter the metafield key after "custom." (e.g., for metafield custom.related_blog_posts, enter related_blog_posts).

This allows you to display any blog post from any blog on your product or collection pages without being restricted to a single blog setup.