Featured Blog
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Featured Blog".
Layout
Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).
Padding Container Full Width
Determine the left and right spacing of the Full Width layout.
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile
Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.
Background Color
Apply Color on the background of the section.
Background Gradient
Apply Color on the background gradient of the section.
Background Image
Upload / Select an image as the section background.
Title
Enter the title for the section.
Title Spacing Bottom
Determine the spacing of the title from its bottom.
Enable Title Border?
Toggle to the title border as its underline.
Title Custom Width
Specify the width of the title text ranging from 100px to 600px.
Title Border Color
Set color for the border/underline of the title.
Title Color
Set color for the section title.
Title Font Size
Determine the font size of the title.
Title Font Size Mobile
Determine the font size of the title on Mobile device.
Description
Enter the text for the section description.
Description Spacing Bottom
Determine the description spacing from the bottom.
Description Color
Set the color for the section description text.
Description Font Size
Determine the font size of the section description text.
Alignment
Select the alignment of the section content to be either Left, Right or Center.
View All
Enter the text for the View All button/link.
View All Font Weight
Select the font weight of the view all text to be either Normal, Medium, Semi Bold, Bold, Bolder or Black.
View All Margin Top
Specify the spacing of the View All button/link to the top content.
Enable View All Border?
Toggle to show the border/underline of the view all button/link.
View All Link
Specify the URL for the view all button/link to navigate to.
View All Color
Set the color for the view all text.
View All Icon
Enter the SVG code for the view all icon.
Icon View All Color
Set the color for the view all icon.
View All Position
Select the position of the View All to be either Under The Heading, Right side of The Heading.
Select Blog
Select a blog to render its blog posts.
Item Per Row
Select the column count of the section.
Grid Gap
Determine the gap between blog posts in the section.
Posts Limit
Determine the maximum number of blog posts to render.
Posts Content Description Limit
Determine the maximum words for the description to truncate if exceeded.
Text By
Enter text as a linking word to the author.
Text On
Enter text as a linking word to the date.
Show Author
Toggle to show Author of the Blog Post.
Show Date
Toggle to show Date of the Blog Post.
Show Description
Toggle to show Description of the Blog Post.
Show Read More Button
Toggle to show a button that navigates to the Blog Post Page on clicked.
Icon On Read More Button
Select the icon inside the read more button.
Background Color
Set the background color for all blog posts.
Blog Item Border Radius
Specify the roundness of the blog post card.
Image Margin Bottom
Determine the spacing of the blog post image from its bottom.
Title Spacing Bottom
Determine the spacing of the blog post title from its bottom.
Info Margin Bottom
Determine the spacing of the blog post info from its bottom.
Description Margin Bottom
Determine the spacing of the blog post description from its bottom.
Blog Title Style
Select the style of the blog title. - Style 1: Typical title on a card, lying below the post image. - Style 2: The title is partially overlapping on the post image.
Alignment
Select the alignment of the blog post content to be either to the Left, Right or Center of the blog post card.
Blog Link Text Transform
Select the font style transform of the Blog Link text. The options are: None, Capitalize, Uppercase and Downcase.
Blog Link Font Weight
Select the font weight of the blog link to be either Normal, Medium, Semi Bold, Bold, Bolder or Black.
Enable Border Box
Toggle to wrap the content in a box to prevent content stretching.
Color Border Box
Set the color for the box border.
Title Blog Color
Set the color for the blog titles.
Date Blog Color
Apply color for the blog post issue dates.
Description Blog Color
Apply color on the blog post descriptions.
Button Blog Color
Set color for the button of the blog post card.
Enable Custom Color Button
Toggle to create a custom border underneath the button.
Button Blog Color Border - Button Blog Background Color - Button Blog Color Hover - Button Blog Color Border Hover - Button Blog Background Color Hover
Set color for the border, background of the blog post card button for both normal and hovered/clicked states.
Content on Image
Toggle to allow content lying on top of the image.
Background Color
Set the color for the background of the blog post content including title, description, author and release date.
Background Gradient
Set the gradient color for the background of the blog post content including title, description, author and release date.
