When adding or editing advanced pages through SHOP Builder, you can add a Blog widget to show your existing blog articles on the advanced page. You can also adjust the layout ratio of blog images and texts on the advanced page, add a "Read more" button, etc., to increase the reach of your blog posts, and drive more website traffic.
⚠️ Before you begin:
- SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
- After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.
In this article, you'll learn how to
1. Add Blogs Widget
Step 1
Proceed to SHOPLINE Admin > [Online Store Design] > [Pages], select the advanced page that you want to add to the Blog widget, and click Advanced Page/Edit to open up the Advanced Page settings page.
Please refer to this article to learn how to create an advanced page.
Step 2
Click the Widget button.
Step 3
Click Blogs under the "Content" widgets.
Step 4
Click the "Quantity" drop-down menu on the left edit column to set the number of blog posts you want to display.
Please refer to this article to learn how to create blog posts.
*Note: The blog posts are sorted by last added by default. Other sorting orders are currently unsupported.
Step 5
You can customize the title of your blog widget in the "Title" field. The title will appear in the location as shown by the arrow. Use the "Title Alignment" buttons below can adjust the title position.
Step 6
Use the "Style" drop-down menu to adjust the display style of your blog posts. There are two types: horizontal and vertical displays.
- Horizontal
1. Desktop version: Displayed from left to right according to the order in which the articles were added. The widget will be presented in a carousel if there are more than 4 blog posts.
2. Mobile version: Due to the layout limitation, the blog posts are presented one by one in the order in which they are added, and presented in a carousel manner.
- Vertical
1. Desktop version: Arranged from top to bottom according to the order in which articles are added.
2. Mobile version: Due to the layout limitation, the blog posts are presented one post per row in the order in which they are added, and presented in a carousel manner.
Step 7
The image proportion setting is available for desktop and mobile versions. You can customize the display ratio of blog post images.
Step 8
You can adjust the alignments for the blog post title, description, and button.
*Note: This setting does not change the blog post image alignment.
Step 9
Switch on the "Show Post Button" toggle to show the "Read More" button at the bottom of each blog post. Customers can click the button to view the full text.
Switch on the "Show List Button" toggle to show the "View All" button at the bottom of the Blog widget. Customers can click the button to enter your store blog and view all published blog articles.
Step 10
If you are displaying more than 4 blog posts, you can customize the scroll bar style of the blog post carousel. The styles are available in three types: "button," "dot," and "scroll bar."
- Scroll bar style: Button
- Scroll bar style: Dot
- Scroll bar style: Scroll Bar
Step 11
Use the widget padding bar to customize the spacing between widgets on the advanced page.
Step 12
After confirming the setup above, please click the Publish button at the top right so that customers can view all the new page content at the storefront.
2. Notes
- If you want to view the feature effect applied on the preview area on the right, please click Save under the edit column on the left first.
- A maximum of 12 blog posts can be displayed.
Read more
Comments