What is Shop Page Design?

Store page is merchants' own storefront on TikTok Shop that facilitates merchants to showcase their products and brands. Apart from default homepage, TikTok Shop also provides design tools in order to allow merchants to personalize their store pages. It's easy to design a TikTok Store with simple drag-and-drop tiles.
Decorating a store manually facilitates merchants to customize their default home page so that they are able to enhance their business performance and raise their brand awareness.

Benefits of Shop Page Design

• Better display products in order to enhance sales performance
• Improve session duration and click rate with banners and attractive layout
• Highlight promotions to boost conversion rate

Here are some examples of personalized store pages after using Shop Page Design features:
Note: the image above is for reference purpose only. The actual layout might differ.

How to design a store?

Currently, Shop Page Design allows merchants to customize banner, product and campaign sections with the tiles of text, images, videos and products.

Step 1:

In Seller Center, go to the "Shop Tab" tab > Shop Page Builder > Shop Page Design > Duplicate to edit

Step 2:

On the Shop Page Design workbench, merchants have the ability to customise banners, products, and promotions. This is done by adding components from the options on the left side and making adjustments on the right side. The manual design tiles currently consist of visual, product, and promotional components.
Within the Shop Page Design workbench:

1. Store Design Modules:
   • These modules contain various decoration components that are available for use. Merchants can simply drag and drop these modules onto the canvas. Each component's specific requirements are displayed below it.
2. Canvas:
   • The canvas provides a visual representation of how the added components will appear on the store page.
3. Component Property Panel:
   • Merchants can further customize each component by selecting it on the canvas, which opens up the Component Property Panel for editing. This panel allows for specific adjustments to be made to each component.
     

Store components

For more details of each component, please refer to the table below.

Header

Enable sellers to customize their homepage header, to make it aligned with their brand style.
Exclusive feature for Mall shops: Sellers can upload the background image and logo to strengthen their brand image at "header image" menu.

Visuals

This feature allows merchants to easily incorporate either a single image or a series of images arranged in a carousel, each accompanied by text and a hyperlink. Additionally, the Multi-click Image component enables users to navigate to various products or categories by interacting with different sections within a single image.

1. Link to a product

After uploading an image, click "Add" - "Link to a product", then select one product and click "OK".

2. Link to a category

After uploading an image, click "Add" - "Link to a category", then select one category and click "OK".

3. Use Multi-click Image component to link to more products!

Unleash your creativity with Multi-Click Image component, by allowing you to showcase multiple products or categories within a single image. Follow these simple steps to make the most of this feature:

4. Drag the Multi-Click Image component from the left side of the interface to the center of the canvas.
5. Upload your desired image.
6. Define hotspots on the image.
7. Attach links to each hotspot, connecting to either specific products or categories.
   1. This functionality provides a dynamic way to highlight and link multiple elements within a single image, offering a seamless and interactive user experience.
      

Products and Categories

Products and Categories module facilitates merchants to add "Featured Products" section by arranging the product cards and text and also supports the store being decorated with smart products and categories modules like "New Release" & "Top Sales"
Note: products shown above are for test only.

• Self-Arrange

• Smart Components: New Release & Top Products

As smart components, "New Release" & Top Products do not ask merchants to edit much more information. All you need to do is to select the component in Store Modules panel and the system will display the products that meet the requirements of this module automatically and dynamically.

• Collections

To group products based on the latest thematic collections that your shop has. Eg: Summer Collection, Winter Collection, etc.
What it looks like on Customers-end:Set up in Seller Center:

Promotion component

Merchants can add smart promotion components like "Special Deals" "Vouchers", "Flash Deal" and "Buy More Save More" to store page. However, due to its smart component identity, the specific information of each promotion cannot be edited here. Merchants can only follow the instructions to fulfill the requirements if there are promotions.

Step 3:

Once you finished building out your new store page, you just need to click "publish" as the last step. After submission, TikTok Shop will review it. Once it's approved, it will be displayed to customers at storefront. Merchants are also allowed to "preview" or "save" it if you do not want to publish it directly.
There will be rejection reasons if the design does not pass review. Merchants can revise the Shop Page Design by following the instructions.

How to manage Shop Page Design drafts?

Merchants can manage different store drafts on Seller Center—Shop Page Design page.

• Online Version shows the information of the online store page and merchants can click "Replace with default" to recover the default homepage.
• Unpublished Version displays "Under Review", "Change Needed" and "Default Home" versions. "Change Needed" version allows merchants to edit, duplicate, publish and delete.
• Version Preview exhibits the preview of the Shop Page Design.
  
  

Shop Page Design Review and Link Sharing

When some components of the draft do not pass the review, the newly designed store page cannot be successfully published. Sellers will be informed by emails and seller notifications.

• The draft with "Change Needed" tag indicates that it does not pass the review and should be edited
• Shop Page Design workbench also guides sellers to adjust the wrong design
• Sellers can share their shop page link by clicking the Share Store button on the top right, and download the QR code or copy the link.
  
  

FAQ

1. Why do some customers say they cannot see my designed homepage? (They still see the default version)

Since there is an ongoing experiment for the display of various versions, buyers may see different versions of Store Page.

2. Why is my shop voucher not displayed in the promotion module in Design Workbench?

Only the voucher with active status is going to be displayed. If your voucher status is still upcoming, it will be displayed when the status changes to active.