Newsletter

What is a Newsletter Popup?

A Newsletter Popup is a modal window that appears on your website to encourage visitors to subscribe to your newsletter or mailing list. It typically features a form where users can enter their email address and optionally provide additional information such as their name or interests. The primary goal of the newsletter popup is to capture leads and build an email subscriber list for marketing purposes.

Steps to Set Up a Newsletter Popup in EliteTheme:

1. In the Shopify admin, go to Online Store > Themes and click Customize to enter the theme editor.
2. Navigate to the "Newsletter Popup" section.
3. Enable the newsletter feature by toggling the appropriate option.
4. Set the number of days after which the popup should reappear for returning visitors.
5. Choose the duration for when the popup should first appear after a visitor opens the site.
6. Add a heading for the newsletter popup and adjust its size using the available options.
7. Optionally, upload an image to be displayed below the heading in the popup.
8. For additional customization, use the custom CSS option to apply unique styles that align with your website’s design and branding.

Featured product

What is the Featured Product Section?

The Featured Product Section highlights a specific product prominently on your website. It is designed to showcase the product with larger images or special design features to attract attention, increase visibility, and encourage exploration or purchase.

How to Set Up a Featured Product Section:

1. Navigate to the template section in the theme editor and add the Featured Product Section. Customization options will appear on the right side of the screen.
2. Select the product you want to showcase as the featured item.
3. Choose a color scheme from the available options.
4. Adjust the media view to Narrow, Balanced, or Wide. Enable image zoom and configure settings such as hiding other variants’ media or enabling video looping if applicable.
5. Use the spacing slider to adjust the spacing above and below the section.
6. Optionally, apply custom CSS for additional styling and configure any other theme settings as needed.

Adding and Customizing Blocks:

1. Add blocks to the Featured Product Section, such as Offer, Content, Title, Price, SKU, Inventory Status, Variant Picker, Buy Buttons, Share, Custom Liquid, Product Rating, and Icon with Text.
2. Customize each block using the available options.

Collection list

What is a Collection List Section?

The Collection List section displays a customizable array of product collections. It allows you to configure the number of items displayed per row, item order, image sizes, and text formatting. This section helps visitors navigate and explore various categories or collections on your website, improving user experience and engagement.

How to Set Up a Collection List Section:

1. Navigate to the template section in the theme editor and add the Collection List Section. Customization options will be available on the right side of the screen.
2. Choose a color scheme for the collection list.
3. Set the heading and adjust its size to Small, Medium, or Large.
4. Select the ratio of dimensions for images: Adapt, Portrait, or Square-shaped.
5. Configure the grid layout for the desktop to display items per row. Enable the "View All" button if desired and turn on the option to display the count of products.
6. For the mobile interface, choose the grid layout with options for 1 column or 2 columns.
7. Use the spacing slider to fine-tune the spacing above and below the section.
8. Optionally, apply custom CSS for unique styling and configure any other theme settings as needed.

Adding and Customizing Blocks:

1. Add the Collection block to the section.
2. Customize each collection by uploading images, setting titles, and pasting or searching for links.

Rich text

What is a Rich Text Section?

A Rich Text Section is a versatile content block that allows you to add and format text, images, and multimedia elements on your online store. It is used to create engaging and visually appealing content, such as product descriptions, promotional banners, and informational pages.

How to Set Up a Rich Text Section:

1. Navigate to the template section in the theme editor and add the Rich Text Section. Customization options will be available on the right side of the screen.
2. Choose a color scheme for the rich text section.
3. Set the content alignment to Left, Center, or Right.
4. Adjust the section spacing above and below the content using the provided sliders.
5. Optionally, apply custom CSS for additional styling.

Adding and Customizing Blocks:

1. Add the Heading block and set the heading text and size (Small, Medium, or Large).
2. Include a Subheading and Summary if desired.

3. Add Buttons:

   • Main Button: Set the button label, URL, and style (Primary, Secondary, Outline).
   • Supportive Button: Set the button label, URL, and style (Primary, Secondary, Outline).

Image banner

What is an Image Banner Section?

An image banner section is a prominent design element often placed at the top of a webpage or within a layout. It features a visually appealing image or a series of images combined with text, buttons, or other elements. The goal of this section is to capture visitors' attention and effectively communicate key messages or branding information.

