How To Access the Customizer ?

Access the Customizer: Start by logging into your website's admin panel. From the dashboard, navigate to "Themes" and then select "Customize". This will open up the theme customizer.

Theme Settings :

Logo

• Uploading a Logo for Header from Theme Settings: (Logo must be .svg file)
• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Logo" section. Select Logo option.
• Upload Logo for Header: Under the logo settings, you'll likely find an option for the header logo. Click on the "Logo Header" to upload the logo for header. 
• Save Changes and Preview: Once you're satisfied with the header logo setup, click the "Save" button to save your changes and preview. 

Layout

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Layout" section. Select Layout option.
• Choose Container Layout: In the Layout section, you will find an option that specifies the current layout. It might be set to one of the layouts “Box Width Layout” or “Full Width Layout”. Select the desired layout you want to switch to.
  
  // Add Theme Styles Setting
  
• Save Changes and Preview: Once you're satisfied with the theme layout setup, click the "Save" button to save your changes and preview.

Typography

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Typography" section. Select Typography option.
• Headings Font Family: Within the "Typography" section, find the ‘Heading’ section for customizing the font family used for headings. Choose Font Family according to your preferences by selecting a font family from a list of available fonts.
  
  Below the font family selection, you'll likely find separate options for adjusting the font sizes of page title, section title etc. . This allows you to control the relative font sizes for different levels of headings. Adjust the font size using the provided input field to set the desired font sizes for your headings.
• Body Font Family: Within the "Typography" section, find the ‘Body’ section for customizing the font family used for body text. Choose Font Family according to your preferences by selecting a font family from a list of available fonts.
  
  Below the font family selection, you'll likely find separate options for adjusting the font sizes of body text and caption text etc. This allows you to control the font size for body text. Adjust the font size using the provided input field to set the desired font size.
• Save Changes and Preview: Once you're satisfied with the font settings applied to the theme, click the "Save" button to save your changes and preview.

Colors

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Colors" section. Select Colors option.
• Choose a Color Scheme: In the "Colors" section, you'll see a list of predefined color schemes. The theme allows customization of individual color elements.
  
  Browse through the available color schemes to see how they change the appearance of different elements on the website.The theme allows for more granular customization, to change specific color elements. These could include background colors, text colors, link colors, button colors, and more. Click on the relevant option to make adjustments. The theme offers a color picker, click on it to open the color selection tool. Use the color wheel, sliders, or input fields to choose your preferred colors. You can also enter specific color codes (hex, RGB, etc.) if you have a particular color in mind.
• Save Changes and Preview: Once you're satisfied with the color scheme applied to the theme, click the "Save" button to save your changes and preview. 

Search

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Search" section. Select Search option.
• Search Results Customization: Inside the customization interface, look for the section labeled "Search only". This section is where you'll be able to configure how search results are displayed.
  
  Within the "Search only” section, you'll come across a dropdown menu. This dropdown menu offers various options for refining search results. The options are as follows:
  
• • "Product"
  • "Product and Pages"
  • "Product and Articles"
  • "Product, Articles and Pages"
    
    Click on the dropdown to reveal the available options. Select the option that best matches what you're searching for. The options provided in the dropdown determine the scope of search results you'll see.
    

Understanding Dropdown Options

• Product: Selecting this option will narrow down search results to show only product-related content.
• Product and Pages: This option will display search results that include product-related content as well as pages on your website.
• Product and Articles: Choosing this option will show search results containing product-related content and articles.
• Product, Articles and Pages: This option provides the broadest search scope, including product-related content, articles, and regular pages.
• Save Changes and Preview: Once you're satisfied with the results, click the "Save" button to save your changes and preview.

Perform a search to see how the chosen scope of results affects what is displayed in the search results page.

Favicon

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Favicon" section. Select Favicon option.
• Choose Favicon Image: This option controls the image that appears as the site's favicon, typically displayed in browser tabs and bookmarks. Click on the "Favicon" option to open the settings. You'll likely see a space for uploading a favicon image. Upload or Select Image (usually a square image of a small size, often 16x16 pixels or 32x32 pixels).
• Save Changes and Preview: Once you're satisfied with the favicon setup, click the "Save" button to save your changes and preview. 
  

