Igloo Shopify Theme

Documentation

black blue and yellow textile
black blue and yellow textile

Header Group

Customizing the Header Group in Your Shopify Theme:


  1. Access the backend of your store and navigate to the "Online Store" section.


  1. Within the "Online Store" section, locate and click on the "Themes" option.

A list of available themes for your store will be displayed after clicking on the "Themes" option.


  1. Select the desired theme from the list, then click the "Customize" button to initiate theme customization.


  1. After clicking the "Customize" button, locate the "Header" option at the top left corner. This is where you can customize your chosen theme's header section.



Announcement Bar

Customizing the Announcement Bar in the Header Group


  1. Navigate to the "Header" section.

  2. Locate the "Announcement Bar" subsection below the header settings.


  1. Click on the " Add Announcement" option to proceed.

  1. On the right-hand side, you will find a field for adding your announcement text.


  1. Additionally, there is a field provided for inserting the link that the announcement will direct users to upon clicking.

You can select the desired link options from the available link list to associate with the announcement.


You also have the flexibility to customize the layout of the Announcement Bar.

  • If you have enabled the overlay header feature in the header settings, place the announcement bar section above the header section.


You can also opt to make the section full-width for a more expansive appearance.


To enable the automatic scrolling of announcements, simply check the "Enable Auto Scrolling" option.

Also, adjust the time gap between each scrolling announcement to your preference.



Header

Customizing the Header in the Header Group


  1. Access the "Header" section located beneath the heading labeled 'Header'.

  1. Once you click on this section, you will find the option to personalize the layout of the header on the right-hand side.



  1. As the initial customization choice, you have the ability to configure the section to be full width.


  1. A selection of color schemes for the header section is available in the dropdown menu for you to choose from.


  1. Proceeding, you will encounter the option to make the header sticky specifically on desktop view.

Note: The sticky header functionality is not effective when the navigation position on the desktop is set to bottom fixed.


  1. Directly below the sticky header option, you can activate the transparent header feature. This functionality works best when you have a slideshow section in the first position and enable the "overlay header over this section" checkbox.


  1. In the navigation section in the header, you can add and modify the menu.


  1. Choose the desktop menu type from the two available options: mega menu or dropdown.



  1. If you wish to showcase collection images on the mega menu, simply mark the checkbox labeled "Show Collection's Featured Image on Mega Menu"


  1. Select the navigation position on the desktop from the option in the dropdown .





  1. Next is the option to enable the overlay navigation panel. This panel is only visible on desktop devices.


  1. Customize the left panel of the header by adding Information links from the available choices and filling in the heading and description fields.
    You have the option to exhibit social links. To achieve this, just mark the checkbox to indicate your desire to display the social links.




  1. On the right panel, you can configure settings for the Panel right section. Choose collections to display from the provided options and also select your preferred collection grid style you wish to display: standard or normal.



  1. Additionally, you are provided with the capability to activate two essential features: the currency selector and the language selector.

These options facilitate a seamless user experience on your website by allowing visitors to adjust the currency and language settings according to their preferences.


By following these steps, you can thoroughly customize your header section according to your preferences.


Template

NEW

*Enhance your theme customization experience by utilizing the drag and drop functionality available within the sections and blocks. This feature empowers you to seamlessly reorganize and arrange elements according to your preferences.


Below is the visual representation of that drag and drop functionality




Slideshow


Customize the slideshow section in the template:



  1. Navigate to the template section, within this section, you'll find the Slideshow option.


  1. Click on the Slideshow option. Upon clicking, you'll be presented with customization choices for the slideshow section on the right-hand side.

The initial setting involves making the section full-width.

Enabling this choice will cause the slideshow section to expand across the entire screen width.




  1. Another option is to overlay the header over this section. When enabled, the header, including any navigation or branding elements, will overlay the upper portion of the slideshow section, creating a visually appealing effect.





  1. You can adjust the slide height by selecting one of four options from the dropdown:

Adapt to First Image, Small, Medium and Large.


  1. To enable the auto switch slide, activate this option. The slideshow will then automatically transition from one slide to the next at the specified intervals.

There is an option to set the time interval (in seconds) between slide transitions when the "Auto switch slide" option is enabled.




  1. To modify slide height for mobile, choose the slide height from the four options available: Adapt to First Image, Small, Medium, and Large.



  1. There's a checkbox named "Show content below images on mobile." When marked, any additional content linked with each slide will appear beneath the slide's images on mobile devices.


  1. In the slideshow section you have the option to add 2 types of blocks: Banner and Video.




If you choose the banner as your block you have the following options:


Add the banner image for desktop and mobile from the options available on the right hand side and manage the image overlay opacity.


Here you can add the Subheading, Heading, and Description for the banner and manage the heading size from the option available below description.


Now you have the option to manage the button settings for the Primary button and the Secondary button, where you can add the button label and button link.
There is also an option to choose the button style.


To manage the content position on the desktop, you have an available option in the dropdown from where you can choose the content position.
Below you have the checkbox to enable the option to show the content with a background with an option to set the maximum width of that content and its alignment on the desktop.


You can also choose the color scheme from the options available in the dropdown.


To manage the content alignment on mobile devices you can choose the alignment options available in the dropdown

Below the dropdown there is an option to set the heading size on mobile.


Additionally, if you choose the video as your block you have the option to add the video link on the right hand side.

Note: The video link you add must be in the MP4 format.


For additional customization options within the video section, you can utilize the guide provided above for the banner section, as both of these sections share similar features.


By adjusting these settings, you can precisely tailor the appearance and behavior of the slideshow section according to your preferences and design requirements.

Countdown timer

Customize the Countdown timer in the template:



  1. Navigate to the template section, within this section, you'll find the option as Countdown timer.




  1. Click on the Countdown timer. Upon clicking, you'll be presented with customization options for it on the right-hand side.


  1. In the customizations section you can manage the layout of the Countdown timer, where you have the option to make the section full width and reduce the top margin.

After making the settings, you can set the color scheme for this section from the options available in the dropdown.


  1. Next you have the ability to add the content in the countdown timer section where you can add the heading with its description in the respective fields and also manage the heading size.


  1. To activate the timer, mark the checkbox, input the desired time in the provided fields namely year, month, day, hour and minutes.

Also you can optionally choose to hide the timer upon completion while adding a post-completion message from the settings available.



  1. Lastly, you are provided with the opportunity to modify the button. Within this context, you can input the button label and its corresponding link. Furthermore, you can select the desired style for the button from the available options.



Collection list

Customize the collection list in the template:



  1. Go to the "Template" section, and within this section, locate the "Collection List" option.


  1. Click on the "Collection List" option. Upon clicking, you'll find the option to customize the appearance of the collection list on the right side.



  1. In the Collection List Customizations section, you will find the option to make the section full width. Below that, there's a range selector to determine the number of collections you want to display per row.



  1. Moving on, you can set up the layout for mobile devices.

