large_Variant Expander_Logo_Icon_Blue.png

medium_Variant Expander_Logo_Icon_Blue.png

small_Variant Expander_Logo_Icon_Blue.png

thumbnail_Variant Expander_Logo_Icon_Blue.png

Variant Expander_Logo_Icon_Blue.png

Xpander

Welcome! 
This guide will help you get set up quickly and have know-how of the usage of the app.
Our app expands original variants into standalone products. Our app makes products more discoverable, leading to higher average order values, higher returns on ad spend, and satisfied customers. The expansion duplicates the variants of a store and you have the ability to stock the sync with the parent product when a purchase is made.

##### ****Launching a New Campaign****
###### **Step 1: Naming Your Campaign**

1. Go to your app overview and click "**Create Campaign**" to initiate campaign setup.
2. Choose a descriptive name to easily identify your campaign.

*Example: The name could be a collection or product name.*

![image.png](https://cmsad.digifist.com/uploads/image_7638b734ed.png)

###### **Step 2: Variant Selection**

1. Locate the **Variant Option** section next to your **Campaign Name**. This section displays a list of all variants from your store products.
2. Pick the **Variant Option** you want to expand.

*Example: If you select "**Color**", the app will expand all color options of a product into individual products, which will be synced with the parent product.*

![image.jfif](https://cmsad.digifist.com/uploads/image_970e4b5098.jfif)

###### **Step 3: Selecting products** 

**Select products**

1. **Specific collections** (single or multiple collections supported)
    1. In this section, choose the products you want to expand by selecting "**Selected Collections**".
2. **Selected Products** (single or multiple product selection available)

![image (1).jfif](https://cmsad.digifist.com/uploads/image_1_acd5810d1b.jfif)

**Note:** It is recommended to start with a single product to familiarize yourself with the expansion process and prevent any potential mistakes. All campaigns can be undone and the original products will remain unaltered.

###### **Step 4: Product name structure**

**Product name structure**

This field lets you specify a unique name for the expanded products, making it easier for customers to identify their desired item.

**Example:** Consider a parent product named "T-Shirt" with 5 color variants - Black, Blue, Red, Yellow, and White. The original product title is "T-Shirt". Using the format ```{{product_title}}-{{variant_option}}``` in this case will result in the following product titles after expansion: "T-Shirt - Black", "T-Shirt - Blue", "T-Shirt - Red", "T-Shirt - Yellow", "T-Shirt - White".


**Note:** It is recommended to utilize the product naming convention to avoid any duplicate content on your store.

**URL Slug**

Use ```{{variant_option}}``` for the variant value in the URL.

Similar to the product name structure, the URL Slug field lets you control the URL format for newly expanded products.

**Example**: Parent product "T-Shirt" with original URL slug ```/products/t-shirt```. If you use ```-{{variant_option}}``` as URL slug, the result will be ```/products/t-shirt-black```.

![image (3).jfif](https://cmsad.digifist.com/uploads/image_3_318a9ebd49.jfif)

###### **Step 5: Selecting details for copying to the newest expanded products**

**Images**
    When checked, the app will copy the right variant image or video from the parent product into the target child product.
    
**Inventory quantities**
    When checked, the app will copy the inventory quantity information of the variant from the parent product into the target child product.
    
 **Description**
    If checked, the app will transfer the parent product's description to the child products.
    If not checked, the description will be left empty and will not be copied to the expanded products.
    
**Price**
    When checked, the app will copy the price information, including compare at the price information of the variant from the parent product to the target child product.
    
![image (4).jfif](https://cmsad.digifist.com/uploads/image_4_f35882678e.jfif)

XPander App - Setup And Usage Guide 

Xpander DE

Contemporary design with proven functionality that converts to sales.

Clothing and accessories, Health and beauty, Home & Decor

High-volume stores, Physical stores, Visual storytelling

Use drag-and-drop sections and blocks to create custom pages throughout your store without special coding. Mojave comes with flexible, well-designed blocks for images, products, video, quotes, and more.

The new standard in customizability and speed

This theme is great for

Cart and checkout

Marketing and conversion

Merchandising

Product discovery

Internationalisation

Our promise

Built for speed & reliability

Stores using Mojave

Our support team is here 24/7 to help you get the most out of your online presence.

Get the help you need, every step of the way.

large_Mojave-theme-mockup-homepage-min.jpg

medium_Mojave-theme-mockup-homepage-min.jpg

small_Mojave-theme-mockup-homepage-min.jpg

thumbnail_Mojave-theme-mockup-homepage-min.jpg

Mojave-theme-mockup-homepage-min.jpg

Mojave

Inner

Decor

The Multi-column text section allows you to add textual content to showcase custom blocks of texts.

![Light.png](/uploads/Light_832fe32697.png)

###### Style
The style option allows you to invert the colors to dark or light.

###### Flip image/content position
Activating this checkbox flips the content & image. This works only if there’s an image uploaded on the section settings.

###### Heading & content
Add a heading & description to the newsletter section to convince your visitors for subscribing to the mailing list.

###### Image (optional)
Upload an image to showcase it as a second column.

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.


Newsletter

A storefront's footer contains the information listed at the bottom of a page. Often the footer is the area where customers expect to find broad links, like a sort of information desk.

![Desktop.png](/uploads/Desktop_601b9902a0.png)

###### Footer logo
A footer-logo can be added by inserting a Textual block on the left sidebar of your customizer in the footer section.

![Untitled.png](/uploads/Untitled_380aad797e.png)

On the right sidebar, you have the option to upload your logo and add a general store description.

###### Adding footer menu
To add a footer menu, choose the option “Add block” on your left sidebar.

![Untitled (1).png](/uploads/Untitled_1_7c408e0fa5.png)

The navigation can be linked from the right sidebar of your theme customizer.

###### Enabling fullwidth
When this option is activated, the footer will be displayed as a full-width section on desktops. It does not affect any mobile devices.

###### Show copyright information
Checking this option will display the bottom portion of the footer. If you do not want the payment icons to be displayed, you can disable them in the footer settings on the right sidebar. The payment icon section is dynamic and retrieves information from the connected payment provider on your online store.

###### Copyright navigation
It can be used to add additional navigation next to the copyright text. Like “Terms” and “Privacy Policy.”

###### Show payments icon
If you do not want the payment icons to be displayed, you can disable them in the footer settings on the right sidebar. The payment icon section is dynamic and retrieves information from the connected payment provider on your online store.

###### Multi-currency & Language switcher
If Shopify market’s enabled, this section will appear to your customers for switching language, currency & region.

Footer

The header is the rectangular area that runs across the top of your store, featuring your logo, navigation, search bar, and cart icon. It appears on every page to promote your company's brand and make it instantly recognizable to your visitors. The header is a static section and cannot be repositioned.

To adjust the header, navigate to **Customize** > **Theme settings** > **Header**.

![image3.png](/uploads/image3_ddc0fa5a56.png)

###### Enable fullwidth option
The header will be displayed as a full-width section on desktops when this option is checked. This option does not affect any layout changes on mobile devices.
 
###### Logo image
To add the logo image of your brand to the header, upload a transparent logo via this section. _Don’t forget to add alt text to your logo to improve your SEO._
We recommend using a transparent logo in PNG format. Upload the correct dimensions of your logo to avoid blurry logo images on your website.

![image2.png](/uploads/image2_0e535960bb.png)

###### Logo width
Set the width of your logo by editing this setting. Generally, this setting should be displayed somewhere between 160px and 220px.

###### Navigation 
The header often serves as a table of contents for the storefront, featuring key navigation links that you set up in the Navigation settings of the Shopify admin.
To set a navigation menu on your header, you can link the navigation in this section:

![image1.png](/uploads/image1_ced3747b1f.png)

More information about configuring navigation on your online store can be found on: 
```
https://help.shopify.com/en/manual/online-store/menus-and-links  
```
###### Logo position
You can change the position of your logo by editing this setting. The theme is set to the left by default, and choosing "Center" will center the logo.

###### Enabling sticky header
You can ensure that your navigation doesn’t disappear when scrolling on your website by checking this box.

###### Transparent header
By activating this option, you remove the header's background and make it transparent on your homepage. 
If necessary, you can upload a secondary logo. This feature is useful when using a specific background color where the logo is not visible.


Header

You can add an announcement bar to display important information or promotional marketing messages about your business.
You might add an announcement bar to highlight the following information:

- any shipping delays or regions not accepting international shipments
- any new or updated policy pages
- any promotions being offered at this time, such as sales or new gift cards

You can choose to write only one announcement or several. Mojave supports animated messaging for website visitors to highlight multiple announcements.
To change your announcement bar, navigate to the first section in the Customizer of your online store. You can add or remove sections according to your preferences.

![Untitled.png](/uploads/Untitled_7e6d38d3ca.png)


###### Adjusting the speed of the carousel interval
With the carousel interval settings, you can adjust the speed of the animated announcements. 

![Adjusting the speed of the carousel interval.png](https://cmsad.digifist.com/uploads/Adjusting_the_speed_of_the_carousel_interval_ccf56e4a52.png)



###### Utility menu
The utility menu can be activated by linking navigation in the announcement bar settings.

![Untitled (3).png](/uploads/Untitled_3_0d9571744d.png)

Announcement bar

###### Headings font
Select the font you would like to use on the headings.

###### Headings font size scale
Adjust the font size scale. Default is at 100%

###### Body font
Select the font you would like to use for the body.

###### Body font size scale
Adjust the font size scale. Default is at 100%


Typography

The Featured products section draws attention to a specific range of products on a page. With this powerful section, we recommend you to choose from 6 to 12 products to showcase new products, product launches, or specific promotions.

###### Featured products
The Featured products section draws attention to a specific range of products on a page. With this powerful section, we recommend you to choose from 6 to 12 products to showcase new products, product launches, or specific promotions.

###### Customize Featured products section settings
Click the Featured products section to open its general settings. 

###### Add a product to this section.
On your customizer, click on “Add product.” After this, you can link a product on the right sidebar of this section.

###### Add a heading to your featured products section.
Add a clear heading to your section to showcase the products.

###### Add a link text
You can choose to add a link to a specific collection or product. With this option, the visitors will be able to navigate to another page by clicking on the link.

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.


Featured products

The Multi-column text section allows you to add textual content to showcase custom blocks of texts.

![List.png](/uploads/List_d3b701fdec.png)

###### Adding a column
Click on the “Add Content” button to add a new column.

###### Column content options
Add a title, text, link text, and URL to your column. The “Link text” and “Link URL” are additional options.

###### Fullwidth option
Enabling the Fullwidth option allows you to showcase this section in full width.

###### Heading
You can optionally add a heading to this section.

###### Layout option
There are two available layout options: List & Columns. Switch the layout to your desired preferences. 

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.

Multi column text

##### Adding extra custom filters to your theme
 
On your metafields,
Click on **"Products"**
Click on **“Add definition”**

On the name field copy & paste: ```Style```
On the “Namespace and key” field enter the following: ```my_fields.style```
On content type, select “**Single line text**”,
Click “**Save**”.

![metafields-style.png](https://cmsad.digifist.com/uploads/metafields_style_18e5c2a6bb.png)

You are able to set unique styles to this section of your site through **Shopify Admin** > **Product** > **Metafields** > **Style**

![pasted image 0 (5).png](/uploads/pasted_image_0_5_6b1790d168.png)

##### Displaying the filters with Search & Discovery

1. Open the **Search & Discovery** app within your Shopify admin.
2. Integrate the new custom filter

![seartc h& discovery.png](https://cmsad.digifist.com/uploads/seartc_h_and_discovery_62f44321e1.png)


Custom filters

Global product settings can be found in this section. To access this, navigate to:
**Customizer > Theme Settings > Products**

###### Quickview
Enables the Quickview option on your theme.

###### Products grid
Change the product grid image ratio if needed.

###### Swatches
Use the name you would like to use for swatches. The name you chose has to match the variant label on the product admin page.

###### Size guide
Use the correct name to match the size variant name on the product admin page.

###### Show product swatches
Enable this option to show the product swatches if needed. We have set default color names and assigned RGB colors to them by default. 

###### Show in grid product swatches.
Enable this option to show the product swatches on the product grid.

###### Use swatch images from files
Enable this option if you would like to show custom uploaded swatches. The image must be named the swatch option and uploaded as a `.png.’ file. Upload the image to the Files section of your Shopify admin (Settings > Files).

###### Swatches style
Change the swatch style to Round (default) or Square style.


Products

The Image with text section is a versatile and engaging way to combine media and messaging.

![Left.png](/uploads/Left_97bdfe10b3.png)

Customize Images with text section settings 

###### General layout settings
You can enable the fullwidth option to make the section fullwidth. The columns can also be flipped and mirrored.

###### Add text to this content.
Add a heading to this section. The following field can add a button text, and the Button URL field can add a button URL that links to the text on the settings. 

###### Adding images
Use the available image options to upload images on the primary and secondary placeholders.

###### Using product cards
If you want to add product links to your images, you can use the Product card fields to link up to one product per image.

###### Content section & link texct
Use the content section to add a long description to your secondary image. Use the Link text and Link URL fields to add a link under the description.

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.


Image with text

Set the cart type by changing the Cart Type option. We have by default two available options: Drawer & Page.

###### Enable order note
Enabling order notes makes it possible that your customers can add notes or special instructions to their shopping cart. This information will be available on the order page.

###### Enable the terms and conditions checkbox
When enabled, customers have to agree to the terms and conditions checkbox on the cart page before they proceed to checkout. You can link an additional page with content on the next field called “Terms and conditions page.”

###### Free shipping notification
This allows implementing the shipping bar to motivate your customers to spend more to achieve the free shipping on your store. The threshold value is in cents.

Cart

The Rich Text section complements pages with textual content. Use this section to talk about your brand or to announce a promotion.

![Left.png](/uploads/Left_49677f2716.png)

###### Customize Rich Text section
Add up to three available blocks.
Heading, content, and a link block are available.

###### Additional section settings
You can edit the horizontal alignment of the text, spacing on desktop, and spacing on mobile devices.

Rich Text

The collection page template showcases the products of a collection. The collections are created within the Shopify Admin. We have additional settings available like the collections menu and collection images.

![Collection Page (PLP) (2).png](/uploads/Collection_Page_PLP_2_2920c0420c.png)

###### Collection title
The collection title is set to default and fetched from the collection name in the Shopify admin.
 
###### Collection image
The collection image can be uploaded on the image field while creating the collection in the Shopify admin. We recommend uploading images with 16:9 aspect ratio.
 
###### Editing Image overlay transparency 
You can use this setting if the content on your collection banner is not readable. This setting can be found on Customizer > Default collection > Collection banner > Image overlay transparency.
 
###### Collection description
Use the available description field in the Shopify admin for displaying the collection description.
 
###### Collection menu
Subcollections are gathered by referencing a navigation menu with collections nested below other collections. First-level link names are used as an identifier to show the menu. Follow these steps to create a menu on the collection page.
 
Create a new **Menu** in the Shopify admin 
Create your nested menus based on the collection names.
Open **Customizer** and navigate to the **Default collection** page template
Click on the **Collection banner**
On the right sidebar, click on **Select collection menu**
Select the menu you just created
 
###### Product grid
The settings for the product grid can be found on the Product grid block, on the right sidebar. 



Collection

The Product page is where you highlight the features and benefits of your individual products. Customize the product page template with the theme editor's blocks, theme settings, and additional sections.

![Custom Preset 9.png](/uploads/Custom_Preset_9_968e9c4704.png)

###### Access the product page features and settings
In the theme customizer (Customize), select Products, then Default product.

###### Customize template settings
In the left sidebar, click Product page to open general settings for the template.

###### Customize product template page blocks
Click the toggle beside the Product page to reveal the blocks. Use these blocks to customize the layout and features for the product page.

- From your Shopify admin, go to **Online Store** > **Themes**.
- Find the theme that you want to edit, and then click **Customize**.
- Select a template from the drop-down menu.
- Click **+ Add section**, and either select a new section from the list or use the Search bar to search for a specific term.
- Click on the new section to edit the blocks within the section.
- Optional: Click and drag the ⋮⋮ icon next to a section to rearrange the sections on your page.
- Click **Save**.

###### Change the variant picker style
To change the variant picker style, click on the Variant picker block on the product page template.
 
Edit the settings on the right sidebar:

###### Adding a size guide 
To add a size guide to your product page variant picker use the Size guide page settings

###### Add a pop-up or collapsible block
Add the available blocks to your product page section from the blocks sidebar.


Metafields are a way to add dynamic content to your Mojave theme. This can be used in combination with the Metafields or any other pages to generate dynamic content and connect with storefront features.

In this guide, we will use metafields and dynamic content to include **Material & Care** content.

![Product_Page_Modal.png](https://cmsad.digifist.com/uploads/Product_Page_Modal_bcb485a572.png)

There are two options on how to configure this dynamically. If you would like to have the ability to have specific styling on the content, we suggest using the pages method. If you would like to make things easier to manage, you can use the metafields option.

###### Dynamic content using metafields

Add a new metafield definition

1. In your Shopify admin, open **Settings**
2. Open **Metafields**
3. Open **Products** or **Variants**
4. Select **Add definition**

Each metafield definition needs a **Name**, **Namespace and key**, and **Description** for internal reference.

Click **(+) Select content type** to choose:

- **Color**
- **Date and time**
- **File**
- **JSON**
- **Measurement**
- **Number**
- **Rating**
- **Reference**
- **Text**
- **True or false**
- **URL**

For this example setup, we need a **Multi-line text** content type to provide the **Material & Care** content for relevant products.

![Untitled.png](https://cmsad.digifist.com/uploads/Untitled_97b011bc6a.png)

**Save**, then go to your **Products** admin.

###### Managing your content

In your **Product** admin, open a product to insert the content you would like to showcase dynamically per product. Scroll down to **Metafields**, then enter the Material & Care content for the new metafield.

![Untitled (1).png](https://cmsad.digifist.com/uploads/Untitled_1_676e78e167.png)

**Save**, then go to the **Themes** of the **Online Store**.


###### Connect your dynamic field to the right block

Open the theme editor (**Customize**), then open your product page template.

Metafields are connected to blocks or sections on pages. For this example, we are connecting the dynamic content for the **Material & Care** metafield with a **Pop-up link text** block.

1. Click on “**Material & Care**” block
2. On the content field, click on the **“Insert dynamic source”** icon.
3. **Select** the recently created metafield option from the list.

At the end, it should look like this:

![Untitled (2).png](https://cmsad.digifist.com/uploads/Untitled_2_a14fa9226c.png)

**Save** your changes.

Dynamic Block Content with Metafields

"Sold out" labels are automatically based on your inventory quantity remaining.

The other labels can be used by adding a product tag like this:

![image.png](https://cmsad.digifist.com/uploads/image_b4d5dab97a.png)

**Note:**
You can use anything after the ":" to make it appear on your product cards. **For example**_Italic_ "badge: New", "badge: Final Sales".

Promotional Product badges

You can disable the animations on the Mojave if needed by unchecking this option.

![Adjusting the speed of the carousel interval (1).png](https://cmsad.digifist.com/uploads/Adjusting_the_speed_of_the_carousel_interval_1_1c8c536b38.png)

Animations

Gather customer emails by activating the Newsletter modal feature. Emails submitted through this feature will be added to the Customers admin for marketing efforts. 

![Newsletter popup (1).png](/uploads/Newsletter_popup_1_1cb3122c83.png)


###### Delay
Adjusting the delay in seconds will change the number of seconds when the pop-up has to be displayed for the visitors browsing your site.

###### Expiration date
Adjust the number of days to avoid annoying your potential customers by showing them the pop-up on each visit.

###### Color options
The additional color selectors change how the pop-up looks.

###### Flip image/content position
It can be used to flip the columns on the pop-up.

###### Heading, content & image
Use these fields to add a heading, content & image to your pop-up modal.


Newsletter modal

Using the **Search & Discovery** app, you can choose specific products to display as complementary products in the product information section on your website's product pages.

![Sahara+B7+Search+C2E294+Mozilla+Fi.png](https://cmsad.digifist.com/uploads/Sahara_B7_Search_C2_E294_Mozilla_Fi_3fa3b304d1.png)

You can follow these steps to set up Complementary products:

1. From your Shopify admin, go to **Apps**  > **Search & Discovery.**
2. Click **View recommendations** button ****in the **Feature overview** section.
3. Click **Add recommendations** button.
4. Select the main product > **Add**.
5. Select complementary products in the **Add complementary products**
 section.
6. Click *Save**
  
![mojavethemestagingtechsupport+B7+Search+%26+Discovery.png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Search_26_Discovery_6a5c828d43.png)

![Black+Collar+Detail+Top+80%93+mojavethemestagingtechsu.png](https://cmsad.digifist.com/uploads/Black_Collar_Detail_Top_80_93_mojavethemestagingtechsu_084c852549.png)

You can add **Complete the look** as a block in the main product section of the product template.

1. Go to your product template, click **Add block > Related products**

![Mojave+B7+Customize+Copy+test+of+Mojave+Theme+2.0.3.png](https://cmsad.digifist.com/uploads/Mojave_B7_Customize_Copy_test_of_Mojave_Theme_2_0_3_d4337e9884.png)

2. Rename Related products to Complete the look.

![mojavethemestagingtechsupport+B7+Customize+Updated+.png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Customize_Updated_d7ae5ef3c1.png)

3. Click **Save**

![Mojave+B7+Customize+Mojave+Theme+2.0.3+B7+Shopify+80%94+.png](https://cmsad.digifist.com/uploads/Mojave_B7_Customize_Mojave_Theme_2_0_3_B7_Shopify_80_94_191fa3d798.png)

To add **related products**, you can either have auto-generated or click **Browse** to choose your own.

![mojavethemestagingtechsupport+B7+Search+%26+Discovery (1).png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Search_26_Discovery_1_0704bf05c0.png)

Click **Add > Save.** 

![Black+Collar+Detail+Top+80%93+mojavethemestagingtechsu (1).png](https://cmsad.digifist.com/uploads/Black_Collar_Detail_Top_80_93_mojavethemestagingtechsu_1_37dc2c9e98.png)


Complete the look

Include a Video section to display a YouTube or Vimeo video viewer on a page.

![Desktop.png](/uploads/Desktop_e817dc5f8f.png)

###### Cover image option (optional)
 Select a cover image option if you would like to replace the default Vimeo or Youtube placeholder. This option only works when “Autoplay muted video” is disabled.

###### Video URL
Supported video URLs are Youtube & Vimeo links.

###### Video description text
Use this field to describe the video to make it accessible for customers using screen readers.

###### Fullwidth option
Enabling the Fullwidth option allows you to showcase the video section in full width.

###### Autoplay muted video
Enabling this option plays the video automatically.

###### Layout option
Editing the video's aspect ratio changes the layout of how the video is displayed.


Video

The global theme settings can be found on:
**Customizer > Theme Settings > Global Settings**

##### Enable language selection

###### Enable language selection flag image
Flags can be uploaded to display the flags for your visitors when they would like to change the language on your website. To show a flag for a selected language, upload an image to the Files section of your Shopify admin (Settings > Files)

###### Instructions for naming the images before uploading:
Prefix the image name with `flag-`, followed by the language ISO code in capital letters. Click here to see a full list of the ISO codes.  
Save the image as a `.png` extension. Example: `flag-EN.png`
Upload the image to the Files section of your store
Refresh your homepage and validate the visibility of the flags

###### Enable currency selection
Activate this option to enable currency selection. 

###### Show notice for empty cart
You should activate this option if your store has multiple domains for different countries.

###### Show currency codes
Deactivate this option if you don’t want to show the currency codes on your online store.


Global

Add the Promotional Collections section to combine media with links to collections and draw attention to main collections, highlighted products, and more.

###### Customize Promotional Collections section settings
Click the Promotional Collections section to open its general settings. 

###### Add a heading and a subheading
Use the available fields for the right messaging for this section.

###### Upload an image
Upload a compelling image to showcase in this section. Enable the border effect to give your image a unique border effect that we made available on our theme.

###### Add up to three products
Use the three available product slots to activate product linking on the image. This feature can be used as a “shop the look” feature.

###### Add collection links
To add collection links on the left sidebar, click on “Add Collection link”:

Collection link settings
Use the right-sidebar settings for selecting collections or overwriting them with your own link text and link URL. Note that the link option is an optional feature.




Promotional Collections

The most valuable section on a storefront page is the hero section. Merchants frequently use a slideshow to highlight their most recent promotions and best-selling products to make the most of it.

![Untitled (2).png](/uploads/Untitled_2_857971c7bc.png)

###### Using the hero section
Click this section on the left sidebar of your online store customizer to open its settings.

![pasted image 0.png](/uploads/pasted_image_0_cf7cac22a8.png)

###### Enabling carousel autoplay
The slides will be animated and automatically looped with the chosen interval on the hero settings when this option is activated. 
Note that this option will only work if you have more than one slide in your hero section.

###### Enable control arrows
This setting will show the control arrows for the visitors to navigate the hero themselves. Note that this option will only work if you have more than one slide in your hero section.

###### Layout options
The slides come with three different layout options—70/30, 50/50, and full-width. An additional option is to activate the “Flip” option, which flips the layout's order to give the merchants extra customization options.	

###### Uploading content to a slide
You can choose to upload an image or a video to the slides. Use the following section to upload a photo or a video.

###### Multi-column content
When you’ve chosen a multi-column hero layout (70/30 or 50/50), you can upload the second image on the following image upload setting on the sidebar.

###### Recommendation
We recommend that you don’t use more than five slides on your online store for performance best practices. 


Hero

The Cart page shows a detailed summary of the items and the total cost on a dedicated page. The Drawer Cart is a condensed version of the cart page displaying added products without leaving the page. 
 
![Cart Drawer (4).png](/uploads/Cart_Drawer_4_411887217e.png)
 
###### Cart drawer settings
In the left sidebar, under the Header block, click on Cart drawer to open its basic settings.
 
###### General cart settings
In the left sidebar, click on Theme Settings then on the right sidebar on CART. Check out our General theme settings > Cart for more information and more customization options.
 
###### Adding extra sections to the cart page
It's possible to add more sections to the cart page. Navigate to the Cart template and click on Add section on the left sidebar of the customizer.

The homepage of your online store contains already pre-configured blocks made by us. Look over the section settings for adjusting the sections that we have inserted. 


Home page

The Featured articles section allows you to display images and text from your posts.

![Desktop.png](/uploads/Desktop_2595c3b597.png)

###### Important configuration options
You have two options to configure this section. The first is to link a blog to fetch the most recent articles automatically, and the other option is to use chosen blog posts by clicking on the “Add Article” option on the left sidebar.

###### General text options
Add a heading, subheading, or optional link to a specific page, blog, article, collection, or product.

###### Articles count settings
You can edit the number of articles to display from the blog by adjusting this option.

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.

Featured articles

To edit your online store's available search bar settings, navigate to this section.

###### Enable predictive search
You can add predictive search to your theme, so that suggested results appear immediately as you type into the search field. Predictive search helps customers articulate and refine their search queries and provides new ways to explore an online store. It also lets them quickly browse matches without leaving their current page to see a separate list of search results.

Predictive search supports suggestions for products, collections, pages, and articles.

###### Show vendor
Enabling this feature will show the vendor of the products set in the Shopify Admin.

###### Show price
Will show the product price on search

Search

Configuring **Metafields** on your store is an important step for activating the additional handy features we’ve built on Mojave. This enables you to activate **“Review rating count”** feature on product pages from our demo stores. 

In your Shopify admin, click **Settings > Custom Data.**

On the **Metafields,** click **Products > Add definition.**

On the name field enter: **Product rating count**
On the “Namespace and key” field enter the following: **reviews.rating_count**
On content type, select **Integer**,
Click “**Save**”.

![mojavethemestagingtechsupport+B7+Add+product+metafi (1).png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Add_product_metafi_1_5ec2fee24e.png)

**Click** Apps in your Shopify admin and search for Product Reviews to add the Product Reviews app

![mojavethemestagingtechsupport+B7+Home+B7+Shopify+80%94+M.png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Home_B7_Shopify_80_94_M_af2a5314d5.png)

**Metafields** are connected to blocks or sections on pages.

You can add **Star ratings** as a block in the main product section of the product template.

1. Go to your product template, click **Add block > Star rating**.
2. Click **Save.**

![mojavethemestagingtechsupport+B7+Customize+Updated+.png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Customize_Updated_8e43acdf38.png)

![mojavethemestagingtechsupport+B7+Customize+Updated+ (1).png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_B7_Customize_Updated_1_5b25525103.png)

To add the **Product Reviews** app block:

1. In your product template, click **Add block** under the Apps section and choose **Reviews.** 
2. Click **Save.**

![Mojave+B7+Customize+Mojave+Theme+2.0.3+B7+Shopify+80%94+.png](https://cmsad.digifist.com/uploads/Mojave_B7_Customize_Mojave_Theme_2_0_3_B7_Shopify_80_94_febf9e2d84.png)

![Mojave+B7+Customize+Copy+test+of+Mojave+Theme+2.0.3.png](https://cmsad.digifist.com/uploads/Mojave_B7_Customize_Copy_test_of_Mojave_Theme_2_0_3_044fb15906.png)

Metafields

Please navigate to the official Shopify documentation for the checkout page settings. 
[https://help.shopify.com/en/manual/checkout-settings/checkout-style ](https://help.shopify.com/en/manual/checkout-settings/checkout-style)

Checkout

###### Style
Three options for the buttons. Squared (default), Slightly round, and Round


Buttons

This section is meant to link all your social media accounts to include it in the footer.

Social media

Edit the colors of your online store within this section.
The following sections of the theme can be edited in this color sections.

- Typography 
- Background
- Buttons
- Sale tag
- Announcement bar
- Header 
- Footer




Colors

This documentation contains all recommended image sizes for all sections.

**Desktop**

We'd recommend images use an aspect ratio of 16:9 with a recommended pixel size of 2880x1500px to cover vector screens.

**Mobile**

We'd recommend images use an aspect ratio of 9:16 with a recommended pixel size of 720x1200px to cover vector screens.


![Hero Image Dimensions.png](https://cmsad.digifist.com/uploads/Hero_Image_Dimensions_5db6a02383.png)


![Image With Texts.png](https://cmsad.digifist.com/uploads/Image_With_Texts_5280b8720d.png)


![full width banner image dimensions.png](https://cmsad.digifist.com/uploads/full_width_banner_image_dimensions_e3b198657f.png)


![featured collections image dimensions.png](https://cmsad.digifist.com/uploads/featured_collections_image_dimensions_f60916c8a0.png)


![newsletter image dimensions.png](https://cmsad.digifist.com/uploads/newsletter_image_dimensions_92f8ce59d5.png)


Recommended image dimensions

Color swatches can be used in two ways with our theme. The first option is the **Standard Color Swatches** that come out of the box with our theme without any additional configuration. The other option is **Custom Color Swatches** when you want to upload your swatches.

###### **Standard Color Swatches**

Our theme comes out of the box with standard colors you can use on your product color variants. We are using the default HTML Color Groups. 

💡 You can find the complete list of these colors on the following link: [https://www.w3schools.com/colors/colors_groups.asp](https://www.w3schools.com/colors/colors_groups.asp) 

On your product admin page, make sure you use these exact color names in your product color variant to show these colors on your website automatically.

![color-1.png](https://cmsad.digifist.com/uploads/color_1_bf0b33e5f8.png)

By default, we are using “Color” to match the variant option from the product. 

You can change this setting under:

**Theme Customizer** > **Theme** **Settings** > **Products** > **Swatches** > **Swatches** **Name**

###### **Custom Color Swatches**

The second option we have is for more advanced brands that would like to showcase a custom swatch color that matches the product itself. This can be done by uploading custom swatches into your Shopify store.

If you would like to activate this feature navigate to the Swatches settings:

1. **Theme Customizer** > **Theme** **Settings** > **Products** > **Swatches,**
2. Activate the “**Use swatch images from files**” option.

**Location to upload Custom Swatches:**

1. Within your “**Shopify Admin**”, navigate to “**Content**”,
2. Click on “**Files**”,
3. Click on “**Upload Files**”,
4. Upload your custom swatch images in **“.png”** format.

💡 We recommend using square image files.


Color Swatches

If you would like to have unique product page templates or other templates for collections, blogs, and blog posts, you can create additional templates without your theme editor. On our demo store, we have created an example of unique product page templates where we can create product-specific landing pages.

**Example products:**

[https://mojave-theme.myshopify.com/products/high-rise-skinny-jeans](https://mojave-theme.myshopify.com/products/high-rise-skinny-jeans)

![Untitled (3).png](https://cmsad.digifist.com/uploads/Untitled_3_ff6e448e6d.png)

[https://mojave-theme.myshopify.com/products/wrapped-dress](https://mojave-theme.myshopify.com/products/wrapped-dress)

![Untitled (4).png](https://cmsad.digifist.com/uploads/Untitled_4_d043df03d8.png)

###### **Customize the Default Template**

Each product page, collection page, blog page, blog post, and static page has its own default template. Open these templates through the theme editor's page selector (center of the top bar). 

![Untitled (5).png](https://cmsad.digifist.com/uploads/Untitled_5_6dcdba609c.png)

###### **Default product**

The **Default product** template is applied to all product pages by default. Open this template with the page selector in your theme editor by selecting **Products**, then **Default product**.

![Untitled (6).png](https://cmsad.digifist.com/uploads/Untitled_6_aae18b0557.png)

Settings and features configured in the left sidebar will apply to all products assigned to the **Default product** template.

To have separate content for certain products, create a **new product template.**


###### How to use your template

After you created your new template, you can click on the created template and adjust the sections, block and content.


###### How to assign products to your new template

Navigate to your **Shopify** **admin** and navigate to the product.

You can change your product’s template on the **Theme template** section of your product admin.

![Untitled (7).png](https://cmsad.digifist.com/uploads/Untitled_7_cefe837bd1.png)

Additional Templates

A favicon, or favorites icon, is a small square image or logo that appears next to a web address. You can find favicons on your browser tabs, as well as on browser pages that list web addresses, such as the bookmarks page. You can add a favicon to your online store to help strengthen your brand and to add a polished look to your website.

The ideal size for a favicon is either 16x16 pixels or 32x32 pixels. If your favicon file is too large, then it will be reduced to 32x32 pixels when you upload it to Shopify.

From your Shopify admin, go to **Online Store > Themes.**
Find the theme that you want to edit, and then click **Customize**.
Click **Theme settings**.
Click **Favicon**.

In the Favicon image area, click **Select image**, and then do one of the following:

1. To select an image that you have already uploaded to your Shopify admin, click the **Library** tab.
2. To select an image from your local computer, click the **Library** tab, and then click **Upload**.


Add alt text to your favicon image:
1. Click **Edit**.
2. In the **Edit Image** window, enter a brief description of the image.
3. Click **Save**.


Click **Save**.



Favicon

The Featured collection section is designed to draw attention to a specific collection on your home page. 

![Left.png](/uploads/Left_e1b8d92fb5.png)

###### Customize Featured collection section settings
Click on the section to open its settings.

###### Flip media/content position
The columns can be flipped by activating this option.

###### Image
Upload an image on the available field for showcasing a collection.

###### Adding a heading and a subheading 
Use the available heading and subheading fields to text to this section.

###### Linking a collection
Use the Link text & Link URL fields to add a clickable collection link. Use the collection field to highlight the products of a collection 

###### Additional spacing options
You can edit spacing on desktop and spacing on mobile devices.

Featured collection

To enable the account page images, upload the right images in this section. You can upload images for the Login pages and Register pages.

![Forgot password.png](/uploads/Forgot_password_73bb6ca574.png)

![Forgot password.png](/uploads/Forgot_password_d71d1a57c8.png)

Account pages

The Image with text section is a versatile and engaging way to combine media and messaging.

![Text Bottom.png](/uploads/Text_Bottom_9a8858fc8c.png)

###### Banner - fullwidth
The Image with text section is a versatile and engaging way to combine media and messaging.

###### Customize Banner - Fullwidth section settings
Click on the section to open its settings.

###### General layout settings
The text and links can be placed on the bottom (default) or top. 

###### Image
Upload the image you would like to use in this section. We made it possible to upload a different version of the image for mobile. You can also choose to upload the same image for both mobile and desktop.

###### Heading, links & products
Add a heading on the available field to describe your full-width section. Add a link text and Link URL to make a clickable link. Add up to two products to showcase any products in this section.

Banner - Fullwidth

The navigation image is a great way to gain the visual attention of your store visitors. Every main navigation item can be set up to get showcased with an image of choice.

![navigationimage.png](https://cmsad.digifist.com/uploads/navigationimage_edce38b1f8.png)

To activate the navigation menu, you need to set up your regular navigation first. 

Click [here](https://help.shopify.com/en/manual/online-store/menus-and-links) for more information on setting up your Online Store navigation.

---

###### Adding a Navigation Image

1. Navigate to your **Online Store Customizer**
2. On the left sidebar of your **Customizer**, Navigate to the **Header** section
3. Click on “**Add Link featured Image**”

![featuredimageblock.png](https://cmsad.digifist.com/uploads/featuredimageblock_a25efdbaec.png)

1. On your right sidebar enter the **Navigation Handle**
2. **Upload** your custom image

![Untitled (1).png](https://cmsad.digifist.com/uploads/Untitled_1_8fb1450feb.png)

⚠️ Note: The Title must much your navigation title to link the image to the right item.

Navigation Image

Our support is available from Monday to Friday between 10 AM and 7 PM Central European Time.

When is your support available?

To see all of the available fonts, see Shopify's font library. Click the name of the font that you want to use. Alternatively, can also upload custom fonts. This is not supported out of the box and you should contact your web developer for implementing a custom font to your online store.

Click [here](https://shopify.dev/themes/architecture/settings/fonts#custom-fonts) for the offical guide of Shopify on how to add custom font's.

Can I add other custom fonts?

**No** – If you add any custom-code that ends-up breaking the theme, we can only politely ask that you revert your live theme to a duplicate of the original theme that should’ve been created before making code changes.

Do you support custom code by 3rd party developers?

Accelerated checkout buttons are only presented to customers in the storefront or checkout, not both. For example, if the accelerated checkout buttons are added to the cart template and the customer visits the cart before checkout, then the buttons won't be shown to the customer again. If you want to ensure that the accelerated checkout buttons appear in the checkout, then you shouldn't add them anywhere else in the storefront. Because the buttons are currently displayed in the cart page, then it is expected behavior that the buttons do not appear on the Checkout page. If you want the buttons to appear on the Checkout page instead of the cart page, you should disable this feature.


Accelerated checkout buttons are not appearing when checkout is initiated

Before you customize your theme, you need to know what level of support is available. If you are making simple modifications and an existing functionality is not clear enough from our documentation, you can get support from us. If you want to add new features to the theme, then, this is not supported (for free). You can always submit a feature request if you think our theme is missing features that can help you improve your store. 

What does the Mojave Support team cover?

After you purchase your theme, you'll get lifetime free updates from us with new features, bugfixes and improvements. We're also available for any theme related question to help you.

What’s included with my theme purchase?

Yes, our theme support 3D models & video's. In addition to images, merchants can upload 3D models and videos, and attach YouTube or Vimeo videos as product media. This gives merchants the opportunity to offer a rich and immersive product experience. 

Can I add video and 3D images to my product pages?

When you sell to multiple countries or regions, your customers can view prices in your store, pay for their orders at checkout, and receive refunds in their local currency. You can choose to have prices converted automatically using the current market exchange rate, or converted manually using an exchange rate that you choose.

Depending on your Shopify plan, you can use international pricing features to control prices for different countries and regions. If your store is on the Shopify plan or higher, then you can set price adjustments and custom rounding rules for different countries or regions. To set product prices by country or region, your store needs to be on the Shopify Advanced plan.

If you're selling in multiple currencies, then you can add a country selector to your theme so that customers can select their local country or region so that your store displays their local currency.

Can customers checkout in a different currency?

It’s vital to strike a balance between images that are large enough so users can zoom in and those that are an optimum size so they don't take up too much space and slow down your page load times. 

On Shopify, you can upload images of up to 4472 x 4472 px with a file size of up to 20 MB. But the website builder typically recommends using 2048 x 2048 px for square product photos. These are high-resolution images that give your store a professional and well-rounded look with great zoom capabilities. Keep in mind that for zoom functionality to work your images have to be more than 800 x 800 px.

Similarly, Amazon and Etsy, have a 1000 x 1000 px image requirement to enable zooming.

To maintain a uniform look along your product line and on your collection pages, you should keep the width and height aspect ratio of all your feature images the same. For example, you might make them all square like we see below.

What size do my images need to be?

Een eigentijds design met bewezen functionaliteit die de verkoop stimuleert.


Release notes

Impress your customers with this clean and contemporary theme.

Clothing & Fashion, Jewelry and accessories, Health and beauty

Use drag-and-drop sections and blocks to create custom pages throughout your store without special coding. Release comes with flexible, well-designed blocks for images, products, video, quotes, and more.

large_Essence-Desktop.jpg

medium_Essence-Desktop.jpg

small_Essence-Desktop.jpg

thumbnail_Essence-Desktop.jpg

Essence-Desktop.jpg

Release

Grasse

Serenity

![Screenshot_29.png](https://cmsad.digifist.com/uploads/Screenshot_29_ee89c9a5e8.png)

###### About

The Newsletter Popup section allows you to create a pop-up that encourages visitors to sign up for your newsletter. This feature helps in growing your email list, keeping your audience informed about new collections, discounts, and other important updates. 

###### Settings

**Show Newsletter Popup** (Choose whether to display the newsletter popup.)


**Show Newsletter Popup in Customizer** (Enable this option to preview the newsletter popup while customizing your site.)

**Show Newsletter After ( x seconds)** (Set the delay time in seconds before the newsletter popup is shown to the visitor.)

###### Content

**Image** (Upload an image to be displayed within the popup.)

**Heading** (Enter the heading text for the newsletter popup.)
_Example: "Sign up for our newsletters"_

**Heading Size** (Choose the size of the heading (XS, S, M, L, XL))

**Text** (Enter the text content for the newsletter popup.)

_Example: "Stay informed about new collections and discounts"_

###### Button

**Close Button Text** (Specify the label for the close button.)
_Example: "No thanks"_

###### Utilization Tips

**Setting Up the Popup**
Decide whether to enable the newsletter popup and preview it in the customizer.
Set an appropriate delay time to avoid interrupting the user experience immediately upon page load.

**Customizing Content**
Use an engaging and clear heading to attract visitors' attention.
Provide compelling text that highlights the benefits of subscribing to your newsletter.
Choose an eye-catching image that complements the popup content.

**Configuring Buttons**
Define a clear and polite close button text to allow users to easily dismiss the popup if they are not interested.

By effectively setting up the Newsletter Popup, you can enhance user engagement, grow your email list, and keep your audience updated with the latest news and promotions from your site.

![hero.png](https://cmsad.digifist.com/uploads/hero_0d0719c6c2.png)

###### About

In this documentation, we'll be discussing about the general settings as well as the slider settings for the Hero banner section in a Shopify store. This section allows you to showcase prominent content at the top of your webpage, such as promotional messages, featured products, or important announcements. It supports images, videos, and customizable text to create an engaging first impression for your visitors.

###### General settings

Hero height
Set the height of the hero to change the height of the slide. Only desktop.

Slideshow autoplay interval
Specify the interval in seconds for the slideshow to switch slides. If set to 0, autoplay will be disabled.

Show slideshow navigation
Enable this option to display navigation arrows for the slideshow on desktop.

Slideshow navigation position
Sides / Left / Center

Color scheme for arrows
To edit all your theme's colors, go to your color theme settings.

Show slideshow pagination
Enable this option to display pagination for the slideshow on both desktop and mobile.

Slideshow pagination style
Style 1 / Style 2

Floating Bar
Activate this option to enable a floating bar when the marquee section is added right after the hero section.


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


###### Slider settings

Note: You can add slides from the left hand side of the screen in the customizer:

![Screenshot_3.png](https://cmsad.digifist.com/uploads/Screenshot_3_52a78fd8ec.png)

###### Banner layout: Full / 70/30 / 30/70 / Split

---

###### Example Full:

![full.png](https://cmsad.digifist.com/uploads/full_f9902bda43.png)

---

###### Example 70/30:

![7030.png](https://cmsad.digifist.com/uploads/7030_1f968bb1aa.png)

---

###### Example 30/70:

![3070.png](https://cmsad.digifist.com/uploads/3070_e4e40fdd01.png)

---

###### Example Split:

![split.png](https://cmsad.digifist.com/uploads/split_26ed0dd1af.png)

---

**Header menu color** (Set the color for the header menu.)

###### Media desktop

**Image** (Upload or select an image for the desktop version of the hero banner.)

**Video** (Select a video to be used as the background, overwriting the image.)

**External video** (Paste a link to an external video. This will overwrite the image and video options. External videos may cause performance issues, so it is recommended to use the video option for better performance)


**Show video controls** (Enable this option to display video controls.)

**Enable overlay** (Enable an overlay effect on the media.)

---

###### Media mobile

**Note** If mobile media is set, it will be used on mobile devices instead of the main media.

**Image** (Upload or select an image for the mobile version of the hero banner.)

**Video** (Select a video to be used as the background, overwriting the image.)

**External video** (Paste a link to an external video. This will overwrite the image and video options. External videos may cause performance issues, so it is recommended to use the video option for better performance.)

**Show video controls on mobile** (Enable this option to display video controls on mobile.)

**Enable overlay** (Enable an overlay effect on the media.)

---

###### Content

**Content alignment:** Left / Center / Right
(Desktop and tablet only.)

**Content position:** Start / Center / End
(Desktop and tablet only.)

**Heading** (Specify the heading text for the slide.)

**Subheading** (Specify the subheading text for the slide.)

**Subheading link** (Paste or select a link or search to link the subheading to a page or product.)

**Text** (Add additional text content for the slide.)

---

###### Buttons:

**First button label** (Specify the label for the first button. Leave empty to hide the button.)

**First button link** (Paste a link or search to link the first button to a page or product.)

**First button style** (Filled / Outlined / Text)
Primary button style on theme settings is used when default is selected.

**Second button label** (Specify the label for the second button. Leave empty to hide the button.)

**Second button link** (Paste a link or search to link the second button to a page or product.)

**Second button style** (Filled / Outlined / Text)
Primary button style on theme settings is used when default is selected.

Hero Banner

![Screenshot_27.png](https://cmsad.digifist.com/uploads/Screenshot_27_e3246767ef.png)

###### About:

Like any other page, the contact page contains **header, footer, and a template.**

The **header** and the **footer** are identical across all of the pages in your store, while the **template** can be changed based on the information the page needs to display.

The FAQ page’s template gives you free customization liberty

We recommend adding a Page Banner and one or more Accordions sections to achieve the purpose of this page.


FAQ Page

![Highlighted Categories-1.png](https://cmsad.digifist.com/uploads/Highlighted_Categories_1_8543faa380.png)

###### About:

This is a novel idea of how to add a twist to your store and quickly attract the attention of customers who prefer simple and ‘directions’ to what they’re interested in.

###### Functionality:

Add up to 12 collections and their representing images for your customers to browse through.

###### General Settings:

This section can be accessed by simply pressing on “Highlighted collections”
**Height** (Sets the height of the section).
**Items title font size**(sets the font of the highlighted collection titles, up to 7x).
**Images**:
- Width (Normal/Wider)
- Height (Original/Adapt to section).

###### Below, you can find examples for the Width/Height settings:

- Normal width and original height:

![Screenshot_7.png](https://cmsad.digifist.com/uploads/Screenshot_7_631ea4026f.png)

- Wider width and Adapt to section height:

![Screenshot_8.png](https://cmsad.digifist.com/uploads/Screenshot_8_e61e39963f.png)

**Image for mobile** (This is a general option that affects only the mobile view of this feature, and you can choose if you want to show an image on mobile and what image that would be)
*Note: Leaving this option empty will result in the mobile version showing only the collection titles*

![Screenshot_9.png](https://cmsad.digifist.com/uploads/Screenshot_9_33e042dc39.png)


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 



###### Highlighted collections:

This section includes:

- A general select box from which you can select your collection
- Image – this will only show on the desktop and will overwrite the collection image if you manually add a new image
- Heading – This will overwrite the collection title
- Set heading to italic
- Enable products counter – This option will show how many items are available in the collection in a small title

Highlighted collections

###### General:

**Enable Shipping Notification:**
    - Enable this option to display a notification about free shipping based on the cart price. This notifies customers about reaching a threshold for free delivery, encouraging them to add more items to qualify.


**Threshold Cart Price:**
    - Set the minimum price value required for free delivery. If the cart total exceeds this threshold, free shipping will be applied. Leave this field blank to always offer free shipping regardless of the cart total.

---

###### Cart Page:

**Terms Checkbox Text:**
    - Enter the text for the checkbox that requires customers to accept terms and conditions before proceeding to checkout. Provide clear and concise terms to ensure customers understand and agree to your policies.

**Show Terms Checkbox:**
    - Toggle this option to display the checkbox for accepting terms and conditions on the cart page. This ensures compliance with legal requirements and enhances transparency in the purchasing process.


**Show Dynamic Checkout Buttons:**
    - Enable this feature to display dynamic checkout buttons, allowing customers to bypass the cart and proceed directly to checkout. Note that third-party apps may override this functionality.

---

###### Upsell Products:

**Enable Upsell Products:**
    - Activate this option to display upsell products based on the items in the cart. These products are recommended using the Shopify Recommendations API and the Search & Discovery app. Upselling encourages customers to add complementary items to their cart, increasing average order value.


**Heading:**
    - Specify the heading for the upsell section, such as "Complete the Set," to prompt customers to explore additional products.


**Color Scheme for Upsell:**
    - Choose the color scheme for the upsell section to ensure visual consistency with your theme. Customize the colors to match your brand identity and design preferences.


**Enable Order Notes:**
    - Toggle this option to allow customers to add order notes during the checkout process. Order notes provide customers with the opportunity to include special instructions or comments related to their order.

![1.png](https://cmsad.digifist.com/uploads/1_e4d070b7d7.png)

###### About:

The Shop the Look section allows you to create visually appealing and interactive content blocks that showcase products in a cohesive, styled look. This section includes customizable settings for heading, layout, images, and product slides, enhancing user engagement and providing a seamless shopping experience.

###### General Settings:

**Heading Size** (XS / S / M / L / XL)

**Layout Options** (Dual content / Full width)

**Reverse Positions** (Reverse image and products carousel positions. This setting does not apply when the full width banner layout is selected.)

**Show Pulse Dots** (Leave unchecked if you do not want pulse dots shown.)

**Image ** (Add an image that represents the "look" you are showcasing. The image will be displayed alongside the product slides.)


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


###### Product Slide

This section allows you to add up to 3 product slides, each linking to a specific product.

**Product ** (You can see the shop the look card after selecting the product.)

**Dot Position** (Dot appears on the image selected from section settings. Visible on desktop only.)

**Coordinates** (These coordinates allow you to move the pulse points on the image so that when a customer clicks on a pulse point, they are redirected to the linked product.)

Horizontal Coordinates
Vertical Coordinates

###### Utilization Tips

**Setting Up the Heading**

Choose an appropriate heading size (XS, S, M, L, XL) that fits your website's design.

**Selecting Layout**

Decide between Dual content or Full width layout based on the visual impact you want to create.
If using Dual content, you can reverse the positions of the image and product carousel for varied layouts.

**Image and Pulse Dots**

Upload an engaging image that showcases the look.
If desired, enable pulse dots to highlight specific products within the image.

**Adding Products**

Add up to 3 product slides, ensuring each product is relevant to the look you are promoting.
Adjust the dot positions to align with the products in the image, using the horizontal and vertical coordinates.

---

By utilizing these settings, you can create an interactive and visually compelling Shop the Look section that enhances the shopping experience for your customers.

Shop the look

###### About:

To avoid repetition and save space, here's a consolidated view of the common settings applicable across various sections. Specific settings for each section are noted where unique options are present.

###### Section Width:

Normal
Fluid
Full
Page (specific to some sections)
Narrow (specific to some sections)
Narrower (specific to some sections)

###### Color Scheme:

To edit all your theme's colors, go to your color theme settings.

###### Top Spacing: 

No
S
M
L
XL

###### Bottom Spacing:

No
S
M
L
XL

###### Section-Specific Settings:

###### Accordions: 

Section width: Normal, Narrower, Fluid

###### Announcement Bar:

Section width: Normal, Fluid, Full
Color scheme: Scheme 2

###### Blog Articles:

Section width: Normal, Fluid
Grid spacing: No, S, M, L, XL

###### Compare Slider:

Section width: Page, Fluid

###### Dual Content Tiles:

Section width: Normal, Narrow, Fluid, Full

###### Featured Products:

Section width: Page, Fluid

###### Footer:

Show top border
Section width: Normal, Fluid
Grid spacing: No, S, M, L, XL

###### Full Width Banner:

Section width: Normal, Narrow, Fluid, Full


###### Hero Banner:

Section width: Full, Fluid
Content layout: Text left, Text right, Text center


###### Highlighted Collections:

Section width: Normal, Fluid

###### Mixed Text:

Section width: Normal, Fluid, Full

###### Multititle:

Section width: Normal, Fluid, Full

###### Page Banner:

Section width: Page, Narrow, Fluid


###### Recently Viewed Products

Section width: Page, Fluid

###### Recommended Products:

Section width: Page, Fluid

###### SEO Content:

Section width: Normal, Narrower, Fluid

###### Shop the Look:

Aspect ratio
Aspect ratio for mobile
Section width: Normal, Fluid, Full

###### Social Media Highlights:

Section width: Normal, Full

###### Testimonials

Section width: Normal, Fluid, Full

###### Trust Indicators: 

Section width: Normal, Fluid, Full

###### How to Use

For each section in your documentation, you can list the section-specific settings and refer to this consolidated common settings list for shared options. This approach minimizes redundancy and ensures clarity.

Common settings

![Screenshot_20.png](https://cmsad.digifist.com/uploads/Screenshot_20_dca56bb907.png)
###### About

The Mixed Text section allows you to create versatile content blocks with a mix of text and optional buttons. With customizable settings for content width, alignment, button styles, and more, you can design engaging sections tailored to your website's layout and design.

###### General Settings

###### Mixed Text

Enable to add a mixed text section to your page.

**Content Width** (Set the width of the mixed text content, applicable for desktop and tablet devices only. The width is specified as a percentage (%))

**Content Alignment** ( Left / Center / Right)

**Button Label** (Specify the text for the optional button. Leave empty to hide the button.)

**Button Link** (Provide the URL link for the optional button. You can paste a link or search for a page.)

**Button Style** (Filled / Outlined / Default)


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


---

Utilize the Mixed Text section to create dynamic content blocks that combine text with optional buttons to enhance user engagement and convey key messages effectively. Adjust settings as needed to integrate seamlessly with your website's design and layout.

Mixed text

###### About:

The Trust Indicators section allows you to display trust-building elements on your website, enhancing credibility and fostering trust with your audience. Whether it's showcasing customer testimonials, industry certifications, or security badges, trust indicators help reassure visitors and encourage engagement.

---

###### General Settings:

**Swipe on Mobile**
**Autoplay Interval: Set to 0 to disable autoplay**

###### Indicator Settings:

**Title** (Text box used to highlight the purpose of the trust indicators)

**Link Label** (Assign a label text to the link for each trust indicator. You can leave it empty to hide the button/link).

**Link** (Used to assign a URL to which the customer will be redirected to)

**Icon** (Select an icon for the trust indicator)

**Custom Icon** (Gives you the option to upload a custom icon. This can either be one provided by your designers or you can use the ones available in the Icons section of the documentation)

[**Note:** You can redirect to the custom icons page by clicking here](https://www.digifist.com/en/help-center/documentation/theme/release/icons)


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 

 
Customize your website with Trust Indicators to instill confidence in your audience and establish credibility. Utilize the available options to showcase relevant trust-building elements and enhance the overall user experience.

Trust Indicators

###### About:

In the following documentation, you can find the recommended dimensions for all of the sections that require images with dedicated sizes. The images below will also be present along the documentation specific for the sections they represent

**Note:** Although you may use the correct sizes, there is a particular case where you may encounter difficulties using a specific kind of images - those that have text included in them.

Some merchants may be confused about the usage of images that include text by default with the believe that they serve SEO purposes. This is actually not the case, and it is recommended to use images without text imbeded in them and add the text on top with the help of the features available within the theme.

![header_logo_2.png](https://cmsad.digifist.com/uploads/header_logo_2_e26e49ce4e.png)

![megamenu_cards.png](https://cmsad.digifist.com/uploads/megamenu_cards_7b6a1b1645.png)

![hero.png](https://cmsad.digifist.com/uploads/hero_0d0719c6c2.png)

![Highlighted Categories.png](https://cmsad.digifist.com/uploads/Highlighted_Categories_110ad7642a.png)

![Highlighted Categories-1.png](https://cmsad.digifist.com/uploads/Highlighted_Categories_1_8543faa380.png)

![Highlighted Products.png](https://cmsad.digifist.com/uploads/Highlighted_Products_8392136c75.png)

![Dual Tiles.png](https://cmsad.digifist.com/uploads/Dual_Tiles_986e29dc0f.png)

![product_cards_1.png](https://cmsad.digifist.com/uploads/product_cards_1_77176a7888.png)

![Comparison Slider.png](https://cmsad.digifist.com/uploads/Comparison_Slider_ff92c98762.png)



**Important**: 
The product images don't have recommended dimensions, however, we do recommend you use the same image shape across all of your product image if you wish to have a consistent view across all of your product pages.






![Screenshot_26.png](https://cmsad.digifist.com/uploads/Screenshot_26_326b64a02b.png)

###### About:

The 404 page is displayed when customers attempt to access a link on your store that is no longer available. Its role is to inform customers about the unavailable content and offer a redirect button to navigate them back to a previous page or the homepage.

###### Template:

By default, the 404 page has its own template that includes the following settings:
-	Heading
-	Text box
-	Button label
-	Button link
-	Common settings (for documentation related to common settings, please refer to the "Common settings" page.

The customization options for this section are standard.
Note: You can add additional sections to this page should you desire to do so.



404 page

![essence_announcement_bar.png](https://cmsad.digifist.com/uploads/essence_announcement_bar_cfbf2a06eb.png)

###### About:

The theme's announcement bar is a prominent notification strip, typically located at the top or bottom of a website, used to communicate important messages to visitors.
It can display promotional offers, shipping notices, company updates, urgent messages, or other key information, and is customizable in terms of text, colors, and behavior to align with the website's design and messaging needs.

---

###### General Settings

**Text blocks behavior**

- Static: The text remains stationary.
- Marquee: The text scrolls across the bar.
- Slideshow: The text switches between different blocks like a slideshow.

**Autoplay interval**

- Set the interval in seconds for the text blocks to switch when using the Slideshow behavior.
---

###### Blocks

**Localization**

- Choose where to display this block.
  - Desktop
  - Mobile
  - Both

**Link**
- Choose where to display this block (Desktop/Mobile/Both)
- Link label: Specify the label for the link.
- Link: Specify the URL for the link.
- Icon (includes the possibility to add a custom icon as well)

**Text slide**

- Body text: Add the text content for the announcement bar.
- Icon: Leave blank to hide the icon. You can find the list of available icons here.
- Custom icon

**Countdown timer**

- Add a countdown timer block to display a timer on the announcement bar. This can be used to create urgency for promotions or events.

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 

---

These settings allow you to customize the Announcement Bar to effectively communicate important messages to your customers, enhancing their experience and driving engagement.

![Featured.png](https://cmsad.digifist.com/uploads/Featured_f98d5d9268.png)

###### About

The Featured products section allows you to highlight select products in an eye-catching layout, enabling visitors to discover and engage with your best-selling or featured items effortlessly.

###### Layout

Choose between two layout options to present your featured products:

 **Layout 1**
![Screenshot_10.png](https://cmsad.digifist.com/uploads/Screenshot_10_10fc75225e.png)

 **Layout 2**
![Screenshot_11.png](https://cmsad.digifist.com/uploads/Screenshot_11_d497a3a86a.png)

**Heading**(Enter a title to emphasize your featured products, such as "Best Sellers" or "New Arrivals.")

**Subheading**(Optionally, include a subheading to provide additional context or promote special offers.)

**Button Label** (Leave empty to hide the button, or specify a label to encourage users to explore more products.)

**Button Link** (Provide the URL link to the page containing featured products or a specific product category.)

**Button Style** (Filled / Outlined / Text)


###### Slideshow Settings

**Number of Products for Each Group:** Specify the number of products to display in each slideshow group.

**Enable Slideshow Overflow:** Toggle to allow overflow in the slideshow when there are more products than the specified number of products per group.

**Show Navigation Arrows:** Toggle to display or hide navigation arrows for scrolling through the slideshow.

**Autoplay Interval:** Set the interval for automatic slideshow autoplay. Set to 0 to disable autoplay.

###### Tabs Settings

**Button Style** (Filled / Outlined / Text)

By utilizing these customization options, you can effectively feature your products in a visually appealing manner, enhancing user engagement and encouraging visitors to explore your product offerings further.

![featured_collections_1.png](https://cmsad.digifist.com/uploads/featured_collections_1_e2f758f58d.png)

###### About

The Featured Collections section enables you to showcase your curated collections in a visually appealing layout, allowing visitors to explore and discover your products effortlessly.

###### General Settings

**Choose between two layout options to display your featured collections:**:

**Layout 1**

![Screenshot_16.png](https://cmsad.digifist.com/uploads/Screenshot_16_18360f6af2.png)

**Layout 2**

![Screenshot_15.png](https://cmsad.digifist.com/uploads/Screenshot_15_b73fb781b0.png)


**Heading:** Enter a title to introduce your featured collections, e.g., "Our Collections."

**Subheading:** Add a brief description to encourage visitors to explore further, e.g., "Explore our collections."

**Button Label:** Optionally, add a button label to prompt users to explore all collections, e.g., "Explore All." Leave empty to hide the button.

**Button Link:** Provide the URL link to the page containing all collections. For example, you can link it to the "All Collections" page.

**Button Style:** Filled, Outlined, Text

**Show Carousel Arrows:** Toggle to display or hide navigation arrows for scrolling through the collection carousel.

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


###### Collection Card Settings

**Image Aspect Ratio:** Choose the aspect ratio for the collection images:
- Auto: Ensure that all images have similar aspect ratios for consistency.
- 1:1
- 3:4
- 4:5

**Collection Title Style:** Select the style for the collection title:

- Single Text: Display the collection title as text.
- Text with Arrow Icon: Display the collection title with an arrow icon for added visual interest.
- Collection Product Counter: Toggle to display or hide the product count for each collection.

**Collection Counter Border:** Toggle to add or remove borders around the collection cards.

###### Collection Slide

The featured collections can be added by clicking on the "Add collection slide" button from beneath the "Featured collection."

**Collection Slide Customization Options**

Link a collection
Image for the card – if none is assigned, the image is pulled from the backend of the Shopify admin / if assigned, it will overwrite the collection image from the backend.
Heading

**Heading Sizes**

XS: Extra Small heading size.
S: Small heading size.
M: Medium heading size.
 L: Large heading size.

Note: This is a straightforward feature with a highly user-friendly interface. In order to see what each option does, all you have to do is click or select that option. However, when editing the theme, in order to see changes, it is important to hit the “Save” button before performing tests for the changes to be applied and take effect.

Featured collections

![Screenshot_21.png](https://cmsad.digifist.com/uploads/Screenshot_21_ff2c070008.png)

###### About
Like any other page, the contact page contains header, footer, and a template.

The header and the footer are identical across all of the pages in your store, while the template can be changed based on the information the page needs to display.

###### Template

The template of the contact page contains three default sections that can be hidden but not removed, with the possibility of adding additional sections as per your preference. The three sections are Page, Form contact, and Map.

###### Page Section
The page section is further composed of:

Main content - this can be edited within the store’s: Online Store > Pages.
Additional customization settings:
Show page title - This option should be unchecked only if the page content has a “H1” heading.
Show top navigation - This will show this page’s breadcrumbs
Additional info - Heading
Additional info - Body text
Note: The customization options are user friendly and you can see the changes live as you make them.

###### Form Contact Section
This section of the page contains the information the user will forward to you when submitting the form. The form is standard Shopify and can only collect information available within Shopify, such as Name, Email, and Message.

Note: The text of the form can be changed by editing the “Default theme content” from the theme’s library.

###### Map Section

![Screenshot_22.png](https://cmsad.digifist.com/uploads/Screenshot_22_c4de32cd1a.png)

This section works like the store locator - you will have to first obtain a “Google API Key” and then add it within the section. The address section will also be filled by default, but you can also edit it by using the format: street address, city, country / state

The feature also comes with a zoom option that will show the map as well as full width.

**Note: **Additional customizable options for this section relate to your personal preferences regarding the section’s spacing.

Contact Us

![Screenshot_30.png](https://cmsad.digifist.com/uploads/Screenshot_30_cdd10860cd.png)

###### About
The Product page settings allow you to customize the display and functionality of media elements on your product pages. These settings give you control over the layout, appearance, and behavior of product images and videos, ensuring a cohesive and engaging user experience across all devices.

###### Product Media Settings

**Gallery Layout**
Configure the layout of the product media gallery.
- Grid
- Slideshow
- Carousel

**Gallery Layout on Mobile**
Choose the gallery layout for mobile devices.
- Slideshow
- Carousel

**Gallery Thumbnails**
Determine where and how thumbnails are displayed.
- None
- Both
- Desktop
- Mobile

*Note:* On mobile, thumbnails are horizontal and below the main image.

**Thumbnail Image Ratio**
Set the aspect ratio for thumbnail images.
- Portrait
- Square
- Landscape

**Media Object Fit**
Specify how media should fit within its container.
- Cover
- Contain

**Adaptive Ratio and Auto Height**
Adjust the media display settings.
- None
- Adaptive ratio
- Auto height

**Transparent Background**
Enable or disable a transparent background for the media.

**Disable Media Zoom**
Toggle the ability to zoom in on media.

###### Navigational & Additional Settings

**Gallery Arrows Show On**
Specify when gallery navigation arrows should be visible.
- Desktop
- Mobile
- Both

**Display Media Gallery Pagination**
Control the pagination display for the media gallery.
- None
- Over gallery
- Under gallery
- Mobile only

**Show Media Indicator**
Enable or disable the media indicator.

###### Media Gallery Info

**Metafield for 'As Seen On'**
Enter the related metafield namespace and key to show images as 'As seen on', e.g., 'theme.as_seen_on'.

###### General Settings

**Enable Actions Bar on Mobile**
Enable or disable the actions bar on mobile devices.

**Display Action in Double Row**
Suggested for options with long characters.

**Content Alignment**
Align the content within the media gallery.
- Left
- Center
- Right

**Color Scheme for Breadcrumbs**
To edit all your theme's colors, go to your color theme settings.

**Color Scheme for Arrows**
To edit all your theme's colors, go to your color theme settings.

###### **Elements:**

###### Badges:

**Badges Position**
- Next to title
- In a row

###### Title
The title will be pulled from the product's backend.

###### Price

**Show Tax Information** (Checkbox)

**Show Shipping Information** (Checkbox)

**Show Custom Information** (Text Box)
*Note: Overwrites other settings.*

###### Description

**Behaviour**
- Plain
- Accordion
- Tab

*Note: You need to add content tabs block to set tab.*

**Heading**
- Text Box

*This heading overwrites the default heading of the block.*

**Truncate Line Limit**
- Numeric Value

*Note: You can disable by setting 0.*

**Icon**
*Note: Leave blank to hide the icon. You can find the list of available icons here.*

**Custom Icon**
*Note: This will overwrite the default icon.*

###### Variant Picker

**Title**

**Variant Picker**
*This field's purpose is to display the correct name across section blocks.*

**Variants Display**
- Dropdowns
- Buttons

**Show Variant Image for Swatches**
*Note: This option works with the button display type. If variant image is not available, it shows the default buttons.*

**Dropdown Layout**
- Rows
- Columns

**Size Guide (can be linked)**
*Displays the content of the page that needs to be created specifically for the size guide popup.*

**Size Option Label**
- Text Box

*This option is needed to identify where to display the size guide popup button. You can simply write your size variant option name. Example: `Size`*

###### Purchase Options

**Buy Buttons**

**Show Quantity (optional)**

**Quantity Type**
- Inline
- Separate

**Show Dynamic Checkout Buttons**
*Note: Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. Learn more*

**Show Recipient Information Form for Gift Cards**
*Note: Allows buyers to send gift cards on a scheduled date along with a personal message.*

###### Inventory Notice

**Inventory Threshold**
- Numeric Value

**Don't Show the Quantity, Show Only the Text** (Checkbox)

###### Content Grid

**Heading**
- Text Box

**Icon**
*Leave blank to hide the icon. You can find the list of available icons here.*

**Custom Icon**
*Optional custom icon to display.*

Product Page

###### About:
The collection template is where you can choose the styling of how the products in your collections are displayed.

![Screenshot_23.png](https://cmsad.digifist.com/uploads/Screenshot_23_4dda170c06.png)
###### General Settings:

**Enable Products Count:**(Enable this option to display the total number of products in the collection. This helps customers understand the scope of available products.)

**Enable Sorting:** (Enable sorting to allow customers to arrange products based on criteria such as price, name, etc.)


**Enable Filters:** (Enable filters to facilitate product filtering by attributes such as price, color, size, etc.)

**Enable Opened Accordions:** (Enable this option to have filters initially expanded (opened) in the accordion layout for easier access.)


###### Filters

**Filters Shape:** (Rounded / Squared)

###### Product Grid

**Products per Row** (This is for desktop, and has two available choices, **three** or **four**)
 
**Products per Row for Mobile** (Has two available choices, **one** product, or **two**)

**Products per Page: ** (Note:  The number of products will automatically adjust based on the text card size to maintain layout consistency)

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


###### Pagination Style:

Page Numbers
Load More

---
##### Text Card

![text_card_main.png](https://cmsad.digifist.com/uploads/text_card_main_2ca0ad8ffb.png)

###### About:

A text card, is a break in the collection where you can add stylish images or promotional information to augument your customers' experience inside your collections.
You can add information about the collection, or a discount code in it, and this gives you a better indirect interaction with your customers.

###### How to:

The text card can be added directly beneath the collection, from the "Add text card block".
You can add up to two text cards, where you can either add an image, a heading, or both, along with a button and redirect URL to a page of your choosing.

The text and image can also be dynamically connected, therefore, you can control what each collection will display.

The layout of the card gives you a range of choices from SM to XL, and the position on the page can also be selected.

The dimension of the text card's heading can also be chosen from the text box's styling options.



Collection template & Text Card

###### **About:**

Product cards are essential elements in showcasing your products on your website. They provide a visually appealing way for customers to browse and interact with your merchandise. The Product Cards settings allow you to customize various aspects of how your products are displayed, including media, badges, add to cart options, variants, and swatches.

---

###### **Media Settings:**

**Show Secondary Media on Hover:** (Enables the display of secondary media (such as additional product images) when users hover over the product card.)

**Product Media Ratio:** (Specifies the aspect ratio for product media, allowing you to choose from options like Auto, 1:1, 3:4, and 4:5.)

**Media Fit:** (Defines how product media should fit within its container, with options for Cover and Contain.)

###### **Badges Settings:**

**Show Product Card Badges:** (Determines whether badges, such as product labels or promotional tags, should be displayed on product cards.)

**Badge Display Position:** (Specifies the position of badges relative to the product card, with options for Left or Right placement.)

###### **Add to Cart Settings:**

**Show Quick Add to Cart Option:** (Enables a quick add to cart button, allowing customers to swiftly add products to their cart without navigating to the product page.)

**Add to Cart Button Content:** (Defines the content of the add to cart button, with options for Icon, Text with Icon, or Text only.)

**Inverse Add to Cart Button Color:** (Inverts the color of the add to cart button for enhanced visibility or aesthetic purposes.)

###### **Variants Settings:**

**Desktop Display Options:** (Specifies how product variants should be displayed on desktop devices, with options for None, Info, or Buttons.)

**Mobile Display Options:** (Specifies how product variants should be displayed on mobile devices, with options for None, Info, or Buttons.)

###### **Swatches Settings:**

**Show Product Swatches:** (Determines whether product swatches (representing different product variations) should be displayed.)

**Circle Product Swatches:** (Formats product swatches in circular shapes for a distinctive visual style.)

**Swatches Option Name:** (  Specifies the name of the option associated with the swatches, such as Color or Material.)

---

**Customize your product cards to create engaging and user-friendly shopping experiences for your customers. Utilize the Product Cards settings to tailor the display of your products according to your brand identity and customer preferences.**

Product cards

Elevate your digital presence with the sublime artistry our custom icons, meticulously crafted to harmonize with your unique brand identity.

Unleash the power of customization. Each icon is a masterpiece, tailored to perfection to resonate with your audience. Whether it's a minimalist design or a complex illustration, our custom icons infuse your theme with an unparalleled level of sophistication and distinctiveness.

###### Important note:

Icons and other graphical elements included in this theme are licensed to the developer and embedded as part of the theme’s design. End users are not permitted to extract, reuse, or redistribute these elements outside the context of the purchased theme.

Icons

![fullwidthbanner.png](https://cmsad.digifist.com/uploads/fullwidthbanner_d55fd50632.png)

###### About

The Full Width Banner section allows you to create visually stunning banners that span the entire width of the screen. With customizable settings for content alignment, media type, button styles, and more, you can craft engaging banners tailored to your website's needs.

###### General Settings

**Full Width Banner:** Enable to make the banner span the full width of the screen.

**Banner Height for Desktop:** Set the height of the banner for desktop devices, measured in viewport height (vh).

**Banner Height for Mobile:** Set the height of the banner for mobile devices, measured in viewport height (vh).

**Content Alignment:** Choose the alignment of the content within the banner for desktop and tablet devices:
- Left
- Center
- Right

**Content Position:** Choose the position of the content within the banner for desktop and tablet devices:
- Start
- Center
- End

**Media Desktop:** Select the media type (image or video) for desktop and tablet devices:
- **Image:** Upload or select an image for the banner background.
- **Video:** Upload or select a video for the banner background. You can also paste a link for an external video.
- **Show Video Controls:** Enable the display of video controls for the banner video on desktop and tablet devices.


![Screenshot_12.png](https://cmsad.digifist.com/uploads/Screenshot_12_3101893158.png)


**Media Mobile:** If set, the specified media will be used on mobile devices instead of the main media.

![Screenshot_14.png](https://cmsad.digifist.com/uploads/Screenshot_14_a663888370.png)

###### Section Width

Choose the width of the section:
- Normal
- Narrow
- Fluid
- Full

###### Heading Settings

**Heading:** Add a headline or title to the banner content.

**Block Width:** Choose the width of the heading block:
- Normal
- Narrower
- Narrow
- Full

**Heading Size:** Select the size of the heading text:
- Small
- Medium
- Large


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 

 
###### Buttons Settings

Configure buttons to include in the banner content:

**First Button Label:** Specify the text for the first button.

**First Button Link:** Provide the URL link for the first button.

**First Button Style:** Choose the style for the first button:
- Filled
- Outlined
- Text

**Second Button Label:** Specify the text for the second button.

**Second Button Link:** Provide the URL link for the second button.

**Second Button Style:** Choose the style for the second button:
- Filled
- Outlined
- Text

###### Subheading Settings

**Subheading:** Add a brief subheading or description to complement the heading.

**Link:** Optionally, add a link to the subheading.

Utilize the Full Width Banner section to create captivating banners that make a bold statement on your website's homepage or landing pages. With flexible customization options, you can design banners that resonate with your audience and effectively convey your message.

Full width banner

![Blog.png](https://cmsad.digifist.com/uploads/Blog_cdbe50fe43.png)

###### Precondition:

Blogs and articles must be created in the backend under Online Store > Blog posts.
Only after creating them you'll be able to assign them on the theme level.

---

###### About:

The Blog Articles section allows you to display a selection of articles from your blog on any page of your website. This section can be customized to match your website’s design and layout, providing a cohesive look and feel.

###### General Settings:

**Heading** (used to add a title to your blog)
**Blog** (used to choose a blog from which articles will be displayed).
**Label** - Enter a label for the blog link (e.g., "Visit Blog").
**Layout** (there are two styles available, please refer to the theme to see the changes each style brings)

**Card Media Ratio**

The aspect ratio for the article images can be chosen from the following options:
1:1 // 2:3 // 3:2 // 3:4 //4:3

**Options**

- Show Excerpt: Display a brief summary of the article.
- Show Date: Display the publication date of the article.
- Show Author: Display the author's name.
- Show Read More: Display a "Read More" link.

**Content Alignment**(Left/Center/Right)

**Button Style** (Filled/Outlined/Text)

###### How to add articles:

Articles can be added by clicking the "Add Article" button, from which you need to select the specific articles to be displayed in the section.

![addarticles.png](https://cmsad.digifist.com/uploads/addarticles_c6543648b4.png)

---

This section will display only three articles at a time, but they can be scrolled by using the arrows from the upper right corner:

![Scroll between articles.png](https://cmsad.digifist.com/uploads/Scroll_between_articles_ee9a37b624.png)

Changes to the section's aspect can be made by selecting the preferred layout.

--- 

By following these guidelines, you can effectively customize and display blog articles on your website, ensuring they are visually appealing and aligned with your overall theme design.

Blog Articles

#### About:

The Essence theme comes with a new idea for how you can manage your design colors. Therefore, we’ve introduced color schemas, where you can create and save different color options that can be used separately on the various sections within the theme.

![color_scheme_banner_1.png](https://cmsad.digifist.com/uploads/color_scheme_banner_1_87bcd193a6.png)




**Path: Customizer > Settings > Colors**

![colors_path_1.png](https://cmsad.digifist.com/uploads/colors_path_1_0c37d8ece6.png)





#### How to:

All you have to do is press on “Add scheme” and then select the colors as you would normally. However, you’re not restricted to a single schema but have the option to directly create multiple schemas that you can save for later use.

![color_schemes_1.png](https://cmsad.digifist.com/uploads/color_schemes_1_79de284924.png)

To edit a current scheme, you just have to select it from within the available ones.

#### Categories and elements:

##### - Background

![background_1.png](https://cmsad.digifist.com/uploads/background_1_c6a00c8762.png)

##### - Typography

![typography_2.png](https://cmsad.digifist.com/uploads/typography_2_fa0ffd9fda.png)

##### - Buttons

![buttons_3.png](https://cmsad.digifist.com/uploads/buttons_3_f37ac7eb41.png)

##### - Other elements

![other_elements_4.png](https://cmsad.digifist.com/uploads/other_elements_4_b0110dd21d.png)

#### Note: 

We recommend you take your time selecting each color and also try testing the exact section that the schema will be applied to in order to see the changes you make in order to avoid special issues (e.g., The background and the text have the same color and you can’t figure out why the text is not showing)

Color schemes

![Screenshot_24.png](https://cmsad.digifist.com/uploads/Screenshot_24_897f41cc12.png)

###### About:
“Default page” is a template that you can customize in the backend of your store Online Store > Pages
![default_page_1.png](https://cmsad.digifist.com/uploads/default_page_1_0b23de15eb.png)

The purpose of this page varies, as it can refer to every custom page across your store, from “About us” to “Size guide.” It can be used for SEO reasons, and in addition to the customization options that Shopify provides, the theme comes with the following options:
-	Show page title
-	Show top navigation
-	Additional heading and Body text
-	Color scheme

Default Page

![StoreLocator.png](https://cmsad.digifist.com/uploads/Store_Locator_43146152c2.png)

###### Store Locator:

Add a store locator to your page to display flagship stores on a map with additional details.

---

###### Heading:

Heading: Enter a heading for the store locator section. Example: "Our flagship stores"

---

###### Section Layout:

Image: Select an image to display alongside the map.  
Map: Display a map with store locations. 

Image Layout Columns (desktop only):

Auto: Adjust columns based on screen size.  
Two columns: Display the image in two columns.  
Three columns: Display the image in three columns. 


---

###### Height Settings:

Height Desktop: Set the height on desktop. Example: "60vh"  
Set Auto Height: Automatically adjust the height. *Note: Disables desktop height options.*  
Height Mobile: Set the height on mobile. Example: "60vh"



###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


---

###### Map Settings:

[Click here to learn how to get your Google Maps Api Key](https://developers.google.com/maps/documentation/javascript/get-api-key)

Zoom: Option used to set the zoom of the map

---

###### Card Settings:

Card Background Styles:  
Solid Color: Use a solid color background.  
Blurred: Use a blurred background.  
Transparent: Make the background transparent.

---

###### Pin Settings:

![Screenshot_1.png](https://cmsad.digifist.com/uploads/Screenshot_1_42039ddb21.png)

###### Store Info:

Store Name: Enter the store name. Example: "Antwerp, Bel"  
Address: Enter the store address.

###### Opening Hours:

Opening Hours: Enter store hours. Example: "Mon-Sat: 10am-8pm, Sunday closed"

###### Store Image:

Upload Images: Select or upload an image.  
Explore Free Images: Choose from free images.

###### Store Location:

In order to have the pin shown accurately on the map, you'll have to find out the Latitude and Longitude of the store's location. You can do so by entering your address on google and request that the results include both coordinates.

Example:
Latitude: Enter the latitude: "41.902331905731444"
Longitude: Enter the longitude: "12.45445667605574"

###### Custom Tooltip Text:

Custom Tooltip Text: Enter custom tooltip text. If blank, the store name will be used.

---

###### Button Style: Filled / Outlined / Default

###### Phone Button:

Phone Button Name: Customize the label. Example: "Call"  
Phone: Enter the phone number. Example: "+01 xxxx xxxx"

###### Directions Button:

Directions Button Name: Customize the label. Example: "Directions"  
Custom Directions Link: Paste a custom link or leave blank for a Google Map directions link.

---

###### See more card:

This section can be added by clicking on "Add block".
The section is a simple and classy card that can be used to advertise this section.

The customization options include:
- Title Example: "You can find us here"
- Button (a button to redirect the customers to a page of your choosing).
- Searchbox (You can choose to display it or not)

![Screenshot_2.png](https://cmsad.digifist.com/uploads/Screenshot_2_2b987a97d3.png)

Customize the Store Locator section to showcase your flagship stores, making it easy for customers to find and visit your locations. Adjust layout, map, and store details to fit your brand's identity and enhance user experience.

Store Locator

![Dual Tiles.png](https://cmsad.digifist.com/uploads/Dual_Tiles_986e29dc0f.png)

###### About

In this documentation, we'll cover the setup and customization options for the Dual Content Tiles section. This section allows you to showcase content in various layouts and styles, tailored to highlight different aspects of your products or services.

###### Section Layout

**Separated / Stacked**

**First Block Size:** Full / Half / Large / Small
*(Second one will be set automatically.)*

**Swap Order for Mobile** Checkbox

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


###### Tile

![dual content.png](https://cmsad.digifist.com/uploads/dual_content_9707b795bb.png)

**Show on:** Desktop / Mobile / Both

![Mobile.png](https://cmsad.digifist.com/uploads/Mobile_e15f3e7816.png)

---

**Color Scheme:** 
*(To edit all your theme's colors, go to your color theme settings.)*

**Custom Background Color:** No color chosen

###### Heading

**Size:** XS / S / M / L / XL

**Text** Select what text to be shown here.

###### Button

**Label:** Explore *(Leave empty to hide the button)*

**Link:** Example: New Collection

**Style:** Filled / Outlined / Text

###### Product

**Select Product:** 

**Aspect Ratio:** 2:1 *(Useful for images and videos. Auto option is recommended for long text.)*

**Vertical Position:** Stretch / Start / Center / End

**Content Position:** Start / Center / End

**Alignment:** Left / Center / Right

**Position:** Before / Between / After

###### Media

**Image** Select an image

**Video:** Select video *(overwrites image)*

**External Video:** Paste a link *(overwrites image and video. We recommend using the video option for better performance as external videos may cause issues.)*

**Show Video Controls:** Mobile *(If set, will be used on mobile devices instead of the main media.)*

###### Mobile Media

**Video:** Select video *(overwrites image)*

**External Video:** Paste a link *(overwrites image and video. We recommend using the video option for better performance as external videos may cause issues.)*

**Show Video Controls**

This format maintains clarity and avoids redundant titles, focusing on essential information for configuring the Dual Content Tiles section. Let me know if there are any further adjustments needed!

Dual content tiles

#### About:

This documentation contains all of the general related to the options of the product cards.
We call a "Product card" - the display item that will show general information about a product. The product card contains an image, and every additional option that can be added to it to catch your customers' attention outside of the actual product page (e.g. Title, price, variants, swatches, add to cart button, product badges and so on):

![product_cards_image.png](https://cmsad.digifist.com/uploads/product_cards_image_e5ef552109.png)


### **Path: Customizer > Settings > Product Cards**

---

### **Media**

**Show secondary media on hover**

- Enable this option to display a secondary product image when the user hovers over the product card.

**Product media ratio**

- **Auto**: Automatically adjusts the aspect ratio based on the image.
- **1:1**: Sets the image aspect ratio to a square.
- **3:4**: Sets the image aspect ratio to 3:4.
- **4:5**: Sets the image aspect ratio to 4:5.

**Media fit**

- **Cover**: Scales the image to cover the entire area of the product card, potentially cropping parts of the image.
- **Contain**: Scales the image to fit within the product card without cropping, potentially leaving some empty space.

*Note: Media fit options are only applicable if a fixed aspect ratio is chosen.*

---

### **Badges**

**Show product card badges**

- Enable this option to display badges (e.g., "Sale,” "New") on the product cards.

**Badge display position**

- **Left**: Displays badges on the left side of the product card.
- **Right**: Displays badges on the right side of the product card.

---

### **Add to Cart**

**Show quick add-to-cart option**

- Enable this option to allow users to quickly add products to their cart directly from the product card.

**Add to cart button content**

- **Icon**: Displays only an icon on the add to cart button.
- **Text with icon**: Displays both text and an icon on the add to cart button.
- **Text**: Displays only text on the add to cart button.

**Inverse add to cart button color**

- Enable this option to use the inverse color scheme for the add to cart button.

---

### **Variants**

**Desktop display options**

- **None**: Do not display variant options on the product card.
- **Info**: Display variant information (e.g., available colors and sizes).
- **Buttons**: Display variant selection buttons (e.g., color swatches, size buttons).

**Mobile display options**

- **None**: Do not display variant options on the product card.
- **Info**: Display variant information (e.g., available colors and sizes).
- **Buttons**: Display variant selection buttons (e.g., color swatches, size buttons).

---

### **Swatches**

**Show product swatches**

- Enable this option to display color or material swatches for product variants on the product card.

**Circle product swatches**

- Enable this option to display swatches in a circular shape.

**Swatches option name**

- The option name that holds the swatch colors (e.g., Color, Material, etc.).

---

These settings allow you to customize the appearance and functionality of product cards on your store, enhancing the user experience and making product selection more intuitive.

![timer1.png](https://cmsad.digifist.com/uploads/timer1_f59511a802.png)

###### About:
The Callout Banner section is a versatile tool for drawing attention to specific promotions, announcements, or key messages on your website. It allows you to combine striking visuals with compelling text and optional features like countdown timers and buttons to engage your audience effectively.

###### Settings:

**Section Layout:**

Horizontal: Arrange content and media side by side.
Vertical: Stack content and media vertically.

**Image Settings:**

Image (used to upload the main image for the desktop mode banner).
Mobile Image (used to upload an image specifically for mobile devices).

Note: If a mobile image is set, it will be used on mobile devices instead of the main image.

**Media Position:**

- Start: Position media at the start of the section.
- End: Position media at the end of the section.
- Full: Media covers the entire section.

**Content:**

Subheading: Add a subheading for the banner.
Heading: Add a main heading for the banner.

**Heading Size:** (can be Small/ Medium/ Large)

**Text:** Add descriptive text for your callout banner here.

**Button Label:** (e.g., "Shop Sale")
Note: Leave empty to hide the button.

**Button Link:** Provide a URL for the button.

**Button Style:** (can be Filled / Outlined / Default)

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 

###### Timer Settings:


**Show Timer:** Option to display a countdown timer.

**Timer Layout:** - You can choose between the two styles available (please refer to the theme's customizer)

**Timer Size:**

- S (Small): Subtle and compact.
- M (Medium): Balanced visibility.
- L (Large): Prominent and eye-catching.
- XL (Extra Large): Highly noticeable and impactful.

**How to set up the timer:**

It is important to remember that this is a countdown timer used to show how much time is left until "Promotion starts", or "Promotion ends" - we'll leave that up to you to decide.

So, when setting up the timer, you must decide the year it's going to end, as well as month and day, and you can go as far as selecting the hour and exact minute when that happens:

![How to.png](https://cmsad.digifist.com/uploads/How_to_481388803e.png)

**Timer End Message: ** This should be self explanatory, as you can use it to display the message you wish to display, such as "Use discount code X321RC for 20% discount".

Note: This message will be displayed when the timer ends.

![timer2.png](https://cmsad.digifist.com/uploads/timer2_1ba73540cd.png)

###### Parts Display Settings:

- Show Day Part: Option to display the day part of the timer.
- Show Hour Part: Option to display the hour part of the timer.
- Show Minute Part: Option to display the minute part of the timer.
- Show Second Part: Option to display the second part of the timer.

---

By following these guidelines, you can effectively customize and display a callout banner on your website, ensuring it is visually appealing and aligned with your overall theme design.


Callout banner

###### About:

The "Extras" settings provide additional functionalities and enhancements to tailor your website's performance and user experience according to your preferences. From facilitating navigation with breadcrumbs to adding convenience with a "Back to Top" button, these settings offer valuable tools to optimize your site's usability and functionality.

---

###### Options:

The Extras settings encompass a range of supplementary features designed to enhance different aspects of your website. Here's what you can do with each option:

 **Breadcrumbs:** (Control the visibility of breadcrumbs on your website. Choose whether to display them on product pages, all other pages, or both.)
**Back to Top Button:** (Enable or disable the "Back to Top" button for easy navigation. Decide whether to show it on all pages of your website.)
 **Currency Codes:** ( Add currency codes to product prices for clarity. Determine whether to display currency codes alongside prices.)
 **Timer:** (Configure countdown timers for promotional events or limited-time offers. Select your store's timezone (GMT) to ensure accurate countdowns.)
 **Product Video:** (Customize the display of video controls on product media. Choose whether to show controls for videos embedded in product pages.)

---

**Utilize the "Extras" settings to enhance your website's functionality and user experience. From guiding visitors with breadcrumbs to improving navigation with a "Back to Top" button, these options offer valuable tools to optimize your site's performance and usability.**

Extras

![Screenshot_25.png](https://cmsad.digifist.com/uploads/Screenshot_25_ba21d5ed09.png)

###### About:
The password page is a default page used to inform any customer that accesses the link of your store that the store is currently unavailable due to a specific reason, be it maintenance, not yet launched, or other reasons that would compel you to close the access to your store.


The template includes:
-	Heading
-	Subtext
-	Email sign-up form (that can be further customized with a title and text)
-	Colors

**Note:** If you require any assistance or encounter any issues, please don’t hesitate to reach out to our support team.




Password page

![Comparison Slider.png](https://cmsad.digifist.com/uploads/Comparison_Slider_ff92c98762.png)

###### About

The Before and After section is a dynamic tool designed to showcase transformative changes or comparisons using interactive image sliders. It enables customers to manually slide between two images, offering a visually engaging way to demonstrate the impact of your products or services.


---

###### General Settings

**Heading** (Edit the text box to display the title you wish to convey.)

**Text** (Edit the text box to display the message you wish to convey.)

**Button Label** (Choose the button label, e.g., "Shop Now".)

**Button Link** (Add the URL for the redirect button.)

**Button Style** (Filled / Outlined / Text)

**Media Aspect Ratio** (1:1 / 2:3 / 3:4 / 4:5 / 9:16)

###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 

---

###### Before/After

You can add the sections from the left side of the screen "Add block"
These blocks can be easily customized as they only include the image, label text, and label color.

![Screenshot_4.png](https://cmsad.digifist.com/uploads/Screenshot_4_1f1354fc0e.png)

Each of the two sections is easily customizable as they contain an image, a label, and the color scheme:
![Screenshot_5.png](https://cmsad.digifist.com/uploads/Screenshot_5_0490f22c3d.png)


Compare slider

###### **About:**

The Performance settings offer options to optimize your website's performance and enhance user experience by adjusting image quality and disabling animations on mobile devices. These settings are crucial for improving loading times, reducing bandwidth usage, and ensuring smooth functionality across various devices.

---

###### **Options:**

1. **Max Image Quality:**
    - This setting allows you to adjust the image quality displayed on your website. Choose from options like Original, Low, Medium, or High to balance image clarity with performance. Lower quality images consume less bandwidth and load faster, optimizing your site's performance.
2. **Disable Animations on Mobile:**
    - Enable this option to disable animations specifically on mobile devices. This is beneficial for supporting older devices with less accurate rendering capabilities, ensuring a smoother user experience and faster page loading times.

---

Adjusting image quality and animation settings with the Performance options can optimize your website's performance and improve user experience. Choose the appropriate image quality level to balance clarity and performance, and disable animations on mobile devices to ensure smooth functionality across all platforms.

Performance

![recently.png](https://cmsad.digifist.com/uploads/recently_60fc8e04ae.png)

###### About

The Recently Viewed Products section allows you to showcase products that users have recently visited on your website. This feature enhances user experience by providing quick access to previously viewed items, encouraging engagement and potential conversions.

---

###### Layout:

**Layout 1 / Layout 2**

###### Slideshow Settings:

**Enable Slideshow Overflow**

**Show Navigation Arrows**

**Autoplay Interval:** 3 sec *(Set to 0 to disable autoplay)*

###### Heading & Subheading:

**Heading:** (customizable text)
**Subheading:** (customizable text)

###### Button Settings:

**Button Label:** View All *(Leave empty to hide the button)*

**Button Link:** Paste a link or search

**Button Style:** Filled / Outlined / Text

###### Number of Products:

**Number of Products:** 8 *(Maximum number of products to display)*

**Show Unavailable Products:** If enabled, out-of-stock or unavailable products will be displayed.


###### Common settings:

[For the common settings, please access this link](https://www.digifist.com/en/help-center/documentation/theme/release/common-1) 


---

Enhance user engagement and streamline navigation with the Recently Viewed Products section. Incorporate this feature into your website layout to provide users with easy access to products they have shown interest in. Utilize the customization options to tailor the section to your brand's aesthetics and optimize the user experience.

Theme Helpcenter

Browse by theme

Browse by app

Stay connected