Buttons

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Buttons" section. Select Buttons option.
• Button Customization: Inside the customization interface, there is CSS customization available for border thickness, corner radius, button opacity and button shadow properties.
• Save Changes and Preview: Once you're satisfied with the button styles, click the "Save" button to save your changes and preview. 
  

Social Media

• Navigate to Theme Settings: Inside the customizer, you'll find a list of customization options on the left-hand side. Look for or click on the "Social Media" section. Select Social Media option. This is where you can configure the links to your various social media accounts.
• Add URLs: There you’ll find a list of input fields or  designated areas where you can paste the URL of your corresponding social media profile. Make sure you're copying the URLs of your official social media accounts.  
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

Badges

• Locate the Badges Section: Inside the customizer, search for the "Badges" section. This is where you can customize the appearance of badges on your product images.
• Badge Customization Options: Within the "Badges" section, you'll find options to adjust the badge color and the badge text color. Badges are typically used to highlight sale items, new arrivals, or other special promotions on product images.
• Badge Color / Badge Text Color : Look for the option labeled "Sale Badge Color" or  "Sale Badge Text Color" . Click on this option to open the color picker or color selection tool. Use the color picker -  to select the desired color for the badge itself (this color will be applied to the background of the badge that appears on top left or top right corners of product images) or to choose the color for the text displayed within the badge (this color will be applied to the text displayed within the badge).
• Preview on Product Cards: Navigate to your product card sections to see how the customized badges appear on the product images.  If you find that the badge colors clash with your overall design or are hard to read, you can return to the customizer to make further adjustments.
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

Product Cards

• Locate Product Card Settings: Inside the customizer, look for the "Product Card" section. This is where you can adjust how your product cards appear on your website.
• Product Card Style: Continue within the "Product Card" settings to find the "Product Card Style" option. Click on this option to choose any of the available styles: "Slider," "Hover Effect," or "Default." This will determine how your product cards are displayed on your website.
• Enable Swatches: Check for an option labeled "Enable Swatches". If you want to display color swatches on your product cards, make sure this option is enabled.
• Enable Product Description: Look for the "Enable Product Description" option. If you want to show product descriptions on the product cards, enable this option.
• Enable Product Price Range: If you wish to display price ranges for products with variable prices, find the "Enable Product Price Range" option and enable this option.
• Text Alignment: Continue to the "Text Alignment" option. Choose how you want the text (such as title and price) within the product cards to be aligned—left, center, or right.
  
  Also, there are other CSS customization available for border thickness, corner radius, shadow properties.
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

Blog Cards

• Locate Blog Card Settings: Inside the customizer, search for the "Blog Card" section. This is where you can adjust how your blog cards are presented on your website.
• Text Alignment: Continue within the "Blog Card" settings to locate the "Text Alignment" option. From the available alignment options—left, center, or right—choose how you want the text content within the blog cards to be aligned.
  
  Also, there are other CSS customization available for border thickness, corner radius, shadow properties.
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

Collection Cards

• Locate Collection Card Settings: Inside the customizer, look for the "Collection Card" or "Collection Display" section. This is where you can adjust how your collection cards are presented on your website.
• Text Alignment: Continue within the "Collection Card" settings to locate the "Text Alignment" option. Click on this option to reveal alignment choices. From the available alignment options—left, center, or right—choose how you want the text content within the collection cards to be aligned.
  
  Also, there are other CSS customization available for content & border,  shadow properties etc. 
• View Collection Cards: To see how the customized collection card settings impact your website, navigate to a collection card section or collection page where collection listings are displayed.
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

Cart

