Customize Store Settings | SHOP Builder

In this article, you'll find:

• FAQ
• Open Store Settings from the Advanced Page editor
• Select or switch your store's theme template
• Customize color, font, mobile, product, and other store settings
• Preview and publish your store settings
• Font compatibility reference

1. FAQ

• Q1: What is SHOP Builder used for?
  SHOP Builder lets you customize the colors, fonts, and product display settings of your online store's Advanced Pages, so your storefront matches your brand without editing each page individually.
• Q2: Which theme templates support SHOP Builder?
  Currently, only the Ultra Chic, Kingsman, Varm, and Philia theme templates support SHOP Builder.
• Q3: How do I check which theme template my store is currently using?
  In the SHOPLINE Admin, go to [Online Store Design] > [Design] to see the applied theme template. You can also go to [Online Store Design] > [Pages] > [Advanced Page editor] > [Store Settings] and scroll down to view the current theme. Click Go to Design to change the theme template.
• Q4: Do store settings apply to my whole store or just one page?
  Store settings apply to every page of your online store, not just the page you're editing.
• Q5: What happens to my SHOP Builder settings if I switch to a theme that doesn't support it?
  Your storefront will reset to the new theme's default styling, and you won't be able to open SHOP Builder while the unsupported theme is applied. If you later switch back to a supported theme, the settings you previously saved in SHOP Builder will have been cleared and reset to the default. See 3. Select or switch your store's theme template.
• Q6: Which settings can I customize in SHOP Builder?
  Five categories: Color, Font, Mobile, Product, and Others. See 4. Customize color, font, mobile, product, and other store settings.
• Q7: How do I preview my changes before they go live?
  Click Save at the bottom of the left column to preview a change on the right, then click Preview Page and Publish to apply it to your live storefront. See 5. Preview and publish your store settings.

2. Open Store Settings from the Advanced Page editor

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

*Note: SHOP Builder is the new page editor for Advanced Pages. For details on how to create an Advanced Page, please refer to Advanced Page.

Click the Store Settings button on the left menu bar.

3. Select or switch your store's theme template

Scroll down to view your store's current theme template. Click Go to Design to change it.

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:

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 four theme templates - Kingsman, Ultra Chic, Varm, and Philia - currently support SHOP Builder. More theme templates will support SHOP Builder in the future.

If the new theme template does not support SHOP Builder

• You cannot enter SHOP Builder while an unsupported theme template is applied.
• 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 in 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 2. Open Store Settings from the Advanced Page editor to continue setup in SHOP Builder.

4. Customize color, font, mobile, product, and other store settings

You can adjust these 5 settings in Store Settings: "Color", "Font", "Mobile", "Product", and "Others".

*Note: Click Save at the bottom left to preview your change in the panel on the right. Your change does not appear on your live storefront until you click Publish.

i. Set colors for storefront sections

Go to [Store Settings] > [Color] to set colors for the various sections of your online store. Each section's default color is the color you originally set. 

The screenshot below shows the Color settings panel, where each section is listed with its own color pickers. Click Save at the bottom of the left column to preview your color changes on the right.

A. Page background, text, and hyperlink colors

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

B. Announcement bar background and text colors

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

C. Header background, text, and icon colors

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

D. Primary button background and text colors

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

E. Buy Now button background and text colors

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. Product promotion label background and text colors

You can set the background and text color of the product promotion label.

G. Footer background, text, and icon colors

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

H. Copyright section background and text colors

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

I. Anti-fraud notice background and text colors

You can set the background and text color of the anti-fraud notice section.

J. Email notification button background and text colors

You can set the background and text color of the email notification button. This color only applies to member and order-related notifications set up in SHOPLINE Admin > [Settings] > [Custom Notification].

Once you click Save and Publish, the color settings will be applied to the buttons in customer email notifications.

ii. Set fonts for titles and paragraphs

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. 

The screenshot below shows the Font settings panel where you configure title and paragraph fonts. Font changes only appear in the preview panel on the right after you click Save.