You have the choice to display one or two collections per row. Additionally, you can enable a carousel layout for the collection list on mobile devices.


If desired, you can activate the "Auto Switch Slide" feature by checking the corresponding checkbox and if you choose to enable auto slide switching, you can set the interval at which the slides switch.




  1. Now, you can customize the section header of the collection list. This is where you can set the subheading and heading text.

You also have the ability to adjust the heading size and its alignment.




  1. Lastly, you can manage the appearance of the collections grid. You're able to choose a color scheme from the available options and select a style for the collection grid. Next to that, you can set the image ratio for the displayed items.

Furthermore, there are additional options available:

  • Choose to display a product count badge.

  • Option to align the text within the collection grid.

  • You can enable the "View All" button, which becomes visible when there are more collections than what's currently shown. You can also provide the custom link for the "View All" button.




  1. Here you have the option to add the Collection and its Custom image which you wish to show in the collection list.

Set the Custom title for the collection you add and link it to the respective collection by adding the link in the fields.



Featured collection

Customize the Featured Collection in a Template


  1. Begin by navigating to the "Template" section. Within this segment, you will locate the "Featured Collection" option positioned below the list of collection lists.



  1. Click on the "Featured Collection" option. Upon clicking, you will be presented with the opportunity to personalize the appearance of the "Featured Collection" on the right-hand side.


  1. In the "Featured Collection" customization section, you will find options to configure the layout of this section.


Initially, you can opt to make the section full width.

Beneath this, there are 2 range selectors allowing you to specify the maximum number of total products you desire to exhibit, along with the number of products per row.


Within the same section, you will also encounter a checkbox to activate the carousel feature for automated slide switching. If activated, you can designate the interval at which the slides will transition.



  1. Moving forward, you are presented with the capability to adjust the layout specifically for mobile devices.

You can manage the number of collections displayed per row choosing between 1 or 2 collections.


Additionally, you can opt to enable the carousel functionality for the collection list exclusively on mobile devices.


If you decide to enable automatic slide switching on mobile, you can indicate the duration between slide transitions.



  1. Subsequently, the option to modify the section header of the collection list becomes available.

Within this context, you can define the subheading, heading, and description for the section.


Furthermore, you possess the ability to control the size and alignment of the heading text.




  1. The following option pertains to managing the displayed collections.

Here, you can select the specific collection you wish to showcase.


Adjacent to this, you have the choice to enable the "View All" button in situations where the list contains more collections than currently visible.


You can also provide the appropriate link for the "View All" button.



  1. Next, the option to configure the settings of the product grid comes into focus. You can opt for a desired color scheme for the product grid and specify the preferred image ratio from the available options.


Beneath this, there are three checkboxes that control the following features:

a. Display color swatches.

b. Show a secondary image when hovering over a product.

c. Enable a quick "Add to Cart" button.


By following these steps, you can comprehensively customize the presentation and functionality of the featured collection within the chosen template.



Auto-Scrolling text

Customize Auto-Scrolling Text in the Template:


  1. Begin by navigating to the template section. Within this segment, you will locate the "Auto-Scrolling Text" option situated beneath the "Featured Collection."




  1. Click on the "Auto-Scrolling Text" option. Upon clicking, you will be presented with the opportunity to personalize the auto-scrolling text.

This setting allows for the customization of text that automatically scrolls.


  1. In the section designated for customizing auto-scrolling text, you will encounter several options for adjusting its presentation.

Initially, you can opt to make the section full-width.

Directly below this, you will find the option to enable auto-scrolling and define the time gap between successive scrolls.




  1. Within this interface, you will have the ability to input the desired scrolling text. Additionally, you can manage aspects such as the heading size and text linking for the scrolling content.



Column grid

Customize the Column grid in the template:



  1. Go to the "Template" section, and within this section, locate the "Column grid" option.


  1. Click on the "Column grid" option. Upon clicking, you'll find the option to customize the Column grid on the right side.



  1. In the section, you will find the option to make the section full width. Below that, there's a range selector to determine the number of columns you want to display per row.


From the color scheme dropdown you can set the color of the column grid.


  1. Moving on, you can set up the layout for mobile devices.

You have the choice to display one or two columns per row. Additionally, you can enable a carousel for the column grid on mobile devices.


If desired, you can activate the "Auto switch slide" feature by checking the corresponding checkbox and if you choose to enable auto slide switching, you can set the interval at which the slides switch.



  1. Now, you can customize the section header of the column grid. This is where you can set the subheading and heading text.

You also have the ability to adjust the heading size and its alignment.





  1. Modify the attributes of the Section blocks.

Initially, you will encounter a checkbox that allows you to activate the utilization of a background for the columns.

Additionally, you have the capability to select a specific color scheme for the section blocks.


Adjacent to these options, there is a checkbox that permits you to exhibit images using a grid layout arrangement.


Concluding this section, you are provided with the flexibility to define parameters such as Image width, Image ratio, and Column alignment.




  1. In this section, you are given the ability to personalize each individual column within the layout.

You have the option to insert an image and a heading for each column. Furthermore, there is a provision to adjust the size of the heading according to your preference.

Additionally, you can provide a description for each of the columns, detailing their content or purpose.

To complete the customization, you can also affix a link label in the field and specify the URL that the column's link leads to.




Image with text

Customize the Image with text section in the template:




  1. Navigate to the "Template" section and within this segment, locate the heading labeled as "Image with Text."


  1. Select the "Image with Text" option. Upon selection, you will be presented with the opportunity to personalize the layout within the "Image with Text" segment.


  1. Within this segment, an option will be available to configure the section to span the full width of the designated area.




  1. Proceed to specify the Primary and secondary Image for the "Image with Text" section.


  1. After the images are added, opt to define parameters such as Image Height, Image Width, and Image Placement, selecting from the provided alternatives.



  1. Following the image settings, you will have the ability to manage Content Position, Content Alignment, Content Layout, and also determine the Color Scheme for the section.

Please note that the color scheme will only take effect when the section occupies the full width or when the content layout overlaps.



  1. Concluding the adjustments to the visual aspects, you can tailor the Mobile Content Alignment as necessary.



Upon finalizing the layout customization, proceed to define the Subheading and Heading, along with specifying the Heading Size for the "Image with Text" section.




Subsequently, populate the section with the desired Content.



Lastly, refine the properties of the Button within the "Image with Text" section. This includes specifying the Button Label, Button Link, and selecting the preferred Button Style.





Product Shop the Look

Customize the Product shop the look in the template:



  1. Go to the "Template" section, and within this section, locate the Product shop the look option.





