WhatsApp Chat Button – Sanvi Theme

The WhatsApp Chat Button allows customers to instantly connect with your store via WhatsApp. This feature helps improve customer support, increase trust, and boost conversions by offering real-time assistance.

Where to Find This Setting

Go to:

Online Store → Themes → Customize → Theme Settings → WhatsApp Chat Button

Enable WhatsApp Chat Button

To activate the WhatsApp chat feature:

1. Open Theme Settings

2. Click on WhatsApp Chat Button

3. Enable WhatsApp Chat Button

Once enabled, the WhatsApp icon will appear on your storefront.

WhatsApp Settings

WhatsApp Number

Enter your WhatsApp number with country code.

Example:
919876543210

This number will receive all customer chat messages.

Pre-filled Message

This message will automatically appear in WhatsApp when a customer clicks the chat button.

Example:
“Hi! I’m interested in your products.”

This helps customers start the conversation quickly.

Tooltip Settings

You can show a tooltip message when users hover over the WhatsApp button.

• Enable Show Tooltip

• Enter Tooltip Text
  Example:
  “Chat with us on WhatsApp!”

Button Position Settings

Control where the WhatsApp button appears on your website.

Button Position

Choose the button position:

• Bottom Right

• Bottom Left

Distance Settings

Adjust spacing for better visibility:

• Distance from bottom/top (px)

• Distance from side (px)

Z-Index (Layer Priority)

Set button priority over other elements.

Higher value = button stays on top of all elements.

Recommended: 999

Button Style Settings

Customize the appearance of the WhatsApp button.

Button Style

Available styles:

• Circle

• Pill

If Pill style is selected, you can also add custom button text.

Button Size

Control the size of the button (in pixels).

Recommended size: 50–60px

Button Colors

• Background Color (default WhatsApp green)

• Icon Color

• Button Opacity

Hover Effects

Enhance user interaction with hover animations.

Hover Background Color

Change color when users hover over the button.

Hover Animation

Available effects:

• Pulse

• Scale

• None

Entrance Animation

Animate the button when the page loads.

Options include:

• Scale Up

• Fade In

• Slide

You can also control Entrance Delay (in milliseconds).

Shadow & Pulse Effects

Optional visual enhancements:

• Enable Shadow

• Enable Pulse Ring Effect

These effects make the button more noticeable without being intrusive.

Best Use Case

• Product inquiries

• Order support

• Custom recommendations

• Pre-sale questions

WhatsApp Chat Button works perfectly for beauty, skincare, wellness, and personal care stores.

Recommended Settings (Best Practice)

• Position: Bottom Right

• Button Style: Circle

• Button Size: 60px

• Z-Index: 999

• Pre-filled Message: Enabled

• Hover Animation: Pulse

 

Back to Top Button – Theme Settings

The Back to Top Button allows users to quickly return to the top of the page after scrolling. This improves navigation, especially on long pages like product listings, collections, and blogs.

Enable Back to Top Button

• Enable Back to Top Button
  • Toggle ON to activate the button.

  • Toggle OFF to hide it completely.

Recommended: Enable for better user experience on long pages.

Show Button After Scroll

• Show button after scroll (px)
  • Defines how many pixels a user must scroll before the button appears.

Example:

• Value: 300 px

• The button becomes visible after scrolling 300 pixels down the page.

Position Settings

Button Position

Choose where the button appears on the screen.

Available options:

• Bottom Right

• Bottom Left

Recommended: Bottom Right (most common and user-friendly).

Distance from Bottom

• Controls the vertical spacing from the bottom of the screen.

• Example: 30 px

Distance from Side

• Controls horizontal spacing from the left or right edge.

• Example: 30 px

Button Style

Button Shape

• Square

• Rounded (if available in theme)

Button Size

• Controls the width and height of the button.

• Example: 40 px

Button Colors

Background Color

• Sets the default background color of the button.

• Example: #333333

Icon Color

• Sets the arrow icon color inside the button.

• Example: #FFFFFF

Button Opacity

• Adjusts the transparency of the button.

• Example: 90%

Higher opacity makes the button more visible; lower opacity makes it subtle.

Hover Effect

Hover Background Color

• Background color when the user hovers over the button.

• Example: #333333

Hover Opacity

• Opacity applied on hover.

• Improves visual feedback and interactivity.

Button Behavior

• Button appears only after scrolling

• Smooth scroll back to the top when clicked

• Always visible above page content

• Works across desktop, tablet, and mobile devices

Cart Settings – Sanvi Theme

The Cart Settings in the Sanvi Theme allow you to control how products are added, displayed, and managed before checkout. The theme supports a modern drawer-style cart designed to improve user experience and increase conversions.

Cart Type

Cart Display Type

• Drawer
  Opens a sliding cart from the right side without leaving the current page.

This keeps users engaged and reduces page reloads.

Vendor Display

• Show Vendor
  Enable or disable the vendor name inside the cart.

Recommended: Disable for single-brand stores.

Cart Note

• Enable Cart Note
  Allows customers to add special instructions for their order.

Example use cases:

• Gift messages

• Delivery instructions