How to Set Up an Image Banner Section:

1. Navigate to the template section and add the "Image Banner" section.
2. Expand the section width to fit your design needs.
3. Upload the beginning image and any additional images. You can select images from your files or explore free image options.
4. Adjust the image transparency if needed.
5. Set the image height to Small, Medium, or Large.
6. Define the banner headline and position it according to your preference: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, or Bottom right.
7. Align the content to Left, Center, or Right.
8. Turn on or off the banner headline feature as needed.
9. Choose a color scheme for the banner section.
10. For mobile views, set the content alignment to Left, Center, or Right.
11. Adjust the spacing above and below the banner using the section spacing slider.
12. Optionally, add custom CSS to apply unique styles.

Adding and Customizing Blocks:

1. Add a heading block and customize the text and heading size (Small, Medium, or Large).
2. Add a text block to include a summary or subheading with style options such as Body, Subtitle, or Uppercase.
3. Configure buttons by adding a main button and supportive button. Set their labels, URLs, and styles (Primary, Secondary, Outline).

Slideshow

What is a Slideshow Section?

A slideshow section displays a series of images or slides in sequence on a website. It allows for visual presentation of information, ideas, or promotions. Slides can rotate automatically or be navigated manually, and this section is often used on homepages or landing pages to highlight products, services, or featured content.

How to Set Up a Slideshow Section:

1. Navigate to the template section and insert the "Slideshow" section.
2. Set the slide height to adapt to the first image or choose Small, Medium, or Large.
3. Enable auto-rotation and set the interval for slides to alternate.
4. Ensure content appears below images on mobile devices.
5. Apply custom CSS for unique styling if needed.

Adding Slide and Image Blocks:

1. Upload slide images or select from available options.
2. Adjust image overlay transparency.
3. Add a subheading and heading with size options (Small, Medium, Large).
4. Include main and supportive buttons with labels, URLs, and styles (Primary, Secondary, Outline).
5. Choose the content position (Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right).
6. Optionally enable a background for the content.
7. Choose and edit the color scheme.
8. Upload images and set content alignment (Left, Center, Right) for the mobile interface.
9. Select and edit the color scheme.
10. Now add the image block and upload or select an image.
11. Add a heading with size options (Small, Medium, Large).
12. Include a subheading if needed.
13. Add a button with label, URL, and alignment options (Left, Center, Right).

Feedback form

What is a Feedback Form Section?

A feedback form section allows visitors to submit inquiries, questions, or feedback directly through the website. It's a structured section for gathering customer input, providing a channel for communication, and can include additional features like a map for displaying location details.

How to Set Up a Feedback Form Section:

1. You can enable full-width display to make the feedback form stretch across the screen.
2. Select a color scheme to match the theme’s overall design. Customize all theme colors via the color theme settings.
3. Adjust upper and lower padding to control the space above and below the form.
4. Apply custom CSS if needed for advanced customization.

Adding the Feedback and Map Blocks:

1. Customize the heading to introduce the feedback form. Adjust heading size (Small, Medium, Large) to fit the design.
2. Provide a brief explanation in the field.
3. Align the content to the Left, Center, or Right based on the design preference.
4. Now in the map block, upload an image to display in case the map fails to load. Choose an image from your files or explore free image libraries.
5. Integrate Google Maps by entering API credentials for displaying location. This provides visitors with your business location or other relevant addresses.
6. Optionally, enable a grayscale filter for the map to create a unique visual effect.

Video

What is a Video Section?

A video section allows you to display a video on your website, either by hosting it directly on Shopify or embedding it from a platform like YouTube or Vimeo. This section is useful for showcasing brand stories, promotional content, or any other video material to engage visitors.

How to Set Up a Video Section:

