TABLE OF CONTENTS

• I. Page Layout Settings
• II. Colors 
• III. Typography
• IV. Multi-Currency
• V. Header Group
• VI. Icons
• VII. Search
• VIII. Cart
• XI. Product Card
• X. Product Page 
• XI. Collection Page 
• XII. Social Accounts
• XIII. Checkout

I. Page Layout Settings

Customize the layout of various pages on your Shopify store, including the homepage, product pages, blog page, Article Page, Search Page, and collection pages, to optimize user experience and showcase products effectively.

II. Colors 

You will find color settings for almost the whole store in this section, such as

•  Text colors, Price Colors, Product label colors, Product Card Colors, Link Colors, Status Colors

III. Typography

Headings & Body

• Select a suitable font for your store.
• Drag to set the font weight and size for Heading 1 2 3 4 5 6. 

Sidebar Heading: 

• Tick the box to make the heading of each section uppercase.
  

Section Heading

• Margin: set the margin for all the heading sections throughout the website following the format "Top, Right, Bottom Left. Adapt the margin for all heading sections across the website, considering mobile and desktop formats. (Eg: 0 0 16px 0)

• Drag to adjust the font size and font weight.
  

NOTE
To optimize loading time, consider using system fonts for text in your online store. These fonts are pre-installed on most computers, eliminating the need for font downloads. Choose from mono, serif, or sans-serif font families and still utilize font styles like bold or italic. This approach enhances user experience by ensuring faster page loading without sacrificing text customization options. Click here for more detail.

IV. Multi-Currency

V. Header Group

• Background image: Select an image from the library or keep it default to use a color background
• Tick the box "Use for the whole Header - Group.": Utilize the background, including the header - Top bar, and announcement bar.
• Header - Group Shadow: Adjust the shadow settings for the Header - Group
  
  VI. Icons

• There are two ways to insert Icons: 

1. Pick the default icons available: 

2. Input the SVG link:

VII. Search

VIII. Cart

XI. Product Card

• Limit card title line: Restrict the length of the product title line for a clean and concise appearance.

• Selected the value of size & weight for all the Product Name and Product Prices following the format " Top, Right, Bottom, Left."

Product Lable: Choose one or two styles: "Rectangle & Rounded." 

• Label position: Customize product labels by choosing one or two styles: "Rectangle & Rounded." Select label position options such as "Top Right, Right Top, Bottom," etc. 
• Label Style: Tick the box to display label styles, including Uppercase label, Sale label, Sale with percent, New label, and Hot label.

• Quick View PopUp
• Product Review 
  
  X. Product Page 

• Typography: Customize the font size and weight for Product Name, Price, Compare Price, Product Tax, and Product Sale Tag.
• Sticky Cart:
  - Tick the box to activate the sticky cart feature.
  - Choose "Top & Bottom" to determine the location of the sticky cart.

• CTA settings:
   

• Customize Sidebar Layout Settings: Only when Product Page Sidebar Layout is available.
  
  - Fill in the Template Name to adjust the position of the sidebar
  
  XI. Collection Page 
  
  XII. Social Accounts

- Fill in a link that directs to the social media platforms to enhance brand visibility and engagement.

XIII. Checkout

- Banner: Select an image to set the Background image at the checkout page (1000 x 400px recommended)

- Logo: 

• Select the image to set the logo. 
• Modify the logo position (Left/ Right/ Center) and logo size (Small/ Medium/ Large)

- Main content area: 

• Select an image to set the Background  image for the main content at checkout (The image repeats vertically and horizontally)
• Use the color picker to adjust the Background color.
• Form fields: Choose an option to set the background for the form fields (White/ Transparent)

- Order Summary: Select an image (Image repeats vertically and horizontally) or pick a color to set the background for the order summary

- Typography: Adjust the heading and body text styles.

- Colors: Pick a color from the color pickers at 

• Accents
• Buttons
• Errors