• Custom requests

Free Shipping Threshold

• Free Shipping Amount
  Set a minimum cart value to qualify for free shipping.

Example:

• Value: 6000

• Displays progress bar:
  “Spend ₹2,055.00 more for FREE SHIPPING”

This feature encourages higher order value.

AI Product Recommendation

• Enable AI Recommendations
  Automatically suggests related products inside the cart.

Heading Text:

Customizable
Example: People Also Bought

Purpose:

• Cross-selling

• Upselling

• Increased average order value

Cart Drawer Settings

These options apply when the cart drawer is opened.

Recommended Collection

• Select a collection to show when the cart is empty or for recommendations.

• Example: Beauty Care

Cart Empty Image

• Display a custom image when the cart is empty.

• Helps maintain brand identity and visual consistency.

Color Scheme

• Select a predefined theme color scheme.

• Controls background, text, and button colors inside the cart.

Cart Drawer Layout Features

The cart drawer includes:

• Product image

• Product title

• Variant selection (size, type)

• Quantity selector (+ / −)

• Remove product option

• Subtotal calculation

• Checkout button

Order Special Instructions

• Expandable textarea at the bottom of the cart.

• Captures user notes before checkout.

Payment & Security Indicators

Displayed automatically:

• Secure transaction text

• Payment method icons (GPay, Paytm, Visa, RuPay, etc.)

These increase trust and checkout confidence.

Checkout Button

• Prominent Checkout CTA

• Styled using theme color settings

• Redirects users to Shopify secure checkout

Product Page – Sanvi Theme

(Default Product Template)

The Product Page in the Sanvi Theme is designed to showcase products in a premium, conversion-focused layout. It highlights product visuals, benefits, pricing, trust badges, and upsell features to improve user confidence and sales.

Page Layout Overview

The Sanvi Product Page is divided into the following sections:

1. Product Media Gallery

2. Product Information

3. Variant Selector

4. Buy Buttons

5. Trust Badges

6. Collapsible Content Tabs

7. Frequently Bought Together

8. Product Tabs (Info, Ingredients, Safety)

9. Sticky Add to Cart

10. Share Product

1. Product Media Gallery

Located on the left side of the page.

Features:

• Multiple product images

• Lifestyle images

• Zoom support

• Clean grid layout

Settings:

• Media width (Small / Medium / Large)

• Layout: 2 columns

• Image fit: Original / Fill

• Zoom: Enable or disable

• Mobile layout: Hide or show thumbnails

• Hide other variant images when variant selected

Best Practice:
Use high-quality product images with consistent background and lighting.

2. Product Information

Located on the right side.

Displays:

• Product title

• Price & compare price

• Discount badge (auto calculated)

• Short product description

• Benefit points (bullet format)

Options:

• Sticky content (keeps product info visible while scrolling)

• Color scheme control

3. Benefits Points

Clearly highlights product advantages.

Example usage:

• Deep hydration & glow

• Brightens skin tone

• Anti-aging support

• Lightweight & fast absorbing

Purpose:
Helps customers quickly understand product value without scrolling.

4. Variant Picker

Used for selecting product variants.

Supported Types:

• Size (30ml / 60ml / 90ml)

• Color (if applicable)

• Any Shopify-supported variant

Behavior:

• Selected variant updates price automatically

• Optional: Hide other variant images

5. Quantity Selector & Buy Buttons

Buttons Included:

• Add to Cart

• Buy It Now (direct checkout)

Quantity Control:

• Plus (+) and Minus (–) buttons

• Real-time quantity update

6. Trust Badges Section

Displayed below buy buttons.

Common Badges:

• FDA Registered

• ISO Certified

• High Efficacy

• Doctor Recommended

Purpose:
Builds trust and reduces purchase hesitation.

7. Collapsible Rows

Accordion-style sections for clean content presentation.

Default Sections:

• Product Description

• Ingredients

• How to Use

Benefits:

• Keeps page clean

• Improves readability

• Mobile-friendly layout

8. Frequently Bought Together

Displays bundled products to increase order value.

Features:

• Product image preview

• Individual prices

• Combined total price

• “Add All to Cart” button

Behavior:

• Customers can remove items

• Price updates dynamically

9. Product Tabs Section

Tabbed content layout below main product section.

Default Tabs:

• Product Information

• Ingredients

• Safety & Disclaimer

Advantages:

• Organised content

• Better UX for long descriptions

• SEO-friendly content structure

10. Sticky Add to Cart

Visible at the bottom while scrolling.

Includes:

• Product thumbnail

• Product title

• Price

• Quantity selector

• Add to Cart button

Purpose:
Improves conversions on long product pages.

11. Share Product

Allows customers to share products.

Supported Sharing:

• Copy product link

• Social platforms (browser dependent)

Padding & Spacing Controls

Available for:

• Top & bottom padding

• Mobile-specific padding

• Section spacing optimization

 

Collection Page (Shop Page) – Sanvi Theme

The Collection Page (also known as the Shop Page) displays all products in a clean grid layout with filtering and sorting options. This page helps customers browse, compare, and find products easily.

