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".
| Settings | Meaning |
|---|---|
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. |
| Settings | Meaning |
|---|---|
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. |
| Settings | Meaning |
|---|---|
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. |
| Settings | Meaning |
|---|---|
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. |
