[Coming Soon] Store Settings | Page Builder (New)

ECSC.png

SHOPLINE's new page editor 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:

  • The new page builder currently only supports Ultra Chic, Kingsman and Varm themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Go to Store Settings

Proceed to SHOPLINE Admin, go to [Online Store Design] > [Pages], and click the Advanced Page button.

EN1.png

Click the Store Settings button on the left menu bar.

EN2.png

2. Select / switch theme

Scroll down to view the current theme for the page. Click Go to Design to change the page theme. 

EN3.png

 

You will be directed back to the [Online Store Design] > [Design], where you can select the theme you want to switch to.

EN4.png

Switching to a new theme may result in two situations:

A. If the new theme supports the new page editor

  • The existing font and color settings remain unchanged in the new page builder.
  • The new theme will be applied to the storefront, and the settings will remain unchanged.
  • Only three themes - Kingsman, Ultra Chic and Varm - currently support the new page builder. More themes will be available to support the new page builder in the future.

B. If the new theme does not support the new page editor

  • The existing font and color settings remain unchanged in the new page builder, but you cannot enter the new page builder again.
  • The new theme will be applied to the storefront, and the settings will be reset to default.
  • If you switch back to the original theme, the existing settings you saved on the new page builder will be cleared and reset to the default.

*Note: If you have started using the new page builder, it is recommended that you keep using the theme that supports the new page builder to keep the settings. 

After applying the new theme, please follow the steps in 1. Go to Store Settings to continue setups on the new page builder.

 

3. Adjust store settings

Store settings can be adjusted in 5 types: "Color", "Font", "Mobile", "Product", and "Others".

EN5.png

A. 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 you have set before.

*Note: Please click the "Save" button at the bottom in the left column to preview the color changes on the right.

EN6.png

 

a. Page

You can set the color of the page background, text (text components), and hyperlinks.

EN7.png

 

b. Announcement Bar

You can set the background and text color of the announcement bar.

EN8.png


c. Header

You can set the background, text and icon of the header.

EN9.png

d. Primary Button

You can set the background and text color of the primary button.

EN10.png

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.

EN11.png

 

f. Footer

You can adjust the footer's background, text, and icon color.

EN12.png

 

g. Copyright section

You can set the background and text color of the copyright section.

EN13.png

 

B. Font

Go to Store Settings > Font to adjust the font type and size for the text components. The font defaults to the font you originally set. 

*Note: After setting up the font, please click the "Save" button at the bottom in the left column to preview the changes on the right.

Font1.png

a. Title

Adjust the font and size of the title. Click Change to choose the font, and click Reset to change back to the default font. You can also select the title's font size (large/medium/small).

Font2.png


b. Paragraph

Adjust the font and size of the paragraph. Click Change to choose the font, and click Reset to change back to the default font. You can select the paragraph's font size (large/medium/small).

Font3.png

*Notes:

  • Currently, the system does not support multi-lingual titles/ texts to use multiple fonts according to the language (i.e., if your title has English and Chinese, you can only use one font).
  • If the selected font does not support the consumer's browser, 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

 

C. Mobile

Go to Store Settings > Mobile to adjust how your store catalog appears on mobile.

*Note: After the setup, please click the "Save" button at the bottom in the left column to preview the changes on the right.

Mobile1.png

 

If you turn on the "Collapse menu items" toggle switch, the online store menus will not expand the sub-directories of the mobile version. Switch off the toggle to expand all sub-directories. The mobile version view is as follows:

Collapse_menuEN.png


If you turn on the "Hide categories on the mobile menu" toggle switch, the product categories will not appear in the online store menu in the mobile version. Switch the feature off to show the product categories. The mobile version view is as follows:

hidecateEN.png

 

D. Product

Go to Store Settings > Products to adjust how your products appear in the online store.

*Note: After the setup, please click the "Save" button at the bottom in the left column to preview the changes on the right.

Product.png


a. Menu / Category

You can adjust the presentation of your online store menu and category. Turn on the "Collapse categories" toggle to fold all sub-categories in your online store. The product categories will automatically expand the sub-categories if this toggle switch is turned off.

menu%2Bcate.png

b. Product Listing Page

You can adjust the format of the product listing page, choose whether to crop the product image automatically, and show the variation selector.

PLP_EN.png

  • Crop product image: Switch on this feature to crop all product images to a uniform size. If this feature is turned off, the product images will be displayed in the original image proportion.
  • Variation image selector: If you have a product with multiple variations, after switching on the "Variation image selector" toggle, the variant images you set will be displayed under the product with multiple variations.

variationselector.png

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.

 

c. Product Detail Page

Switch on the "Hide the social network sharing button on product page" toggle 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.

PDP_EN.png

E. Others

Go to Store Settings > Others to adjust other settings for the online store page.

*Note: After the setup, please click the "Save" button at the bottom in the left column to preview the changes on the right.

Others_EN.png

  • Back to up: Turn 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. 
  • 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. cookieconsent_EN.png

 

4. Publish page

After completing the store settings, click Preview Page at the top right to view the rendering effect of the storefront.

Preview_EN.png

 

Click Publish to apply your customized store settings to the online store.

Publish_EN.png

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments