Documentation

Colors Settings

Customize the look and feel of your store by configuring theme colors in the Theme Settings → Colors section. You can change background, text, button, and link colors to match your brand.

How to Change Theme Colors

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize for your active theme.
3. In the editor sidebar, click Theme Settings.
4. Choose the Colors section.
5. Adjust the following color options:

• Global

  Primary	Used for buttons, links, text selection color, progress bar and link hover.
  Secondary	Used for main buttons, active tab background, price range slider (e.g., Add to Cart, Buy Now).
  Success	Used in success messages or status labels (e.g., "Order placed successfully").
  Danger	Used in error messages, delete buttons, or warnings.
  Warning	Used for cautionary alerts, notifications, or statuses needing attention.

  
  

• Heading

  Headings Color	Applied to headings (h1–h6), section titles, and major UI text labels.

  
  

• Body

  Text Color	Default body text color across pages, product descriptions, footers, etc.

  
  

• Border

  Border Color	Used for dividers, card outlines, input field borders, etc.

  
  

• Background

  Background	Main page background (applied to body, containers, or sections).
  Background 2	Used in some sections background.

  
  

• Input

  Text color	Used for input text color.
  Placeholder Color	Used for input placeholder color.
  Border Color	Used for input border color.
  Background	Used for input background color.

  
  

• Collection card

  Text color	Used for collection card text color.
  Border Color	Used for collection card border color.
  Background	Used for collection card background color.
  Shadow	Used for collection card shadow color.

  
  

• Blog card

  Title color	Used for blog card title color.
  Text color	Used for blog card text color.
  Link color	Used for blog card link color.
  Border color	Used for blog card border color.
  Background	Used for blog card background color.
  Shadow	Used for blog card shadow color.
  Badge background	Used for blog card date badge background color.
  Badge color	Used for blog card date badge text color.

  
  

• Dropdown and pop-ups

  Text color	Used for dropdown text color.
  Border color	Used for dropdown border color.
  Background	Used for dropdown background color.
  Shadow	Used for dropdown shadow color.

  
  

• Drawer

  Background	Used for drawer background color.

General Settings

Configure foundational settings for your store’s layout and functionality using the General Settings panel. Below are the adjustable options with their purposes:

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → General.

Options Explained

1. Page Width: Adjust the overall container width (e.g., 1300px) to control the layout’s max width.
2. Wishlist: Enable or disable wishlist functionality for users to save favorite products and receive email reminders.
3. Terms and Conditions Checkbox: Toggle to display a checkbox during checkout with custom text, link, and content.
4. Lazyload Image: Improve page performance by loading images only when needed.
5. Hot Stock Function: Set a threshold to highlight low stock items (e.g., “Only 20 left in stock!”).
6. Trust Image: Add a trust badge image (e.g., secure checkout, quick delivery) with image upload support.

Buttons Settings

Customize the appearance and spacing of buttons across your store. These options ensure consistency and control over visual hierarchy.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Buttons.

Buttons Options

1. Border Thickness: Adjust the line thickness of the button border (e.g., 1px).
2. Corner Radius: Set the roundness of button corners (e.g., 0px for square, higher values for rounded edges).
3. Padding Top/Bottom: Control vertical spacing inside buttons to adjust height (e.g., 12px).
4. Padding Left/Right: Control horizontal spacing for button width and label padding (e.g., 30px).

Product Card Settings

These options allow you to customize the appearance and functionality of product cards in your store's collection pages.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Product Cards.

Product Card Options

Display Options

1. Show wishlist icon: Toggles visibility of the wishlist button on product cards.
2. Show quick view: Enables/disables the quick view functionality.
3. Show add to cart: Controls visibility of the add to cart button.
4. Show size variant: Displays available size options.
5. Show color variant: Displays available color options.
6. Show product vendor: Toggles visibility of the vendor name.
7. Show product review: Controls display of product ratings.
8. Show product price: Toggles price visibility.

Product Badges

1. Show Product Badges: Master toggle for all badge types.
2. Show New Badge: Displays "New" badges on qualifying products.
   1. New Badge Type: Dynamic or Manual selection
   2. New Badge Time Show: Duration to show as new (e.g., 15 days)
   3. New Badge Maximum Products: Limit of products to show as new (e.g., 30)
3. Show Sale Badge: Displays sale badges.
   1. Sale Badge Type: (percentage + Discount) / Text / (Text + percentage + Discount)
4. Show Soldout Badge: Indicates out-of-stock products.

Product Action

1. Corner radius: Controls button rounding (e.g., 0px for square corners).

Cart Button