Page Structure Overview

The Sanvi Collection page consists of the following key sections:

1. Header & Breadcrumb

2. Collection Banner (Optional)

3. Product Grid

4. Filters & Sorting

5. Product Cards

6. Pagination

7. Footer

1. Header & Breadcrumb

Located at the top of the page.

Displays:

• Page title (e.g., Products)

• Breadcrumb navigation
  Example:
  Home > Products

Use case:
Helps users understand where they are and navigate back easily.

2. Product Grid Section

This is the main area where products are displayed.

Available Settings:

• Products per page (e.g., 16, 24, 32)

• Columns (Desktop) – 2 / 3 / 4

• Mobile columns – 1 or 2

• Color scheme

Best practice:

• Desktop: 3 or 4 columns

• Mobile: 2 columns for better visibility

3. Product Card Settings

Each product card shows individual product details.

Customizable Options:

• Image ratio (Portrait / Square)

• Image shape (Default / Rounded)

• Show second image on hover

• Show vendor (optional)

• Show product rating (requires review app)

• Quick Add button (Standard)

Product Card Includes:

• Product image

• Discount badge (Auto calculated)

• Product title

• Price & compare price

• CTA button (Choose Options / Add to Cart)

4. Filters (Left Sidebar)

Filters help users narrow down products.

Default Filters:

• Availability (In stock / Out of stock)

• Price range

Settings:

• Enable / Disable filters

• Filter layout: Vertical

• Powered by Shopify Search & Discovery app

Note:
Additional filters (Skin type, Hair type, Ingredients) can be added via Shopify Search & Discovery.

5. Sorting Options

Sorting appears on the top right of the product grid.

Available Sort Options:

• Alphabetically (A–Z / Z–A)

• Price (Low to High / High to Low)

• Newest

• Best Selling

Sorting can be enabled or disabled from theme settings.

6. Pagination

Automatically appears when product count exceeds products-per-page limit.

Behavior:

• Loads next set of products

• Maintains filter & sorting state

7. Padding & Spacing Controls

You can control spacing for better layout balance.

Available Controls:

• Top padding

• Bottom padding

• Responsive spacing for mobile

 

Footer – Sanvi Theme

The Footer section appears at the bottom of your website and helps customers find important links, contact details, and brand information. It also improves trust and usability.

Footer Structure Overview

The Sanvi footer is divided into main footer and bottom footer bar.

1. Brand Information

This section displays your brand identity and short description.

What you can manage:

• Brand logo

• Logo width

• Brand description text

• Social media icons (Facebook, Instagram, YouTube)

Use case:
Helps users understand your brand and builds credibility.

Recommended content:
Short brand story or mission (2–3 lines).

2. Quick Links Menu

This section shows helpful navigation links.

Editable via:
Shopify Navigation → Footer Quick Links

Common links:

• Home

• About Us

• Our Shop

• All Collections

• Contact Us

• Account

Use case:
Improves navigation and user experience.

3. Legal Menu

This section is used for policy and legal pages.

Recommended pages:

• Privacy Policy

• Terms & Conditions

• Refund Policy

• Shipping Policy

• Help Center

Important:
All links should be created in Shopify pages and assigned from Navigation.

4. Contact Information

Displays your business contact details.

You can enable/disable:

• Phone number

• Email address

• Physical address

Editable fields:

• Phone number

• Email address

• Address text

• Optional icons

Use case:
Builds trust and helps customers reach you easily.

5. Country / Region Selector

Allows users to change currency and region.

Requirements:

• Shopify Markets must be enabled

• Country/Region selector toggle ON

Example:
India | INR

6. Footer Bottom Bar

This is the lowest part of the footer.

Includes:

• Copyright text

• Payment method icons (optional)

• Language selector (optional)

• Horizontal divider line

• Background & text color settings

Recommended copyright format:
© 2025, Sanvi Wellness. Powered by Shopify

Footer Settings Available

Color & Style

• Color scheme

• Text color

• Background color

• Border / divider line

Spacing Controls

• Desktop top & bottom padding

• Mobile top & bottom padding

Utilities (Optional)

• Email signup

• Social icons

• Language selector

• Payment icons

 

FAQ (Frequently Asked Questions)

Sanvi Beauty Theme

The FAQ section helps answer common customer questions in a clean accordion-style layout. It improves user confidence, reduces support queries, and provides quick clarity about your products and brand.

Section Location

Online Store → Themes → Customize → Home page → Sanvi FAQ

Section Overview

This section displays:

• A section heading

• Expandable FAQ items (accordion style)

• One question open at a time (optional)

It is ideal for answering product safety, usage, and brand-related questions.

Section Settings

Heading

Main title displayed at the top of the FAQ section.

Example shown:
frequently asked questions

Heading Alignment

Controls alignment of the heading text.

Options:

• Left

• Center

• Right

Section Spacing

Desktop Padding

• Desktop Top Padding

• Desktop Bottom Padding

Example shown: 80 px

Mobile Padding

• Mobile Top Padding

• Mobile Bottom Padding

Example shown: 60 px

Color Settings

Color Scheme