Change	You can choose the font you want to change to. The fonts are categorized into system fonts and other fonts. Move the cursor over the font, and you can view the supported language and system. System fonts: Offer better loading performance. However, default fonts may vary across different devices. Other fonts: Must be downloaded to the user's device first and may affect loading performance.
Reset	Click to change to the default font.
Font Size	Adjust the font size to large, medium, or small.

A. Title font type and size

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 font type and size

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).

For details on font-language compatibility, please refer to the Font compatibility reference below. This section explains which languages each font supports and what happens if a selected font does not support a customer's store language.

iii. Adjust mobile menu display settings

Go to [Store Settings] > [Mobile] to adjust how your store catalog appears on the mobile version. The screenshot below shows the Mobile settings panel. Click Save to preview how the menu behaves in the mobile view on the right. 

A. Collapse menu items on mobile

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 product 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. Adjust how products appear in the online store

Go to [Store Settings] > [Products] to adjust how your products appear in the online store. Each toggle has tags indicating which storefront sections it affects. For example, "Collapse Categories" affects product listing pages and the mobile menu. 

Click Save to preview how your listing pages change on the right.

A. Collapse product categories on listing pages

You can adjust the presentation of your online store menu and categories. 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 images to a uniform size

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 proportions.

C. Variation Image Shape and Size

This setting allows you to customize the shape and size of variation images for products with multiple variations. You can choose between square or round shapes, and small, medium, or large sizes.

*Notes:

• This feature is only available for stores using the Ultra Chic theme template.
• If your store has enabled the layout engine, you must update your liquid layout before you can use this feature.

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.

This setting allows you to choose whether the variation images display the first or second product variation. For example, if your first variation is "Color" and your second is "Size", selecting the first variation will display the product images in different colors. For more information, please refer to Product Variation and Variant | Products.

E. Product name alignment

This setting allows you to adjust the alignment of product names on the product listing pages. You can choose to align the text to the left, center, or right. Please note that the product name alignment does not affect the display of variation images.

*Notes:

• This feature is only available for stores using the Ultra Chic theme template.
• If your store has enabled the layout engine, you must update your liquid layout before you can use this feature.

F. Custom product label corner style

This setting allows you to customize the style of the product's promotion label. You can choose between rounded corners, square corners, or arrows. If you do not make any adjustments, the label will display in its default style. For more details, please refer to Product Promotion Labels | Products.

*Notes:

• This feature is only available for stores using the Ultra Chic theme template.
• If your store has enabled the layout engine, you must update your liquid layout before you can use this feature.

G. Show number of products in the category

This toggle allows you to display the number of products in a category next to the category name in the storefront. It is switched off by default.

*Notes:

• This feature is only available for stores using the Ultra Chic theme template.
• If your store has enabled the layout engine, you must update your liquid layout before you can use this feature.

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

Switch this toggle off to show the social sharing buttons on the product page, so customers can share your products. Switch it on to hide them. This toggle is on by default, so the sharing buttons are hidden unless you change it.

v. Configure additional storefront settings

Go to [Store Settings] > [Others] to adjust other settings for your online store. The screenshot below shows the Others settings panel. Click Save to preview your changes on the right.

A. Show or hide the back-to-top button

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 the cookie consent 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.

5. Preview and publish your store settings

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.

6. Font compatibility reference

Can I use different fonts for different languages in the same title or text block?

No. Currently, the system does not support multilingual titles or text using multiple font types. For example, if your title is in both English and Chinese, only one font type can be applied.

What happens to Kanji characters that aren't supported by M PLUS Rounded 1c or Shippori Mincho?

These two fonts are Japanese Kanji fonts. You can select them for Chinese characters, but some characters don't have corresponding Kanji glyphs. Characters without a corresponding Kanji glyph will display in the default font instead.

What font displays if my selected font doesn't support a customer's store language?

The customer will see the default font for that language instead: 

• Traditional Chinese uses Noto Sans TC
• Simplified Chinese uses Noto Sans SC
• English／German／French／Malay use Noto Sans
• Thai uses Noto Sans TH
• Vietnamese uses Noto Sans VN
• Japanese uses Noto Sans JP

System fonts

Other fonts

Last Updated: 28 August 2026

Read more

• Introduction｜SHOP Builder
• Footer Setting | SHOP Builder