Blog posts
To add this section, please follow the 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 "Blog posts".
Header width
Select the header width from the dropdown menu:
Full width
Page width
Custom width
Content width
Select the content width from the dropdown menu:
Full width
Page width
Custom width
Customize width
Determines the width of the section when you choose "Custom width" option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel).
Padding container full width
Determines the distance from the section container to both sides of the browser when you choose 'Full width' option. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Separator line type
Select the separator line type for the section:
None
Bottom separator line
Grid separator line
Separator line color
Set the color for the separator line
Heading
Icon
Select the icon from the dropdown menu and show icon beside the section heading
Heading
Add text to display as a section heading. (Leave the field blank to hide the heading)
Heading size
The size of the heading text:
Default
XX-Small
X-Small
Small
Medium
Large
X-Large
XX-Large
XXX-Large
Button Type
Select the button type for the section:
None
Link
Button
Button label
Add text to display as a button on the section
(If the button label is left blank, it will show 'View all')
Heading alignment
Select heading alignment from the dropdown menu:
Left
Center
Right
Heading bottom margin
Determines the height of the bottom outside space of the heading. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)
Blog post card
Blog
Select the blog to show in this section
Number of blog posts to show
Determines the number of blog posts to display. Can be from 2 to 4, increasing arithmetically of 1
Grid spacing (desktop)
Determines the grid spacing between of blog items on desktop devices. Can be from 0px to 50px, increasing arithmetically of 1px (pixel)
Grid spacing (tablet)
Determines the grid spacing between of blog items on tablet devices. Can be from 0px to 50px, increasing arithmetically of 1px (pixel)
Grid spacing (mobile)
Determines the grid spacing between of blog items on mobile devices. Can be from 0px to 50px, increasing arithmetically of 1px (pixel)
Layout
Select the layout type for the section:
Carousel
Grid
List
Show featured image
Enable/disable checkbox
Image ratio
Select image ratio from the dropdown menu:
Adapt to image
Portrait
Square
Circle
Landscape
Image placement
Select the image placement for the section:
Image above
Image below
Custom corner radius
Enable/disable checkbox
Block corner radius
Set the radius of the button's corners. Can be from 0px to 100px, increasing arithmetically of 1px (pixel)
Heading text per line
Determines the number of heading text per line to display. Can be from 1 to 4, increasing arithmetically of 1
Content alignment
Set horizontal alignment for content inside section containers:
Left
Center
Right
Grid
The below settings only apply for the "Grid" layout
Blog posts per row (desktop)
Allow you to specify the number of blog posts displayed in a single row when viewed on desktop devices.
Blog posts per row (tablet)
Allow you to specify the number of blog posts displayed in a single row when viewed on tablet devices.
Blog posts per row (mobile)
Allow you to specify the number of blog posts displayed in a single row when viewed on mobile devices. Adjusting this setting helps optimize the layout and user experience for mobile users, ensuring that your blog content is presented in an aesthetically pleasing and user-friendly manner on smaller screens.
Carousel
The below settings only apply for the "Carousel" layout
Blog posts per row (desktop)
Determines the number of products on the desktop. Can be from 2 to 5, increasing arithmetically of 0.1
Blog posts per row (tablet)
Determines the number of products on the tablet. Can be from 1 to 3, increasing arithmetically of 0.1
Blog posts per row (mobile)
Determines the number of products on the mobile from the dropdown menu:
1
1.2
1.5
2
Enable arrows
Display arrows on devices:
None
On every device
Only on desktop
Only on (desktop, tablet)
Only on (tablet, mobile)
Only on mobile
Enable pagination
Display pagination on devices:
None
On every device
Only on desktop
Only on (desktop, tablet)
Only on (tablet, mobile)
Only on mobile
Pagination type
Select the pagination type from the dropdown menu:
None
Dots
Progressbar
Fraction
Dashed
Colors
Color scheme
Select a color scheme to set the text and background colors for the section
Animations
Reveal sections on scroll
Select the scroll animation from the dropdown menu:
None
Fade in up
Fade in down
Zoom in
Zoom out
Heading animation
Apply effects to the heading on scroll.
Select the heading animation from the dropdown menu:
None
Fade in up
Fade in down
Zoom in
Zoom out
Split
Text animation
Apply effects to the text on scroll.
Select the text animation from the dropdown menu:
None
Fade in up
Fade in down
Zoom in
Zoom out
Section padding
Top padding
Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding
Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Top padding on mobile
Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding on mobile
Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).