Select the overall color scheme for the FAQ section.

Example shown: Scheme 1

Border Color

Controls the divider/border color between FAQ items.

Example shown: #E5E5E5

Icon Color

Controls the color of the expand/collapse icon.

Example shown: #AB6D5E

Accordion Settings

Single Item Open

When enabled, only one FAQ item can be open at a time.
Opening a new item will automatically close the previously open one.

FAQ Item Block Settings

Each question and answer is added as a separate FAQ Item block.

Question

The FAQ question text.

Example shown:
Are Sanvi products safe for daily use?

Answer

The answer content displayed when the question is expanded.

Recommended:

• Clear and concise

• 1–2 short lines

• Friendly and reassuring tone

 

Client Testimonials

Sanvi Beauty Theme

The Testimonials section is used to display real customer feedback in a clean, slider-based layout. It builds trust and social proof by showcasing customer experiences with your products.

Section Location

Online Store → Themes → Customize → Home page → Sanvi Testimonial

Section Overview

This section displays:

• A main heading

• Testimonial cards with star ratings

• Customer name and location

• Customer feedback text

• Slider navigation with autoplay options

It is ideal for highlighting genuine customer reviews and improving conversion confidence.

Section Settings

Heading

Main heading displayed at the top of the section.

Example shown:
What our customers say!

Section Spacing

Desktop Padding

• Desktop Top Padding

• Desktop Bottom Padding

Example shown:

• Top: 60 px

• Bottom: 72 px

Mobile Padding

• Mobile Top Padding

• Mobile Bottom Padding

Example shown: 60 px

Color Settings

Color Scheme

Select the overall color scheme for the testimonial section.

Example shown: Scheme 6

Card Background Color

Controls the background color of testimonial cards.
Example shown: #FFFFFF

Heading Color

Controls the color of the section heading.
Example shown: #000000

Card Border Color

Controls the border color of testimonial cards.
Example shown: #F0F0F0

Star Rating Color

Controls the color of filled stars.
Example shown: #FF9500

Empty Star Color

Controls the color of unfilled stars.
Example shown: #000000

Slider Display Settings

Slides Per View (Desktop)

Controls how many testimonials appear at once on desktop.

Example shown: 3

Slides Per View (Tablet)

Controls testimonials visible on tablet screens.

Example shown: 2

Slides Per View (Mobile)

Controls testimonials visible on mobile devices.

Example shown: 1

Slider Controls

Enable Loop

When enabled, testimonials continuously loop.

Autoplay Settings

Enable Autoplay

Automatically moves testimonials after a set time.

Autoplay Delay

Controls time between slide transitions.

Example shown: 5 seconds

Pause on Hover

Pauses autoplay when the user hovers over the testimonials.

Testimonial Block Settings

Each testimonial is added as a separate Testimonial block.

Star Rating

Select the number of stars to display.

Example shown: 5

Title

Customer name and location.

Example shown:
Emma Richardson, UK

Testimonial Text

Customer feedback text.

Recommended:

• 2–3 short sentences

• Honest, benefit-focused language

 

About Us

Sanvi Beauty Theme

The About Us section introduces your brand story, values, and philosophy in a visually balanced layout with images, text, and a call-to-action button.

Section Location

Online Store → Themes → Customize → Home page → Sanvi About Us

Section Overview

This section displays:

• A visual image collage (desktop & mobile)

• A heading and descriptive content

• An optional call-to-action button

It is designed to build trust and emotionally connect customers with the Sanvi brand.

Image Settings

Desktop Image

Upload the main image displayed on desktop screens.

• Recommended size: 800 × 600 px or larger

• High-quality lifestyle or self-care imagery works best

Desktop Image Height

Controls the height of the desktop image.

Options:

• Small

• Medium

• Large

Example shown: Large

Mobile Image

Upload a separate image optimized for mobile devices.

• Recommended size: 600 × 400 px or larger

• If not uploaded, the desktop image will be used

Mobile Image Height

Controls the height of the image on mobile screens.

Example shown: Large

Content Settings

Caption (Optional)

Small text displayed above the heading.
Use this for subtle branding or category labels.

Heading

Main title of the section.

Example shown:
About Sanvi

Heading Size

Controls the size of the heading text.

Options:

• Small

• Medium

• Large

Example shown: Medium

Description

Main content area used to explain your brand story.

Recommended structure:

• 2 short paragraphs

• Clear, simple, and emotional language

• Focus on values, quality, and purpose

Button Settings

Button Label

Text displayed on the button.

Example shown:
View More About Us…

Button Link

Link the button to:

• About page

• Brand story page

• Any informational page

Example shown: About Us

Outline Button Style

When enabled, the button appears with an outline instead of a solid background.

Color Scheme

Select a color scheme to control text and button colors.
Managed from Theme Settings → Colors.

Padding Settings

Desktop Padding

• Top Padding

• Bottom Padding

Example shown: 56 px

Mobile Padding

• Mobile Top Padding

• Mobile Bottom Padding

Example shown: 36 px

 

Banner Image

Sanvi Beauty Theme