• Locate Cart Settings: Inside the customizer, find the "Cart" section. This is where you can adjust how your cart is displayed and configured.
• Cart Type: Within the "Cart" settings, look for the option labeled "Cart Type." Click on this option to reveal a dropdown menu.  Open the dropdown menu and select either "Drawer" or "Page" based on your preference. This will determine how the cart is displayed to users—either as a drawer that slides out or as a separate cart page.
• Enable Cart Note: Continue within the "Cart" settings to locate the "Enable Cart Note" option. If you want to allow customers to include a note with their order, enable this option.
• Free Shipping Amount: Look for the "Free Shipping Amount" setting. If you offer free shipping for orders above a certain amount, enter that threshold here. 
• Save Changes and Preview: Click the "Save" button to save your changes and preview.

App Installation & Implementation

Shopify search & Discovery

Installation

Log in to your Shopify admin panel.

1. From the Shopify admin dashboard, click on the "Apps" tab located in the left-hand sidebar.

2. In the Apps section, click on the "Visit Shopify App Store" button to access the Shopify App Store.

3. In the search bar at the top, type "Shopify Search and Discovery" and press Enter or click the search icon.

4. Look for the "Shopify Search and Discovery" app in the search results and click on it to view the app details.

5. Review the app's features, pricing, and ratings to ensure it meets your requirements. If you're satisfied, click the "Add app" button.

6. Follow the on-screen instructions to install the app and grant necessary permissions.

Once the app is installed, return to your Shopify admin panel.

Implementation

Log in to your Shopify admin panel.

1. From the Shopify admin dashboard, click on the "Online Store" tab located in the left-hand sidebar.

2. In the Online Store section, click on the "Navigation" tab.

3. On the Navigation page, scroll down to the "Collection and search filters" section. 

4. Look for the Shopify Search and Discovery option and click on the "Open" or "Configure" button next to it.

5. This will open the settings or configuration panel for the Shopify Search and Discovery app.

6.Within the app settings, you should find options to manage and configure the filter options.

7. Depending on the capabilities of the app, you may be able to customize various filter attributes such as tags, product properties, collections, price ranges, etc.

8. Configure the desired filter options according to your store's needs. You can enable/disable specific filter attributes, rearrange their order, or set other preferences provided by the app.

Save your changes within the Shopify Search and Discovery app.

9. Once you have configured the filter options, they should be automatically integrated into your store's search and discovery functionality, and customers will be able to use them to refine their product searches.

Creating Collection

Log in to your Shopify admin panel.

1. From the Shopify admin dashboard, click on the "Products" tab located in the left-hand sidebar.

2. In the Products section, click on the "Collections" tab.

3. On the Collections page, check the top right side of the page and click the "Create collection" button .

• Please note: Automated Collection: An automated collection uses predefined conditions to automatically include products that match specific criteria. You can set conditions based on product tags, titles, types, vendors, etc. When a product meets the specified conditions, it will be automatically added to the collection.
• Manual Collection: A manual collection allows you to manually select individual products to include in the collection.
• Conditions: Scroll down to the "Conditions" section of the collection editing page.
  Click the "Add condition" button to start configuring your conditions.
  In the first dropdown menu, select the attribute you want to use for your condition. You can choose from options like "Product title," "Product type," "Product vendor," "Product tag," and more.
  In the second dropdown menu, select the operator that matches the relationship you want to establish with the attribute. For example, if you selected "Product tag" as the attribute, you can choose "is equal to," "is not equal to," "contains," "does not contain," and so on.
  In the text box next to the operator, enter the value you want to match with the attribute. For instance, if you selected "Product type" as the attribute and "is equal to" as the operator, you can enter the specific product type you want to include in the collection.
  If you want to add multiple conditions, click the "Add another condition" button
  You can choose whether the conditions should match "any" or "all" of the selected attributes. The "any" option means that at least one of the conditions must be met for a product to be included, while the "all" option requires all the conditions to be met.
  Once you have added and configured the desired conditions, click the "Save" button to update the automated collection with the new conditions.

Creating Pages

Log in to your Shopify admin panel.From the Shopify admin dashboard, click on the "Online Store" tab located in the left-hand sidebar.

1. In the Online Store section, click on the "Pages" tab.

2. On the Pages page, click the "Add page" button.