1. Enable full-width display for the video section to maximize visibility.
2. Select a color scheme to align with your website's design. Edit all theme colors via the color theme settings.
3. Now make the video settings to play video on loop by enabling this option so that the video automatically repeats after finishing.
4. Upload a video directly to Shopify or embed a video from an external URL.
5. Enable autoplay so the video will start automatically, be muted, looped, and have controls disabled.
6. Choose whether to display video controls or not.
7. If embedding from an external source, such as YouTube or Vimeo, paste the video URL
8. Select an image to display as a cover for the video before it starts playing. You can upload an image from your files or explore free images.
9. Provide a description of the video for accessibility purposes, helping customers using screen readers understand the video content.
10. Adjust the spacing above and below the video section.
11. Apply custom CSS if needed for additional styling.

Content Blocks:

1. Add a heading and adjust the size (Small, Medium, Large).
2. Provide a brief description or context for the video.
3. Optionally include a button with a label and link (e.g., to a specific page or product).
4. Align content Left, Center, or Right.
5. Set the position of the content and the overlay transparency.

Blog posts

What is a Blog Highlights Section?

A Blog Highlights section showcases featured blog posts on your website, allowing visitors to engage with your content directly from a landing or homepage. This section typically includes a grid layout of blog articles, along with options for headings, display limits, and publisher details. It helps increase visibility for your blog and encourages visitors to explore further.

How to Set Up a Blog Highlights Section

1. Choose a color scheme to fit your website's aesthetic. You can edit all colors in the theme settings.
2. Create a section heading to introduce the content. Adjust the heading size to Small, Medium, or Large, depending on your design preference.
3. Select the blog content you want to display. Set how many blog posts to display.
4. Choose a grid layout to display the posts. This ensures a balanced and visually appealing arrangement.
5. Show the publication date for each blog post. Display the name of the blog author or publisher.
6. Activate the "View All" button if there are more posts available than the set limit, allowing users to view all blog posts.
7. Allow mobile users to swipe through blog posts for a better browsing experience.
8. Adjust the upper and lower spacing for the section to ensure proper alignment with the rest of the page.
9. Apply custom CSS for additional styling if needed, and adjust overall blog settings in the theme settings.

Custom liquid

What is a Custom Liquid Section?

A custom liquid section allows experienced developers to add personalized, dynamic content to a Shopify store by writing custom Liquid code. This powerful tool enables developers to extend the functionality of the theme, creating unique features that go beyond the standard sections. However, it’s important to note that making changes using Liquid can introduce risks, particularly when it comes to future theme updates, so it's recommended for developers with coding expertise.

Steps to Set Up a Custom Liquid Section:

1. In the Shopify admin, go to Online Store > Themes and click Customize to access the theme editor.
2. Add the Custom Liquid Section from the available options in the theme editor.
3. After adding the section, locate the customization options on the right-hand side.
4. In the provided field, insert your Liquid code. This can include custom logic, app snippets, or any advanced code to extend the functionality of your store.
5. Choose a color scheme for the custom liquid section from the five available options to match your store’s aesthetic.
6. Use the spacing slider to adjust the spacing above and below the section for better alignment with other elements on your store’s page.
7. Optionally, add custom CSS for further styling and personalization of the section.

Image with text

What is an Image with Text Section?

An "Image with Text" section is a content block that combines an image with accompanying text. It is used to present products, services, or featured content in a visually appealing way, enhancing engagement and communicating key messages effectively.

How to Set Up an Image with Text Section:

1. Navigate to the template section and add the "Image with Text" section.
2. Expand the section width according to your design preferences.
3. Upload your desired image and adjust the image height. Options include Small, Medium, or Large.
4. Choose a color scheme for the content area.
5. Move the content to the right or left, and set the content position to Top, Middle, or Bottom.
6. Align the content to the Left, Center, or Right.
7. For mobile views, adjust the content alignment to Left, Center, or Right.
8. Optionally, add custom CSS for unique styling.

Adding and Customizing Blocks:

1. Add a subheading and customize the text.
2. Add a heading and choose the size: Small, Medium, or Large.
3. Configure the main button with its label, URL, and style (Primary, Secondary, Outline).
4. Optionally, add a supportive button with its label, URL, and style (Primary, Secondary, Outline).

Email Signup

Email Signup

Page Component

What is a page component?

The page component section in a website refers to a designated area where specific pages or sections of content are displayed. These pages could include the home page, about us page, contact page, services page, and any other pages that provide essential information about the website or its offerings.

How to set up a page component?