The Banner Image section is used to display a large promotional image with an optional clickable link. It is ideal for highlighting offers, campaigns, announcements, or featured collections.

Section Location

Online Store → Themes → Customize → Home page → Sanvi Banner Image

Section Overview

This section displays:

• A full-width or page-width banner image

• Separate images for desktop and mobile (optional)

• Optional clickable links for desktop and mobile users

It is commonly used for discounts, seasonal campaigns, or brand promotions.

Section Settings

Color Scheme

Select a color scheme for the section background (if applicable).
Managed from Theme Settings → Colors.

Banner Images

Desktop Image

Upload the banner image displayed on desktop screens.

• Recommended size: 1420 × 450 px or larger

• Use high-resolution images for best visual quality

Mobile Image (Optional)

Upload a separate banner image optimized for mobile devices.

• Recommended size: 750 × 300 px

• If not provided, the desktop image will be used on mobile

Image Alt Text

Add descriptive text for accessibility and SEO.

Example:
Promotional banner showcasing Sanvi wellness products

Banner Links

Banner Link

Add a link to make the banner clickable on desktop.

Use this to link to:

• A collection page

• A product page

• A promotional landing page

Mobile Banner Link

Set a separate link for mobile users if required.

If left empty, the desktop banner link will be used.

Banner Display Settings

Adapt to Image Height

When enabled, the banner height automatically adjusts based on the image dimensions.

Recommended when using properly sized images.

Full Width

When enabled, the banner spans the full width of the screen.

Disable to keep the banner aligned with page content width.

Desktop Height (Fixed Mode)

Used when Adapt to image height is disabled.

• Example shown: 350 px

• Controls the fixed banner height on desktop

 

Shoppable Videos

Sanvi Beauty Theme

The Shoppable Videos section allows you to showcase short videos with direct product links. Customers can watch product-focused or lifestyle videos and shop the featured products directly from the video cards.

Section Location

Online Store → Themes → Customize → Home page → Shoppable Videos

Section Overview

This section displays:

• A section subtitle and title 
• A horizontal slider of video cards 
• Each video card linked to a product with a “Shop Now” action 

It is ideal for showing real-life usage, routines, or results for beauty and wellness products.

Section Content Settings

Section Subtitle

Small text displayed above the main title.
Example shown:
AS SEEN ON

Section Title

Main heading of the section.
Example shown:
Real Care. Real Results.

Section Spacing

Padding

• Padding Top 
• Padding Bottom 
• Padding Horizontal 

Controls the spacing around the entire section.

Margin

• Margin Top 
• Margin Bottom 

Use margins to adjust spacing between this and adjacent sections.

Slider Settings

Videos to Show on Desktop

Controls how many video cards are visible at once on desktop screens.
Example shown: 5

Videos to Show on Mobile

Controls how many video cards are visible at once on mobile devices.
Example shown: 1

Autoplay Next Video on Slide Change

When enabled, the middle video will automatically play when the slider changes.

Shoppable Video Block Settings

Each video in the section is added as a Shoppable Video block.

Video URL

Paste the video URL uploaded to Shopify Files.

Supported format:

• MP4 

Video Thumbnail

Select a thumbnail image for the video.
This image is shown before the video plays.

Select Product

Choose the product to be linked with the video.

The selected product will appear below the video with:

• Product image 
• Product title 
• Price 
• “Shop Now” button 

Recommended Video Guidelines

• Video length: 5–20 seconds 
• Vertical or square format works best 
• Clear focus on product usage or results 
• Soft lighting and natural environments 
• Avoid heavy text overlays

 

Features Section (Four)

Sanvi Beauty Theme

The Features Section (Four) is used to highlight key brand values or product benefits in a clean, icon-based layout. It helps communicate trust, quality, and purpose clearly to customers.

Section Location

Online Store → Themes → Customize → Home page → Features Section (Four)

Section Overview

This section displays:

• A main heading and subheading

• Four feature items displayed in a single row

• Each feature includes an icon, title, and short description

This section is ideal for explaining brand philosophy, wellness principles, or customer benefits.

Section Settings

Heading

Main title displayed at the top of the section.
Example shown:
The Essence of Everyday Wellness

Subheading

Supporting text displayed below the heading.
Use this to briefly explain your brand approach or philosophy.

Section Spacing

Top Padding
Controls space above the section.

Bottom Padding
Controls space below the section.

Example shown: 80 px

Mobile Padding

Mobile Top Padding
Controls space above the section on mobile.

Mobile Bottom Padding
Controls space below the section on mobile.

Example shown: 60 px

Color Scheme

Select a color scheme for background, text, and icons.
Managed from Theme Settings → Colors.

Icon Color

Controls the color of all feature icons.
Example shown: #B86F5B

Feature Block Settings

Each feature is added as a separate Feature block.

Icon Image

Upload the icon image for the feature.

Recommended:

• SVG or PNG format

• Simple line or outline icons

• Transparent background

Title

Title displayed below the icon.
Example shown: Thoughtful Care

Description

Short text describing the feature.
Keep the description concise and easy to read.

Recommended Content Structure

• Title: 2–3 words