2. Click on that option. Upon clicking, you'll find the option to customize the appearance of the Product shop the look on the right side.


In the Customizations section, you will find the option to make the section full width. Below that, there's an option to select the color scheme from the available options in the dropdown.



3. Now, you can customize the section header of this section. This is where you can set the subheading and heading text.

You also have the ability to adjust the heading size and its alignment



4. Subsequently, you will encounter the choice to designate the image for the "Shop the Look" section, along with the ability to fine-tune the overlay opacity and image height parameters.




5. Upon successfully adding the image, you are provided with the opportunity to fine-tune the settings for the "Shop the Look" products section.


Within this context, you can exercise the choice to select a preferred color scheme, define the image ratio, and interact with three distinct checkboxes that offer specific functionalities:
Activate the display of color swatches.

Enable the presentation of a second image when hovering over an item.

Enable the inclusion of a "Quick Add to Cart" button.



6. Within this section, you possess the capability to fine-tune product settings, allowing you to control the positioning of dots both on desktop and mobile interfaces. This includes specifying the horizontal and vertical placement of dots for both desktop and mobile views.




Image banner

Customize the image banner in the template:



  1. Go to the "Template" section, and within this section, locate the Image banner option.



  1. Click on that option. Upon clicking, you'll find the option to customize the image banner on the right side.


  1. In the Customizations section, you will find the option to make the section full width. Below that, there's an option to select the banner height from the available options in the dropdown.



  1. Adding a single banner will cause it to be displayed in fullscreen mode.



  1. Conversely, incorporating two banners will result in their presentation in two distinct sections, as illustrated in the screenshot provided below.



  1. Upon clicking the added banner, you will be presented with a range of customization options.

Primarily, you have the capability to incorporate an image of your choice for banner display.
Additionally, you can adjust the opacity of the image overlay.


  1. Adjacent to this, you are provided with the opportunity to configure the content of the banner.

This can be achieved by entering the appropriate subheading and heading into the designated fields, followed by the selection of the desired heading size from the available options.


Once the heading size has been chosen, you have the ability to input a description pertaining to the newly added heading.




  1. Presently, you are afforded the opportunity to personalize both the primary and secondary buttons featured on the banner. This entails the ability to input the button label and link, while also selecting a preferred button style from the provided options.



  1. After implementing the modification to the button, you will now have the ability to adjust the content's position and alignment specifically for the desktop view.

Within the options, there is a checkbox that allows you to display the content along with its background.


Additionally, a dropdown menu is provided to facilitate the selection of a preferred color scheme.




  1. Finally, you are presented with the choice to configure content alignment specifically for mobile devices. Additionally, there is a checkbox that allows you to display the content below the image on mobile view.




Customer reviews


Customize the customer review in the template:



  1. Navigate to the "Template" section, then locate and access the "Customer Reviews" subsection.



  1. Click on the "Customer Reviews" option. Upon clicking, you will see the ability to personalize the appearance of the Customer Reviews section on the right-hand side.


  1. Within this section, there's an option to expand the section to full width.

Just below that, you'll find a dropdown menu to select the color scheme for the Customer Reviews section.


Additionally, you can choose to activate the carousel feature for customer reviews.

If you opt for automatic slide transitions, you can specify the time between each slide switch.




  1. Moving on, you can also customize the layout specifically for mobile devices.

Where you have the option to enable carousel functionality exclusively for the collection list on mobile view.

If you choose to enable automatic slide switching for mobile, you can indicate the interval between slide transitions.




  1. Proceeding to the Section Header, you now have the ability to personalize the header for the collection list. This is where you can set the subheading and heading text. Moreover, you can adjust the size and alignment of the heading.


  1. Finally, you can manage the layout of individual review blocks within the Section Blocks. You can choose the heading size, content alignment, and color scheme from the available options.


  1. In this section, you have the capability to include a title for the review, choose the star rating for the review (ranging from one to five stars), and input the review description along with the author's name.



Featured product

Customize the Featured product in the template:


  1. Begin by customizing the Featured Product within the template.

To begin the customization process, navigate to the "Template" section. Within this section, locate and access the subsection titled "Featured product."






  1. Inside the "Featured product" subsection, select the "Featured product" option. Upon selection, you will gain access to the tools for personalizing the visual presentation of the Featured product section, which is positioned on the right-hand side of the interface.


  1. Within this designated section, you will find several customization options:

a. Expand the section to full width using the provided option.

b. Just below this, you'll encounter a dropdown menu that allows you to choose a color scheme for the Customer Reviews section.

c. Furthermore, you have the capability to designate the specific product that you wish to showcase as the featured product.



  1. Moving on, you will encounter the media settings for the Featured product segment. In this area, you are able to adjust the media scale and select a preferred media style from the assortment of styles available within the dropdown.


Following this, a series of checkboxes are presented, each corresponding to the following functionalities:

a. Activating the slider on the desktop view.

b. Enabling image zoom functionality within pop-ups.

c. Displaying thumbnails when viewed on mobile devices.

d. Enabling the looping functionality for videos.



  1. In the Featured product section, you will find a set of headings: vendor/sku, title, product rating, super deals, price, divider, and variant picker.

These highlighted elements, visible in the accompanying screenshot, will be located exclusively on the left side of the interface.

Clicking on any of these headings will provide you with the option to customize them on the right-hand side.



  1. Additionally, headings such as stock availability, quality selector, and buy button, as indicated in the screenshot below, will be positioned solely on the right side of the interface. Customization options for these elements are accessible on the right-hand side.



Should you wish to incorporate a block from the "Add Block" feature, please note that all added blocks will be added on the left side of the interface.


Customization settings for these blocks can be accessed and adjusted on the right-hand side of the interface.





Blog posts

Customize the Blog posts in the template:



  1. Navigate to the "Template" section and locate the "Blog Posts" option within this section.



  1. Click on the "Blog Posts" option. Upon clicking, you'll have access to customize the appearance of the blog posts on the right-hand side.


  1. Within the "Customizations" section, you will find the option to expand the section to full width.

Just below that, there are range selectors for adjusting the Blog Posts Display Limit and the number of Blog Posts per row on the desktop view.



  1. Moving forward, you can personalize the section header for this particular area.

This is where you have the ability to define the subheading and heading text. Additionally, you can modify the size of the heading and its alignment.



  1. Furthermore, you have the option to choose a Color Scheme from the available choices.

There's also a checkbox to enable the display of the featured image along with the option to set the Featured Image height.


Adjacent to that, you can decide whether to display the date and author's name in the blog post.

You can also choose the preferred text alignment from the dropdown menu.


Lastly, you have the option to enable the "View All" button. This button becomes useful when the list of blogs exceeds the currently visible ones. You can also provide the link for the "View All" button.




Rich text

