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

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

##### 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

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

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

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

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 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

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 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 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

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

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

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 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.


Products

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

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

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 section is meant to link all your social media accounts to include it in the footer.

Social media

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

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

"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

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

###### 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 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

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 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

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

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

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


Buttons

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 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.

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 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

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

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

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

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

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

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

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.


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?

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?

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?

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?

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?

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

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

large_Desktop06-min.jpg

medium_Desktop06-min.jpg

small_Desktop06-min.jpg

thumbnail_Desktop06-min.jpg

Desktop06-min.jpg

Sahara

Default

Mirage

Typography 

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.

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

###### Footer logo

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

![Sahara · Customize Sahara - Theme Latest Submit -  (3).png](https://cmsad.digifist.com/uploads/Sahara_Customize_Sahara_Theme_Latest_Submit_3_ce149321bd.png)

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

![mojavethemestagingtechsupport · Customize Copy of  (2).png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_Customize_Copy_of_2_54d46f86be.png)

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

###### 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.”

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

###### Payment Icons
The **Payment Icons** provide customers with a quick overview of the payment methods that your online store accepts.

**Enable payment icons in the footer**
1. Go to **Theme Settings**
2. In your Shopify admin, go to Theme Customizer.
3. Click **Footer**.
4. Check the **Show payment icons** checkbox.

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

5. Click **Save.**

A feature where merchants could select their **country name, currency code** and **symbol**. 

It is particularly useful for merchants from different countries or regions, as it helps in tailoring the shopping experience based on the merchant’s location.

![Sahara+B7+Customize+Copy+of+Sahara+Theme+1.1.1+B7+Sh.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Copy_of_Sahara_Theme_1_1_1_B7_Sh_198617b152.png)

Country Drawer 

**Colors**

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
- Announcement bar
- Footer

**Swatches**

- 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.

![Swatches.png](https://cmsad.digifist.com/uploads/Swatches_0b04d79b82.png)

### **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.

**Location to upload Custom Swatches:**

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

💡 We recommend using square image files.

A **Lookbook** is a collection of images to present products with various settings and outfits.

![Sahara+_C2_B7+Customize+Sahara+Theme+1.0.3+-+100323+_C2_B7+S.png](https://cmsad.digifist.com/uploads/Sahara_C2_B7_Customize_Sahara_Theme_1_0_3_100323_C2_B7_S_1bec05294c.png)

Please follow the steps to create a **Lookbook :** 

1. Create a **Lookbook page** in the Shopify admin.

![Sahara+B7+Lookbook+SS23+B7+Shopify+80%94+Mozilla+Firefox.png](https://cmsad.digifist.com/uploads/Sahara_B7_Lookbook_SS_23_B7_Shopify_80_94_Mozilla_Firefox_16fdbeff23.png)

2. Create a **Lookbook menu** in the Navigation. 

![Sahara+B7+Main+Menu+B7+Shopify+80%94+Mozilla+Firefox+202.png](https://cmsad.digifist.com/uploads/Sahara_B7_Main_Menu_B7_Shopify_80_94_Mozilla_Firefox_202_dc652574e0.png)

3. Create a **Lookbook template**. 

![Sahara+B7+Customize+Sahara+Theme+1.0.3+B7+Shopify+80%94+.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_3_B7_Shopify_80_94_a7f7041b6d.png)

4. Add the **Hero Alternative** section in the lookbook template.

![Monosnap+File+-+Google+Chrome+2023-03-14+17.24.46.png](https://cmsad.digifist.com/uploads/Monosnap_File_Google_Chrome_2023_03_14_17_24_46_762451285f.png)

5. Add the **highlight an image** block which enables you to enter **Heading**, **Subheading** and **Body text**.

![Sahara+B7+Customize+Sahara+Theme+1.0.3+B7+Shopify+80%94+ (1).png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_3_B7_Shopify_80_94_1_9559533fae.png)

6. Add the **Media block** to upload the image for your Lookbook.

![Sahara+B7+Customize+Sahara+Theme+1.0.3+B7+Shopify+80%94+ (2).png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_3_B7_Shopify_80_94_2_d968c01dc0.png)

Lookbook

Product badges are used to highlight a product definition. 

![Monosnap+File+-+Google+Chrome+2023-03-14+21.27.18.png](https://cmsad.digifist.com/uploads/Monosnap_File_Google_Chrome_2023_03_14_21_27_18_c50ac26b17.png)

Please follow the steps to create a product badge : 

1. Click **Settings** in your Shopify admin. 
2. Click on **Custom Data.** 
3. Click on **Products.**
4. Click on **Add definition**
5. On the name field enter: `Tags`
6. On the **Namespace** and **key** field enter the following: `tags.list`
7. On content type, chose **Single line text** under **Description.** 
8. Click on **One value.**
9. Click **Save**.

![Sahara · Product metafield definitions · Edit Tags.png](https://cmsad.digifist.com/uploads/Sahara_Product_metafield_definitions_Edit_Tags_44a993a6ec.png)

Please follow the steps to see **Tags.**

1. Navigate to the specific product. 
2. Scroll down and enter the name of the tag under the **Metafields** section.
3. Click **Save**.

![Sahara+B7+Products+B7+Honey+Top+Ivory+B7+Shopify+80%94+Mo.png](https://cmsad.digifist.com/uploads/Sahara_B7_Products_B7_Honey_Top_Ivory_B7_Shopify_80_94_Mo_6a60254c08.png)



Product Badges 

In order to create a mega menu navigation in the Sahara theme, there are two key considerations. If you want to include both text links and images, you will need to set up a navigation menu with 1st level nested menu items.

Example menu with images and links:
![Dropdown one-min.jpg](https://cmsad.digifist.com/uploads/Dropdown_one_min_e7881985a7.jpg)

Alternatively, if you prefer to exclude text links from your Mega Menu, you can create a parent navigation link without a subnavigation.

Example menu only with images:
![Dropdown two.jpg](https://cmsad.digifist.com/uploads/Dropdown_two_476ce1b541.jpg)

#### Creating a navigation 
Drop-down menus are used to organize products, collections, and pages in the main menu of your Shopify store. This type of organization makes it easier for customers to navigate your online store and quickly find what they’re looking for. 

<iframe width="100%" height="450px" src="https://www.youtube.com/embed/UrKrgOWRvzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


#### Linking images in the navigation
To add an **Add image with a link and text** section to your header, follow these steps:

1. Click on the **Header** in the theme customizer.
2. Click **+ Add image with a link and text**.

This process will create a new entry in the right sidebar, which will lead you to enter tier 1 link title. By using this function, you can add one or more images and link this to the right navigation. For example, when we use "Swimwear" on the tier 1 link title, our image will show up on the Swimwear link from the navigation.

![megamenu.jpg](https://cmsad.digifist.com/uploads/megamenu_e2c1b85719.jpg)

Navigation Image and Mega Menu 

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.

![Sahara Swimwear — Mozilla Firefox 2023-02-01 15.04.png](https://cmsad.digifist.com/uploads/Sahara_Swimwear_Mozilla_Firefox_2023_02_01_15_04_1d2aad51d7.png)

###### 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.




Featured Products

It is a type of animation effect that allows text and icon to scroll horizontally across a webpage. It creates a dynamic and eye-catching element that can be used to highlight important information, promotions, or announcements.

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

The Marquee items also have an option to change sizes.

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

You have the option to add an icon next to the Marquee item.

![Screenshot_10.png](https://cmsad.digifist.com/uploads/Screenshot_10_d2ba1a0c00.png)

Marquees

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_Pop_Up_e1fde4c848.png](https://cmsad.digifist.com/uploads/Newsletter_Pop_Up_e1fde4c848_aa59e7dc0f.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.

<div style="display: none;">###### Expiration date
Adjust the number of days to avoid annoying your potential customers by showing them the pop-up on each visit.</div>

###### 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.


You have three different layout options as 70/30, 50/50 and 30/70.

![Sahara Swimwear — Mozilla Firefox 2023-02-01 15.10.png](https://cmsad.digifist.com/uploads/Sahara_Swimwear_Mozilla_Firefox_2023_02_01_15_10_64df221481.png)

Dual Content Tiles 

A **"back to top"** button is a website feature that allows users to quickly scroll back to the top of your store with a single click. It provides a convenient way to navigate long pages without having to manually scroll back up.

**To enable this, please follow the instruction below:**
1. Click **Theme Settings.**
2. In your Shopify admin, go to the Theme Customizer.
3. Click **Extras.**
4. Tick the **Show on all pages** box under **Back to Top Button.** 

![copkteau.png](https://cmsad.digifist.com/uploads/copkteau_6d7e17531a.png)

5. Click **Save.**

Back to Top

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

![animations.png](https://cmsad.digifist.com/uploads/animations_c2cbc73110.png)

Animations 

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

![mojavethemestagingtechsupport · Customize Sahara 1.png](https://cmsad.digifist.com/uploads/mojavethemestagingtechsupport_Customize_Sahara_1_85c0ab6461.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_39d930d66d.png)

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.jpg](https://cmsad.digifist.com/uploads/Hero_76ba4de078.jpg)

![Collection hero.jpg](https://cmsad.digifist.com/uploads/Collection_hero_7454d60877.jpg)

![Image with text.jpg](https://cmsad.digifist.com/uploads/Image_with_text_9d76f5ebc1.jpg)

![Full width banner.jpg](https://cmsad.digifist.com/uploads/Full_width_banner_fb3a3da5ff.jpg)

![Featured collections.jpg](https://cmsad.digifist.com/uploads/Featured_collections_b91370e3ad.jpg)

![Media with image.jpg](https://cmsad.digifist.com/uploads/Media_with_image_b93a0ec177.jpg)

![Shop the look.jpg](https://cmsad.digifist.com/uploads/Shop_the_look_4d9e5db65c.jpg)

![Dual tiles.jpg](https://cmsad.digifist.com/uploads/Dual_tiles_6379b28dc3.jpg)

![Testimonials.jpg](https://cmsad.digifist.com/uploads/Testimonials_4efc436d40.jpg)

![Customer account.jpg](https://cmsad.digifist.com/uploads/Customer_account_ae2eb1b246.jpg)



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.

![Sahara · Customize Sahara - Theme Latest Submit -  (5).png](https://cmsad.digifist.com/uploads/Sahara_Customize_Sahara_Theme_Latest_Submit_5_28420def23.png)

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

![hero slide.png](https://cmsad.digifist.com/uploads/hero_slide_ea5fbc6e88.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. 


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**.





**Color swatches** can be used in two ways with Sahara theme : 

The first option is using the color codes.

![asdafasvdvsd.png](https://cmsad.digifist.com/uploads/asdafasvdvsd_6355b6e437.png)

Second option is using the **Custom Color Swatches** in which you can upload your swatches and then enter them in the Hex/Swatch image codes section.

You can follow the steps to upload swatches

1. Click **Content** in Shopify admin.
2. Click **Files > Upload files.**

![Snapshot+2023-02-28+15.10.49.png](https://cmsad.digifist.com/uploads/Snapshot_2023_02_28_15_10_49_4050490e7e.png)

3. Click **Online Store > Themes > Customize.**
4. Click **Theme Settings > Swatches.**

The color name must match the variant color option name.  



Swatches

##### 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**”.

![custom filters_1.png](https://cmsad.digifist.com/uploads/custom_filters_1_55cc349ca9.png)

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

![Sahara · Products · Aria One Piece Azure · Shopify (2).png](https://cmsad.digifist.com/uploads/Sahara_Products_Aria_One_Piece_Azure_Shopify_2_250ee9c22c.png)

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

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

![Sahara · Search & Discovery · Shopify — Mozilla Fi.png](https://cmsad.digifist.com/uploads/Sahara_Search_and_Discovery_Shopify_Mozilla_Fi_e86a8c8774.png)


Custom Filters

Product / service related comments and feedbacks can be written here.
You can add one or more testimonial slides with the Author's name.

![Sahara Swimwear — Mozilla Firefox 2023-02-01 15.06 (2).png](https://cmsad.digifist.com/uploads/Sahara_Swimwear_Mozilla_Firefox_2023_02_01_15_06_2_6de5d68399.png)

Testimonials

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**.

![Sahara Swimwear — Mozilla Firefox 2023-01-31 23.18.png](https://cmsad.digifist.com/uploads/Sahara_Swimwear_Mozilla_Firefox_2023_01_31_23_18_a00c622b11.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.

###### 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:

![Sahara · Customize Sahara - Theme Latest Submit - .png](https://cmsad.digifist.com/uploads/Sahara_Customize_Sahara_Theme_Latest_Submit_ca3e269021.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.


Predictive Search

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

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

###### Media Fit
This feature controls how images are displayed in online stores. Allowing for this customization eliminates image cropping and provides a seamless, visually appealing shopping experience for customers.

**The Media Fit feature provides the following options:**
- **Cover:** Selecting the "Cover" option automatically resizes the image to fit the designated container while maintaining the original aspect ratio. This results in the image covering the entire container, potentially cropping parts of the image that exceed the container's dimensions. This option is suitable for customers who prioritize filling the designated space completely.
- **Contain:** Choosing the "Contain" option resizes the image to fit within the designated container, ensuring that the entire image is visible without cropping. The aspect ratio of the image is maintained, and any empty space within the container is filled with a background color or pattern. This option is ideal for customers who want to display the complete image while preserving its original proportions.

###### 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.


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.

You can use the following steps to set up **Complementary products** :

1. Go to **Apps**  > **Search & Discovery** from Shopify Admin.
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**.

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

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

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323.152.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_152_d663b1cb8f.png)

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323.152.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_152_d93cb18094.png)

**Complete the set** section gives you the option to show **Complementary products** or upload a Featured image. 

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323.152 (1).png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_152_1_609f527e18.png)

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

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

Click **Add > Save.**

Complete the set 

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

![Documentation — Mozilla Firefox 2023-02-01 17.44.1 (1).png](https://cmsad.digifist.com/uploads/Documentation_Mozilla_Firefox_2023_02_01_17_44_1_1_3dfe063f8e.png)
###### Customize Featured collection section settings
Click on the section to open its settings. To maintain a consistent design and ensure optimal presentation of the featured collections on your website, limit users to using fewer than four collections in the Featured Collections area.

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

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

###### Adding a heading 
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



Featured Collection 

Great section for entering more content for search engines indexability.

![SEO Content.png](https://cmsad.digifist.com/uploads/SEO_Content_bb95038596.png)

SEO Content

Pop-up form of banner can be used for cookie notifications

![Cookie Banner.png](https://cmsad.digifist.com/uploads/Cookie_Banner_51e00e1fb1.png)

Cookie Banner

This setting enables you to link your social media accounts on the footer

Please follow steps to add social media links:

1. In your Theme customizer, click **Theme settings.** 
2. Click on **Social Media.** 
3. Enter the complete URL for requested social media links.

![Sahara+B7+Customize+Sahara+Theme+1.0.4+B7+Shopify+80%94+.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_4_B7_Shopify_80_94_f5610d0570.png)

Please follow the steps below to add the Socials column block in the Footer:

1. Click **Sections** in your theme customizer.
2. Click on **Add Section** and select **Footer.**
3. Click on **Enable social media links.**
4. Click on **Add block.**
5. Select **Socials column.**
6. Click on **Icons.**

![97%8F+Sahara+Theme+-+Social+Media+Documentation+Update.png](https://cmsad.digifist.com/uploads/97_8_F_Sahara_Theme_Social_Media_Documentation_Update_0e2dcaba66.png)

Social Media

This feature allows you to hover an image to view a second image on the same product. 

More than one image in the product is required for this function to be enabled.

![Untitled video - Made with Clipchamp (2).gif](https://cmsad.digifist.com/uploads/Untitled_video_Made_with_Clipchamp_2_730457efda.gif)

Please follow the steps to enable the **second image on hover feature**.
1. Click **Theme Settings** in theme customizer. 
2. Click on **Products.** 
3. Check the box to enable **Secondary image on hover.** 
4. Click **Save.**

Please follow the steps to **add more images** for a **product**
 1. Go to your Shopify Admin and click on **Products.**

![Sahara+B7+Themes+B7+Shopify+80%94+Mozilla+Firefox+2023-0.png](https://cmsad.digifist.com/uploads/Sahara_B7_Themes_B7_Shopify_80_94_Mozilla_Firefox_2023_0_ca1212d71c.png)

2. Click on a product to **add or remove images** 
3. Scroll to the media section to **add media files** by using URL for web files or uploading image files. 

![Sahara+B7+Products+B7+Kendall+Top+Flirt+B7+Shopify+80%94+.png](https://cmsad.digifist.com/uploads/Sahara_B7_Products_B7_Kendall_Top_Flirt_B7_Shopify_80_94_ec95a085f6.png)

4.Click **Save**

Second Image On Hover Feature

The **Collections page** presents the products in a collection with **Collections side bar** menu.

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323+B7+S.png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_B7_S_0293dd8e67.png)

The **Collection side bar** menu is created via **Navigation** in the Shopify admin. 

Please check [https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus) link for more information on editing menus.

![Sahara+B7+Collection+sidebar+menu+B7+Shopify+80%94+Mozil.png](https://cmsad.digifist.com/uploads/Sahara_B7_Collection_sidebar_menu_B7_Shopify_80_94_Mozil_b86681624f.png)

Please follow the steps to create **Collection side bar** menu:

1. Click **Navigation**.
2. Click **Add menu**. 
3. Click **Collection side bar menu**.
4. Click **Save**.

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323+B7+S (1).png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_B7_S_1_d95ac18bd1.png)

![Sahara+B7+Customize+Sahara+Theme+1.0.2+-+010323+B7+S (2).png](https://cmsad.digifist.com/uploads/Sahara_B7_Customize_Sahara_Theme_1_0_2_010323_B7_S_2_e809ab6bdf.png)



Collections Page 

Shoppable images can be viewed in this area.

**Shop the look general settings**

Enable reverse positions for carousel

![Shop The Look.png](https://cmsad.digifist.com/uploads/Shop_The_Look_6b5684cf14.png)

Shop The Look

Configuring metafields on your store is an important step for activating the additional handy features we’ve built on Sahara. This enables you to activate **“Collection card image”** , **“Mobile image”** and **“Tags”** feature on product pages from our demo stores.

![Sahara · Collections · Sale · Shopify — Mozilla Fi.png](https://cmsad.digifist.com/uploads/Sahara_Collections_Sale_Shopify_Mozilla_Fi_458fb4a492.png)

**Desktop View**

![Sahara · Customize Sahara - Theme Latest Submit - .png](https://cmsad.digifist.com/uploads/Sahara_Customize_Sahara_Theme_Latest_Submit_ac836c91d8.png)

**Mobile View**

![Sahara · Customize Sahara - Theme Latest Submit -  (1).png](https://cmsad.digifist.com/uploads/Sahara_Customize_Sahara_Theme_Latest_Submit_1_d775c5ac8a.png)

**Collection card image**

![Sahara · Metafield definitions · Shopify — Mozilla.png](https://cmsad.digifist.com/uploads/Sahara_Metafield_definitions_Shopify_Mozilla_8d35e798f8.png)

Click on **“Collections”**

Click on **“Add definition”**

On the name field enter: "**Collection card image**"

On the “**Namespace and key**” field enter the following: "**card.image**"

On content type, choose "**File**" under "**Description**" and click on "**One file**"

![Sahara · Collection metafield definitions · Edit C.png](https://cmsad.digifist.com/uploads/Sahara_Collection_metafield_definitions_Edit_C_968f6e3ef6.png)

Click “**Save**”.

**Mobile view**

On the name field enter: "**Mobile image**"

On the "**Namespace and key**" field enter the following: "**mobile.image**"

On content type, choose "**File**" under "**Description**" and click on "**One file**"

![Sahara · Collection metafield definitions · Edit M.png](https://cmsad.digifist.com/uploads/Sahara_Collection_metafield_definitions_Edit_M_c34d583767.png)

Click “**Save**”.

**Tags**

![Sahara · Products · [Subscriptions] Puffin Concier.png](https://cmsad.digifist.com/uploads/Sahara_Products_Subscriptions_Puffin_Concier_7e8f5d9edd.png)

Click on "**Products**"

Click on "**Add definition**"

On the name field enter: "**Tags**"

On the “**Namespace and key**” field enter the following: "**tags.list**"

On content type, chose "**Single line text**" under "**Description**" and click on **"One value**"

![Sahara · Product metafield definitions · Edit Tags.png](https://cmsad.digifist.com/uploads/Sahara_Product_metafield_definitions_Edit_Tags_e95fa62a8d.png)

Click “**Save**”.

This section allows you to add textual content to showcase custom blocks of texts.
These are elements or signals that help build trust and credibility with website visitors or customers.

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

**Indicator content** 

Add a **heading, text, link text, and URL** to your column. An **icon** is also an additional option.

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

Theme Helpcenter

Browse by theme

Browse by app

Stay connected