• Description: 1–2 short lines

• Keep all feature descriptions similar in length for a balanced layout

 

Img & Carousel Products

Sanvi Beauty Theme

The Img & Carousel Products section combines a static image with a product carousel. This layout is ideal for highlighting a specific category or campaign while showcasing related products side by side.

Section Location

Online Store → Themes → Customize → Home page → Img & Carousel Products

Section Overview

This section displays:

• A large image on one side (left)

• A product carousel on the other side

• Products pulled from a selected collection

It is commonly used to promote featured categories such as Skin Care, Hair Care, or Beauty Care.

Section Settings

Color Scheme

Select a color scheme to control background, text, and button colors.
Managed from Theme Settings → Colors.

Left Side Image

Left side image
Upload the main visual image shown on the left side of the section.

Recommended image size:

• 900 × 1100 px

• Portrait orientation

• High-quality lifestyle or category image

Left Image Alt Text

Add alternative text for the image.
Used for accessibility and SEO purposes.

Example:
Model applying skincare product

Product Source Settings

Collection

Select the collection whose products will appear in the carousel.
Example shown: Skin Care

If left empty, all products will be displayed.

Maximum Products to Show

Controls how many products are displayed in the carousel.
Example shown: 12 products

Product Card Settings

Image Ratio

Controls product image proportions.
Example shown: Portrait

Image Shape

Defines the product image style.
Example shown: Default

Show Second Image on Hover

Displays the second product image when hovering over a product card.

Show Vendor

Displays the product vendor name on product cards.

Show Product Rating

Displays product review ratings if reviews are enabled.

Quick Add

Controls add-to-cart behavior:

• None

• Standard

Applies only to product cards.

Section Padding

Desktop Padding

• Top Padding

• Bottom Padding

Example shown: 36 px

Mobile Padding

• Top Padding

• Bottom Padding

Adjust padding to ensure balanced spacing across devices.

 

Divider

Sanvi Beauty Theme

The Divider section is used to visually separate different sections on a page. It helps create clear spacing, improves readability, and maintains a clean layout flow across the homepage.

Section Location

Online Store → Themes → Customize → Home page → Sanvi Divider

Section Purpose

The Sanvi Divider adds a subtle horizontal separation between sections without adding heavy visual elements. It is ideal for separating product sections, banners, or content blocks while maintaining a minimal and elegant design.

Section Settings

Width Type

Controls the width of the divider line.

• Page Width
  Divider aligns with the main page content width.

• Full Width (if available)
  Divider stretches across the entire screen.

Section Padding

Desktop Padding

• Desktop Top Padding
  Adds spacing above the divider.

• Desktop Bottom Padding
  Adds spacing below the divider.

Example shown: 20 px

Mobile Padding

• Mobile Top Padding
  Adds spacing above the divider on mobile devices.

• Mobile Bottom Padding
  Adds spacing below the divider on mobile devices.

Example shown: 20 px

 

Tabs Carousel Products

Sanvi Beauty Theme

The Tabs Carousel Products section allows you to showcase products in a slider format with multiple tabs. Each tab can display products from a different collection or a custom product selection, making it ideal for highlighting New Launches, Best Sellers, and Trending products.

Section Location

Online Store → Themes → Customize → Home page → Tabs Carousel Products

Section Overview

This section displays:

• A heading and optional description

• Multiple product tabs

• A product carousel inside each tab

Users can switch between tabs to explore different product groups without leaving the page.

Section Settings

Heading

Main title displayed at the top of the section.
Example:
Pick the best suitable products!

Description

Optional supporting text displayed below the heading.
Use this to explain the purpose of the product selection or highlight benefits.

Products Display Settings

Products per View (Desktop)

Controls how many product cards are visible at one time on desktop screens.
Example shown: 4 products

Products per View (Mobile)

Controls how many product cards are visible on mobile devices.
Example shown: 2 products

Color Scheme

Select the color scheme applied to the section background, text, and buttons.
Color schemes are managed from Theme Settings → Colors.

Product Card Settings

Image Ratio

Controls the shape of product images.
Example shown: Portrait

Recommended for beauty and skincare products.

Image Shape

Defines the card image style.
Example shown: Default

Show Second Image on Hover

When enabled, the second product image appears on hover (desktop only).

Show Vendor

Displays the product vendor name on the product card.

Show Product Rating

Displays product reviews rating if reviews are enabled.

Quick Add

Controls the add-to-cart behavior:

• None

• Standard

Section Padding

Top Padding

Adjust spacing above the section.

Bottom Padding

Adjust spacing below the section.

Default shown: 36 px (Top & Bottom)

Product Tab Block Settings

Each tab is added as a separate Product Tab block.

Tab Title

Text shown as the tab label.
Examples:

• New Launches

• Best Seller

• What’s Hot

Collection

Select the collection whose products will be displayed in this tab.
Example shown: Skin Care

Products (Optional)

Manually select specific products instead of using a collection.

If products are selected, they will override the collection.

Maximum Products to Show

Controls the total number of products displayed inside the tab carousel.
Example shown: 12 products

 

Carousel Collection