Customize the rich text in the template:


  1. Access the template section and locate the "Add Section" option situated just above the Footer section. Clicking on "Add Section" will unveil a submenu, among which you will find the "Rich Text" option. In case this option is not immediately visible, you can expedite the search for it. Once you select "Rich Text," it will be appended to your template.


  1. With the inclusion of the Rich Text section in the template, proceed to click on it. This action will grant you access to the customization features for this section.


Begin by opting for a full-width display if desired. Following this, designate the preferred alignment for your content. Below these choices, you can specify the color scheme you wish to apply to the rich text.


  1. Upon selecting the heading component, you can enter the desired heading text and manage its size according to your preferences.



  1. Subsequently, you will have the opportunity to furnish a description for this particular section.


  1. The subsequent step involves configuring the button settings. Within this setting, you can differentiate between primary and secondary buttons.

Define the button label for each and assign the respective links. Additionally, you can choose from various button styles to suit your aesthetic preference.





Contact form

Customize the contact form in the template:



  1. Navigate to the template section and locate the "Add Section" feature positioned directly above the Footer section. Upon selecting "Add Section," a submenu will be revealed, within which the "Contact form" option is accessible. Should this option not be immediately visible, expedite its discovery through streamlined search methods. Once "Contact form" is chosen, it will be seamlessly integrated into the template.



  1. Following the successful integration of the Contact form section into the template, proceed by selecting it. This action will provide entry to the suite of customization functionalities tailored to this specific section.



  1. Positioned on the right-hand side, the customization options for the Contact form's layout are accessible. Begin by selecting a suitable color scheme from the dropdown menu.



  1. Subsequently, you have the opportunity to personalize the section header. This entails incorporating a heading and description, as well as managing aspects such as heading size and alignment.



  1. Upon completing the section header customization, input the pertinent contact information into the designated fields. This includes email, phone number, address, and operational hours for any associated establishment.



Newsletter

Customize the newsletter in the template:


  1. Access the template section and locate the "Add Section" feature situated directly above the Footer section. Upon activating the "Add Section" option, a submenu will be unveiled, presenting various choices, including the "Newsletter" feature.

If the "Newsletter" option is not immediately visible, expedite its discovery through optimized search methods. Upon selecting the "Newsletter" option, it will seamlessly integrate into the template.



  1. Subsequent to the successful integration of the Newsletter section into the template, proceed by selecting the newly added section. This action will grant entry to a suite of customization functionalities tailored specifically to the Newsletter section.





  1. On the right-hand side, access the customization options for the newsletter layout. Commence the customization process by adjusting the layout to full width, if desired, and selecting an appropriate color scheme from the available dropdown menu.




  1. Proceed to add the heading for the newsletter along with the desired heading size.



  1. Beneath the heading, input the descriptive content for the newsletter.


  1. In this section, integrate the newsletter subscription form, allowing customers to provide their email addresses and subscribe to the newsletter.




By following these steps, you will systematically incorporate the Newsletter section into the template, customize its layout, and facilitate customer engagement through the subscription form.



Video

Customize the video in the template:



  1. Access the template section and locate the "Add Section" function positioned directly above the Footer section. Upon activating the "Add Section" feature, a submenu will become visible, presenting a range of options, including the "Video" functionality.


In the event that the "Video" alternative is not readily apparent, expedite its discovery through the utilization of optimized search methods. Once the "Video" option is identified, it will seamlessly incorporate itself into the template.




3. Following the successful addition of the video section into the template, proceed by selecting the newly incorporated segment. This action will provide access to a suite of customization functionalities meticulously tailored to enhance the characteristics of the Video section.



4. Commence by selecting the option for a full-width display, if such a presentation is preferred.


5. Subsequently, the section header of the column grid can be personalized to align with specific preferences.

This is where customization of the subheading and heading text takes place. Moreover, adjustments to the heading size and alignment can be made according to requirements.



6. Direct attention to the Section video located below.

Within this area, it is possible to upload the cover image for the video and input the corresponding video URL.

Additionally, an option to enable video autoplay exists, alongside the ability to furnish descriptive alt text for the video.


Collapsible panel


Customize the Collapsible panel in the template:



  1. Access the "Template" section and locate the "Add Section" functionality positioned directly above the Footer section. Upon activation of the "Add Section" function, an ensuing submenu will become visible, presenting a range of options, including the "Collapsible Panel" feature.



  1. Should the "Collapsible Panel" option not be immediately apparent, employ search methods to expedite its identification. Once the "Collapsible Panel" option is identified, proceed to its selection for seamless integration into the template.




  1. Following the successful addition of the "Collapsible Panel" section into the template, proceed by selecting the newly incorporated section.


  1. Located on the right-hand side, access the customization parameters pertaining to the layout of the "Collapsible Panel."

Initiate the customization procedure by configuring the layout to span the full width, if deemed necessary, and subsequently choose a suitable color scheme from the available dropdown menu.



  1. Proceed to customize the header section of the column grid. This is where you have the opportunity to define the subheading and heading text.

Additionally, you retain the capability to modify the heading's dimensions and alignment.



  1. Moving forward, address the configuration of the collapsible attributes for the section. Here, you can make selections for the color scheme of the section and opt to enable the default expansion of the initial collapsible row.



  1. Subsequently, proceed to establish the layout of images by incorporating the desired image and choosing the image ratio from the options available.



  1. Below this, you will encounter the option to personalize the attributes of individual collapsible rows.

This involves the inclusion of headings, row-specific content, and the designation of the originating page for the said row content.









Image comparison

Customize the Image comparison in the template:




  1. Access the template section and locate the "Add Section" function positioned directly above the Footer section. Upon activation of the "Add Section" feature, a submenu will become visible, presenting a selection of options, including the "Image Comparison" functionality.


In the event that the "Image Comparison" option is not readily discernible, expedite its identification through the utilization of search methods. Once the "Image Comparison" option is clicked, it will seamlessly integrate itself into the template.



  1. After successfully incorporating the "Image Comparison" section into the template, proceed by selecting the newly integrated section.


  1. Within this section, you have the option to customize the layout of the image comparison section. You will find a checkbox to enable the full-width display of the section.



4. Next, customize the section header of the column grid. This is where you can define the subheading and heading text.

Additionally, you possess the capability to adjust the heading's size and alignment.




5. Within the section image, you can upload the two images intended for the comparison, namely the Primary Image and Secondary Image.

Furthermore, you can specify the desired image height for display.



Map

Customize the Map in the template:


  1. Access the template section and locate the "Add Section" function positioned directly above the Footer section. Clicking on the "Add Section" feature will reveal a submenu with various options, including the "Map" functionality.



  1. If the "Map" option is not immediately visible, employ search methods to quickly locate it. Once the "Map" option is identified, click on it to seamlessly add it into the template.