1. Navigate to the template section and add the page section.
2. Choose the color scheme for the section. If needed, adjust the color scheme by accessing the color theme settings.
3. Choose the page you wish to display from the page options available.
4. Choose the desired heading size from the options provided .
5. Align the heading as per your preference (e.g., Left, Center, Right).
6. Finally, fine-tune the spacing above and below the section using the section spacing slider.
7. Optionally, utilize the option to add custom CSS for incorporating unique styles to the section.

Customer feedback

What is a Customer Feedback Section?

A customer feedback section is used to showcase reviews and testimonials from satisfied customers. This section helps build trust and credibility by highlighting positive experiences with your products or services. It typically includes a heading, customer review content, star ratings, and a call-to-action button.

How to Set Up a Customer Feedback Section:

1. Choose a color scheme to match the overall design of your website. You can customize these colors in the theme's color settings.
2. Adjust the upper and lower spacing of the section.
3. Add custom CSS for additional styling or layout adjustments to make the timer fit seamlessly with your theme.

Content and Feedback Blocks:

1. Add a heading for the section and adjust the heading size: Small, Medium, or Large, based on how prominent you want it to appear.
2. Provide a short description about the reviews or testimonials.
3. Select a button style: Primary, Secondary, or Outline and add a label for the button
4. Paste a link for the button to direct users to a page where they can read all reviews or leave their own.
5. Align the content to the Left, Center, or Right, depending on the design of your page.
6. Add as many feedback blocks you desire and select a color scheme to highlight the feedback section distinctly.
7. Add the feedback in the available field and add the writer's name and star rating for the feedback.

FA'Q Accordion

What is a FA'Q Accordion Section?

A FA'Q Accordion Section, commonly used for FAQs or information breakdowns, allows content to be hidden or revealed upon clicking a heading, creating a neat, organized layout. This section enhances user experience by keeping the page clean and focused, while still providing additional information when needed.

Steps to Set Up a Toggle Tabs Section:

1. In your Shopify admin, go to Online Store > Themes and click Customize to access the theme editor.
2. Add the Toggle Tabs Section to your page from the available section options.
3. On the right side of the editor, choose a color scheme from the available options to match your theme.
4. Adjust the upper and lower section spacing to control the padding around the toggle tabs.
5. If needed, add Custom CSS for unique styling of the section.

Adding Content to Toggle Tabs:

1. Add a Heading to the section, such as "FAQ’s," to indicate the purpose of the toggle tabs.
2. Select the heading size (Small, Medium, Large) and align it to the left, center, or right as required.
3. Include a summary to give users a brief introduction to the FAQs or the type of information provided.
4. You can add a button to the section for additional functionality.
5. Define the button label and paste the URL for the destination.
6. Select a button style from Primary, Secondary, or Outline based on the visual design and align the button to the left, center, or right as per your layout preferences.
7. Now add the collapsible row block and choose the color schemes to match the theme’s aesthetic or highlight certain sections.
8. Select the heading size for the collapsible row and align it to the left, center, or right as required.
9. Include a summary to give users a brief introduction of the type of information provided.
10. Use alignment and spacing settings to ensure the section fits seamlessly into the overall page design.

Text with icons

What is a Text with Icons Section?

A Text with Icons Section allows you to display important information accompanied by icons, adding visual emphasis and making the content more engaging. This section is ideal for showcasing key features, contact information, services, or benefits with a clear, icon-based visual aid next to the text.

Steps to Set Up a Text with Icons Section:

1. In your Shopify admin, go to Online Store > Themes and click Customize to enter the theme editor.
2. Add the Text with Icons Section to your page from the available section options.
3. On the right-hand side of the editor, customize the section settings by selecting a color scheme to match the design theme of your store.
4. Set the heading size (Small, Medium, or Large) and align it to the left, center, or right as needed.
5. Adjust icon placements to either default (inline with text), top (above the text), or reverse (icon on the right).
6. Use the section spacing sliders to control the padding above and below the section for proper layout.

Adding Information with Icons:

1. After adding the section, set up individual blocks for the content.
2. Add the main heading for the content.
3. Set the heading size (Small, Medium, Large) and adjust alignment.
4. Add a subheading for additional details, such as a phone number or email address.
5. Choose relevant icons from the available options, icons can be selected from a pre-defined library available in the theme, allowing you to visually represent the content effectively.
6. Use Custom CSS to add any specific styling preferences for icons, text, or the overall section design.