3. Enter a title for your page in the "Title" field. This will be the name of the page that will be displayed on your website.

4. Add Content : Scroll down to the content section of the page editor. You will find a WYSIWYG (What You See Is What You Get) editor. Use this editor to add and format text, images, links, and other elements. Click on the editor and start typing or pasting your content. Use the toolbar provided to format text, add headings, create lists, insert images, and more.

Preview the content to see how it will appear on your page.
5. In the "Visibility" section, you can choose whether to publish the page immediately or schedule it for future publication. Select the desired option.

Once you have made the necessary changes, click the "Save" button to update the policy.

Creating Blogs

Log in to your Shopify admin panel.

• Navigate to "Online Store": From the admin dashboard, click on "Online Store" in the left-hand menu.
• Select "Blog Posts": Under the "Online Store" section, click on "Blog Posts." This will take you to the blog management page.
• Add a Blog: If you haven't created a blog yet, click on the "Manage blogs" button and then "Add blog." Give your blog a name and handle (a URL-friendly version of the name), and set the visibility to "Online" if you want it to be visible.
• Create a New Blog Post: After creating the blog, click on the "Add blog post" button.
• Enter Blog Post Details:
• • Title: Enter a title for your blog post.
  • Content: Use the content editor to create and format your blog post. You can add text, images, videos, and more.
  • Excerpt: Provide a brief summary or excerpt of your blog post. This may be displayed on blog listing pages.
  • Author: Select the author of the blog post. You can choose an existing staff member or create a new one.
  • Publication Date: Set the date and time when you want the blog post to be published.
  • Tags and Categories: Assign relevant tags and categories to help organize your blog posts and make them easier to find.
• Featured Image: Upload a featured image for your blog post. This image is often displayed on blog listing pages and at the top of your blog post.
• SEO Settings (Optional): If you want to optimize your blog post for search engines, you can enter an SEO title, meta description, and URL handle.
• Save or Publish: Once you've filled in all the necessary details, you can either save the blog post as a draft or click the "Publish" button to make it live on your website.
• View Your Blog Post: After publishing, you can view your blog post by clicking on its title in the blog posts list. You'll also be able to see how it looks on the live site.
• Edit and Manage: You can always go back to the blog posts section to edit, update, or manage your existing blog posts.

Adding Product with Variants

Log in to your Shopify admin panel.

• Navigate to "Products": From the admin dashboard, click on "Products" in the left-hand menu.
• Add a Product: On the Products page, click the "Add product" button.
• Enter Product Details:
• • Title: Enter the name of your product.
  • Description: Add a detailed description of the product.
  • Vendor: Specify the manufacturer or vendor of the product.
  • Product Type: Choose a category or product type that best describes the product.
  • Collection: Assign the product to a collection, if applicable.
  • Tags: Add relevant tags to help organize your products.
  • Add Images: Upload high-quality images of the product. You can add multiple images to showcase different angles or variations.
• Pricing and Variants:
• • Pricing: Enter the product's price.
  • Variants: Click on the "Add variant" button to create product variations.
• Create Variants:
• • Option: Choose the attribute you want to create variants for (e.g., size, color).
  • Values: Enter the different values for the chosen attribute (e.g., Small, Medium, Large for size).
  • Price and Inventory: Set the price, inventory quantity, and other variant-specific details.
• Edit and Manage: You can always go back to the products section to edit, update, or manage your existing products and their variants.

Color Swatches

Store page > Products(left hand side) > click on a product > scroll down to “Options” section > (if options not enabled, click “This product has options, like size or color” to enable options) > Give “Option Name” as “Color”(spelt correctly) and add color options. 

Using drag toggle on the left hand side, place the “Color” option at the bottom below all other options.

Colors need to be added for each variant, to add color swatches click “Edit” button on a variant 

Once at the variant page, scroll down to the “Metafields” tab to add the color code. This needs to be done for each and every variant to render color swatches on the “Single Product” page/section.

Custom Data

Adding color variant

1. Log in to your Shopify admin panel.

