Impress your customers with this clean and contemporary theme.

Clothing & Fashion, Jewelry and accessories, Health and beauty

High-volume stores, Physical stores, Visual storytelling

Use drag-and-drop sections and blocks to create custom pages throughout your store without special coding. Sahara 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

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_Desktop06-min.jpg

medium_Desktop06-min.jpg

small_Desktop06-min.jpg

thumbnail_Desktop06-min.jpg

Desktop06-min.jpg

Sahara

Mirage

Cosmetics

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/nws_47466a78cf.png" alt="Preorder" style="width: 85%;">
</div>


###### About:

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


###### General Settings:

**Disable pop-up:** On / Off

_Note: If enabled, the pop-up will not be shown._

**Enable in customizer:** On / Off

**Show newsletter after:** Select between 4 and 30 seconds

###### Media:

**Image:** Select an image representative to your store.

###### Text:

**Heading:** Select a representative heading to get your customer's interest

**Body text:** Enter a short message to convince your customers to leave their email

**Button close text:** e.g. "No thanks"

**Important note:** The newsletter pop-up is a section used specifically for the collection of emails for marketing purposes.
**This functionality does not include the ability to send discount codes or messages to your customers.**



Newsletter popup

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





Favicon

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 

###### About:

The product description page (pdp) is the frontend representation of your products.
Any change you make on this page will be reflected on all of your products as long as all of them are assigned to the same template.

###### Product template settings:

**Product section width:** Full width / Page width

###### Product media:

**Gallery layout:** Slider / Carousel

_Note: Slider layout is recommended for sections with page width, carousel for sections with full width._

**Thumbnails:** No thumbnails / Desktop and mobile / Mobile only

_Note: On mobile, thumbnails are horizontal and below the main image._

**Media object fit:** Cover / Contain

**Adaptative raton and auto-height:** Default / Adaptative ratio / Adaptative ratio and autoheight

**Transparent background:** On / Off

###### Vertical spacing:

**Desktop:** Normal /  Top none / Bottom none / Top and bottom none

**Mobile:** Normal /  Top none / Bottom none / Top and bottom none

###### Colors:

**Breadcrumbs:** Default / Secondary / Inverse

_Note: The breadcrumbs are being applied on the desktop only and will appear within the media block._

**Arrows color:** Default / Secondary / Inverse

###### General

**Show tags on mobile:* On / Off

**Enable actions bar on mobile:** On / Off

**Text alignment:** Start / Center / End

###### Title:

Will be pulled from the backend - it cannot be edited from within the theme.

###### Price:

Will reflect the price from the backend - including the compare-at-price if it has been activated.

**Show tax status and shipping policy link:** On / Off

###### Variant picker: 

**Title:** "Variant picker" - this field's purpose is to display the correct name across section blocks

**Make variants clickable:** On / Off

_**Note: The design of the variants will remain the same and out of stock variants will appear crossed. However, by activating this functionality, you'll make the variants clickable in the eventuality that you wish to use a notification app when the product is back in stock. The crossed out variants design cannot be changed as per request to avoid customer confusion thinking that they've ordered a product when they just requested a notification. We appreciate your understanding (DigiFist team).**_

**Type:** Dropdowns / Buttons

**Layout:** Default / Stacked

_Note: Layout options only effective if the type is dropdowns._

Size guide page: Select the page you've created for your size guide.

_**Note: If your products have size guides by category and you require different size guide pages to be assigned to these products, we recommend you create a different template for each category and assign the size guide to the corresponding template afterward. Changes made within different templates will only be reflected on the products belonging to that template.**_

###### Purchase options: 

Will display the available purchase optons. This section is not currently customizable from within the theme.

###### Buy buttons:

**Show quantity:** On / Off

**Quantity type:** Inline / Separate

**Show dynamic checkout buttons:** On / Off

_Note: The button will appear as "Buy now** within the theme's customizer, but will appear as the preferred option you made available within the live theme._

**Show recipient information form for gift cards:** On / Off

_Note: Allows buyers to send gift cards on a scheduled date along with a personal message._

###### Text block:

**Text:** Add a message such as "Free delivery and shipping"

**Text style:** Link / Body

**Link to products:** None / Type / Vendor

###### Pickup availability:

There are currently no customizable settings available for this function.

###### Content tabs:

Tabs alignment: Start / Center / End

Tabs content alignment: Start / Center / End

###### Description tab:

**Show description tab:** On / Off

**Option by default:** On / Off

**Show content from product description:** On / Off 

_Note: Overwrites the content and content from page fields._

**Content from product type:** All product content / Content above the delimiter / Content below the delimiter

_Note: Specify whether and how to use a delimiter from the product content. Applies when the content comes from the product. For 'below delimiter' and 'above delimiter' options, the product content must contain: `----`_

**Tab title:** Assign a title to this tab

**Content:** Assigns identical content to all tabs.

_**Note: If you don't wish to have the same content on all pages but differrent content, you'll have to assign the text box to get the content dynamically to multi-line metafields you can create for the product's backend.**_

###### Description:

With this block, you can assign how the description is displayed.

**Behaviour:** Plain / Accordion / Tab

_You need to add content tabs block to set tab._

**Heading:** Text box.

_This heading overwrites the default heading of the block_

Truncate the limit: You can disable thisby setting 0. The limit can be between 0 and 5.

###### Collapsible block:

**Heading:** use a heading for your collapsible block

**Content:** If not set dynamically, will show the same on all pages

**Icon:** Select an image.

**Page:** Select a page within the store.











Product description page (PDP)

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

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

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

**Image snippet:** Native / Lazysizes

