Blog Slider - Overlay, Split, Stacked
Updated 21 days agoThe Blog Slider helps you showcase your latest blog posts directly inside your app. Whether you're sharing guides, updates, or storytelling content, this section keeps your users engaged beyond just shopping.
You can choose from three different layouts:
-
Overlay – Text appears on top of the image
-
Split – Image and content are shown side by side
-
Stacked – Image and content are arranged vertically
Each layout follows the same customization options, so you can design it exactly the way you want.
Target Page
This setting controls where users are redirected when they tap on a blog card.
You can link each blog item to:
-
Its full blog article
-
Or any custom page inside your app
This helps guide users smoothly from preview to full content.
Header
Use the eye icon to enable or disable the header.
The header acts as a title for your blog section, helping users understand what the content is about.
Title:
Customization Options:
-
Text – Add your section title (e.g., “Latest Stories” or “From Our Blog”)
-
Font – Choose a font that matches your brand
-
Size/Weight – Adjust how bold or subtle the title appears
-
Line Height – Control spacing between lines
-
Letter Spacing – Fine tune spacing between characters
-
Color – Set a color that stands out clearly
-
Capitalization – Choose uppercase, lowercase, or sentence case
Button
You can enable or disable the button using the eye icon.
This button can be used to encourage users to explore more blog content.
Customization Options:
Text Style
-
Edit the button text
-
Choose font, size, line height, letter spacing, color, decoration and capitalization
-
Adjust alignment and capitalization
Border
Set border color and width to match your design
Icon
-
Choose from available icons or upload your own
-
Customize icon color
Advanced Settings
-
Background Color – Match it with your theme
-
Radius – Adjust corner roundness
-
Padding – Control spacing inside the button
Blog Card Settings
Image Attributes
-
Ratio – Set the shape of the image (square, rectangular, etc.)
-
Image Scale – Choose whether the image fills or fits the frame
-
Radius – Adjust how rounded the image corners appear
Image Border
Set border color and width to define the image frame
Date
Control how the blog publish date appears:
-
Adjust font, size, line height, letter spacing, color and capitalization
-
Enable or disable based on your preference
Author Name
Customize how the author’s name is displayed:
-
font, size, line height, letter spacing, color and capitalization
Title
This is the main text users will read first, so make it stand out. Choose your font, size, line height, letter spacing, color and capitalization
Advance settings
Adjust padding, dot color, no of blogs, meta position, and choose whether you want to flip meta order
Card background
Adjust the color, radius, and the padding
Card border
Adjust the color and the width
Background and spacing
This controls the overall layout of the entire blog slider section.
-
Color – Set the section background color
-
Radius – Adjust corner roundness of the section
-
Padding – Control spacing inside the section
-
Margin – Manage spacing outside the section
Border
-
Choose border color
-
Set border width
-
Select which sides should display the border
Benefits:
-
Keeps users engaged longer thus higher session time
-
Builds authority and trust through informative content
-
Supports SEO and content marketing strategies
-
Helps nurture users who are not ready to buy yet thus helping in long-term conversions
Related Articles