Search

Shop Home

Customize your Shop Home and bring your brand identity to life!

 

👉 Initial screen when accessing the Shop Home Editor

  • You can exit the editor and set the preview language from the top left corner.
  • Use the center buttons to switch between mobile and PC view types.
  • Click [View Shop Home] in the top right corner to open the user view of your Shop Home in a new window.

 

👉 Section

✅ Banner

  • Create a slideshow of multiple banners for simultaneous display.
    • Section Title: You can enter the title of the respective section (up to 100 characters)
    • Banner Design: You can configure the Ratio(4:1, 3:1, 2:1, 16:9, 4:3, 1:1, 3:4), Shape (square, round, full-round), Layout (PC - 1 Column / 2 Columns), Add Spacing, and choose whether to display the original image. Please note that background colors may appear based on the original image ratio.
    • Transition: You can set the display time for a single banner (1 to 10 seconds, default 3 seconds). The animation effect is fixed as "Push."

    • Style
    ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
    ৹ Content Align: You can set the alignment of content elements (left/center/right).

    ৹ Background: You can choose to show or hide the background. If it’s hidden, a white background will be provided.
    ▪▪ You can enable settings for mobile and PC separately to upload different cover images.
    ▪▪ By turning ON the ‘Fill background (PC) option, you can fully expand the width of the background image and color to the left and right.
    ▪▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
    ▪▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
    ▪▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    ৹ Enhance visibility or Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    ৹ When you click on [Color], you can configure the color settings.

✅ Shop

  • Provide an entry point for faster access to top-level categories. (*Ideal for displaying a wide range of products organized in 2 or more menu levels.)
    • Section Title: You can enter the title of the respective section (up to 100 characters)
    • Category Settings: Manage item visibility and category links.

    • Style
    ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
    ৹ Content Align: You can set the alignment of content elements (left/center/right).
    ৹ Background: You can choose to show or hide the background. If it’s hidden, a white background will be provided.
    ▪▪ You can enable settings for mobile and PC separately to upload different cover images.
    ▪▪ By turning ON the ‘Fill background (PC) option, you can fully expand the width of the background image and color to the left and right.
    ▪▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
    ▪▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
    ▪▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    ৹ Enhance visibility or Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    ৹ When you click on [Color], you can configure the color settings.

  • Display key product groups from each category in a horizontal list layout. (*Ideal for displaying a wide range of products organized in 2 or more menu levels.)
    • Section Title: You can enter the title of the respective section (up to 100 characters)
    • Category Settings: Manage item visibility and category links.

    • Style
    ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
    ৹ Content Align: You can set the alignment of content elements (left/center/right).
    ৹ Background: You can choose to show or hide the background. If it’s hidden, a white background will be provided.
    ▪▪ You can enable settings for mobile and PC separately to upload different cover images.
    ▪▪ By turning ON the ‘Fill background (PC) option, you can fully expand the width of the background image and color to the left and right.
    ▪▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
    ▪▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
    ▪▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    ৹ Enhance visibility or Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    ৹ When you click on [Color], you can configure the color settings.

  • Display key product groups from each category in a vertical list layout, organized by tabs.
    • Section Title: You can enter the title of the respective section (up to 100 characters)
    • Category Settings: Manage item visibility and category links.

    • Style
    ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
    ৹ Content Align: You can set the alignment of content elements (left/center/right).
    ৹ Background: You can choose to show or hide the background. If it’s hidden, a white background will be provided.
    ▪▪ You can enable settings for mobile and PC separately to upload different cover images.
    ▪▪ By turning ON the ‘Fill background (PC) option, you can fully expand the width of the background image and color to the left and right.
    ▪▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
    ▪▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
    ▪▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    ৹ Enhance visibility or Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    ৹ When you click on [Color], you can configure the color settings.

✅ Divider

  • Add line as a divider between sections.
    • Color: You can choose the color of the line.
    • Line Settings: You can set the line thickness (1 to 8px) and width (Full, Inset, Ratio: 1% to 100%).

    • Style
    ৹ Padding: You can move the button to add margin at the top or bottom.
    ৹ Background: You can enable or disable the display of the background. When disabled, a white background will be provided.
    ৹ Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    ৹ When you click on [Color], you can configure the color settings.