_Note: Native choice improves performance, lazysizes one is legacy and will be removed in the future._

**Max image quality:** No limit / 720p / 1440p / 2160p

_Note: This will improve performance and reduce bandwidth usage by limiting the image quality to the selected value. No limit will provide the best quality, but may also increase the page load time._

**Disable Animations on Mobile:** On /  Off

_Note:  Enable this option to disable animations specifically on mobile devices. This is beneficial for supporting older devices with less accurate rendering capabilities, ensuring a smoother user experience and faster page loading times._


Performance

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


###### About:

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

###### Settings:

###### Map:

Google maps API key: enter the api key provided by google for your store's location.

_Note: You should create a Google Maps API key and add it here to display the map. [Click here for the tutorial](https://developers.google.com/maps/documentation/javascript/get-api-key)_

**Zoom:** From 0 to 21x

###### Section layout:

**Section width:** Full width / Page width

**Note:** Set the height of the section (this only applies to the desktop version).

**Section layout:** Map and sidebar / Image and sidebar / Map

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Container background:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Find store area background:** Default / Secondary / Accent 1 / Accent 2 / Inverse


###### Vertical spacing

**Desktop top spacing:** Between 0x and 6x

**Desktop bottom spacing:** Between 0x and 6x

**Mobile top spacing:** Between 0x and 6x

**Mobile bottom spacing:** Between 0x and 6x

###### Add pin:

The pins can be added from the left hand side of the screen below the "Store locator" section in the customizer.

###### Pin settings > Store info:

**Store name:** text box for the store name (similar to title)

**Address:** You can enter the store's full address here

**Phone:** You can enter the contact number of the store

**Opening hours:** Enter the opening hours

**Store image:** Select an image from your library

_Note: The image will only be shown if the type of **"Section layout"** is set to **"Image and sidebar"**_

###### Pin settings > Store location:

**Latitude:** Enter the latitude coordinate

**Longitude:** Enter the longitude coordonate

_Note 1: The above are needed in order for the pin to be shown on the map_

_Note 2: You can learn more about the latitude and longitude [at this link](https://support.google.com/maps/answer/18539?hl=en&co=GENIE.Platform%3DDesktop)_

**Custom tooltip text:** If this text box is left blank, the store name will be used instead.

###### Pin settings > Actions:

**Button style:** Filled / Outlined / Outlined inverse / Default

**Directions button name:** Enter a name for theb utton

**Custom directions link:** If left blank, generated Google Map directions link will be used.

###### Pin settings > Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse







Store locator

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.

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Untitled_video_Made_with_Clipchamp_2_730457efda.gif" alt="Preorder" style="width: 85%;">
</div>



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

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Sahara_B7_Themes_B7_Shopify_80_94_Mozilla_Firefox_2023_0_ca1212d71c.png" alt="Preorder" style="width: 85%;">
</div>

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

Secondary image on hover

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

###### About:

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.

###### Carousel:

**Hero height:** Between 50% and 100%

_Note: Set the height of the hero to change the height of the slide. This setting is available only for desktop._

**Enable autoplay:** On / Off

**Autoplay interval:** Between 3 and 60 seconds

###### Carousel navigation arrows

**Enable:** On/Off 

_Note: They are visible only on desktop & tablet_

**Position:** Center sides / Bottom start / Bottom center / Bottom end

**Color:** Default / Secondary / Inverse

###### Example:

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

###### Slide:

_Note: To add a slide, please head to the customizer (left hand side of the screen), and click on "Add slide" under the "Hero banner"._

**Banner layout:** Full, 70/30, 30/70, Split.

###### Examples:

###### Full:

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

###### 50/50:

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

###### 70/30:
![image (35).png](https://cmsad.digifist.com/uploads/image_35_790dcb55cf.png)

###### 30/70:
![image (37).png](https://cmsad.digifist.com/uploads/image_37_7e1ea0672c.png)
###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Header menu color:** Select the color of your navigation in each slide, to be in contrast with the slider's colors. This setting is available specifically when the transparent header is used.

###### Media desktop:

**Image:** Select from your library

**Video:** Select one from your library

**External video:** Paste a link

_Note: External video overwrites both the image and video, while the Video from your library will only overwrite the image. Furthermore, we recommend you use the normal video where you use one from your store's library rather than a link for better performance. External videos can cause performance issues._

**Enable overlay:** On / Off

###### Media mobile:

**Image:** Select from your library

**Video:** Select one from your library

**External video:** Paste a link

_Note: External video overwrites both the image and video, while the Video from your library will only overwrite the image. Furthermore, we recommend you use the normal video where you use one from your store's library rather than a link for better performance. External videos can cause performance issues._

**Enable overlay:** On / Off

###### Content position:

_This section is available for desktop and tablet only_

**Horizontal:** Start / Center / End

**Vertical:** Top  / Center / Bottom

###### Visual example:

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

###### Text:

**Subheading:** Text box for your subheading

**Subheading URL:** Enter one only if you want your subheading to be clickable with a redirect

**Heading:** Text box for your heading

**Body text:** Text box designed for descriptions

**Enable vertical line:** On / Off 

_Note: Displays a vertical line below button. Visible only when content is horizontally centered._

###### Button:

**Button style:** Filled / Outlined / Outlined inverse / Default

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

_Note: Primary button style on theme settings is used when default is selected._

**Label:** Text box

**URL:** Enter a URL or select an existing page within the theme for this button's redirect.




Hero banner

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

###### About

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


###### Settings: 

_You can find the general settings for this section below._

###### Dual content tiles:

**Section width:** Page width / Full width / Seminarrow width / Narrow width

**Section height:**  Select the height between 25 and 100 vh

_Note: The setting above only applies to desktop_

**Adapt to content:** On / Off

_Note: This setting will adapt the section according to the content if your content is larger than the section height_

**Layout:** 50/50 , 70/30, 30/70

**Gap between tiles:** Select a gap between 0 and 6,4 rem

**Mobile gap between tiles:** Select a gap between 0 and 6,4 rem

###### Vertical spacing:

**Desktop top spacing:** Can be set between 0x and 6x

**Desktop bottom spacing:** Can be set between 0x and 6x

**Mobile top spacing:** Can be set between 0x and 6x

**Mobile bottom spacing:** Can be set between 0x and 6x

###### Tiles:

You can add a tile from the left hand side of the screen inside the customizer by clicking on "Add tile" button underneath "Dual content tiles". 

_Note: This section supports a total of 2 tiles_

###### Color scheme: 

**Text:** Primary / Secondary / Inverse

**Background and borders:** Primary / Secondary / Accent 1 / Accent 2 / Inverse

###### Media desktop:

**Image:** Select an image for the tile

**Video:** Select a video for the tile

_Note: The setting above will overwrite the image_

**External video:** Paste a link

_Note: The setting above will overwrite both the uploaded video and image_

**Video aspect ratio:** 16:9 / 4:3 / 3:2 / 1:1 / 2:3 / 3:4 / 9:16

**SVG code for placeholder:** Paste your SVG code here and it will be used as a placeholder image.

###### Media mobile:

**Image:** Select an image for the tile

**Video:** Select a video for the tile

_Note: The setting above will overwrite the image_

**External video:** Paste a link

_Note: The setting above will overwrite both the uploaded video and image_

**Video aspect ratio:** 16:9 / 4:3 / 3:2 / 1:1 / 2:3 / 3:4 / 9:16

**Compact video:** On / Off

_Note: Video will be displayed in a compact format on mobile_

###### Content position:

**Horizontal:** Start / Center / End

**Vertical:** Top / Center / Bottom

###### Text:

**Heading:** Enter a heading for this tile

**Text size:** Between 1x and 4x

**Body text:** Enter a text as body for this tile

###### Button:

**Button style:** Filled / Outlined / Outlined inverse / Text

_Note: Primary button style on theme settings is used when default is selected._

**Separator:** On / Off

_Note: Enable to add a vertical line between text and button when text is centered. Desktop only._

**Button label:** Enter a label for your button

**URL:** Enter an URL or select from the ones existing in your store.

###### Layout:

**Content layout:** Media on top / Media overlay

###### Spacings:

_Note: This settings are for destkop only._

**Block margin start:** Between 0 and 16rem

**Block margin end:** Between 0 and 16rem

**Block padding top:** Between 0 and 16rem
 
**Block padding bottom:** Between 0 and 16rem

**Block padding start:** Between 0 and 16rem

**Block padding end:** Between 0 and 16rem



Dual content tiles 

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

###### About:

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


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


Password page

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

###### About Shoppable Socials:

The "Shoppable Socials" section in the Sahara theme allows you to seamlessly integrate your social media content into your online store. This feature enhances your product display by making social media posts and stories shoppable directly from your website. It offers multiple layout options and allows you to tag products, making it easier for customers to find and purchase products featured in your social media posts.

---


###### Settings:

**Edit Mode** : Off / On
This option opens the drawer for the selected blocks, ensuring it remains open during changes for seamless content editing. This functionality is exclusive to the theme editor.

---

**Note:** Remember to save after making updates in the edit mode.

###### Section Layout: 

**Styles** :

- List all posts with details
- Grid post images
- Tag stories with grouped posts
- Carousel post images
- Carousel stories, slider style

**Grid Items**
Can be 3 or 4. This affects 'Grid post images' and 'Carousel post images' layouts.

**Source of Slide**
Manual / Metaobject
Note: If you define a metaobject as a source, the slide will be populated with the media from the metaobject.

**Show Pulse Dots** : On/Off
This option changes the appearance settings of "shop the look" dots in the list layout and in the drawers in other layouts.

###### Social Account:

**Social Account Avatar** (You can select an avatar image.)
**Note: ** This field will be shown on each block; you can override it in block settings.

**Social Account Name** (can be of your choosing)

**Social Account URL** (Can be selected from within the links available in your store's backend, or you can paste your social media URL here directly).

###### Section Header:

**Title** (To disable header, leave this field empty).

**Header Layout** : Compact / Extended

**Header Background** : Accent 1 // Accent 2 // Body

###### Product Cards:

**Product Image Ratio** Adapt to image // Square // Portrait
This affects the product card & thumb images in blocks.

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

###### Adding a Social Media Post:

This can be done from the left hand side of the screen by clicking on "Add Social Post"

###### Social Post Settings:

**Image** (Upload an image for the post).

**Social Post Content** (text box for the content of the post).

**Social Post Link** (Paste a link or search).


###### Social Stories:


**Social Post Tag** (Hashtag)

This field groups posts with the same tag when the tag stories layout is selected.

**Social Story Video** (Video will only be shown in slider layout.)

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

###### Social Account:

**Social Account Avatar** (You can select an avatar image.)
**Note: ** This field will be shown on each block; you can override it in block settings.

**Social Account Name** (can be of your choosing)

**Social Account URL** (Can be selected from within the links available in your store's backend, or you can paste your social media URL here directly).

###### Product Tagging:

Dot Position for Product (can be up to 4 products here, and the dot appears on the image selected from section settings).

Horizontal and Vertical Coordinates (Can be selected here to position the dot on the image.)

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

This documentation covers the settings and features available in the "Shoppable Socials" section of the Sahara theme. By following these guidelines, you can effectively integrate and manage your social media content to enhance your online store's interactivity and shopping experience.

Shoppable Socials

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

###### About:

The List Collections section allows you to showcase your collections in a structured list format, making it easier for visitors to explore and navigate through your product categories.

###### Settings:

Please find the settings related to the list collections below:

###### Collections:

**Collections:** Select between the options - All collections / Selected collections

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Card collection color scheme:

**Text:** Default / Secondary / Inverse

**Text - without image:** Default / Secondary / Inverse

###### Collections grid:

**Desktop column gap:** Select the gap between 0.2 and 3.2

**Mobile column gap:** Select the gap between 0.2 and 3.2

**Collections per page:** Between 3 and 50 

###### Collection block:

**Color scheme for text:** Default / Secondary / Inverse

**Collection:** Select a collection to be showcased

**Image:** Select an image for your collection

_Note: The action above will overwrite the collection's image_

**Title:** Add a title that will overwrite your collection's title



List collections

###### About:

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.

###### Please find the recommended image sizes for all the sections that require it within the theme below:

![Hero.jpg](https://cmsad.digifist.com/uploads/Hero_76ba4de078.jpg)

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

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

![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)

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

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

![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)



Recommended image dimensions

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

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Sahara_Swimwear_Mozilla_Firefox_2023_02_01_15_04_1d2aad51d7.png" alt="Featured Products" style="width: 85%;">
</div>

###### About:

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

###### Featured products:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Layout:

**Layout:** Style 1 / Style 2

_Note: The setting from above affects the alignment of the heading, button and arrows._

**Desktop gap:** Select the gap between 2 and 64

**Mobile gap:** Select the gap between 2 and 64


###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** Enter a heading for this section.

###### Button:

**Text:** Enter a text for the redirect button

**URL:** Select a link from within your store or enter a specific link

**Button style:** Filled / Outlined / Outlined inverse / Default

_Note: Primary button style on theme settings is used when default is selected._

###### Collection:

To add a collection, please head to the left hand side of the screen on the customizer and click on "Add collection" underneath the "Featured products" section.

###### Settings:

**List:** Manually add products to be shown in this section.

**Collection:** Select a collection to be shown in this section.

_Note: By selecting a collection, you will overwrite any manually selected products_

**Number of products:** Choose between 4 and 12 products to be shown in this collection.

**Show unavailable products:** On / Off 

_Note: If enabled, products that are out of stock or unavailable will be displayed._


Featured products

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

###### About:

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


###### Color scheme settings:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse / Light

###### Carousel settings:

_Enabled when 2 or more blocks are present._

**Autoplay interval:** Between 2 and 6 seconds


###### Text slide:

**Body text:** Text box where you can enter a promotional text or advertisment

###### Dropdown cards:

**Show dropdown cards:** On / Off - this option is only available when a single text slide is selected

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Text:** Default / Secondary / Inverse

###### Card settings:

**Card title:** text box for the card title

**Card content:** Text box for the card content

**Link:** Enter a link for the redirect

**URL:** Select a URL from within the theme

_Note: The above settings can be found in all 3 cards._

###### Countdown timer:

**Countdown timer:** On / Off

**Year:** text box where you can enter the year

**Month:** Dropdown containing the list of months

**Day:** Toggle between 1 and 31 to select the exact day when the countdown finishes

**Hour:** Between 0 and 24

**Minute:** Between 0 and 59

**Extend timer:** Between 0 and 30 days

_Note: If you set greater than 0, the last day of timer will be extended by this number of days._

**Timer end message:** text box where you can enter a representative message (e.g. The summer sale has ended").

**Show day part:** On / Off

**Show hour part:** On / Off

**Show minute part:** On / Off

**Show second part:** On / Off




Announcement bar

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

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

###### About:

This feature provides an accordion functionality and is mainly used on the product description pages (PDP).
You can use it to set up your description and tips, or FAQ's.

###### Settings:

###### Vertical Spacing: 

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders: **Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Content:

**Heading:** text box

**Content type:** Complementary products / Featured image

_Note: Complementary products are customizable through the Search & Discovery app. You can find the step-by-step setup process below this documentation._

###### Layout:

**Flip horizontally:** On / Off

**Flip vertically on mobile:** On / Off

###### Drawer Settings:

_You can find the settings for the drawer below._

###### Button: 

**Text:** Enter the button's text

**Type:** Link to page / Drawer / Collapsible

**URL:** Enter an URL or select a page within the theme.

###### Drawer content:

**Body text:** Text box for the content

Note: Use [description] if you wish to dynamically pull the product's description.

###### Page:

_Select a page for your content. If page is selected, the body text will be ignored._

###### How to set up your complementary products:

![complete the set.png](https://cmsad.digifist.com/uploads/complete_the_set_b0b3c65182.png)

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 

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>


#### How to convert the navigation into a megamenu:
You will have to click on **Add image with a link and text** section in your header:

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




![shop_the_look_sahara.png](https://cmsad.digifist.com/uploads/shop_the_look_sahara_de618c5497.png)

##### Path: Customizer > Any Page > Template > Add Section > Shop The look

#### About:

Shop the look is an ingenious way for you to redirect customers to certain products you'd like to advertise, by pinning points to where the products in question are in a photo.
The idea is to give your customers a general idea as to how those products would look like combined in an environment, rather than just showing them only the product image.

#### How it works:

The "Shop the look" section includes two separate components:
- The product media. You can find it in the main settings of the section, and it should contain the card you wish to display.
- The product slides. You can add them by clicking on "Add Product slide".

The product slides can be linked to a targeted product, and the product card will act just as an individual product would on a collection page.
If you add more than one product, the customer can shuffle among the products by the arrows on the left and right of the product card.

The "Dot position" works as X and Y axis, and you can use the Horizontal and Vertical options to move the point to the exact place where the product appears on the Product Media.

##### Additional options:

1. Section Heigth - you can set the height of the section for Desktop only for a maximum limit of 100 vh
2. Vertical Spacing - Like any other section inside Sahara, you can set the top and bottom spacing between this section and the ones from above and beneath it.
3. Color scheme  with the "Default", "Secondary", and "Inverse" options. 
4. Background an borders color scheme
5. "Reverse positions" - This includes the option to change the placement of the product slides and the product media.
6. Heading text that will appear above the product slides.

Shop the look

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

![timer.png](https://cmsad.digifist.com/uploads/timer_9815fc2f2d.png)

###### About:

This is a marketing tool designed to advertise a specific promotion and indicate the time left either until the promotion ends, or until it starts

###### General settings:

**Enable fullwidth:** On / Off

**Layout:** Media / Media none

###### Vertical spacing: 

**Desktop top spacing:** Between 0x and 6x

**Desktop bottom spacing:** Between 0x and 6x

**Mobile top spacing:** Between 0x and 6x

**Mobile bottom spacing:** Between 0x and 6x

**Border style:** Top and bottom borders / Top border / Bottom border / No border / No border and separators

###### Text:

Title: Give your promotion a short title to advertise it

Subtitle: e.g. "Sign up for early access"

Subtitle mobile: e.g. "Everyting 20% off if you subscribe to our newsletter"

###### Image:

Add an image to your timer.

**Note: If the layout is set to **"Media none"**, the image won't appear.**

###### Color scheme settings:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Year:** text box where you can enter the year

**Month:** Dropdown containing the list of months

**Day:** Toggle between 1 and 31 to select the exact day when the countdown finishes

**Hour:** Between 0 and 24

**Minute:** Between 0 and 59

**Extend timer:** Between 0 and 30 days

_Note: If you set greater than 0, the last day of timer will be extended by this number of days._

**Timer end message:** text box where you can enter a representative message (e.g. The summer sale has ended").

**Show day part:** On / Off

**Show hour part:** On / Off

**Show minute part:** On / Off

**Show second part:** On / Off

**Action preference:** Button / Newsletter form

###### Newsletter form button:

**Label:** e.g. "Submit"

###### Button:

**Button style:** Filled / Outlined / Outlined inverse / Default

_Note: Primary button style on theme settings is used when default is selected._

**Label:** Text box

**URL:** Enter a URL or select an existing page within the theme for this button's redirect.


Countdown timer

###### About:

The cart drawer is a fixed section within Sahara with the purpose of offering the customers an easy shopping experience while helping store owners keep customers engaged, and continue shopping unlike the traditional cart page where the customer is redirected to a separate page.

###### Color scheme settings:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse


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


Cart drawer

![accordions.png](https://cmsad.digifist.com/uploads/accordions_92ffa7a376.png)

###### About:

The Accordions section is designed to help you organize and display content in a compact and interactive manner. It is particularly useful for FAQs, detailed product information, or any other type of content that benefits from a structured and collapsible format.

###### Settings: 

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** Enter a heading for your accordions

###### Topic:

_To add a topic, please click on the left side of the screen in the customizer, underneath the "Accordions" section, on "Add topic"._

###### General settings:

**Show content:** On / Off

###### Text for topic:

**Heading:** Enter a heading for the topic

**Body:** Enter the text that you wish to appear underneath this topic.

**Page:** Outputs a page content as topic body text. By using it, you will overwrite th topic content filed in the body.


Accordions

###### About:

This is a simple banner without image designed to showcase a title with text

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

###### Settings:

**Heading:** Enter a heading for your banner.

**Body text:** Enter a text or description

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Note:

This section is perfect for collection pages as you can dynamically connect both the heading and body text to display different content based on the information available in the backend via metafields.

For more information about metafields, please check the "Metafields" documentation.

Page banner

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

Predictive Search

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

###### About:

This section presents the step of how to add custom filters in your theme.

###### Step 1: Create a new metafield definition:
 
1. Go to Settings > Custom data > Metafield definitions > Products > Click on **“Add definition”**

2. In the name field type in **Style**

3. In the “Namespace and key” field enter type in **my_fields.style**

4. For the content type, select **Single line text**.

5. Click “**Save**”.

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

After doing this, you'll be 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

###### About:

Configuring metafields on your store is an important step for activating the additional handy features we’ve built on Sahara. 

This enables you to configure custom fields and blocks within the templates in your theme that are shared by multiple elements, and have unique content appear within.

###### Example:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Sahara_Collections_Sale_Shopify_Mozilla_Fi_458fb4a492.png" alt="Sahara · Collections · Sale · Shopify — Mozilla Fi.png" style="width: 80%;">
</div>



###### How to add a new metafield definition:

1. In the backend of your theme go to Settings > Custom data > Metafield definitions

2. Choose the target or placement of your metafield.

3. Add a new metafield definition.

4. For the Name, please keep in mind to use something specific.

5. For the Namespace and key, by default, Shopify will enter "custom." and the name you've selected. Here, you'll need to modify the "custom" word with the target of your metafield. 

Example: product.image or collection.image

In the example above, I'm using product and collection to define the namespace of the metafield.

###### Types of metafields commonly used:

1. One line text: used for short sentances.

2. Multi-line text: used for more than one sentance.

3. File: used normally for images.

_Note: The blocks within the theme that can be linked to images do not support a list of images as they've been designed to showcase a single image. Therefore, please keep in mind to not select a list of images._

###### Important:

_Metafields are elements shared by all of the targeted namespaces within your theme. If you create a metafield designated for your products, the same metafield will appear empty within your all of your products, and you can configure the custom data you wish to enter within it just like a normal product description and image. Therefore, for this example, you'll have to edit the metafield within each product._ 

_The same goes for collections and other namespaces where metafields are used._

###### How to dynamically connect a metafield to a block:

1. Go to the theme's customizer to the target of your metafield (it can be an image or a text box).

2. Above (or within the settings) you'll find an icon showcasing three stacked coins, then click on it.

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


3. From within the list available in the pop-up that appears, select the metafield you wish to connect to this setting.

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



4. Save the changes made within the theme.

_Note: As metafields are used to showcase different data depending on what you input in the backend, they only need to be connected one in the frontend to the specific setting that it was created for._

_Additional note: For templates that are shared by multiple pages such as collections and products, you only need to make the change once per template, and not for each product or collection within the theme._


Metafields

###### About:

This section brings an 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)

###### Settings:

**Enable animation:** On / Off

**Animation speed:** Select between 1 and 10

**Element size:** Between 1 and 4

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Padding vertical:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Marquee item:

To add a marquee item, please go to the left hand side of the screen in the theme's customizer, and click on "Add Marquee item" underneath the "Marquees" section.

###### Settings:

**Icon:** Select an icon to be shown to the left side of your text

**SVG code:** Enter an SVG code of your icon instead of a file.

_Note: This will overwrite the icon file, and we also recommend using SVG files instead._

**Title:** Select your marquee's title's text

**Link:** Paste a link or search it within your store to make your marquee clickable and have your customers redirect when clicking on them.

Marquees

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

###### About:

Product badges are used to highlight a product definition. 

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Monosnap_File_Google_Chrome_2023_03_14_21_27_18_c50ac26b17.png" alt="Preorder" style="width: 50%;">
</div>

###### Sliding badge setup:

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)

###### Normal badge setup:

1. Go to your product's backend in the Shopify admin.
2. Scroll down to the "Tags" section on the right hand side of the screen
3. Add a new tag under the model badge: New, or badge: Example


###### Particularities about badges:

1. Out of stock products will display the "Sold out" badge automatically when the product's stock hits 0
2. The "Sale" badge appears automatically when the compare-at-price is activated.


###### Badges color settings:

The color settings of the badges can be modified from the Theme's Settings > Colors > Others > Tags



Product badges setup

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

###### About:

If your website includes age-sensitive content, you might need to use an age verification popup, also known as an age gate. Simply put, an age gate requires visitors to explicitly confirm that they have reached a certain age before starting to browse the website.

###### General:

**Enable age verification pop-up:** On / Off

**Enable in customizer:** On / Off

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** text box where you can enter your heading (e.g. "Verify your age" or "Are you over 18?")

**Body text:** text box wehre you can enter a message to explain the verification requirement

###### Buttons:

**Confirmation button label:** e.g. "Yes"

**Confirmation button style:** Filled / Outlined / Outlined inverse / Default

**Decline button label:** e.g. "No"

**Decline button URL:** enter a URL (e.g. google.com)

**Decline button style:** Filled / Outlined / Outlined inverse / Default




Age verification popup

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

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

###### About: 

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

###### Height settings:

**Banner height for desktop:** Slide between 20 and 100 vh

**Banner height for mobile:** Slide beteen 20 and 100 vh

**Banner layout:** Full, 70/30, 30/70, Split

###### Vertical spacing

**Desktop top spacing:** Between 0x and 6x

**Desktop bottom spacing:** Between 0x and 6x

**Mobile top spacing:** Between 0x and 6x

**Mobile bottom spacing:** Between 0x and 6x

###### Color scheme:

**Text:** Default /  Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Media desktop:

**Image:** Select from your library

**Video:** Select one from your library

**External video:** Paste a link

_Note: External video overwrites both the image and video, while the Video from your library will only overwrite the image. Furthermore, we recommend you use the normal video where you use one from your store's library rather than a link for better performance. External videos can cause performance issues._

###### Media mobile:

**Image:** Select from your library

**Video:** Select one from your library

**External video:** Paste a link

_Note: External video overwrites both the image and video, while the Video from your library will only overwrite the image. Furthermore, we recommend you use the normal video where you use one from your store's library rather than a link for better performance. External videos can cause performance issues._

###### Content position:

_This section is available for desktop and tablet only_

**Horizontal:** Start / Center / End

**Vertical:** Top  / Center / Bottom

**Padding top:** Between 0 and 16 rem

**Padding bottom:** Between 0 and 16 rem

**Padding start:** Between 0 and 16 rem

**Padding end:** Between 0 and 16 rem

###### Blocks:

**You can add a total of 4 blocks within the full width banner:** Subheading / Heading / Buttons / Body text

###### Subheading settings:

**Subheading:** Text box

**Subheading URL:** This is optional and you can link a URL to your subheading.

###### Heading settings:

**Heading:** text box for your heading

###### Buttons settings / First & Second buttons:

**Label:** Text box

**URL:** Enter a URL or select an existing page within the theme for this button's redirect.

**Button style:** Filled / Outlined / Outlined inverse / Default

_Note: Primary button style on theme settings is used when default is selected._

**Backgrounds and borders:** Default / Accent 1 / Accent 2

_Note: These settings are identical for both buttons._

###### Body text:

**Body text:** includes a text box for your full width banner's description.

Full width banner

###### About:

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.

###### Settings:

Layout: Select one of the two available layouts

**Example for layout 1:**

![Screenshot_11.png](https://cmsad.digifist.com/uploads/Screenshot_11_456147a095.png)

**Example for layout 2:**

![Screenshot_13.png](https://cmsad.digifist.com/uploads/Screenshot_13_5c838b150e.png)

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Indicator:

This section can have a total of three trust indicators, and all three are added by default when creating it.

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Icon:

**Icon:** Select an icon file for your trust indicators

**Note:** If you notice that your file isn't showing, please delete the code available in the "SVG code" box below the icon.

**SVG Code:** Paste the SVG code of your icons (if you have them), or delete the existing code to show your own icon.

_Note: SVG Code will overwrite the Icon setting._

**Icon color:** Default / Secondary / Inverse

_Note: The icon color will only change when using an SVG_

**Icon background:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** Enter a heading for your trust indicator

**Link title:** Enter a link for your redirect button

**Link URL:** Enter an URL or select one from within your store.



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)

Trust Indicators



![collection_banner_sahara.png](https://cmsad.digifist.com/uploads/collection_banner_sahara_ffb0825921.png)

##### Path: Customizer > Default Collection > Template > Collection banner

### About:

The collection banner is the representative image of each collection.
The image is pulled from the Shopify backend > Products > Collections > Image

*Note:* The image's dimensions should keep a 16:9 aspect ratio
By default, the collection's name will also appear as a heading on the banner.

##### Settings:
1. Section height - can be set to up to 100 vh
2. Banner layout - "Full", "70/30", "30/70", "Split" - The split options will move the heading to the side.
3. Color scheme

Collection banner

![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)

###### About:

This section is used to showcase messages you've received from customers.

###### Settings:

Please find the settings of this section below.

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Color scheme: 

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### General settings:

**Layout:** Media start / Media end / Media none

_Note: When media none is selected, text is centered and media/link are not used_

**Desktop gap:** Select a gap between 2 and 64

**Mobile gap:** Select a gap between 2 and 64

###### Text:

**Heading:** Enter a heading for your testimonials section

###### Testimonials slide:

To add a testimonials slide, please go to the left side of the screen in the theme's customizer, and click on "Add testimonial slide" underneath the "Testimonials" section.

###### Media:

**Image:** Select an image to be shown along with the testimonial

###### Text:

**Quote:** Enter the text sent by your customer

**Author:** Paste the name of the customer that shared the testimonial.

###### Link:

**Title:** Enter a title for your redirect button.

**URL:** Select or paste a URL for your redirect button.


Testimonials

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.


Products

###### About:

This section's role is to add spacing between the sections where you believe that the padding wasn't enough

###### Color scheme:

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Spacing:

**Desktop:** Between 0 and 100 px

**Mobile:** Between 0 and 100 px

Spacing

![col.png](https://cmsad.digifist.com/uploads/col_d4f66fcb26.png)

###### About:

The **Collections page** or "Products list page" (PLP) presents the list of products you've added to your collections as product cards.
This documentation presents the PLP and the settings associated with it.

###### Page banner or Collection banner:

The section has two different names because we've recently switched it from a mandatory banner on the collection pages to an actual section that can be used anywhere within the theme.

###### Settings:

**Heading:** Text box for your heading (it is recommended that you leave it empty if you want it to pull the title of your collection in the backend)

**Body text:** Text box for a description (you can link it dynamically to your collection description).

###### Color scheme: 

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**_Important: The theme settings also includes an option for this banner: **Show on all other pages:** On / Off
_**

---

###### Collection:

Below you will find the settings associatedith the collection within the template.

###### Color scheme: 

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### General:

**Enable products count:** On / Off

**Enable sorting:** On / Off

**Enable filters:** On / Off

**Filters style:** Drawer / Sidebar

###### Sidebar:

**Navigation:** You can create a navigation and link it to your sidebar

**Note:** This displays as a carousel on mobile

![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)

###### Products grid:

**Desktop column gap:** Between 0.2 and 3.2 px

**Mobile column gap:** Between 0.2 and 3.2 px

**Products per page:** Between 12 and 36 products

**Products per row default:** 3 or 4

_Note: This setting is available for desktop only. If products per row UI is enabled this will be the default value and if not this value will be used._

**Enable products per row UI:** On / Off
_Note: This setting is available for desktop only. When enabled users will be able to switch between 3 or 4 products per row._

**Pagination style:** Page numbers / Load more

**Button style for load more:** Filled / Outlined


Collections page (PLP)

![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)

###### About:

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


###### Settings: 

_These are the eneral settings that apply to the featured collections section._

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Layout:

**Layout:** Style 1 / Style 2

_Note: The above styles are for the alignment of heading, button and arrows_

**Desktop gap:** Between 2 and 64

**Mobile gap:** Between 2 and 64

###### Color scheme:

**Text:** Primary / Secondary / Inverse

**Background and borders:** Primary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** Enter a heading for this section.

###### Button:

**Bytton style:** Filled / Outlined / Outlined inverse / Default

**Label:** Enter a label foryour button

**URL:** Select the URL for the button (e.g. All collections).

###### Collection slide:

_You can add a collection slide from the left hand side of the screen inside the customizer, by clicking on "Add collection slide" underneath the "Featured collections section"_

**Color scheme for the collection slide's text:** Default / Secondary / Inverse

**Collection:** Select a collection to showcase

**Image:** Select an image representative to your collection.

_Note: By selecting an image, you will overwrite the collection image_

**Heading:** Enter a heading for the collection card



Featured collections

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

###### About:

Great section for entering more content for search engines indexability.

###### Vertical spacing:

Desktop: Normal / Top none / Bottom none / Top and bottom none

Mobile: Normal / Top none / Bottom none / Top and bottom none

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Text: 

**Text size:** Select the size between 1X and 4X

**Heading:** Enter a heading for the section

**Body text:** Write or paste the text you wish this section to contain.

SEO content

![Hero alternative.png](https://cmsad.digifist.com/uploads/Hero_alternative_d72f368c28.png)

###### About:

With the Hero Alternative banner section, you can create visually striking and engaging banners tailored to your website's design and content. Utilize the general settings to customize the banner height, and leverage the common settings to ensure a cohesive look and feel across your entire website.

###### Hero alternative settings:

**Banner height:** Choose the height between 40 and 100 vh

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Subheading:** Enter a suheading

**Heading:** Add a heading for your banner

**Body text:** Add a short description

###### Button: 

**Button style:** Filled / Outlined / Outlined inverse / Default

**Label:** Select a label for your redirect button

**URL:** Select or enter a URL for your redirect btuton

**Separator:** On / Off

_Note: Enable to add a vertical line between text and button when text is centered. Desktop only._

###### Media:

**Image:** Select an image for your banner



Hero alternative

![blog.png](https://cmsad.digifist.com/uploads/blog_5777cca22f.png)

###### Precondition:

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

###### About:

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


###### Settings:

**Please find the settings specific to blog articles below.**

###### Vertical spacing: 

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

###### Layout:

**Layout:** Style 1 / Style 2

_Note: Alignment of heading, button and arrows is done by switching between the two styles._

**Desktop gap:** Select a gap between 2 and 64

**Mobile gap:** Select a gap between 2 and 64

**Content alignment:** Start / Center / End

###### Color scheme:

**Text:** Primary / Secondary / Inverse

**Background and borders:** Primary / Secondary / Accent 1 / Accent 2 / Inverse

###### Text:

**Heading:** Insert a heading for your blog articles

###### Button:

**Button style:** Filled / Outlined / Outlined inverse / Default

**Label:** Enter a label for your button

###### Blog: 

_Note: You must select a pre-existing blog for this section to appear correctly._

Blog articles

![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)

###### About:

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.

###### General settings:

**Enable fullwidth:** On / Off

**Enable sticky header:** On / Off

**Backgrounds and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse

**Text:** Default / Secondary / Inverse

**Layout:** Logo centered / Navigation centered / Logo centered, navigation centered below / Navigation centered below other content / Navigation and logo to start / Navigation drawer 

**Transparent header for home page:** On / Off

_Note: You must make sure that the first section of the template is compatible with the transparent header for this (e.g. the hero banner)._

**Transparent header for collection:** On / Off 

_Note: You must make sure that the first section of the template is compatible with the transparent header for this (e.g. the hero banner or page banner)._

**Bottom border for transparent header:** On / Off 

_Note: This works only when the transparent header is enabled._

**Enable navigation drawer layer:** On / Off

_Note: The show/hide feature is added to the third level menu elements in the navigation drawer_
 
###### Logo:

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

Additionally, please make sure to have the correct transparent header image so that it fits your design.

**SVG code:** You can enter the SVG code of your logo if you have it under this format. This will overwrite the image if it exists.

**Max desktop width:** Between 50px and 200px

_Note: This works only when an image or svg is selected._

**Max mobile width:** Between 40px and 160px

**Logo font size:** Between 0.5x to 4x

_Note: This setting is available for text logo only._

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

More information about configuring navigation on your online store can be found on within the [https://www.digifist.com/en/help-center/documentation/theme/sahara/navigation-image-and-mega-menu](Navigation Image and Megamenu documentation)

**Menu column count:** Between 1 and 6 columns can be added to the header dropdown.

###### Country drawer:

**Enable in header:** On / Off

_Note: Positioned in the main navigation or utilities, depending on the selected layout._

**Enable in navigation drawer:** On / Off

_Note: Displayed in desktop/mobile navigation drawer._

###### Additional links:

_Note: Positioned in main navigation or utilities, depending on selected layout._

**Title:** Enter a title for this link

**URL:** Enter a redirect link

Header

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

Colors

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

###### About:

This section's role is to help you showcase products you recommend.
You will need to set up these products through the "Search & Discovery" app by Shopify.

_Important note: Although you can add this section to any page, we recommend using this section on the product description page for the best inpact to the customer._

###### Vertical spacing:

**Desktop:** Normal / Top none / Bottom none / Top and bottom none

**Mobile:** Normal / Top none / Bottom none / Top and bottom none

**Layout:** Select between the two layout to align the heading, button and arrows.

**Example of Layout 1:**

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

**Example of Layout 2:**

![style 2.png](https://cmsad.digifist.com/uploads/style_2_9c21e3b688.png)


**Desktop gap:** Select a gap between 2 and 64px

**Mobile gap:** Select a gap between 2 and 64px

###### Color scheme:

**Text:** Default / Secondary / Inverse

**Background and borders:** Default / Secondary / Accent 1 / Accent 2 / Inverse 

###### Text:

**Heading:** Enter a heading or leave the default "You may also like"

###### Products:

**Max products to show:** between 4 and 12 products

Recommendations

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

Footer

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 

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 Sahara Support team cover?

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

What’s included with my theme purchase?

Sahara doesn't include the infinite scroll at the moment, however, this is something we've been working towards.
We've recently released a new pagination option that can be found inside Customizer > Default collection page > Template > Collection > Pagination style

This gives you the option to switch from the "Load more" style to "Page numbers"

Does Sahara have infinite scroll?

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

When is your support available?

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?

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?

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

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

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.

Theme Helpcenter

Documentation

Additional configurations

Header and footer

Templates

General theme settings

Sections

Stay connected