Sanvi Beauty Theme

The Carousel Collection section is used to showcase your main product categories in a horizontal slider format. It helps customers quickly explore key collections such as Skin Care, Hair Care, Beauty Care, and Wellness.

Section Location

Online Store → Themes → Customize → Home page → Carousel Collection

Section Overview

This section displays selected collections as image cards inside a carousel slider. Each card links to its respective collection page, allowing smooth navigation and category discovery.

Section Settings

Color Scheme

Color scheme
Select a color scheme for the section background, text, and controls.
This is managed from Theme Settings → Colors.

Section Content

Heading
Main heading displayed above the carousel.
Example: Explore Top Collections

Heading Alignment
Control the alignment of the heading:

• Left

• Center

• Right

Slider Settings

Show navigation arrows
Enable or disable left and right arrow controls for the carousel.

Collections per view (Desktop)
Set how many collection cards are visible at once on desktop screens.
Example shown: 4 collections

Collections per view (Mobile)
Set how many collection cards are visible on mobile devices.
Example shown: 2 collections

Slider Gap Settings

Gap between slides (Desktop)
Controls spacing between collection cards on desktop.
Example: 30 px

Gap between slides (Mobile)
Controls spacing between collection cards on mobile.
Example: 16 px

Section Spacing

Top padding (Desktop)
Adds space above the section on desktop.

Bottom padding (Desktop)
Adds space below the section on desktop.

Top padding (Mobile)
Adds space above the section on mobile.

Bottom padding (Mobile)
Adds space below the section on mobile.

Adjust padding to maintain consistent spacing between sections.

Collection Block Settings

Each collection displayed in the carousel is added as a separate block.

Collection

Select the collection you want to display.
Example: Skin Care

Custom Collection Image (Optional)

Upload a custom image instead of the collection’s featured image.

Use this when:

• You want consistent visual style across collections

• You want lifestyle images instead of product grid images

Custom Collection Name (Optional)

Override the default collection title with custom text.
Useful for shorter or more descriptive names.

If left empty, the original collection name will be displayed.

Recommended Image Guidelines

• Image size: 900 × 1100 px

• Use portrait-oriented images

• Keep subject centered

• Maintain consistent lighting and background style

 

Hero Slider

The Hero Slider is a full-width section used to highlight key brand messages, featured collections, new launches, or promotional campaigns. It appears at the top of the homepage and helps create a strong first impression for your beauty store.

Section Location

Online Store → Themes → Customize → Home page → Sanvi Hero Slider

Section Structure (As Shown in Images)

The Hero Slider section consists of:

• Slider-level settings (height, autoplay, controls, animation)
• Individual slide settings (images and links)

Slide Settings

Desktop Image

Upload the main image for desktop devices.

• Recommended size: 1600 × 700 px
• Use high-quality product or lifestyle images
• Keep main subject centered to avoid cropping

Mobile Image

Upload a separate image optimized for mobile devices.

• Recommended size: 900 × 1100 px
• If not provided, the desktop image will be used on mobile

Desktop Link

Set the link destination when the slide is clicked on desktop.

Common use cases:

• Product page
• Collection page
• Promotional landing page

Mobile Link

Set a separate link for mobile users if required.

If left empty, the desktop link will be used.

Slider Height Settings

Adapt to Image Height

When enabled, the slider height automatically adjusts based on the uploaded image size.

Recommended when:

• Your images are already well-optimized
• You want natural image proportions

Desktop Height (Fixed Mode)

Used when Adapt to image height is disabled.

• Controls the fixed height of the slider on desktop
• Example: 600 px

Recommended for:

• Consistent layout across slides
• Large hero visuals

Mobile Height (Fixed Mode)

Controls slider height on mobile devices.

• Example: 400 px
• Helps maintain proper spacing on smaller screens

Slider Controls

Show Navigation Arrows

Enable left and right arrows for manual slide navigation.

Recommended: Enabled

Show Pagination Dots

Displays dots indicating the number of slides.

Useful when:

• Multiple slides are used
• You want users to know slider length

Autoplay Settings

Enable Autoplay

Automatically transitions between slides.

Recommended: Enabled

Autoplay Delay

Time between slide transitions.

• Example shown: 7 seconds
• Ideal range: 5–7 seconds

Pause on Hover

Pauses autoplay when the user hovers over the slider.

Recommended: Enabled for better user control.

Animation Settings

Transition Speed

Controls how fast slides transition.

• Example: 600 ms
• Lower value = faster transition
• Higher value = smoother animation

Transition Effect

Choose how slides animate.

Available option shown:

• Fade

Fade transitions work best for beauty and lifestyle brands as they feel smooth and elegant.

Padding Settings

Desktop Top Padding

Adds spacing above the hero slider.

• Default: 0 px
• Increase if the slider feels too close to the header

Desktop Bottom Padding

Adds spacing below the hero slider.

• Default: 0 px
• Increase if you want more separation from the next section

 

---

Header Settings Panel

Online Store → Themes → Customize → Header

What you can control here:

• Logo position (Desktop & Mobile)
• Navigation menu selection
• Menu type (Dropdown)
• Sticky header behavior
• Header color scheme
• Utilities like country, language & account icon