2. From the Shopify admin dashboard, click on the "Settings" tab located at the bottom left.

3. In the Settings section, click on the "Custom Data" tab.

4. Under the Custom Data tab, click on the "Variants" section.

5. Click on the "Add definition" button to create a new custom variant definition.

6. Now, to add a color variant for products, follow these steps:

1. In the "Definition Name" field, enter a name for the variant (e.g., "Color").
2. Set the "Type" as "Color" by selecting it from the dropdown menu.
3. Namespace & key == color.value
4. Select “One value” option. 
5. Save the changes by clicking the "Save" button.

Adding Product Features

To add dynamic features with images to each of the products for your Shopify Store, follow these steps:

Store Dashboard => Settings => Custom Data => Products Tab => Click on “Add Definition”

Set the following fields as follows:

Name: Product Features

Namespace & Key: custom.product_features

Select Type: Metaobject & List of Entries

For metaobject: Under “Reference” Select add definition

When creating your metaobject definition, complete the following steps:

Set “Name” as “Feature Item”
Click “Add field” => Select “File” option => File Name: Image, Select “One File” option and “Accept specific file types” selecting only “Images”, Click Add

Click “Add field” => Select “Single line text” option => File Name: Title, Select “One Value” optio, enable Required field, enable Use this field as display name, Click Add

Once you are done creating the definition with required fields, enable Storefronts  option in Access tab and Save

On your newly created “Product Features” metafield definition, enable Storefronts  option in Access tab and Save

Navigate to Dashboard => Products => Select required product => Scroll down to Metafields section => Click on Product Features field => Select Entries => Create new entry and fill in the required fields to add features to your product

Adding Product Information

To add dynamic information tabs with descriptions to each of the products for your Shopify Store, follow these steps:

Store Dashboard => Settings => Custom Data => Products Tab => Click on “Add Definition”

Set the following fields as follows:

1. Name: Product Info
2. Namespace & Key: custom.product_info
3. Select Type: Metaobject & List of Entries

For metaobject: Under “Reference” Select add definition

When creating your metaobject definition, complete the following steps:

1. Set “Name” as “Info Item”
2. Click “Add field” => Select “Single line text” option => File Name: info_title, Select “One Value” option, enable Required field, enable Use this field as display name, Click Add
3. Click “Add field” => Select “Multi line text” option => File Name: info_desc, Click Add
4. Once you are done creating the definition with required fields, enable Storefronts  option in Access tab and Save

On your newly created “Product Info” metafield definition, enable Storefronts  option in Access tab and Save

Navigate to Dashboard => Products => Select required product => Scroll down to Metafields section => Click on Product Info field => Select Entries => Create new entry and fill in the required fields to add additional informat tabs for your product

Adding pickup and delivery details

Log in to your Shopify admin panel.

1.   From the Shopify admin dashboard, click on the "Settings" tab located at the bottom left.

In the Settings section, click on the "Shipping and Delivery" tab.

2. On the "Shipping and Delivery" page, you will find options to manage your shipping and delivery settings. Follow these steps to set up local delivery and local pickup:

Setting up Local Delivery

1.  Under the "Local Delivery" section, click on the "Manage" button.

2.  In the Local Delivery settings, you can configure the following details:

3.  Delivery pricing: Set the delivery fee or choose to offer free delivery.

4.  Delivery area: Define the specific regions or postal codes where local delivery is available.

5.  Delivery schedule: Specify the days and time slots when local delivery is available.

6.  Delivery instructions: Add any additional instructions or policies related to local delivery. Customize the settings based on your business requirements.

7.  Save the changes by clicking the "Save" button. Setting up Local Pickup: Under the "Local Pickup" section, click on the "Manage" button. 

8.  In the Local Pickup settings, you can configure the following details:

9.  Pickup instructions: Add any instructions or policies related to local pickup.

10. Pickup locations: Specify the locations where customers can pick up their orders.

Customize the settings based on your business requirements. Save the changes by clicking the "Save" button. After completing these steps, your local delivery and local pickup settings will be configured in your Shopify store.