3. After successfully incorporating the "Map" section into the template, proceed by selecting this newly added section.



  1. Within this section, you have the opportunity to personalize the layout of the Map. There is a checkbox available that allows you to enable a full-width display for the section.



  1. Subsequently, proceed to customize the section header of the Map. This is where you can specify the subheading and heading text.

Furthermore, you have the capability to adjust the size and alignment of the heading.


  1. Next, you can populate the Map information in the provided fields. Begin by entering the Google Maps API key, which you will receive upon registering for a Google Maps API key.


  1. Once the API key is added, you can input the location name and its corresponding font size.

Directly below, you have the option to input the address and operating hours.

Specify the Map address that you wish to display. Additionally, there is a button below these fields where you can define the button label and choose its color scheme.




  1. Furthermore, you can upload an image for the map. This image will be displayed when the map is not yet loaded. You also have the option to select the image ratio.






Custom liquid



  1. Navigate to the template section and locate the "Add Section" function situated directly above the Footer section. Upon activating the "Add Section" feature, a submenu will become visible, presenting an array of options, including the "Custom Liquid" option.



  1. Subsequent to the successful inclusion of the "Custom Liquid" section within the template, proceed by selecting the newly integrated section.


Within the "Custom Liquid" section, you will find a checkbox to enable the option for making the section full width.


Additionally, there is a field provided for entering the custom liquid code, along with the ability to select a color scheme for the same.




Recently viewed products

  1. Navigate to the template section and locate the "Add Section" function situated directly above the Footer section.


Upon activating the "Add Section" feature, a submenu will become visible, presenting an array of options, including the "Recently viewed products".



2. Subsequent to the successful inclusion of the "Recently viewed products" section within the template, proceed by selecting it.


Within the "Recently viewed products" section, you will find a checkbox to enable the option for making the section full width.

Additionally, there is an option for selecting the product display limit and products per row.

You also have the option to select the number of products per row for mobile devices.


3. Lastly, you can customize the section header of the column grid. This is where you can define the subheading and heading text.

Additionally, you possess the capability to adjust the heading's size and alignment.



Footer Group


Customizing the Footer Group in Your Shopify Theme:


  1. Access the backend of your store and navigate to the "Online Store" section.


  1. Within the "Online Store" section, locate and click on the "Themes" option.

A list of available themes for your store will be displayed after clicking on the "Themes" option.


  1. Select the desired theme from the list, then click the "Customize" button to initiate theme customization.


  1. After clicking the "Customize" button, locate the "Footer" option at the bottom left corner. This is where you can customize your chosen theme's footer section.




Footer

Customizing the Footer in the Footer Group


  1. Navigate to the "Footer" section situated beneath the header labeled as "Footer." Within this section, you will find the capability to configure the width of the footer area. Furthermore, you are provided with the opportunity to select a preferred color scheme for this segment.


  1. Within the interface, locate the checkbox designed to activate the accordion-style presentation of content blocks when the website is accessed through mobile devices.

  1. Proceed to enable the email signup feature by utilizing the available option.

Additionally, you are granted the ability to incorporate a heading, compose a descriptive text, and uphold a consistent heading size in accordance with your requirements.



  1. In the "Follow on Shop" section, you will encounter a checkbox that facilitates the activation of the "Follow on Shop" functionality.



There is an option that extends to the inclusion of a language and currency selector to enhance user experience.


Additionally, an option is provided to showcase payment icons. Subsequently, you can input supplementary text content and display the "Powered by Shopify" attribution link.


  1. In the footer section, there is a provision to incorporate four distinct blocks: Menu, Brand Information, Text, and Image.



If the Brand Information block is integrated into the footer section, you will be presented with the opportunity to insert a heading and an image.

This configuration will ensure the preservation of the image width while also allowing the inclusion of description.

Additionally, you will have the option to display social media icons alongside this information.




Incorporating the menu block within the footer section provides the capability to introduce a heading along with a menu.


The appearance of the added menu will be consistent with the visual representation depicted in the attached screenshot.


The Text block, when added to the footer section, allows you to include both a heading and a corresponding subtext.




Finally, upon adding the last image block, the inclusion of an image is permissible while ensuring the preservation of the image width and alignment.




Theme Pages


Customizing the Theme Pages in your Shopify Theme:


  1. Access the backend of your store and navigate to the "Online Store" section.



  1. Within the "Online Store" section, locate and click on the "Themes" option.

A list of available themes for your store will be displayed after clicking on the "Themes" option.


  1. Select the desired theme from the list, then click the "Customize" button to initiate theme customization.




  1. Upon clicking the "Customize" button, locate the "Home Page" section positioned at the center-top of the interface. Clicking on this will trigger a dropdown menu containing all available theme templates.


Inside the dropdown menu, you will find a category labeled "Pages." Click on this option.



  1. Upon selecting the "Pages" option, a collection of available pages will be displayed. Our theme features four distinct page templates: Default, About, FAQ’s, and Contact.




  1. To proceed, navigate to the backend of the platform and find the "Pages" option. Click on it.


  1. Among the available page templates, you have the flexibility to choose any page according to your specific requirements. As an illustrative example, consider the FAQ’s page, as depicted in the provided screenshot.



  1. Upon selecting a page, such as the FAQ’s page, you will gain access to customization options. Additionally, you have the ability to modify the theme template as needed based on your preferences.


We have provided instructions specifically pertaining to the customization of the FAQ’s page within the page templates. Similarly, you can effectively manage the customization of other pages using analogous steps.


Default page


  1. Locate the "Home Page" section situated at the central upper area of the interface. Clicking on this section will initiate the display of a dropdown menu encompassing a comprehensive array of available theme templates.


Within the dropdown menu, a designated category is denoted as the "Default Page." Proceed to select this specific category.



  1. Upon selecting the "Default Page" category, you will be presented with the opportunity to personalize this page.

You can opt to expand the section to occupy the full width and also have the liberty to select the heading size and alignment from the provided choices.



  1. Additionally, within this context, you are also granted the option to incorporate more sections into the default page.




Product page


  1. Locate the "Home Page" section positioned at the center-top of the interface. Clicking on this will initiate a dropdown menu containing all available theme templates.

Inside the dropdown menu, navigate to the category labeled "Products." Click on this option.


  1. Upon selecting the "Products" category, you will be directed to the product information section. Here, you can manage various aspects of your product information.



  1. Within the product information section, you have the option to customize the layout on the right-hand side.


Begin by enabling the checkbox to expand the section to full width. Additionally, choose the preferred color scheme from the options available.


  1. Optimize the visibility of your product details. Enable the " Enhanced product visibility" checkbox to display the offer banner, variants, and price above the buy buttons on desktop view.



  1. Manage media presentation in the product information section. Select the media scale and style for desktop view.

