Blog Slider - Overlay, Split & Stacked

Updated 1 month ago

The 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