Adding Location

1.  Log in to your Shopify admin panel.

2. From the Shopify admin dashboard, click on the "Settings" tab located at the bottom left.

3.  In the Settings section, click on the "Locations" tab.

4.  On the "Locations" page, you can manage and add different physical locations for your business. To add a new location, follow these steps: In the Locations section, click on the "Add location" button. Once you have entered the necessary details, click the "Save" button to add the new location to your Shopify store.

Adding Store Details : Log in to your Shopify admin panel

1. From the Shopify admin dashboard, click on the "Settings" tab located at the bottom left.
   In the Settings section, click on the "Store Details" tab.
2. On the "Store Details" page, you will find different sections to update your store information. Here are the steps for each section:

Profile Section: Click on the "Profile" section within the "Store Details" tab.

3. Update your store's name by editing the "Store name" field. Provide your store's email address in the "Email address" field.
4. Optionally, you can add your store's phone number in the "Phone" field. Save the changes by clicking the "Save" button. Billing Information Section:
5. Click on the "Billing Information" section within the "Store Details" tab. Review and update your billing address if necessary.
6. Save the changes by clicking the "Save" button. Store Currency Section:

Click on the "Store Currency" section within the "Store Details" tab. From the "Currency" dropdown menu, select the currency that you want to use for your store's transactions. Save the changes by clicking the "Save" button.

Enabling Local Currency Formatting

To enable local currency formatting for multi currency functionality, follow these steps:

1. Navigate to Store settings > Payments tab > select and enable a payment provider
2. Navigate to Store settings > Markets tab > add required markets
3. Click on required market > under Market settings click on Products and Pricing

In new window click on ‘Show prices to customers in their local currency’

Navigation

Store Page > Sales Channel(left hand side) > Navigation

In the Menus section, the following menus need to be added using the “Add Menu” button, the links within can be changed

Adding Menu Items

To add menu items to your menus, perform the following steps:

1. In your Shopify admin panel, go to "Online Store" and then "Navigation."
2. Click on the menu to which you want to add items.
3. Click on the "Add menu item" button.
4. Enter a name for the menu item in the "Name" field.
5. Specify the destination URL for the menu item in the "Link" field.
6. Optionally, you can set the item as a dropdown by selecting a parent menu item from the "Parent item" dropdown list. 
7. Click on "Save menu" to add the menu item.

Organizing Menu Items

To organize and rearrange menu items within a menu, follow these steps:

1. In your Shopify admin panel, navigate to "Online Store" and then "Navigation."
2. Click on the menu you want to organize.
3. Drag and drop the menu items to rearrange their order.
4. If you want to create a nested menu (submenu), drag a menu item slightly to the right and drop it below another menu item. It will become a child item or submenu.
5. Click on "Save menu" to save the changes.

Linking Menus to Your Store

After creating and customizing your menus, you need to link them to your store's theme locations. To link a menu to a specific location, follow these steps:

1. In your Shopify admin panel, go to "Online Store" and then "Navigation."
2. Click on the menu you want to link.
3. Click on the edit button.
4. Click on  the Link input and select from  the dropdown menu list.

How to Customize Menu

To customize the menu in Shopify themes, follow the steps below:

Step 1: Access the Theme Editor

Log in to your Shopify admin panel and navigate to "Online Store" and then "Themes." Find the theme you want to customize and click on the "Customize" button. This will launch the Theme Editor.

Step 2: Navigate to the Menu Settings

In the Theme Editor, look for the section related to the menu. It may be labeled as "Header," "Navigation," or "Menu." Click on it to access the menu settings.

Step 3: Add a New Menu

If you want to create a new menu, click on the "Add a menu" button. Give your menu a name and save it.

Step 4: Configure the Menu Structure

Once you have created a menu, you can start adding menu items. You can add links to pages, collections, products, or external URLs. In the menu settings, you'll find an option to add a menu item. Click on it and provide the necessary information such as the name, URL, and link type. Repeat this step for each menu item you want to add.

Step 5: Organize the Menu