Image showcase

What is an Image Showcase Section?

An Image Showcase Section is designed to display multiple images in a structured grid, allowing you to present visual content in a prominent and engaging format. This section is ideal for highlighting featured products, collections, or promotional banners. By using an image showcase, you can attract visitors' attention and provide clear calls to action through customizable buttons and headings.

Steps to Set Up an Image Showcase Section:

1. In the Shopify admin, navigate to Online Store > Themes and click Customize to enter the theme editor.
2. Add the Image Showcase Section by selecting it from the list of available sections.
3. On the right side of the editor, customize the section's settings by select a heading size (Small, Medium, or Large) and adjust the heading alignment (Left, Center, or Right).
4. Choose the ratio of dimensions for the images (Adapt, Portrait, or Square-shaped) based on your design preferences.
5. Set the grid layout to either 2 or 3 columns, depending on how many images you want to display in a row.
6. Enable the swipe on mobile feature for improved navigation on smaller screens.
7. Adjust the section spacing using the sliders to control the padding above and below the image showcase.
8. Optionally, add Custom CSS to apply unique styles to the section for additional customization.

Adding Blocks to the Image Showcase Section:

1. After adding the Image Showcase Section, you can insert individual image blocks.
2. Upload an image or select from Shopify’s free image gallery.
3. Enter a tagline or short description that will appear above the image.
4. Add a heading for each image block and choose the heading size (Small, Medium, or Large).
5. Optionally, provide a subheading or more detailed description for each image block.
6. Customize a button label (e.g., "View All") and include a button URL that links to relevant pages or product collections.
7. Set the content position to control where the text and button are placed over the image.
8. Repeat the process to add more images to the showcase, ensuring each block is optimized with a unique image, heading, and action link.

Logo Gallery

What is a Logo Gallery Section?

A Logo Gallery Section allows you to display a collection of logos in a visually appealing manner on your website. It can showcase multiple logos in a grid or carousel format, making it easy to present visual content like product logos or other relevant elements. You can upload, arrange, and customize the appearance of the logos to enhance the aesthetic and engagement of your site.

Steps to Set Up a Logo Gallery Section:

1. In the Shopify admin, navigate to Online Store > Themes and click Customize to enter the theme editor.
2. Add the Logo Gallery Section to your page by selecting it from the available options.
3. On the right side of the editor, customize the settings for the Logo Gallery Section. Start by expanding the section width according to your requirement.
4. Now choose a color scheme from the five available options.
5. Specify the grid layout for displaying logos per row and adjust the logo width to fit your design needs.
6. Use the section spacing slider to fine-tune the spacing above and below the gallery section.
7. Select the grid layout for the mobile interface from the available options and enable the swipe on mobile option if needed.
8. Access the theme settings to enable the reveal sections on scroll option, if desired.
9. Optionally, add custom CSS to apply unique styles to the Logo Gallery Section.

Adding Blocks to the Logo Gallery Section:

1. After adding the Logo Gallery Section, you can include a logo overview block within the section.
2. For each block, upload the logo image, enter a heading, and provide the URL in the fields available on the right side of the editor.
3. Repeat the process for additional blocks, customizing each block with the appropriate logo image, heading, and link.

Masnory Grid

Material Highlights

Shop The Look

Text columns with image

What is a Text Column with Image Section?

A Text Column with Image Section is a versatile layout element that combines text and images in a grid format. This section allows you to present multiple pieces of content side by side, enhancing visual interest and providing detailed information about various topics or products. Each column can feature an image, heading, subheading, and description, making it ideal for showcasing features, services, or key highlights of your store.

Steps to Set Up a Text Columns with Image Section:

1. In the Shopify admin, go to Online Store > Themes and click Customize to enter the theme editor.
2. Add the Text Column with Image Section to your page from the available section options.
3. On the right side of the editor, customize the section settings by choose a color scheme for the section or edit theme colors through the color theme settings.
4. Set the heading size (Small, Medium, or Large) and align the heading (Left, Center, or Right).
5. Define the grid layout and the ratio of dimensions for the images (Adapt, Portrait, or Square-shaped).
6. Adjust the section spacing using sliders to control the padding above and below the section.
7. For mobile devices, set the grid layout to either 1 column or 2 columns to ensure a responsive design.