Subsequently, a series of checkboxes will appear, each corresponding to specific functionalities:

a. Activate the slider for desktop view.

b. Enable image zoom within pop-ups.

c. Display thumbnails on mobile devices.

d. Enable looping functionality for videos.



  1. In the product information section, you'll encounter a set of headings including vendor/sku, title, product rating, super deals, price, divider, and variant picker.


These elements are exclusively positioned on the left side of the interface. Click on any heading to access customization options on the right-hand side.




7. Choose the desired variant picker type: Dropdown or button.


8. Configure stock availability settings by specifying the minimum inventory point and adding low inventory notices.

Customize available messages as required.


9. Certain headings such as stock availability, quality selector, buy button, and complementary products are positioned on the right side of the interface. Access customization options for these elements on the right-hand side.


10. Personalize the complementary products section by adding a heading and selecting the product display limit.

Adjust the product grid by selecting the image ratio and enabling the quick add to cart button.

11. Add collapsible rows for description, shipping information, and return policy. Customize the "Handcrafted Just for You" and payment and safety sections as well.



12. Customize collapsible rows by setting the first row to open and adding headings and content for subsequent rows




13. Customize the "Handcrafted Just for You" section by adding a heading, selecting the heading size, and adding desired products. Customize the product grid by choosing a color scheme and image ratio.

Enable checkboxes to display color swatches, show a second image on hover, and enable the quick add to cart button.


14. Customize the secure payment section by selecting the color scheme, adding a heading and heading size, and providing a description. Optionally, enable the checkbox to display payment icons.



To include additional sections, utilize the "Add Section" button. Customize these sections in the same manner as explained earlier.






Within the Product page section, you have the option to modify the Related Product section


  1. Click on the related products subheadings under the product section.


  1. You can choose to enable full-width display using a checkbox.

Additionally, you can set the product display limit and the number of products per row using a range selector.

Customize the layout for mobile devices by selecting the desired number of product per row, choosing between 1 or 2 collections per row.


  1. Take control of the section header for the related products.

Configure subheading and heading text according to your preference. Adjust heading size and alignment to achieve the desired appearance.


By following these steps, you can comprehensively customize your theme's product information and layout to align with your preferences and branding.

Collection page


  1. Locate the "Home Page" section positioned in the central upper area of the interface. Clicking on this section will unveil a dropdown menu containing a diverse range of available theme templates.

Within the dropdown menu, identify the designated category labeled as "Collections." Proceed to select this specific category.


  1. Upon clicking the Collection banner, you will be presented with options to modify its layout. These options include:

  • Enabling full-width display using a checkbox.

  • Showing the collection description and image via checkboxes.

  • Selecting text alignment from a dropdown.


  1. Click on the product grid to access customization options on the right-hand side. These options include:

  • Activating full-width mode.

  • Adjusting the number of products per page and per row using the range selector.

  • Enabling infinite scroll via a checkbox.



  1. Customize the mobile layout by selecting the number of products per row (1 or 2).


  1. Continuing with customization settings, the product grid configuration can be modified. You are offered choices for the color scheme and image ratio.


Beneath these options, checkboxes are present to toggle the display of color swatches, reveal the second product image upon hover, and enable the quick "Add to Cart" button.




  1. An additional configuration relates to enabling a filter option at the top of the product grid.


  1. Once the filter is enabled, you can proceed to select the desired filter layout for desktop usage. The available options include Horizontal, Sidebar, and Popup layouts.


To visualize these layouts, refer to the accompanying screenshots for each.


Here is the screenshot illustrating the visual representation of the horizontal filter layout.


Likewise, presented below is a screenshot depicting the appearance of the sidebar filter layout.


Here is the screenshot showcasing the visual depiction of the popup filter layout.


Should you wish to include supplementary sections, you can achieve this by utilizing the "Add Section" button.



Collection list page


  1. Locate the "Home Page" section positioned centrally in the upper interface area. Upon locating, click on this section to reveal a dropdown menu that offers a diverse array of available theme templates.


Within the dropdown menu, identify and proceed to select the designated category labeled as "Collections List."




  1. Upon clicking the "Collections list page”, you will be presented with options to modify its layout.

You can choose to enable full-width display using a checkbox.

Additionally, you can set the collection display limit and the number of collections per row using a range selector.


  1. Customize the layout for mobile devices by selecting the desired number of collections per row, choosing between 1 or 2 collections per row.



  1. Take control of the section header for the collection list page.

Configure subheading and heading text according to your preference. Adjust heading size and alignment to achieve the desired appearance.


  1. From this section, manage the collection grid's visual aspects.

You can select a suitable color scheme and collection grid style.


Additionally, the "Sort Collection By" option can be set from available dropdown choices.

Further customization options include setting the image ratio, displaying the product count badge, and adjusting text alignment.



  1. You can set the collection grid style by selecting from the available options in the dropdown menu.



If you wish to incorporate additional sections, utilize the "Add Section" button to seamlessly integrate them into your theme layout.


Blog page

  1. Locate the "Home Page" section positioned centrally in the upper interface area. Click on this section to access a dropdown menu containing a diverse range of available theme templates.


Within the dropdown menu, identify and select the designated category labeled as "Blogs".



  1. After selecting "Blogs," you will gain access to options for modifying the layout.

You can choose to activate a full-width display by utilizing a checkbox. Additionally, you have the capability to define the limit for displaying blog posts and set the number of blog posts visible per row on desktop devices using a range selector.


  1. Proceed to customize the heading size and heading alignment according to your preferences.


  1. In this section, you can make modifications to the blog post grid. You have the option to select a preferred color scheme, and there is also a checkbox available for displaying the featured image alongside the post.


Adjacent to this, you can specify the desired height for the featured image. Additionally, there are two checkboxes provided for displaying the date and author's name, along with the option to align this text as per your requirements.




Blog posts page

  1. In the interface, locate the central "Home Page" section. Click on this section to open a dropdown menu that provides a selection of diverse theme templates.


Within the dropdown menu, find and choose the "Blogs". Upon selection, the available options for blog templates will appear.


Click on "Default Blog Post" to proceed.



  1. After selecting "Blog Post," you will gain access to layout modification options.

These include the ability to enable a full-width display by utilizing a checkbox.

  1. Under the "Blog Post" heading, you'll find various options for managing the content of your blog post.

These options include "Title," "Featured Image," "Content," "Divider," and "Continue Reading."


4. Click on the title section to manage the title of your blog post.

Within this section, you can choose to display the date and author's name.

Additionally, you have the ability to adjust the heading size and text alignment as per your preferences.

There's also an option to enable sharing functionality by activating a checkbox. Adjacent to the share icon, you can input additional text for display.