Key Options Explained:

• Logo Position:
  Controls where your logo appears on desktop (Left / Middle-left)
• Mobile Logo Position:
  Center or Left alignment for mobile view
• Menu:
  Select your primary navigation menu
• Sticky Header:
  • On scroll up (recommended for beauty stores)
  • Keeps header visible while scrolling

Logo Settings Panel

Theme Settings → Logo

What you can set here:

• Desktop logo image
• Desktop logo width
• Mobile logo image
• Mobile logo width
• Favicon

Best Practices:

• Desktop width: 120–160 px
• Mobile width: 120–140 px
• Logo format: PNG / SVG
• Favicon size: 32×32 px

Color Schemes Panel

Theme Settings → Colors

What this section does:

Color schemes allow you to apply consistent colors across your entire store.

Available Options:

• Multiple predefined schemes
• Apply schemes to:
  • Header
  • Sections
  • Footer
• Add new custom color schemes

Recommended for Beauty Brands:

• Soft neutrals
• Pastels
• Nude & earthy tones
• Avoid harsh or neon colors

🌸 Tip:
Use one primary scheme and one accent scheme for CTAs.

Typography Settings Panel

Theme Settings → Typography

What you can customize:

Headings

• Font family
• Font scale

Body Text

• Font family
• Font scale

Best Typography Practice:

• Elegant fonts for headings
• Clean sans-serif for body text
• Keep font scale balanced for readability

 

Theme Installation

Sanvi Beauty Shopify Theme

This guide will help you install and activate the Sanvi Beauty Theme on your Shopify store quickly and easily.

Before You Start

Make sure you have:

• A Shopify store (Basic or higher plan)
• Sanvi Theme ZIP file (downloaded from Sanvi Themes)
• Admin access to your Shopify store

⚠️ Note: Do not unzip the theme file. Upload the ZIP file as it is.

Step 1: Upload the Theme

1. Log in to your Shopify Admin.
2. Go to Online Store → Themes.
3. Scroll down to the Theme library section.
4. Click Add theme → Upload zip file.
5. Select the Sanvi Beauty Theme (.zip) file.
6. Click Upload and wait for the process to complete.

Step 2: Publish the Theme

1. Under Theme library, find Sanvi Beauty Theme.
2. Click on the three dots (⋯) next to the theme.
3. Select Publish.
4. Confirm by clicking Publish again.

✨ Your store is now live with the Sanvi Beauty Theme.

Step 3: Open Theme Customizer

To start designing your store:

1. Go to Online Store → Themes.
2. Click Customize on the Sanvi Beauty Theme.
3. The theme editor will open where you can:
   • Upload your logo
   • Change colors & fonts
   • Customize homepage sections
   • Set up product & collection pages

Store Tips (Recommended)

• Upload a high-quality logo (PNG/SVG preferred)
• Use soft, clean color palettes for a premium beauty look
• Keep homepage banners minimal with strong product visuals
• Use lifestyle images for skincare & cosmetic products

Troubleshooting

Theme not uploading?

• Make sure the file is in .zip format
• Check your internet connection
• Refresh the page and try again

Changes not visible?

• Click Save after every change
• Clear browser cache or refresh the page

Introduction – Sanvi Beauty Theme

Welcome to Sanvi Beauty Theme, a modern and elegant Shopify theme specially designed for beauty, skincare, cosmetics, wellness, and personal care brands.

Sanvi Beauty Theme helps you create a visually stunning and conversion-focused online store that reflects the elegance, trust, and quality of your beauty brand. With its clean layouts, soft aesthetics, and powerful ecommerce features, you can showcase your products beautifully while delivering a smooth shopping experience across all devices.

---

Why Choose Sanvi Beauty Theme?

Sanvi Beauty Theme is built for brands that want more than just a website — it’s made for businesses that want to stand out in the beauty market.

• Designed specifically for beauty & cosmetic stores 
• Clean, minimal, and premium UI 
• Mobile-first and fully responsive design 
• Optimized for fast loading and smooth performance 
• Easy customization without any coding knowledge 

Who Is This Theme For?

Sanvi Beauty Theme is perfect for:

• Skincare & cosmetic brands 
• Hair care & personal care stores 
• Wellness & herbal product brands 
• Ayurvedic & organic beauty businesses 
• D2C beauty startups and premium brands 

Whether you are launching a new beauty brand or upgrading your existing store, Sanvi gives you the flexibility and elegance you need.

What You Can Build with Sanvi

With Sanvi Beauty Theme, you can easily create:

• A high-impact beauty homepage with hero banners & featured products 
• Professional product pages for skincare & cosmetic items 
• Clean collection layouts with filters & sorting 
• Conversion-optimized cart & checkout experience 
• Brand storytelling pages like About Us, FAQ & Blogs 

Built for Performance & Style

Sanvi Beauty Theme is crafted with a balance of aesthetics and performance:

• SEO-friendly structure 
• Lightweight and optimized code 
• Compatible with all major Shopify features 
• Smooth animations and modern layouts