1. Corner radius: Controls Cart button rounding (e.g., 0px for square corners).

Border

1. Thickness: Sets border width in pixels
2. Corner radius: Controls All Card rounding (e.g., 0px for square corners).

Image margin

1. Top margin: Space above image
2. Bottom margin: Space below image
3. Left margin: Space to image's left
4. Right margin: Space to image's right

Padding

1. Top padding: Inner top spacing
2. Bottom padding: Inner bottom spacing
3. Left padding: Inner left spacing
4. Right padding: Inner right spacing

Shadow

1. Horizontal offset: Shadow left/right position
2. Vertical offset: Shadow top/bottom position
3. Blur: Shadow softness
4. Opacity: Shadow transparency (0-100%)

Product Color Settings

These options allow you to customize the color scheme for product elements throughout your store.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Colors (Product).

Product Color Options

Product Card

1. Background color: Sets the card background (Default: Transparent)
2. Border color: Controls the border color (Default: Transparent)
3. Image background: Background behind product images (Default: #F4F4F4)
4. Shadow: Color of card shadow effects (Default: Transparent)

Product Title

1. Text color: Main title color (Default: #000000)
2. Text hover color: Title color on hover (Default: #005284)

Product Price

1. Text color: Price text color (Default: #000000)

Product Vendor

1. Text color: Vendor name color (Default: #DD2831)

Product Badges

1. New badge:
   1. Background: Badge fill color (Default: #005284)
   2. Text: Badge text color (Default: #FFF)
2. Sale badge:
   1. Background: Badge fill color (Default: #000000)
   2. Text: Badge text color (Default: #FFF)
3. Sold out badge:
   1. Background: Badge fill color (Default: #FFFFFF)
   2. Text: Badge text color (Default: #949494)

Product Action

1. Text color: Product Action icon color
2. Background color: Product Action background color
3. Border Color: Product Action border color
4. Text Hover Color: Product Action hover text color
5. Background Hover color: Product Action hover background color
6. Border Hover color: Product Action hover border color

Blog Cards Settings

These options allow you to customize the appearance of blog post cards throughout your store.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Blog Cards.

Blog Card Options

Card Style

1. Style selection:
   1. Style 1: Elegance Unveiled Style - Date-highlighted fashion posts with compact typography and excerpt preview.
   2. Style 2: Flawless Skin Style - Bold skincare guides with headline/subtitle structure and no excerpt.
   3. Style 3: Beauty Benefits Style - Minimalist product-focused cards with month headers and "Read More" CTAs.

Border Styling

1. Thickness: Sets border width (Default: 0px)
2. Corner radius: Controls card rounding (Default: 0px)

Spacing

1. Padding (top/bottom): Vertical inner spacing (Default: 30px)
2. Padding (left/right): Horizontal inner spacing (Default: 30px)

Shadow Effects

1. Horizontal offset: Left/right shadow position (Default: 1px)
2. Vertical offset: Top/bottom shadow position (Default: 1px)
3. Blur: Shadow softness (Default: 0px)
4. Opacity: Shadow transparency (Default: 1%)

Badge Settings

Customize the appearance of product badges including sale, new, and sold-out indicators.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Navigate to Theme Settings → Badges.

Badge Styling Options

Border

1. Corner radius: Controls the rounding of badge corners

Spacing

1. Padding (top/bottom): Vertical internal spacing
2. Padding (left/right): Horizontal internal spacing

Social Media Settings

Configure your store's social media accounts and sharing options to enhance customer engagement.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Social Media.

Social Media Options

Social Sharing Options

1. Share on Facebook: Enable/disable product sharing to Facebook
2. Share on Twitter (X): Enable/disable product sharing to Twitter/X
3. Share on Pinterest: Enable/disable product sharing to Pinterest

Social Accounts

1. Facebook: https://www.facebook.com/
2. Instagram: https://www.instagram.com/
3. LinkedIn: https://www.linkedin.com/company/shopify
4. YouTube: https://youtube.com/
5. TikTok: https://tiktok.com/@shopify
6. X/Twitter: https://x.com/shopify
7. Snapchat: https://www.snapchat.com/add/shopify
8. Pinterest: https://pinterest.com/shopify
9. Tumblr: https://shopify.tumblr.com
10. Vimeo: https://vimeo.com/shopify

Notify Me: Out of Stock Settings

Configure the back-in-stock notification system that lets customers sign up for product availability alerts.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. In the left sidebar, navigate to Theme Settings → Notify Me: Out of Stock.

Notification Settings

General Configuration

1. Show Notify Me: Out of Stock: Enable/disable the entire notification feature
2. Email Collection: System will collect and store customer email addresses for notifications
3. Form Title: Header text for the notification form (Default: "Back in stock alert")
4. Description: Explanatory text shown to customers (Default: "We will send you a notification as soon as this product is available again.")

Currency Format Settings

Configure how currency values and codes are displayed throughout your store.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Navigate to Theme Settings → Currency Format.

Currency Display Options

Currency Codes

1. Show currency codes: Toggle to display currency codes (e.g., USD, EUR) with prices
2. Display behavior: Codes will always appear in cart and checkout (Example: $1.00 USD)
3. Product pages: Optional display on product price tags

Newsletter Popup Settings

Configure your email collection popup to convert visitors into subscribers and customers.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Navigate to Theme Settings → Newsletter Popup.

Newsletter Popup Options

Activation Settings

1. Enable newsletter popup: Master toggle for the entire feature
2. Cookie duration: How long before showing again to same visitor (Default: 1 day)
3. Delay time: When popup appears after page load (Default: 3 seconds)

Content Configuration

1. Image: Background/side image selection (Browse free stock images)
2. Subtitle: Small header text (Default: "Newsletter")
3. Heading: Main promotional text (Default: "Sign up and get 20% off your first order")
4. Description: Supporting details (Matches heading by default)
5. Bottom info: Disclaimer text (Default: "Discount Only For First Time Subscribers")

Header - 1 Configuration

Customize your store's header appearance and functionality including navigation, icons, and menu labels.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Select Header from the top navigation.

Note: you can change header layout from theme settings.

Header Options

Main Header

1. Menu: Select main navigation menu
2. Background color: Main header background color
3. Show separator line: Toggle on/off
4. Sticky Header: Enable/disable

Region & Language

1. Country/region selector: Enable/disable (configure in Markets)
2. Language selector: Enable/disable (configure in Languages)

Header Icons

1. Customer accounts: Show/hide login icon
2. Cart: Show/hide cart icon
3. Search: Show/hide search icon

Wishlist

1. Show Wishlist Icon: Toggle on/off

Menu Typography

1. Font size: main menu font size
2. Font weight: main menu font weight
3. Letter spacing: main menu font size letter spacing
4. Text transform: main menu text transform
5. Text color: main menu text color
6. Text Hover Color: main menu text hover color
7. Menu alignment: main menu text alignment (Left/Center/Right)

Sale Link

1. Label: Gradient link label text
2. URL: Gradient link url
3. Position: link position (Left/Center/Right)

Dropdown

1. Background color: Header menu dropdown background color
2. Font size: Header menu items font size
3. Font weight: Header menu items font weight
4. Text transform: Header menu items text transform
5. Text color: Header menu items text color
6. Text Hover Color: Header menu items text hover color

Dropdown menu title

1. Font size: Dropdown mega menu title font size
2. Font weight: Dropdown mega menu title font weight
3. Text transform: Dropdown mega menu title text transform
4. Text color: Dropdown mega menu title text color
5. Text Hover Color: Dropdown mega menu title text hover color

Menu Labels

Note: Add the menu item name in the field where you want to add the label.

1. New label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color
2. Sale label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color
3. Hot label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color

Header - 3 Configuration

Customize your store's header appearance and functionality including navigation, icons, and menu labels.

How to Access

1. Go to Online Store → Themes.
2. Click Customize on your active theme.
3. Select Header from the top navigation.

Note: you can change header layout from theme settings.

Header Options

Main Header

1. Menu: Select main navigation menu
2. Background color: Main header background color
3. Show separator line: Toggle on/off
4. Sticky Header: Enable/disable

Region & Language

1. Country/region selector: Enable/disable (configure in Markets)
2. Language selector: Enable/disable (configure in Languages)

Header Icons

1. Customer accounts: Show/hide login icon
2. Cart: Show/hide cart icon
3. Search: Show/hide search icon

Wishlist

1. Show Wishlist Icon: Toggle on/off

Header top info

1. Background color: Header top background color
2. Text color: Header top text color
3. Border color: Header top border color
4. Border bottom: Header top border bottom visibility

Header searchbar

1. Enable Search bar: Show/Hide header top search bar
2. Background: Header top search bar background color
3. Text color: Header top search bar input text color
4. Placeholder Color: Header top search bar input placeholder color
5. Border color: Header top search bar input border color
6. Border width: Header top search bar input border width
7. Border radius: Header top search bar input border radius
8. Button background: Header top search bar input right side search button background color
9. Button text color: Header top search bar input right side search button text color

Menu Typography

1. Font size: main menu font size
2. Font weight: main menu font weight
3. Letter spacing: main menu font size letter spacing
4. Text transform: main menu text transform
5. Text color: main menu text color
6. Text Hover Color: main menu text hover color
7. Menu alignment: main menu text alignment (Left/Center/Right)

Sale Link

1. Label: Gradient link label text
2. URL: Gradient link url
3. Position: link position (Left/Center/Right)

Dropdown

1. Background color: Header menu dropdown background color
2. Font size: Header menu items font size
3. Font weight: Header menu items font weight
4. Text transform: Header menu items text transform
5. Text color: Header menu items text color
6. Text Hover Color: Header menu items text hover color

Dropdown menu title

1. Font size: Dropdown mega menu title font size
2. Font weight: Dropdown mega menu title font weight
3. Text transform: Dropdown mega menu title text transform
4. Text color: Dropdown mega menu title text color
5. Text Hover Color: Dropdown mega menu title text hover color

Menu Labels

Note: Add the menu item name in the field where you want to add the label.

1. New label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color
2. Sale label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color
3. Hot label:
   1. Label style: Style 1/Style 2
   2. Application Levels:
      1. Level 1: Applies to primary menu items
      2. Level 2: Applies to first dropdown level
      3. Level 3: Applies to nested submenu items
   3. Text color: Menu label badge text color
   4. Background color: Menu label badge background color

Blog Listing Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Blog listing

General Settings

1. Background color: Applies to the entire blog section
2. Layout width: Controls container vs full-width display
3. Blog selection: Choose between "Blog" or "News" content

Heading Section

1. Title text: Main heading (e.g., "Latest Stories")
2. Typography: Applies to the section heading
3. Bottom spacing: Controls gap below heading

Post Cards

1. Content elements: Toggle date/author/excerpt/read more
2. Image handling: Controls how images are displayed
3. Posts per page: Limits number of visible articles

Grid Layout

1. Desktop columns: Sets 2-column grid on large screens
2. Tablet columns: Choose 1 or 2 columns
3. Mobile columns: Choose 1 or 2 columns

View All Button

1. Button label: Custom text (e.g., "View all posts")
2. Link destination: Typically links to blog index
3. Visibility: Hide by leaving label blank

Section Spacing

1. Desktop padding: Top and bottom spacing
2. Mobile padding: Reduced spacing for mobile

Brands Slider Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Brands Slider

General Settings

1. Background color: Applies to the slider container (#FFFFFF)
2. Layout width: Choose between container or full-width display

Slider Behavior

1. Autoplay: Enables automatic sliding
2. Autoplay delay: Sets pause duration between slides
3. Visible items: Configure number of brands shown (desktop/tablet/mobile)
4. Space between: Adjusts gap between brand logos

Brand Display

1. Border: Toggles borders around brand logos
2. Item height: Controls overall logo container size
3. Image height: Adjusts logo scaling within container

Section Spacing

1. Desktop padding: Top/bottom spacing (0px by default)
2. Mobile padding: Adjusted spacing for smaller screens (0px by default)

Blocks

Brand Configuration

1. Brand image: Upload logo (supports PNG, JPG, SVG)
2. Brand url: Set click destination URL

Category Listing 1 Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Category Listing 1

General Settings

1. Background color: Applies to the entire section (#FFFFFF)
2. Layout width: Choose between container or full-width display

Collection Display

1. Text color: Default collection title color (#CCCCCC)
2. Hover color: Title color on hover (#000000)
3. Border style: 3px solid border (#000000)

Typography

1. Font family: Uses heading font
2. Font size: Responsive scaling (90px desktop → 30px mobile)
3. Text styling: Medium weight, capitalized, 0px letter spacing

Spacing

1. Internal spacing: 50px top/bottom, 70px left/right around items
2. Desktop padding: 100px top/bottom section spacing
3. Mobile padding: 30px top/bottom reduced spacing

Blocks

Collection

1. Select image: Upload collection cover image (e.g., Tops.png)
2. Title: Enter collection name (e.g., "Tops")
3. Link: Set collection page destination

Category Slider Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Category Slider

General Settings

1. Background: White (#FFF) section background
2. Layout: Container or full-width display
3. Card styling:
   • Light gray inner background (#FSFSFS)
   • 10px rounded corners
   • Responsive padding (40px desktop → 15px mobile)

Heading Section

1. Title: "What's Hot" (customizable)
2. Typography:
   • Heading font family
   • Medium weight, 0px letter spacing
   • Responsive sizing: 28px → 18px
3. Bottom spacing: 25px desktop → 15px mobile
4. "View All" link:
   • Black (#000000) text
   • Customizable label and URL

Card Design

1. Layout:
   • White (#FFF) card background
   • 10px border radius
   • Responsive padding (30px/25px desktop → 20px/15px mobile)
2. Category title:
   • Black (#000000) semi-bold text
   • 24px → 18px responsive sizing
   • Heading font family
3. Description:
   • Gold (#EFAC56) body text
   • Fixed 15px size across devices

Slider Behavior

1. Autoplay: 3 second delay between slides
2. Visible items:
   • 4 (desktop)
   • 2 (tablet)
   • 1 (mobile)
3. Item spacing: 20px between cards
4. Section padding: 100px top/bottom desktop → 40px mobile

Blocks

Branding Elements

1. Logo Image: Upload brand/collection logo
2. Logo width: Set display width (default: 120px)
3. Category Name: "Collection" (editable label)
4. Category Image: Main collection image

Content Configuration

1. Title: Collection name display
2. Description: Add collection description text
3. Link: Set destination URL

Custom Liquid Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Add a new section and select Custom Liquid

Liquid Code Implementation

1. Code editor: Insert custom Liquid code snippets
2. Usage examples:
   • Create dynamic content
   • Add app integrations
   • Build custom functionality

Section Spacing

1. Top padding: 40px default spacing
2. Bottom padding: 52px default spacing

Email Signup Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Email Signup

General Settings

1. Background color: White (#FFF) section background
2. Layout width: Container or full-width display
3. Image column:
   • 6 columns (desktop/tablet)
   • Full-width on mobile (12 columns)
4. Image selection: Choose from free library or upload custom

Content Layout

1. Text column:
   • 5 columns (desktop)
   • 6 columns (tablet)
   • Full-width on mobile (12 columns)

Text Content

1. Subtitle: "Subscribe Now" (customizable)
   • Body font, 20px → 14px responsive sizing
   • Normal weight, capitalized
   • Black (#000000) text
2. Main title: "Join our newsletter..."
   • Heading font, 45px → 22px responsive sizing
   • Normal weight, capitalized
3. Description: Additional text (optional)
   • Body font, 16px → 14px sizing
   • Normal weight

Form Styling

1. Input field:
   • Black (#000000) text
   • Gray placeholder (#67697E)
   • Light gray border (#DEDEDE)

Section Spacing

1. Desktop padding: 100px top/bottom
2. Mobile padding: 30px top/bottom

Featured Product Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Featured Product

Product Configuration

1. Product selection: Choose any product from your catalog
2. Background style: Select from predefined backgrounds
3. Layout width: Container or full-width display

Image Display

1. Main image layout: Slider or static display
2. Hover effects: External zoom animation option
3. Navigation arrows: Toggle visibility for desktop/mobile

Thumbnail Settings

1. Visibility: Show/hide thumbnails (desktop & mobile)
2. Position: Left/right/bottom alignment
3. Image sizing:
   • 120% portrait aspect ratio
   • 70px fixed width

Additional Features

1. Product tabs: Enable/disable informational tabs

Section Spacing

1. Desktop padding: 100px top and bottom
2. Mobile padding: 30px bottom spacing

Blocks

Badge

1. Space bottom: Badge desktop space bottom
2. Space bottom tablet: Badge tablet space bottom
3. Space bottom mobile: Badge mobile space bottom

Vendor

1. Text color: #515151 (dark gray)
2. Heading: Enter your headline content
3. Font family: Heading font
4. Font size:
   • Desktop: 16px
   • Tablet: 16px
   • Mobile: 14px
5. Font weight: Medium
6. Letter spacing: 0px (default)
7. Text transform: Capitalize (First Letters Uppercase)
8. Space bottom: 6px (consistent across all devices)

Title

1. Text color: #000000 (black)
2. Font family: Heading font
3. Font size:
   • Desktop: 28px
   • Tablet: 24px
   • Mobile: 20px
4. Font weight: Semi bold
5. Letter spacing: 0px
6. Text transform: Capitalize
7. Space bottom: 10px (all devices)

Meta

1. Space bottom:
   • Desktop: 20px
   • Tablet: 20px
   • Mobile: 15px
2. Show Review: Toggle review display
3. Sold In Last Function: Toggle sales activity display
4. Number Of Products Options: 3,5,6,7,8,10,12,15
5. Time Period Options: 10,15,16,17,18,20,25,35 hours
6. Text color: #FF4B43 (red accent)

Price

1. Font size:
   • Desktop: 28px
   • Tablet: 24px
   • Mobile: 18px
2. Space bottom:
   • Desktop: 25px
   • Tablet: 20px
   • Mobile: 15px
3. SKU Display: Toggle product code visibility

Seprator

1. Space above separator: 30px
2. Space below separator: 30px
3. Separator style:
   • Dashed
   • Solid
4. Separator color: #999 (medium gray)

Quantity selector

1. Space below selector:
   • Desktop: 20px
   • Tablet: 15px
   • Mobile: 15px
2. Inventory status: Toggle stock level display

Hot Stock

1. Space below Hot Stock indicator:
   • Desktop: 25px
   • Tablet: 25px
   • Mobile: 20px

Variant picker

1. Display style:
   • Dropdown (select menu)
   • Swatch (visual buttons)
2. Swatch shape:
   • Circle
   • Square
   • None (text only)
3. Space below picker:
   • Desktop: 30px
   • Tablet: 25px
   • Mobile: 20px

Buy buttons

1. Show dynamic checkout buttons:
   • Displays preferred payment methods (PayPal, Apple Pay)
   • Configured through your payment settings
2. Show gift card information form:
   • Enables scheduling and personal messages
   • Only appears for gift card products
3. Space below buttons:
   • Desktop: 20px
   • Tablet: 20px
   • Mobile: 15px

Share

1. Label: "Need help" (editable text)
2. URL: Set destination link for support
3. Space below element:
   • Desktop: 10px
   • Tablet: 10px
   • Mobile: 10px

Tags

1. Space below tags:
   • Desktop: 30px
   • Tablet: 30px
   • Mobile: 20px

Trust Image

1. Show Trust Images: Show trust images
2. Image Label: Label above image
3. Custom Width: Image Custom Width
4. Space below tags:
   • Desktop: 30px
   • Tablet: 30px
   • Mobile: 20px

Image Banner 2 Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Image Banner 2

General Configuration

1. Background color: Set solid color for banner background

Image Configuration

1. Select image: Upload or choose banner image from library
2. Overlay enabled: Toggle color overlay on/off
3. Overlay color: Set color for image overlay
4. Overlay opacity: Adjust transparency level of overlay

Title Configuration

1. Title text: Enter main headline text
2. Font family: Choose font style for title
3. Font size: Set responsive sizes for desktop, tablet and mobile
4. Font weight: Adjust thickness of title text
5. Letter spacing: Control spacing between characters
6. Text transform: Set text capitalization style
7. Text color: Choose color for title text

Description Configuration

1. Description text: Enter supporting content text
2. Font family: Choose font style for description
3. Font size: Set responsive sizes for all devices
4. Font weight: Adjust thickness of description text
5. Letter spacing: Control spacing between characters
6. Text transform: Set text capitalization style
7. Text color: Choose color for description text

Button Configuration

1. Button label: Enter call-to-action text
2. Button link: Set destination URL
3. Button style: Choose from available button designs
4. Desktop padding: Adjust spacing around button (top, bottom, left, right)
5. Mobile padding: Adjust mobile-specific spacing around button

Image with Content Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Image with Content

Layout Configuration

1. Layout: Choose between Container or Full-width display
2. Enable row reverse: Toggle to reverse image/content order
3. Background: Set section background color
4. Background gradient: Apply gradient effect to background
5. Content background: Set separate background for text content area
6. Content background gradient: Apply gradient to content area

Image Configuration

1. Grid desktop: Set column width for desktop layout
2. Grid tablet: Set column width for tablet layout
3. Grid mobile: Set column width for mobile layout
4. Select image: Choose primary display image
5. Show image 2: Toggle secondary image display
6. Select Image 2: Choose alternate/secondary image
7. Image padding: Adjust spacing around images (top, bottom, left, right)

Content Configuration

1. Grid desktop: Set content column width for desktop
2. Grid tablet: Set content column width for tablet
3. Grid mobile: Set content column width for mobile
4. Content padding: Adjust spacing within content area
5. Content position: Choose horizontal alignment (Left/Center/Right)
6. Content alignment: Set text alignment within content area
7. Content max width: Control maximum width of text content

Subtitle Configuration

1. Sub title text: Enter small heading text
2. Font family: Choose font style
3. Font size: Set responsive sizes for all devices
4. Font weight: Adjust text thickness
5. Letter spacing: Control character spacing
6. Text transform: Set capitalization style
7. Text color: Choose text color
8. Space bottom: Set margin below subtitle

Title Configuration

1. Title text: Enter main headline
2. Font family: Choose font style
3. Font size: Set responsive sizes for all devices
4. Font weight: Adjust text thickness
5. Letter spacing: Control character spacing
6. Text transform: Set capitalization style
7. Text color: Choose text color
8. Space bottom: Set margin below title

Description Configuration

1. Description text: Enter detailed content text
2. Font family: Choose font style
3. Font size: Set responsive sizes for all devices
4. Font weight: Adjust text thickness
5. Letter spacing: Control character spacing
6. Text transform: Set capitalization style
7. Text color: Choose text color
8. Space bottom: Set margin below description

Button Configuration

1. Primary Button:
   • Button label: Set call-to-action text
   • Button link: Choose destination URL
   • Button style: Select from available designs
   • Space bottom: Adjust margin below button
2. Circle Button:
   • Button label: Set alternative button text
   • Button link: Choose destination URL
   • Text color: Set button text color
   • Background: Choose button background
   • Button position: Select placement (Top/Bottom)

Section Spacing

1. Desktop padding: Adjust top and bottom spacing for desktop
2. Mobile padding: Adjust top and bottom spacing for mobile

Instagram Feed Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Instagram Feed

General Configuration

1. Background color: Set section background color
2. Layout: Choose between Container or Full-width display
3. Style: Select between Style 1 or Style 2 design options

Heading Configuration

1. Heading text: Enter section title with optional HTML formatting
2. Font family: Choose heading font style
3. Text color: Set heading text color
4. Font size: 35px (desktop), 24px (tablet), 20px (mobile)
5. Font weight: Semi-bold thickness
6. Letter spacing: 0px between characters
7. Text transform: None (standard capitalization)
8. Space bottom: 50px margin below heading

Slider Configuration

1. Slide Auto Play: Enable/disable automatic sliding
2. Autoplay Delay: Set delay between slides (1 second)
3. Visible Items:
   • Desktop: Show 2 items
   • Tablet: Show 3 items
   • Mobile: Show 4 items
4. Space between: 5px gap between slides
5. Desktop section padding:
   • Top: 6px
   • Bottom: 7px
   • Left/Right: Custom values
6. Mobile section padding:
   • Top/Bottom: Custom values
   • Left/Right: Custom values

Blocks

Post

1. Post image: Display Instagram post image
2. Post url: Instagram post url

Marquee 2 Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Marquee 2

Color Configuration

1. Background color: Primary background color (#6C336F)
2. Background 2: Secondary background color (#FFFFFC)
3. Text color: Primary text color (#FFF)
4. Text color 2: Secondary text color (#6C336F)
5. Icon color: Primary icon color (#FFF)
6. Icon color 2: Secondary icon color (#6C336F)

Layout Configuration

1. Item height: Vertical height of marquee items (100px)
2. Space Between: Gap between scrolling items (50px)
3. Icon size: Dimensions of icons (30px)

Typography Configuration

1. Font family: Text font style (Heading font)
2. Font size: Responsive text sizing (35px desktop, 24px tablet, 16px mobile)
3. Font weight: Text thickness (Normal)
4. Letter spacing: Character spacing (0px)
5. Text transform: Capitalization style (Capitalize)

Blocks

Item

1. Title: Marquee item text
2. Link: Marquee item text url

Product Slider 1 Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Product Slider 1

General Configuration

1. Background color: Set section background color (#FFFFFF)
2. Layout: Choose between Container or Full-width display

Heading Configuration

1. Heading text: Enter slider title (e.g., "Explore even more")
2. Font family: Heading font style
3. Font size: 28px (desktop), 24px (tablet), 20px (mobile)
4. Font weight: Bold text
5. Letter spacing: 0px between characters
6. Text transform: Capitalize styling
7. Space bottom: 30px (desktop/tablet), 20px (mobile)

Collection Settings

1. Select collection: Choose which products to display
2. Products per page: Set number of products to load
3. View all label: Customize "Explore more" button text
4. View all link: Set destination URL for the button

Product Card Design

1. Image ratio: Control product image proportions
2. Text alignment: Left/Center/Right alignment for product info

Slider Controls

1. Slide Auto Play: Enable/disable automatic sliding
2. Autoplay Delay: Set transition timing between slides
3. Visible Items:
   • Desktop: Number of visible products
   • Tablet: Number of visible products
   • Mobile: Number of visible products
4. Space between: Adjust gap between product cards

Section Spacing

1. Desktop padding: 20px top, 100px bottom
2. Mobile padding: 45px top and bottom

Recently Viewed Products Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Recently Viewed Products

General Configuration

1. Background color: Set section background (#FFF)
2. Layout: Choose between Container or Full-width display

Heading Configuration

1. Heading text: Customize section title
2. Font family: Heading font style
3. Font size: Responsive sizing (28px tablet, 24px mobile)
4. Font weight: Set text thickness
5. Letter spacing: 0px between characters
6. Text transform: Capitalize styling
7. Space bottom: 30px margin below heading (all devices)

Slider Configuration

1. Slide Auto Play: Enable automatic rotation
2. Autoplay Delay: 3 seconds between slides
3. Visible Products:
   • Desktop: Show 4 items
   • Tablet: Show 3 items
   • Mobile: Show 2 items
4. Space between: 2px gap between products

Section Spacing

1. Desktop padding: 100px top and bottom
2. Mobile padding: 45px bottom

Slideshow Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Slideshow

Social Media Configuration

1. Show social media links: Toggle display of social icons
2. Note: Configure accounts in Theme Settings first

Navigation Elements

1. Scroll down button:
   • Toggle visibility
   • Customize button label ("Scroll Down")
2. Pagination:
   • Show/hide slide indicators
   • Text color: #C3C3C3 (inactive)
   • Active text color: #000000
   • Indicator width: 10px (inactive)
   • Active indicator width: 25px

Slider Controls

1. Slide Auto Play: Enable automatic slideshow
2. Autoplay Delay: 3 seconds between slides

Section Spacing

1. Desktop padding: 0px top and bottom
2. Mobile padding: 0px top and bottom

Blocks

Slide item

Content Layout

1. Content position: Left | Center | Right
2. Content alignment: Left | Center | Right
3. Content max width: 520px

Media Settings

1. Pagination text: Custom label (e.g., "Woman")
2. Images:
   • Desktop: Mask_group_22.jpg
   • Mobile: Mask_group_23.jpg
3. Overlay:
   • Color: #000000
   • Opacity: 5%

Subtitle Configuration

1. Text: Enter subtitle content
2. Font family: Body font
3. Font size: 18px (desktop), 16px (tablet), 14px (mobile)
4. Style: Normal weight, Uppercase
5. Colors: #000000 (desktop), #FFFFFF (mobile)
6. Spacing: 12px (desktop), 10px (tablet), 8px (mobile)

Title Configuration

1. Text: "Discover And Dress Up Your Style"
2. Font family: Heading font
3. Font size: 60px (desktop), 40px (tablet), 28px (mobile)
4. Style: Medium weight, Capitalize
5. Colors: #000000 (desktop), #FFFFFF (mobile)
6. Spacing: 30px (desktop/tablet), 15px (mobile)

Description Configuration

1. Text: Enter descriptive content
2. Font family: Body font
3. Font size: 16px (desktop/tablet), 14px (mobile)
4. Style: Normal weight, Capitalize
5. Colors: #000000 (desktop), #FFFFFF (mobile)
6. Spacing: 40px (desktop), 20px (tablet), 15px (mobile)

Button Configuration

1. Label: "Shop Collection"
2. Link: Set destination (e.g., "Tops")
3. Style: Secondary button design

Spotlight Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → Spotlight

General Configuration

1. Background color: Set section background (#FFF)
2. Layout: Choose between Container or Full-width display
3. Items per row:
   • Desktop: 3 items
   • Tablet: 2 items
   • Mobile: 1 item

Section Spacing

1. Desktop padding: 50px top and bottom
2. Mobile padding: 30px top and bottom

Blocks

Image

1. Select image: Offer Image
2. Link: Image url

FAQ Settings

How to Access

1. Go to Online Store → Themes
2. Click Customize on your active theme
3. Navigate to Sections → FAQ

General Configuration

1. Background color: #FFF (white)
2. Content max width: 640px
3. Content position: Left | Center | Right
4. Content alignment: Left | Center | Right

Heading Configuration

1. Heading text: "Have any questions?"
2. Font family: Heading font
3. Font size:
   • Desktop: 45px
   • Tablet: 40px
   • Mobile: 22px
4. Font weight: Bold
5. Text color: #000000 (black)
6. Space below: 20px (desktop), 10px (tablet/mobile)

Description Configuration

1. Description text: Enter FAQ introduction
2. Font family: Body font
3. Font size:
   • Desktop: 18px
   • Tablet: 16px
   • Mobile: 14px
4. Text color: #666666 (medium gray)
5. Space below: 30px (desktop), 20px (tablet/mobile)

Section Spacing

1. Desktop padding: 100px top and bottom
2. Mobile padding: 40px top and bottom

Blocks

FAQ Item

1. Tab title: "General Questions" (group heading)
2. FAQ title: "What is Shopify, and how does it work?" (question text)
3. FAQ content:

   "Shopify is an eCommerce platform that allows you to create and manage an online store. It provides tools for designing your website, adding products, processing payments, and handling orders—all in one place."

   (answer content)