5. Navigate to the "Featured Image" section to customize the height of the featured image according to your specifications.


6. In the section header settings, you can input the desired heading text and select the preferred heading size and alignment options.


Progressing further, you'll find options to modify the appearance of the blog post grid. This includes the ability to choose a color scheme from the available dropdown. There's also a checkbox that allows you to display the featured image within the grid, along with the option to set its height.


Concluding the customization process, there is an option to enable the display of the date and author's name, controlled by a checkbox.



By following these steps, you can effectively tailor the layout and content of your theme's blog posts to align with your preferences and requirements.


Cart page


  1. Locate the "Home Page" section positioned centrally in the upper interface area.


Click on this section to reveal a dropdown menu containing a selection of available theme templates. From the dropdown menu, identify and select the designated category labeled as “Cart”.


  1. Upon selecting "Cart", a set of customization options will be presented. You have the ability to adjust the layout of the Cart section.

To enable a full-width display, simply check the corresponding checkbox. Additionally, you can choose the desired color scheme from the available options within the dropdown menu.



  1. Within the Cart section, there are subsections that can be modified to suit your preferences.


  1. For instance, by clicking on the "Badge" section, you can make adjustments to the badges displayed.


It is possible to enable badges such as the "Secure Payment" badge and the "Payment Icon" badge to enhance trust and credibility during the checkout process.


Should you wish to incorporate additional sections into your theme layout, the "Add Section" button can be utilized. This feature allows you to seamlessly integrate new sections, enhancing the overall design and functionality of your theme.



404 page


  1. In the interface, locate the central "Home Page" section. Click on this section to open a dropdown menu that provides a selection of diverse theme templates.

Within the dropdown menu, find and choose the "Other" option.



  1. Upon clicking on it you will see the option as 404 page, click and review it.


If you wish to incorporate additional sections into your theme layout, the "Add Section" button can be utilized.





Password page


  1. Within the user interface, navigate to the designated "Home Page" area. Select this section to reveal a dropdown menu that offers a variety of theme templates catering to different styles.

Inside the dropdown menu, locate and opt for the "Other" choice.


  1. Once this selection is made, an option labeled as "404 page" will become accessible.



  1. Upon selecting the "404 page" option, a new interface will emerge.


Within this interface, you will find the provision to upload the logo intended for display on the password page, along with the opportunity to designate the preferred color scheme for this page.


  1. Continuing further, in the context of the "Opening Soon" segment, you will have the capability to input the desired heading and description to be displayed on the page.


Search page



  1. Begin by accessing the user interface and navigating to the designated "Home Page" section. Click on this section to unveil a dropdown menu that provides an array of theme templates designed to suit various styles. Within the dropdown menu, locate the "Other" option.




  1. Once the "Other" option is selected, an accessible choice labeled as "search" will become available.



  1. In the "search" section, you are provided with the opportunity to personalize the layout of the search area positioned on the right-hand side.


To start, you can activate the checkbox to expand the section to full width. Additionally, a range selector is available to determine the number of items displayed per row on desktop view.


You can also specify the quantity of items you wish to appear per row on mobile devices, with a choice between 1 and 2 items.



  1. Further customization can be achieved by opting for a preferred color scheme for the product grid and specifying the desired image ratio from the provided alternatives. Beneath these choices, three checkboxes offer control over the following functionalities:

a. Display color swatches.

b. Show a secondary image upon hovering over a product.

c. Enable a convenient "Add to Cart" button.






  1. Moving forward, you have the ability to activate filter and sorting options.



  1. Moving forward, you have the ability to activate filter and sorting options.



  1. Once the filter feature is enabled, you can proceed to select the desired layout for desktop use. The available options encompass Horizontal, Sidebar, and Popup layouts.

    For visual reference, an accompanying screenshot illustrates the appearance of the chosen horizontal filter layout.


Similarly, a provided screenshot showcases the visual representation of the sidebar filter layout.




Lastly, a final customization allows you to opt for the display of publication date and author's name within the blog grid.




Theme settings


Customizing the Theme Pages in your Shopify Theme:


  1. Access the backend of your store and navigate to the "Online Store" section.



  1. Within the "Online Store" section, locate and click on the "Themes" option.

A list of available themes for your store will be displayed after clicking on the "Themes" option.


  1. Select the desired theme from the list, then click the "Customize" button to initiate theme customization.




  1. Now you can see the settings icon on the top left of the screen, click on the icon.


  1. Upon selecting the icon, an array of theme settings options will become visible for your interaction.

.


General



  1. Open the Theme Settings and navigate to the General Settings section.

  2. In the General Settings, manage the Container Width using the available range selector.


  1. Set the Favicon image by uploading an image, which will be automatically scaled down to 32 x 32px.


  1. You'll find an option to enable the "Back to Top" checkbox, allowing users to smoothly scroll back to the top of the page. You can also choose a color scheme for this feature.



  1. Adjacent to it, you'll see the option to enable a loader on desktop and add loading text if needed.



  1. Lastly, in the General Settings, you can manage the Gift Card section. This includes the ability to upload images and set the Desktop Image width.





Fonts


  1. Navigate to the designated section within the theme's settings where font configurations can be modified.

    Within the font settings, locate the section dedicated to managing heading fonts. This feature controls the appearance of prominent, impactful text, such as titles and section headers, on both desktop and mobile platforms.



  1. Proceed to the option for modifying the body font. This setting governs the typography applied to longer text passages, such as paragraphs or secondary content.

Customize the font type and size for optimal readability on desktop and mobile devices.



  1. Engage with the specialized font management functionality. This component is designed for fonts containing distinctive characters, including small caps, fractions, ligatures, extra accents, and alternates.


Additionally, control over font size and case styling is provided to ensure precise alignment with the intended design aesthetic.





Colors

  1. Navigate to the designated section within the theme's settings where color configurations can be modified.


  1. Choose the background color for the entire webpage. This will serve as the primary background theme.

For reference, please consult the screenshot below.





  1. Configure the background color specifically for popups. These settings will define the secondary background theme used for popups.

Refer to the screenshot below.





  1. Tailor the background color associated with slider dots and arrows. This will establish the accent background theme for these elements.

Review the screenshot below for guidance.





Ensure that the selected colors resonate with your brand's identity, utilize the available color options to match your brand's aesthetics.


View the example section where the aforementioned color scheme modifications are visible. This provides you with an overview of how the changes will manifest on your website.





  1. Explore the range of colors available for buttons. These options empower you to seamlessly integrate visually appealing buttons into your website's design.



Discover supplementary color variations that can be employed as needed. These options cater to diverse design requirements, allowing you to maintain a consistent and aesthetically pleasing visual experience.




Product grid


  1. Within the "Theme Settings" menu, locate and select the "Product Grid" option.