Adding Blocks to the Text Columns with Image Section:

1. After adding the section, you can include multiple text column blocks.
2. Upload an image for each column or select from the free image gallery.
3. Enter a heading for each column and choose the heading size (Small, Medium, or Large).
4. Add a subheading if needed and provide a detailed description of the image or content.
5. Optionally, enable a background color for the columns using the section’s color scheme.
6. Customize the content alignment (Left, Center, or Right) to fit your layout needs.
7. Include descriptions that explain the significance and function of each image or icon.
8. Access Custom CSS to apply additional styles if required.

Text Marquee

What is a Text Marquee Section?

A Text Marquee Section is a dynamic component that allows text to move horizontally across a designated area on your website. This feature is used to highlight important messages, announcements, or promotional content in a visually engaging way. It enhances the design and interactivity of your site by conveying information efficiently, especially in limited screen space.

Steps to Set Up a Text Marquee Section:

1. In the Shopify admin, navigate to Online Store > Themes and click Customize to enter the theme editor.
2. Add the Text Marquee Section from the available section options.
3. Customize the settings for the Keep Scrolling Section by accessing the options on the right side of the editor.
4. Choose a color scheme from the five available options and adjust the text size using the provided size option.
5. Set the scrolling speed to one of the following: Slow, Medium, or Fast, based on your preference.
6. Use the section spacing slider to fine-tune the spacing above and below the section for optimal alignment.
7. Optionally, apply custom CSS to add unique styles to the Keep Scrolling Section.

Adding Blocks to the Keep Scrolling Section:

1. After adding the Keep Scrolling Section, you can include blocks for both scrolling text and scrolling links.
2. For each block, enter the desired text and link in the fields provided. Users will be able to click on the text to access the linked content.

Countdown stopwatch

What is a Countdown Stopwatch Section?

A countdown stopwatch section is a feature used to create a sense of urgency on your website by displaying a timer that counts down to a specific event or deadline. This is often used for limited-time offers, product launches, or sales. When the timer finishes, it can display a custom message, and you can also provide discount codes or promotional content to encourage conversions.

How to Set Up a Countdown Stopwatch Section:

1. Select a color scheme to match your site's design. You can modify the colors in your theme settings.
2. Adjust the upper and lower spacing of the section.
3. Add custom CSS for additional styling or layout adjustments to make the timer fit seamlessly with your theme.

Timer and Discount Block Setup:

1. Enable the timer to start counting down.
2. Calendar Year, Month, and Day: Set the target date for the countdown.
3. Hours and Minutes: Set the exact time for the event to occur .
4. Select the size of the timer display: Small, Medium, or Large based on how prominent you want it to appear on the page.
5. Enable or disable the label that explains the purpose of the countdown.
6. Choose to hide the timer once it reaches zero or keep it visible and add a custom message that will appear when the countdown finishes.
7. Now in the timer overview block add a heading for the timer . Adjust the heading size (Small, Medium, Large) to fit the design.
8. Provide additional information or context for the countdown.
9. In the discount block input a discount code to be displayed when the countdown ends.
10. Set a button label to easily copy the discount code. When clicked, the label changes to "Copied!" for confirmation.
11. Choose from three styles for the button: Primary, Secondary, or Outline.

White Space

Menu Block:

• Add a Menu Block to display navigation links in your footer.
• Customize the heading for the menu section.
• Select a menu to display in the block:
  • Default option: Footer menu.
• Use the following options to manage your menu block:
  • Change Menu: Update the menu displayed in the block.
  • Remove Menu: Delete the menu block from the footer.

Newsletter Block:

• Add a Newsletter Block to allow customers to subscribe to your store updates.
• Customize the heading for the newsletter section (e.g., "Our Newsletter").
• Enable Social Media Icons to display links to your social media accounts:
  • Configure your social media links in the Theme Settings.

General

General Theme Settings

General Theme Settings allow you to control the foundational aspects of your website’s appearance and functionality, including favicon management, container width, and animations.

