SHOPLINE's SHOP Builder supports editing storefront-level related settings! You can customize the colors and fonts of each section of the online store, and adjust the settings related to the product list. You can design web pages to balance the brand image and style and user experience.
In this article, you'll learn how to
⚠️ 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.
- Adjustments to the store settings apply to all pages instead of certain pages of your online store.
1. Go to Store Settings
Proceed to SHOPLINE Admin, go to [Online Store Design] > [Pages], and click the Advanced Page button.
Click the Store Settings button on the left menu bar.
2. Select / switch theme template
Scroll down to view the current theme template for the page. Click Go to Design to change the page theme template.
You will be directed back to the [Online Store Design] > [Design], where you can select the theme template you want to switch to.
Switching to a new theme template may result in two situations:
i. If the new theme template supports SHOP Builder
- The existing font and color settings remain unchanged in SHOP Builder.
- The new theme template will be applied to the storefront, and the settings will remain unchanged.
- Only three theme templates - Kingsman, Ultra Chic and Varm - currently support SHOP Builder. More theme templates will be available to support SHOP Builder in the future.
ii. If the new theme template does not support SHOP Builder
- The existing font and color settings remain unchanged in SHOP Builder, but you cannot enter SHOP Builder again.
- The new theme template will be applied to the storefront, and the settings will be reset to default.
- If you switch back to the original theme template, the existing settings you saved on SHOP Builder will be cleared and reset to the default.
*Note: If you have started using SHOP Builder, it is recommended that you keep using the theme template that supports SHOP Builder to keep the settings.
After applying the new theme template, please follow the steps in 1. Go to Store Settings to continue setups on SHOP Builder.
3. Adjust store settings
You can adjust these 5 settings in the store settings: "Color", "Font", "Mobile", "Product", and "Others".
i. Color
Go to [Store Settings] > [Color] to set colors for various sections on the advanced page. The default color of each section is the color that you originally set.
*Note: Please click the Save button at the bottom of the left column to preview the color changes on the right.
A. Page
You can set the color of the page background, text (text components), and hyperlinks.
B. Announcement Bar
You can set the background and text color of the announcement bar.
C. Header
You can set the background, text, and icon color of the header.
D. Primary Button
You can set the background and text color of the primary button.
E. Buy Now Button
You can adjust the background and text color of the "Buy Now" button. Please refer to Buy Now Button | Advanced Design Settings for details.
F. Footer
You can adjust the background, text, and icon color of the footer.
G. Copyright section
You can set the background and text color of the copyright section.
H. Product Promotion Label
*Notes: Currently, this feature only supports the Ultra Chic theme template. You can use this feature only when you're applying Ultra Chic as your store theme template.
You can set the background and text color of the product promotion label.
ii. Font
Go to [Store Settings] > [Font] to adjust the font type and size of the text components. The default font type is the font that you originally set.
*Note: After setting up the font, please click the Save button at the bottom of the left column to preview the changes on the right.
A. Title
Adjust the font type and size of the title. Click Change to switch the font type, and click Reset to revert to the default font. You can also select the title's font size (large/medium/small).
B. Paragraph
Adjust the font type and size of the paragraph. Click Change to switch the font and Reset to revert to the default font. You can select the paragraph's font size (large/medium/small).
*Notes:
- Currently, the system does not support multi-lingual titles/ texts to use multiple font types (i.e., if your title is in English and Chinese, you can only use one font type).
- If the selected font does not support the consumer's default store language, the consumer will see the default font for that language. The following are the default fonts for common language selections:
- Traditional Chinese: Noto sans TC
- Simplified Chinese: Noto sans SC
- English／German／French／Malay: Noto sans
- Thai: Noto sans TH
- Vietnamese: Noto sans VN
- Japanese: Noto sans JP
- The following table lists the supported fonts for each language:
- The font M PLUS Rounded 1c and Shippori Mincho are Japanese Kanji fonts. While you can select it for Chinese characters, some might not have corresponding Kanji characters. As a result, those without corresponding Kanji characters will be displayed in the default font when M PLUS Rounded 1c or Shippori Mincho is used.
iii. Mobile
Go to [Store Settings] > [Mobile] to adjust how your store catalog appears on the mobile version.
*Note: After the setup, please click Save at the bottom of the left column to preview the changes on the right.
A. Collapse menu items
If you switch on the "Collapse menu items" toggle, the online store menus will not expand the sub-directories in the mobile version. Switch off the toggle to expand all sub-directories.
The mobile version view is as follows:
B. Hide categories on the mobile menu
If you switch on the "Hide categories on the mobile menu" toggle, the product categories will not appear on the mobile version of the online store menu. Switch the feature off to show the product categories.
The mobile version view is as follows:
iv. Product
Go to [Store Settings] > [Products] to adjust how your products appear in the online store.
*Notes:
- After the setup, please click Save at the bottom of the left column to preview the changes on the right.
- Each toggle has tags indicating which sections in the storefront it will affect. For example, "Collapse Categories" affects product listing pages and the mobile menu.
A. Collapse Categories
You can adjust the presentation of your online store menu and category. Switch on the "Collapse categories" toggle to collapse all sub-categories in your online store. Switch off the toggle to expand the product categories.
B. Auto-Crop Product Image
Switch on the "Auto-Crop Product Image" toggle to crop all product images to a uniform size. If this toggle is switched off, the product images will be displayed in the original image proportion.
C. Variation Image Style
*Notes:
- Currently, this feature only supports the Ultra Chic theme template. You can use this feature only when you're applying Ultra Chic as your store theme template.
- If you have enabled the layout engine, you will need to update the liquid layout for this feature to take effect in the storefront.
If you have a product with multiple variations, you can choose the shape for the variation images. Currently, you can choose between square and round. You can also choose the size for the variation images (S/M/L).
D. Display Variation Image on Product Listing Pages
If you have a product with multiple variations, after switching on the "Display Variation Images on Product Listing Pages" toggle, the variant images you set will be displayed under the product with multiple variations.
The variant images can be set to show the first variation or the second variation. For example, the first variation is "color", and the second variation is "size". When you choose to display "the first type" of variation, the variant images under the product will show products in different colors. Please refer to this article to learn more about setting up product variations.
E. Product Name Alignment
*Notes:
- Currently, this feature only supports the Ultra Chic theme template. You can use this feature only when you're applying Ultra Chic as your store theme template.
- If you have enabled the layout engine, you will need to update the liquid layout for this feature to take effect in the storefront.
You can adjust the alignment of product names on the product listing pages. You can choose to align left, center, or right. The product name alignment does not affect the display of the variant images.
F. Custom Label Style
*Notes:
- Currently, this feature only supports the Ultra Chic theme template. You can use this feature only when you're applying Ultra Chic as your store theme template.
- If you have enabled the layout engine, you will need to update the liquid layout for this feature to take effect in the storefront.
You can customize the style of the product's label. Currently, you can choose rounded corners, square corners, or arrows. If you do not make any adjustments, the label will be displayed in the default style. For details on the promotion labels, please visit Product Promotion Labels | Products.
G. Show Number of Products in the Category
*Notes:
- Currently, this feature only supports the Ultra Chic theme template. You can use this feature only when you’re applying Ultra Chic as your store theme template.
- If you have enabled the layout engine, you will need to update the liquid layout for this feature to take effect in the storefront.
The "Show Number of Products in the Category" toggle is switched off by default. Once the toggle is switched on, the number of products of a category will be displayed next to the category name in the storefront.
H. Number of Products Per Page
You can choose the number of products to be displayed on every page. Currently, you can choose to display 24, 48, or 72 products on each page. Please note that customers can still change the display number on the storefront.
I. Social Network Sharing Button on the Product Page
By default, this toggle is switched on to hide the "Social Sharing button" on the product page. Switch off the toggle to allow customers to share products using the social media buttons on the page.
v. Others
Go to [Store Settings] > [Others] to adjust other settings of the online store page.
*Note: After the setup, please click Save at the bottom of the left column to preview the changes on the right.
A. Back to up
Switch on the "Back to up" toggle to show the "Back to Top" button after scrolling down the storefront page. Switch off the toggle to hide the button.
B. Enable cookies banner
Switch on the "Enable cookies banner" toggle to show the cookie consent banner to customers when they visit the online store. Please refer to this article to learn more about the detailed features of the cookie consent banner.
4. Publish page
After completing the store settings, click Preview Page at the top right to view the rendering effect of the storefront.
Click Publish to apply your customized store settings to the online store.
Read more
Comments