To organize the menu items, you can use drag and drop functionality. You can move the menu items up or down to change their order or nest them under other menu items to create submenus.

Step 6: Customize Menu Appearance

Depending on your theme, you may have options to customize the menu's appearance. Look for settings related to colors, fonts, spacing, and layout. Use these options to match the menu with your desired design.

Step 7: Save and Publish

After customizing the menu, make sure to save your changes. If you are satisfied with the modifications, click on the "Publish" button to apply the customized menu to your live store.

Step 8: Preview and Test

Before finalizing the changes, it's a good idea to preview your store to see how the customized menu looks on different devices and screen sizes. Additionally, test the menu by clicking on each link to ensure they navigate to the intended pages.

Section Settings

Newsletter Modal

Access Section Settings

Open Modal Settings:

Within the section, look for an option labeled "Modal". This is where you'll configure the modal.

Enable Modal:

Find the checkbox labeled "Enable Modal".

Switch it on to activate the modal feature.

Select Section Image:

Below the "Enable Modal" option, look for a setting related to the section image.

Click on the image selection area or a button labeled "Choose Image". Choose to either upload a new image or select one from your existing media library.

Save Changes:

Look for a "Save" button to confirm your modal and section image settings.

Header

• Access Header Group Settings: Navigate to the header customization section within your website or application.
• Configure Header Section: Within the Header Group, locate the section labeled "Header Section".

Here are the available customization options:

• Margin Bottom: Adjust the margin bottom for the Header Section as per your preference.
• Background Image: Upload or select a background image for the Header Section.
• Enable Sticky Header: Toggle on to enable the sticky header feature.
• Header Background Opacity: Set the opacity level for the header background.
• Header Background Blur: Adjust the blur effect for the header background.
• Header Background Color: Choose a specific color for the header background.
• Header Content Color: Select a color scheme for the content within the header.
• Enable Logo Overlay: Toggle on to apply an overlay to the logo on hover or when the header is sticky.
• Tag Icons: Upload or select images for tag icons. These will appear beside respective menu link items.
• Add Blocks for Mega Menu / Dropdown: Within the Header Group, you have the option to add blocks to further customize the mega menu or drop down menu for each menu link.

Customization Options

For each block, you can select the following customization options:

a. Assign to Menu Item

b. Top Panel Type

Choose from options like Map, Featured Blog, or Banner. This determines the type of content displayed on the Top Panel of the Mega Menu.

c. Bottom Panel Type

Select from options like none, default navigation, menu select, collection list, or contact information. This defines the type of content displayed on the Bottom Panel of the Mega Menu.

d. Mega Menu Top

Customize the Top Panel with the following options:

Top Panel Title

Select Article: If 'Top Panel Type' is 'Featured Article', please use this option.

Map Embed: If 'Top Panel Type' is 'Map', please use this option.

Featured Image: If 'Top Panel Type' is 'Banner', please use this option.

Banner Title: If 'Top Panel Type' is 'Banner', please use this option.

Banner Button URL: If 'Top Panel Type' is 'Banner', please use this option.

e. Mega Menu Bottom

Customize the Bottom Panel with the following options:

Bottom Panel Title

Featured Menu: If 'Bottom Panel Type' is 'Menu Select', please use this option.

Collections

Save Changes

Make sure to save the customization settings after you've configured the blocks for the Mega Menu or Dropdown.

Quick View

Navigate to the section or settings for Quick View in your website or application.

Open Modal Settings:

Within the Quick View section, look for an option labeled "Quickview" or similar. This is where you'll configure the modal appearance.

Adjust Modal Background Color:

Locate the setting related to "Modal Background Color" or similar.

Click on the color picker or input field to select a new background color for the modal.

Modify Modal Content Color:

Find the setting labeled "Modal Content Color" or similar.

Use the color picker or input field to choose a new color for the content within the modal.

Preview Changes:

If possible, preview your website to see how the Quick View modal looks with the new background and content colors.

Save Changes:

Look for a "Save" or "Apply" button to confirm the new modal colors.