Blog slider

Written by Nelly

Last updated 2 days ago

23 views

On this page

The Blog Slider section allows you to showcase selected blog posts in a dynamic, scrollable carousel. It’s ideal for highlighting recent articles, seasonal content, or popular topics directly on your homepage to boost engagement and keep visitors informed.

1. How to access the Blog slider section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Blog slider.

2. How to customize the Blog slider section?

Here’s how you can customize the Blog slider section to best fit your content and layout. Below are the available options for customization:

2.1. Blog slider

Blog post: Select the blog source from which the articles will be pulled.
Image ratio: Select how the image should be displayed (e.g., Adapt to image).
Full image: Toggle to show the full image without cropping.
Show tags: Toggle to show/hide tags associated with the article.
Show author: Toggle to show/hide the article author name.
Show comment: Toggle to show/hide the number of comments.
Show date: Toggle to show/hide the article publish date.
Date format: Choose the format in which the date will be displayed (e.g., Apr 19).
Items per row (Desktop / Tablet / Mobile): Define how many articles are shown side-by-side on different screen sizes.

2.2. Carousel settings

Loop: Enables continuous looping of the carousel; after the last slide, it returns to the first automatically.
Auto play: Sets the time (in seconds) for automatic slide switching. Setting to 0 disables autoplay.
Pause on hover: When enabled, the autoplay pauses while the user hovers over the carousel.

2.3. Prev / Next button

Use navigation: Enables the left/right navigation arrows for manual slide control.
Position: Sets the placement of the navigation buttons (e.g., Default, On border, Outside, etc.).
Visible: Choose whether the navigation buttons are always visible or only appear on hover.
Style: Select the design style of the navigation buttons (e.g., Default, Outline, Simple.).
Shape: Defines the button shape (e.g., Rounded, Rotate); note: doesn't apply to the “Simple” style.
Size: Sets the size of the navigation buttons (Small, Medium, or Large).
Hide on mobile: Hides navigation buttons on mobile devices when enabled.

2.4. Pagination

Use pagination: Turns on pagination (usually dots below the carousel to indicate slide position).
Style: Sets the appearance of the dots (e.g., Default, Outline, Elessi, Full width).
Rounded: Makes the pagination dots circular when enabled.
Space between dots: Adjusts the distance (in px) between pagination dots.
Space between pagination and content: Controls the vertical gap (in px) between pagination and the content above.
Hide on mobile: Hides the pagination dots on mobile devices when enabled.

2.5. Layouts

Display colors by section: Toggle to enable/disable color customization for this section.
Color scheme: Choose a predefined color scheme to apply styling to the section.
Background section overlay: Adjust the transparency of the background color overlay (0 = transparent, 1 = solid).
Width: Select how wide the section should be (e.g., Wrap container keeps content within a central layout).
Background image: Upload or select an image to use as the section background.
Padding top: Set the space (in pixels) above the section content.
Padding bottom: Set the space (in pixels) below the section content.
Padding rate mobile: Define the padding scaling percentage for mobile view compared to desktop.

2.6. Theme Settings

Page width: defines the maximum width of the main content area on the website.

2.7. Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.