1. Favicon Image:
   • The favicon is a small icon displayed in the browser tab next to the website title.
   • You can upload your favicon image by clicking on "Upload Images."
   • Note: The favicon will be scaled down to 32 x 32px, so ensure the image is clear at small sizes.
2. Formation:
   • Adjust the container width to control how wide your site's content is displayed.
   • A wider container provides a more spacious layout, while a narrower one creates a more compact look.
3. Animations:
   • Enable Reveal Sections on Scroll option to create a smooth scrolling experience where sections of your site reveal themselves as users scroll down the page. This can enhance engagement by providing a dynamic browsing experience.

Typography

Typography Settings Guide

The Typography section allows you to customize the font styles and sizes for headings and body text across your Shopify store. You can control the visual hierarchy, readability, and overall aesthetic by adjusting fonts and scales.

1. Headings
   • Select a font for headings.
   • Adjust the scale of your headings to control their size relative to the default.
   • Adjust the scale of your headings to control their size relative to the default.
2. Body
   • Choose a font for your body text.
   • Similar to headings, selecting a custom font for body text may impact store speed.
   • Adjust the size of body text to suit the design of your store.

Social platforms

Social Platforms Settings

The Social Platforms section allows you to connect and display your store's social media accounts, providing easy access for customers to follow and engage with your brand across various platforms.

Sharing Links

• Add the URLs for each social platform your brand is active on. When the links are set up, the corresponding social icons will be displayed on your store, allowing visitors to easily connect with your profiles.
• Available Platform Options :
  • Facebook
  • Instagram
  • YouTube
  • TikTok
  • X / Twitter
  • Snapchat
  • Pinterest
  • Tumblr
  • Vimeo
  • WhatsApp

Quick search

Quick Search Settings

The Quick Search section allows you to optimize the search functionality of your online store by enabling features that improve user experience and assist customers in finding what they are looking for faster.

1. Search Suggestions
   • To help users find products more easily, enabling Search Suggestions will display relevant items as they type in the search bar.
   • Enable search suggestions, activates the display of related products or collections when a customer begins typing in the search field.
   • Display the vendor or brand of the product in search suggestions.
   • Display the price of the product alongside the search suggestions.
2. Display Suggestions:
   • You can customize how search suggestions are presented on your site to offer the best navigation experience.
   • Set the heading text for the suggestions section.
   • Select a menu from your store’s navigation to display as part of the suggestions. Note that this menu does not support dropdown items and is best limited to 4-5 links for optimal user experience.

Currency format

Currency Format Settings

The Currency Format section helps you control how prices and currency are displayed on your online store, particularly in the cart and checkout processes.

Currency Codes

• This option ensures that currency codes (e.g., USD, EUR, GBP) are always visible to provide clarity on the currency being used.
• Show currency codes: Enabling this option will display the currency code next to the price at checkout and in the cart. For example, instead of showing "$1.00," it will display as "$1.00 USD" to make it clear which currency is being used.

Cart

Cart Settings

The Cart Settings section allows you to customize the appearance and functionality of your store's cart. These settings determine how customers interact with their cart and what information is shown.

1. Cart Type
   • Choose how the cart is displayed when a customer adds items: Drawer or Page.
   • Show Vendor: Enable this option to display the vendor or brand name next to the products in the cart.
   • Enable Cart Note: This option allows customers to add notes to their order in the cart.
2. Recommendations
   • You can display dynamic product recommendations to your customers in the cart. These recommendations update based on order and product information.
   • Turn on this feature to suggest related products to customers.
   • Customize the heading for the product recommendation section.
   • Select a color scheme from your theme settings for this section to ensure it matches your store's design.

Custom CSS

Custom CSS Guide

The Custom CSS feature allows you to apply additional styling to your entire online store by writing custom CSS code. This option is useful for adding unique styles beyond the default theme options, helping you achieve specific visual or layout changes that aren't available in the theme settings.

Input Your CSS Code

• Enter your custom CSS styles directly into the provided field. You can add any valid CSS, such as changing colors, fonts, spacing, and more.
• Once you add your CSS, it will automatically apply across your store. Use the preview function to see how your custom styles look before publishing.