Een eigentijds design met bewezen functionaliteit die de verkoop stimuleert.


Kleding en accessoires, Gezondheid en schoonheid, Sport en recreatie

Winkels met hoge volumes, Fysieke winkels, Visual storytelling

Gebruik drag-and-drop secties en blokken om aangepaste pagina's in je webshop te maken zonder speciale codering. Mojave wordt geleverd met flexibele, goed ontworpen blokken voor afbeeldingen, producten, video, offertes en meer.

De nieuwe standaard in aanpasbaarheid en snelheid

Dit thema is zeer geschikt voor

Winkelwagen en checkout

Marketing en conversie

Merchandising

Product discovery

Internationalisering

Onze belofte

Gebouwd voor snelheid en betrouwbaarheid

Shopify Stores die Mojave gebruiken

Ons supportteam is er 24/7 om je te helpen het maximale uit je online winkel te halen.


Krijg de hulp die je nodig hebt, bij elke stap.

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

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.

Cart

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

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

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

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

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

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

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

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


Buttons

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

###### About theme updates:

Updating themes is a core feature provided by Shopify and theme developers to ensure optimal functionality and compatibility.  

As theme developers, we periodically release updates to address bug fixes, introduce new features or enhancements, optimize existing settings, and align with Shopify's updates to prevent functionality issues.  

If you report an issue, we will investigate it thoroughly. Should it result from something overlooked during our quality assurance process, we will prioritize it in the current development sprint. The fix will then be included in the next version of the theme.  

When an update is available, we announce it on our official website and the theme’s landing page in the Shopify Theme Store, complete with release notes. Additionally, you can check for updates in your **Shopify Themes Library** (**Sales Channels > Online Store**) under the theme name and "Last saved." If an update is available, you'll see a notification like `[Theme name] version [x.y.z] available`, which you can click to perform the update. 


<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/notification_dba879624b.png" alt="Step 1" style="width: 100%;">
</div>

###### How to update:

Whenever you see an update notification:  

1. Click the notification.  
2. Select **Add to theme library**.  

Shopify will then create a new theme file with the latest version and automatically copy all changes you made using the theme's customizer.  

**Note:** After updating, both the original and the new version of the theme will remain in your Themes Library.

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/update_2481cc60c9.png" alt="Step 1" style="width: 70%;">
</div>

###### Troubleshooting update issues  

###### 1. **Theme version is no longer clickable**  
If the theme update option is disabled, it’s usually due to significant differences between your version’s code and the latest version.  

This issue may occur if the theme hasn’t been updated for an extended period, but you now wish to update it for new features. In such cases, you’ll need to just install a fresh copy of the theme from the Shopify Theme Store and re-customize it (this is free of charge).

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/old_version_628c3c5a93.png" alt="Step 1" style="width: 100%;">
</div>


###### 2. **Theme update can't be performed**  
This can happen when the theme was uploaded to your Themes Library rather than obtained from the Shopify Theme Store. 

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/not_supported_bf861a5a99.png" alt="Step 1" style="width: 80%;">
</div>

**Important Note:** Shopify assigns a unique license to each purchased theme. If the theme was downloaded and re-uploaded, it will lose its license, making it ineligible for updates.  

Common reasons for uploaded themes:  
- Code changes performed to the theme
- Re-uploading the theme to replicate a design on a new store.  
- Mistakes during initial setup by the store owner or an employee.  
- Purchasing the theme from unauthorized third-party sellers.  

Please note that themes without a valid license are outside the scope of our support. Additionally, purchasing themes from unauthorized sellers violates our terms of use. Stores using such themes may be reported to Shopify for legal action.  

###### Best practices  

**Backup and synchronize customizations:**  
   When making custom changes, always ensure that these changes are reflected in both the re-uploaded theme (if applicable) and the licensed theme within your Shopify Themes Library. This approach prevents a heavy workload when a new update is available, as you won’t need to redo all customizations at once.  

**Create clear backups:**  
   Maintain a clearly labeled backup of your theme, such as "Backup Theme – Do Not Delete," to ensure it is preserved and easily distinguishable. This practice is especially helpful if you need to revert changes or compare versions during an update process.  

These steps will help you manage your theme effectively, avoid unnecessary disruptions, and ensure a smoother update experience.  

###### Code changes  

When updating the theme, any code changes you've made to your previous version will not be carried over to the new update. That means that if you still require those code changes, you'll have to perform them again.

Support does not cover issues caused by custom code changes, third-party apps, or external developers.

Our support team focuses on providing updates and features for the benefit of all users. Resolving custom code issues is outside our free support scope.

If you do not wish to update the theme due to the code changes you've made, our policy prevents us from intervening as the solution is provided to you, but not implemented by choice.

However, if you require specific code modifications or feature enhancements, we offer **Agency Services**. To explore this option, you can submit an **Agency Services Ticket** through our support page. A team member will reach out to discuss collaboration opportunities tailored to your needs.  

**Note from the DigiFist team:** Thank you for your understanding and cooperation. We’re here to ensure your theme continues to perform at its best!

Theme updates

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.


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.

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

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

"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

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

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?

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?

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

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

Documentatie

Additional configurations

Header and footer

General theme settings2

Templates

Sections

Blijf verbonden