Within the "Product Grid Settings" section, you will find the following customization choices:


Show Product Vendor: This option allows customers to easily identify the brand of each product directly from the product grid.


Show Product Rating: To include product ratings in the product grid, you can integrate a compatible product rating application.


Show Sale Badge: Enable this option to conspicuously label products currently on sale.


Show Soldout Badge: By selecting this option, you can notify customers and visitors about products that are currently out of stock.





Social media


  1. Locate and access the "Social Media" subsection.


  1. Within this section, you will have the ability to modify the links for various social media platforms, including:

  • Facebook

  • Instagram

  • YouTube

  • TikTok

  • Twitter

  • Snapchat

  • Pinterest

  • Tumblr

  • Vimeo





Quick search


  1. Within the Theme settings, locate and click on the quick search setting.


In the quick search setting, you will find the following configurable options:


Enable Search Suggestions: Toggle this option to activate search suggestions.


Show Product Vendor: This setting controls the visibility of the product vendor information. It is displayed when search suggestions are enabled.


Show Sale Badge: This setting determines whether the sale badge is displayed. The sale badge appears when search suggestions are enabled.


Show Soldout Badge: Configure this option to control the display of the soldout badge, which is shown when search suggestions are enabled.


Show Product Price: This setting governs the visibility of product prices. It becomes active when search suggestions are enabled.


















  1. Additionally, you have the ability to:


Add Heading: You can include a heading to enhance the organization of your quick search section.


Add Collection from Main Menu: You also have the option to incorporate a collection from the Main menu into the quick search section.



The collection that has been included in the quick search settings will be accessible in a corresponding manner.





Additionally, any collections that you have previously added will also be visible within this search option.


















Age verification popup


  1. Navigate to the "Age Verification Popup" section within the Theme Settings.


  1. In this section, you have the ability to customize the appearance of the age verification popup by selecting a suitable Color Scheme.




  1. You are provided with the option to enable the Age Verification Popup.

This popup serves as a campaign that is presented to visitors, ensuring their age appropriateness to access your website's content.


Additionally, you can activate the "Test Mode" for the popup. Enabling this mode will display the popup with every page refresh. It is recommended to use this feature solely for popup editing purposes. Remember to deactivate the "Test Mode" prior to publishing your theme to ensure proper functionality.




  1. You are granted the flexibility to set the duration of days after which the popup will be visible again to users (Days to Reappear). This setting functions independently for each browser and device.




  1. Lastly, you have the option to define a Heading and Description for the age verification popup. This content will be displayed within the popup interface.






Welcome popup



  1. Access the Theme Settings and navigate to the Welcome Popup section.


  1. Within the Welcome Popup section, you can designate the preferred Color Scheme for the popup.




  1. Opt to Enable the Welcome Popup. This feature involves displaying an introductory message to new visitors upon arriving at your website.


Additionally, you can activate the Test Mode for the popup. Test Mode ensures that the popup appears with each page refresh, facilitating popup editing. Remember to deactivate 'Test Mode' before publishing your theme.




  1. Customize the timing parameters for the popup's appearance: Set the Delay until the Popup Display and the interval after which the popup becomes visible again (in days).

Note that these settings are unique to each browser and device.



  1. Further customization options include adding an image, as well as specifying the Heading and Description for the popup.






Currency format


  1. Within the Theme Settings section, navigate to the subsection labeled "Currency Codes."



In the context of enhancing the user experience, it is notable that currency codes (for instance, $1.00 USD) consistently accompany cart and checkout amounts.


  1. Within this subsection, an option is provided in the form of a checkbox, granting users the ability to enable the display of currency codes.






Badges


  1. Navigate to the "Theme Settings" section and access the "Badges" submenu.


  1. Within this section, you will be able to configure the following badge-related attributes:


a. Placement options for badges within the grid layout.

b. Color schemes for both the Sale/Product Count badge.

c. Color scheme pertaining to the Sold Out badge.




Recently viewed products


  1. Locate the option for Recently Viewed Products and access its settings.


  1. Within this setting panel, you will find the customization options as color scheme for the Recently Viewed Products section and selection of image ratio to be applied to the displayed products.

Additionally, there are checkboxes available for the following features:


  • Show Color Swatches

  • Show Second Image on Hover

  • Enable Quick Add to Cart Button




Custom color swatch

  1. Within the Theme Settings section, navigate to the subsection labeled "Custom color swatch”


  1. There is a section to add the custom color swatch but the each rule must be in its own line as mentioned.


For example, if the variant name is "Black" under the "Color" category, the color code should be entered as "black:#000000."

(Please note that the color option names are case-sensitive.)



Cart

  1. Open the Theme Settings panel and proceed to the designated subsection titled "Cart."


  1. Within this subsection, you will find a dropdown menu presenting various choices for configuring the cart display type.


Selecting "Popup" from the dropdown menu will result in the cart page being presented in a popup format, as depicted below:




Opting for "Mini" from the dropdown will display the cart page in a miniaturized manner, as shown:




Alternatively, by choosing "Page" from the dropdown, the cart page will be exhibited as a standalone page:


  1. Further down the section, you will encounter a checkbox that facilitates the display of the product vendor information. Adjacent to this, there is an option to enable the inclusion of cart notes.








Checkout


  1. Access the Theme Settings panel and navigate to the designated subsection labeled as "checkout."


Inside the checkout section, you will find the Banner settings.

This area allows you to incorporate a background image and logo. You can also determine their placement and adjust the logo's dimensions.




2. Proceed to the Main Content area management. Here, you are provided with the capability to designate a Background image and Background color.

Furthermore, you can customize the Form fields by selecting from the available options.


Similar customization options are available for the Order Summary section. You can set a Background image and Background color according to your preferences.





The subsequent section pertains to Typography settings. Within this section, you are required to make choices regarding the Heading and Body text. The available options offer flexibility in terms of font styles and sizes.

Additionally, you can specify the desired text colors to align with your design.






Theme Features




1) Sticky header

2) Mega menu

3) Color swatches

4) Store pickup availability

5) Quick buy

6) Testimonials

7) Related product recommendations

8) Cart popup

9) Mini cart popup

10) Product tabs

11) Product filter and sorting

12) Social links

13) Color schemes

14) Product reviews

15) Predictive search

16) Welcome popup

17) Age verification popup

18) Back to top

19) Countdown timer

20) Stock counter

21) Language/currency switcher

22) Pickup availability

23) Complementary product recommendations

24) EU translations (EN, FR, IT, DE, ES)

25) Infinite scroll

26) FAQ's

27) Product tabs

28) Size chart

29) Product tabs

30) Image rollover

31) Cart note

32) Cross Browser Optimization

33) Fully Responsive

34) Well Documentation