large_Variant Expander_Logo_Icon_Blue.png

medium_Variant Expander_Logo_Icon_Blue.png

small_Variant Expander_Logo_Icon_Blue.png

thumbnail_Variant Expander_Logo_Icon_Blue.png

Variant Expander_Logo_Icon_Blue.png

Xpander

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

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

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

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

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

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

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

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

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

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

**Select products**

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

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

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

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

**Product name structure**

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

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


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

**URL Slug**

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

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

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

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

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

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

XPander App - Setup And Usage Guide 

Xpander DE

Contemporary design with proven functionality that converts to sales.

Clothing and accessories, Health and beauty, Home & Decor

High-volume stores, Physical stores, Visual storytelling

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

The new standard in customizability and speed

This theme is great for

Cart and checkout

Marketing and conversion

Merchandising

Product discovery

Internationalisation

Our promise

Built for speed & reliability

Stores using Mojave

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

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

large_Mojave-theme-mockup-homepage-min.jpg

medium_Mojave-theme-mockup-homepage-min.jpg

small_Mojave-theme-mockup-homepage-min.jpg

thumbnail_Mojave-theme-mockup-homepage-min.jpg

Mojave-theme-mockup-homepage-min.jpg

Mojave

Inner

Decor

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

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

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

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

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

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

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


Newsletter

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

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

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

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

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

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

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

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

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

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

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

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

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

Footer

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

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

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

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

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

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

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

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

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

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

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


Header

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

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

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

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


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

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



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

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

Announcement bar

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

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

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

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


Typography

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

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

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

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

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

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

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


Featured products

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

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

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

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

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

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

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

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

Multi column text

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

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

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

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

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

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

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

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


Custom filters

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

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

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

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

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

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

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

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

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


Products

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

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

Customize Images with text section settings 

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

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

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

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

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

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


Image with text

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

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

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

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

Cart

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

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

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

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

Rich Text

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

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

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



Collection

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

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

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

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

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

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

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

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

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


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

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

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

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

###### Dynamic content using metafields

Add a new metafield definition

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

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

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

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

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

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

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

###### Managing your content

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

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

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


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

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

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

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

At the end, it should look like this:

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

**Save** your changes.

Dynamic Block Content with Metafields

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

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

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

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

Promotional Product badges

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

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

Animations

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

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


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

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

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

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

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


Newsletter modal

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

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

You can follow these steps to set up Complementary products:

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

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

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

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

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

2. Rename Related products to Complete the look.

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

3. Click **Save**

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

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

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

Click **Add > Save.** 

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


Complete the look

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

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

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

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

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

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

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

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


Video

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

##### Enable language selection

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

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

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

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

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


Global

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

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

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

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

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

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

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




Promotional Collections

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

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

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

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

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

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

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

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

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

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


Hero

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

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

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


Home page

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

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

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

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

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

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

Featured articles

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

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

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

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

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

Search

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Metafields

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

Checkout

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


Buttons

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

Social media

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

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




Colors

This documentation contains all recommended image sizes for all sections.

**Desktop**

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

**Mobile**

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


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


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


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


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


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


Recommended image dimensions

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

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

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

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

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

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

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

You can change this setting under:

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

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

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

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

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

**Location to upload Custom Swatches:**

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

💡 We recommend using square image files.


Color Swatches

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

**Example products:**

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

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

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

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

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

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

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

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

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

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

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

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


###### How to use your template

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


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

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

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

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

Additional Templates

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

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

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

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

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


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


Click **Save**.



Favicon

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

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

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

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

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

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

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

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

Featured collection

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

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

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

Account pages

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

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

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

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

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

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

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

Banner - Fullwidth

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

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

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

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

---

###### Adding a Navigation Image

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

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

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

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

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

Navigation Image

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

When is your support available?

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

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

Can I add other custom fonts?

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


Accelerated checkout buttons are not appearing when checkout is initiated

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

What does the Mojave Support team cover?

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

What’s included with my theme purchase?

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

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

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

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

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

Can customers checkout in a different currency?

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

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

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

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

What size do my images need to be?

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

Een eigentijds design met bewezen functionaliteit die de verkoop stimuleert.


Release notes

Impress your customers with this clean and contemporary theme.

Clothing & Fashion, Jewelry and accessories, Health and beauty

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

large_Essence-Desktop.jpg

medium_Essence-Desktop.jpg

small_Essence-Desktop.jpg

thumbnail_Essence-Desktop.jpg

Essence-Desktop.jpg

Release

Grasse

Serenity

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

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

###### Important note:

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

Icons

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/banner2_f7585ff14b.png" alt="Banner 2" 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.

###### Full width banner:

**Media position:** Top / Bottom / Background

###### Desktop settings:

**Section height:** Auto / Third / Half / Full

**Content position:** Top / Center / Bottom

**Content alignment:** Left / Center / Right

**Media:** Select the media type (image or video) for desktop and tablet devices:

**Image:** Upload or select an image for the banner background.

**Video:** Upload or select a video for the banner background. You can also paste a link for an external video.

**Show Video Controls:** Enable the display of video controls for the banner video on desktop and tablet devices.

###### Desktop media example:

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

###### Mobile settings:

**Section height:** Auto / Third / Half / Full

**Content position:** Top / Center / Bottom

**Content alignment:** Left / Center / Right

**Media:** Select the media type (image or video) for desktop and tablet devices

**Image:** Upload or select an image for the banner background.

**Video:** Upload or select a video for the banner background. You can also paste a link for an external video.

**Show Video Controls:** Enable the display of video controls for the banner video on desktop and tablet devices.

###### Mobile media example:

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

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

###### Heading Settings

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

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

 
###### Buttons Settings

Configure buttons to include in the banner content:

**First button type** Button / Card 

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

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

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

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

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

###### Subheading Settings

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

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



Full width banner

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

###### About:

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

###### General Settings:

Please find the general settings of this section below:

###### Mixed Text

Enable to add a mixed text section to your page.

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

**Content Alignment** Start / Center / End

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

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

**Button Style** Filled / Outlined / Default



Mixed text

###### About:

Layout reffers to the page sizing and design.
As per members' requests and suggestions, Release includes this option to give you more flexibility in design.


###### Settings:

**Page width:** Can go up to 1920px
For a better view, we recommend you use standard widths.

**Section spacing unit size:** This option affects the spacing between sections, and can be set between 0.2rem up to 2.4rem

**Spacing / Desktop:** Sets the default spacings for desktop. Can be set between 0 and 4rem

**Spacing / Mobile:** Sets the default spacings for desktop. Can be set between 0 and 4rem


###### The default Layout settings we use in our demo stores:

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


Layout

![productgroups.gif](https://cmsad.digifist.com/uploads/productgroups_4631d7b5eb.gif)

###### About:

Product groups is our theme's solution to presenting different products as a variant to one another.
This enables you to have different description, variants, images, you can even use entire new templates to link them together.

###### In this documentation, we'll find the steps to:

**Create the metaobjects definitions:**

a. Product groups

b. Product options thumbnails

**Connect the products via the "Product groups" metaobject**

**Set up the "Product groups" in the theme's settings.**

**In short:** In order to set this up, you'll require two separate metaobject definitions, that will make the connection between the products, product variants, and product variants images.
We ask that you follow the following steps to the letter to have the desired outcome. We will include both the text and visual steps to have a better view of how it's supposed to look.

###### Step 1: 

Access the store's Settings > Custom Data > Add metaobject definition

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


###### Step 2:

Name your metaobject as: Product groups

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


###### Step 3:

Add a new field and select "Single line text"

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


###### Step 4:

1. In the Name filed, type in: Name
2. Check the box for "Use this field as display name"
3. Click on "One value"
4. Check the box for "Use as filter in metaobject index"
5. Check the box for "Required field"
6. Click "Add"

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


###### Step 5:

Add a new field and select "Product"

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


###### Step 6:

1. In the name field, type in: Group
2. Select "List of values"
3. Check the box for "Use as filter in metaobject index"
4. Check the box for "Required field"
5. Click "Add"

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


###### Step 7:

Add a new field and select "Single line text"

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


###### Step 8: 

1. In the Name filed, type in: Group by option
2. Select "One value"
3. Check the box for "Required field"
4. Check the box for "Limit to preset choices"
5. In the text field below, type in: Color
6. Click on "Add item" to add a new text field
7. In the second field, type in: Size
9. Click "Add"

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


###### Step 9:

Add a new field and select "Single line text"

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


###### Step 10:

1. In the Name filed, type in: Thumbnail
2. Select "List of values"
3. Check the box for "Required field"
4. Check the box for "Limit to preset choices"
5. In the text field below, type in: Product image
6. Click on "Add item" to add a new text field
7. In the second field, type in: Custom image
9. Click "Add"

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


###### Step 11:

Save your newly created metaobject.

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


###### Step 12:

Next, we will set up another metaobject definition for the thumbnails.

Therefore, access the store's Settings > Custom Data > Add metaobject definition

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


###### Step 13:

In the "Name field" type in: Product options thumbnails

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



###### Step 14: 

Add a new field and select "Single line text"

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


###### Step 15:

1. In the Name filed, type in: Name
2. Check the box for "Use this field as display name"
3. Click on "One value"
4. Check the box for "Use as filter in metaobject index"
5. Check the box for "Required field"
6. Click "Add"

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


###### Step 16:

Add a new field "File"

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


###### Step 17:

1. In the name field, type in: Image
2. Select "One file"
3. Check the box for "Accept specific file types"
4. Check the box for "Images" 
5. Click "Add"

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


###### Step 18: 

Save your newly created metaobject.

###### Step 19:

Go to your theme > Theme options > Custom groups

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


###### Step 20:

In the **"Metaobject for product groups"** field, type in: product_groups

In the **"Metaobject for product options thumbnails"** field, type in: product_options_thumbnails

In the **"Variant options use custom thumbnails"** field, type in: Color

Save the theme changes.

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


###### Step 21:

Go to your theme's backend > Content > Metaobjects > Product groups > Add entry

###### Step 22:

1. Name your test entry.
2. Select 2 or more products that can form a group
3. In "Group by option" select "Color"
4. In "Thumbnail" select "Product image"
5. Click save

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



###### Step 23:

You can now go to your live product and test your product groups.

###### Step 22b:

1. Name your test entry.
2. Select 2 or more products that can form a group
3. In "Group by option" select "Color"
4. In "Thumbnail" select "Custom image"
5. Click save

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


###### Step 23b:

Go to your theme's backend > Content > Metaobjects > Product options thumbnails > Add entry

###### Step 24: 

1. Name: Use the exact name of your product color variant. Example: Blue
2. Image: Use an image representative of that product color variant.
3. Click "Save"

_Note: This option enables you to use specific images for the swatches of the product groups._

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



Product groups setup

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

###### Store Locator:

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

---

###### Heading:

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

---

###### Section Layout:

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

Image Layout Columns (desktop only):

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


---

###### Height Settings:

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



###### Common settings:

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


---

###### Map Settings:

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

Zoom: Option used to set the zoom of the map

---

###### Card Settings:

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

---

###### Pin Settings:

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

###### Store Info:

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

###### Opening Hours:

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

###### Store Image:

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

###### Store Location:

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

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

###### Custom Tooltip Text:

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

---

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

###### Phone Button:

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

###### Directions Button:

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

---

###### See more card:

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

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

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

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

Store Locator

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

###### About

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

###### General Settings

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

**Layout 1**

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

**Layout 2**

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

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

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

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

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

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

Note: The featured collections section can be added below the collection page's page banner as a "Card collage":

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

###### Collection card

**Card Layout:** Collection / Product / Text

**Card Style:** Normal / Compact

**Image aspect ratio:** Auto / 1:1 / 3:4 / 4:5

**Content Alignment:** Start / Center

**Collection title style:** Single text / Text with arrow icon

**Collection product count:** Hide / Show / Show with border

###### Slideshow:

**Slides per view:** between 1 and 12

**Slides per view for mobile:** between 1 and 4

**Show carousel arrows:** On / Off

**Slideshow center alignment:** On / Off

**Enable slideshow overflow:** On / Off

###### Collection Slide

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

**Collection Slide Customization Options**

**Link a collection:** Choose between your collections

**Image:** If none is assigned, the image is pulled from the backend of the Shopify admin / if assigned, it will overwrite the collection image from the backend.

**Heading:** Add a heading for your collection or connect dynamic source to get the collection title automatically

**Heading Sizes**

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

**Subheading:** Text box that can be used to personalize a subheading


Featured collections

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


###### General Settings:

**Heading** (You can add a title to your Accordions section, which will be displayed at the top of the section.)

**Show Content on Page Load** (Choose whether the content of the accordion items should be expanded when the page loads.)

###### Topic Settings:

**Heading** (The title of the accordion item, which is always visible and can be clicked to expand or collapse the content.)

**Text** (Add the main content text for the accordion item.)

**Page** (Option to select a page from your site to output its content as the topic body text. This will overwrite the text added in the topic content field.)

###### Usage Tips

- Use the Accordions section to break down large chunks of information into manageable and easily navigable parts.
- Customize the spacing and color scheme to match your site's overall design and branding.
- Take advantage of the fluid width option for a full-width accordion display that adapts to various screen sizes.
- Utilize the "Show Content on Page Load" option for important information you want to ensure is visible immediately.

By following these guidelines, you can effectively use the Accordions section to enhance your website's content presentation and improve user experience.

Accordions

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

###### About

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

###### Layout

Choose between two layout options to present your featured products:

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

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

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

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

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

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

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


###### Slideshow Settings

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

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

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

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

###### Tabs Settings

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

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

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


###### About:

This documentation presents the step-by-step process on how to enable and set up the pre-order functionality within Release starting with version 1.0.8

###### Overview:

In order to activate the pre-order functionality inside Release, you'll have to create two new product metafields:

**Preorder:** A "True or False" type product metafield.

**Preorder shipping date:** "Date" type product metafield.

_Note: This is optional, but can be used to show the ETA of the product's arrival._

###### How to do it:

###### Step 1:

Go to the store's Settings > Custom Data > Metafield definitions > Products > Add definition

###### Step 2: 

Enter the following values in order to create the preorder metafield:

**Name:** Preorder

**Namespace and key:** theme.preorder

**Select type:** True or false

**Save**

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


###### Step 3 (Optional)

Add a new definition with the following:

**Name:** Preorder shipping date

**Namespace and key:** theme.preorder_shipping_date

**Select type:** Date

**Save**

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


###### Step 4:

Go to the backend of the product you want to have as preorder and scroll down to **Metafields > Preorder**

**Click on the preorder box and select "True"**

**Save**

###### Step 5 (Optional):

If you've set up the preorder shipping date metafield as well, you can set it up in the product's backend **Metafields > Preorder shipping date**

**Select the date when it can be shipped on**

**Save**

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


###### Step 6:

Access the product inside the theme and confirm the functionality of the feature.

**Note: The product's "Add to cart" button will appear as "Pre-order now".**

Additionally, you'll have the following fields:

**This product is currently on pre-order**

**This product will ship on {{date}}.**

**By clicking 'Pre-order', I acknowledge that I am purchasing a pre-order item, not an in-stock product, and agree to the Terms & Conditions of the pre-order process.**

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


###### How to edit the fields appearing on the product's page:

###### Step 1:

Go to Online store > Themes Library > Click on the 3 dots next to your theme > Edit default theme content


###### Step 2:

Use the search functionality in the default theme content to search for "pre-order"

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

###### Step 3:

Modify the text as per your liking and then hit "Save".





Pre-order setup

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

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

###### Settings:

**Section Layout:**

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

**Image Settings:**

Image (used to upload the main image for the desktop mode banner).

Mobile Image (used to upload an image specifically for mobile devices).

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

**Media Position:**

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

**Content:**

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

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

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

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

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

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

###### Timer Settings:


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

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

**Timer Size:**

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

**How to set up the timer:**

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

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

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

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

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

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

###### Parts Display Settings:

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

---

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


Callout banner

![Header.png](https://cmsad.digifist.com/uploads/Header_e0e1cb6bf1.png)

###### About:

The header is one of the main components in your store. It is shared among all of the pages along with the content you wish to display, containing some of the most important elements in your store such as the navigation, cart, search, language selector, and so on.

###### Header settings:

**Layout:** Logo centered / Navigation centered / Logo and navigation aligned to start

**Enable sticky header:** On / Off

**Borders for navigation elements:** On / Off

_Note: Allows you to add borders to the inward-facing edges of the first and last element._

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

_The show/hide feature is added to the third level menu elements in the navigation drawer_

###### Logo settings:

**Logo:** Select your logo image from this option.

**SVG Code:** If you wish to have additional customization options, we recommend uploading your logo as an SVG rather than using it as a normal file

_Note: The SVG code will overwrite the logo image_

**Max desktop width:** Select between 50 and 200 px.

**Max mobile width:** Select between 50 and 200 px.

_Note: This only works when a logo image or SVG are used. It will not work for text logos_

**Logo font size:** Select between 0.5 X and 4 X

_Note: This option works only for text logo_

###### Transparent header:

Important note: The transparent header requires that the first section of the home page and collection page have good contrast with the transparent header.

**Enable for home page:** On / Off

**Enable for collection page:** On / Off

**Show bottom border:** On / Off

**Logo for transparent header:** Please keep in mind to use a different color than the regular logo you use.

###### Country drawer:

**Enable in header:** On / Off (this will appear with the utilities)

**Enable in navigation drawer:** On / Off (to be used only with the drawer navigation).

**Utilities link display:** Icon / Text / Icon with text

###### First and Second additional links:

The settings for these two links are identical, therefore, they will only be mentioned once:

_Note: The links will be found in the main navigation or utilites depending on the layout you've selected._

Title: Select the title for your menu link

URL: Enter an URL for the redirect or select one from wthin the store.

###### Navigation:

**Menu:** Select a menu for your main navigation.

**Mobile menu:** Can be different than your desktop menu.

**Submenu:** Select a submenu visible only if you're using the navigation drawer layout.

**Mobile menu card column count:** Select between 1 and 2 columns

###### Megamenu:

**Spacing between cards:** No / S / M / L / XL

**Card aspect ratio:** Auto / Square / Landscape

**Card aspect ratio for mobile:** Auto / Square / Landscape

_Important note: Please check our Navigation and Megamenu documentation for how to set up the megamenu._











![list collections.png](https://cmsad.digifist.com/uploads/list_collections_6fb715eea2.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.

###### Collections:

**Collections Selection:** Choose whether to display all collections or select specific collections to showcase.

**Collection Card:**

**Collection Title Style:**

**Single Text:** Display the collection title as simple text.

**Text with Arrow Icon:** Display the collection title with an arrow icon for enhanced visual appeal.

**Collection Product Counter:** Toggle to display or hide the product counter for each collection, indicating the number of products within each collection.

**Collection Counter Border:** Toggle to add or remove a border around the collection counter.

**Collections per Page:** This setting is applicable only when displaying all collections and allows you to specify the number of collections to show per page.

With the List Collections section, you can effectively organize and present your product categories, enhancing the browsing experience for your website visitors.


List collections

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/image_20_b36f154495.png" alt="image (20).png" style="width: 100%;">
</div>



###### About:

The footer is a crucial component of your website, providing important information and navigation options for your visitors. It can be customized with various sections to enhance user experience and showcase relevant content.


###### Sections:

**Brand:** (Display your brand logo or name in the footer section)

**Menu:** (You can add the navigation you've created for the footer for easy access to key pages on your website)

 **Follow on Shop:** (Provide links or buttons for visitors to follow your shop on social media platforms or other channels)

**Social Media Icons:** (You can use it to showcase icons linking to your social media profiles, allowing visitors to connect with you on different platforms)

**Newsletter:** Allow visitors to subscribe to your newsletter for updates, promotions, and news about your products or services.

**Localization:** Offer options for visitors to switch between different languages or regions, enhancing accessibility for a global audience.

**Content:** Add custom content such as company information, mission statements, or testimonials to engage visitors and build trust.

**Payment Icons:** Display icons of the accepted payment methods you've set up in your store to reassure visitors about secure transactions.

**Spacer:** Add space between sections to improve visual clarity and organization within the footer.

###### Customization:

- Each individual footer section can be further customized to include the desired information, text, images, links, or buttons.
- You can add multiple footer sections and arrange them according to your design preferences by simply dragging and dropping them into place.


###### About:

To give the theme a twist, we've added a special functionality to the theme's Featured collections page and you can now add it to your Product Listing Page template (Collection pages) to achieve a collections overview functionality on this page.

Note: As we've already covered the functionalities of this section in the Sections > Featured Collections documentation, this documentation only covers the specific settings useful to the collection pages.

###### Prerequisite:

Add a featured collections section to your collections page and set it up.


###### 1:1 View:

![Collection Card - Collection - 1_1 separate.jpg](https://cmsad.digifist.com/uploads/Collection_Card_Collection_1_1_separate_823b9d74a4.jpg)



###### 3:4 View:

![Collection Card - Collection - 4_5 separate.jpg](https://cmsad.digifist.com/uploads/Collection_Card_Collection_4_5_separate_51abd92fca.jpg)

###### Collection card settings:

![Collection Card - Product.jpg](https://cmsad.digifist.com/uploads/Collection_Card_Product_a31f989928.jpg)

###### Important note:

In order to avoid having an issue where the background color of the images don't match your theme's background settings for the PLP, please take note to use images that have no background.

![Collection Card - Product - PNG Warning.jpg](https://cmsad.digifist.com/uploads/Collection_Card_Product_PNG_Warning_6a4ec428a8.jpg)

Featured collections on the collection pages

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/image_21_9170938e71.png" alt="image (21).png" style="width: 100%;">
</div>


###### About

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

###### Section Layout

**Separated / Stacked**

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

**Swap Order for Mobile** Checkbox

###### Tile:

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

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

**Custom Background Color:** No color chosen

###### Heading

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

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

###### Button

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

**Link:** Example: New Collection

**Style:** Filled / Outlined / Text

###### Product

**Select Product:** 

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

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

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

**Alignment:** Left / Center / Right

**Position:** Before / Between / After

###### Media

**Image** Select an image

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

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

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

###### Mobile Media

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

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

**Show Video Controls**

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

Dual content tiles

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

###### About:

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

###### Template:

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

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



404 page

###### About:

This documentation presents the step by step process on how to set up your swatches.

###### Step 1:
Go to the Product Description backend and scroll down to "Category Metafields".

###### Step 2:
If you've not used the "Color" metafield before, press on the "+Color".
This action will directly add the Color metaobject in the backend and will allow you to quickly create the colors you're going to use in your store.

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

###### Step 3: 
Click on the newly created field "Add color" to add a new entry or select a pre-existing color.

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


_Info: You can create a new entry depending on your colors and color naming choice, or use the default colors provided by Shopify_

**Note: It is important to use the exact same name for the colors as you've named your Color Variant**

###### Step 4:

By clicking on "Add a new entry", a new page will appear where you'll have to enter:

A color name (the same as the intended variant color's name)

A color value (you can either pick the color from the table or use the hex code if you already have it)

An image (can be used instead of the color value)

A base color - this is used by Shopify to keep track of the colors and help their software with filters and other color-related functionalities.

A base pattern - this should be left on "Solid"

After filling out the form, hit "Save".

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


###### Step 5:
Click on your color variants:

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



###### Step 6:
Connect the color variants dynamically by clicking on the "Stacked coins" symbol:

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



The metafield you're going to connect the variants to must be "Color":

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



When the colors are dynamically connected, the stack coins symbol has a "Checked" symbol on top:

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


After this is done, the theme will automatically recognize that for this particular product, the color variants' colors are coming from the metafield in the backend.

###### Step 7: 
Go to the theme and assign the color swatches to your "Color" variant inside the Theme's Settings > Product cards > Swatches.

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

_Info: If you don't use specific color naming like "XYZ123" and you already have a list with all of your colors, you can go to the store's "Content > Metaobjects > Colors" page and add the colors directly. After doing so, all you have to do is repeat Step 3 on each of your products._

Color swatches setup

###### About:

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

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

###### General Settings:

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

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

**Filter:** Hide / Drawer / Sidebar

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


###### Filters:

**Options:** Hide / Drawer / Sidebar

###### Product Grid

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

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


###### Pagination Style:

**Page Numbers / Load More**


###### Text Card - Example:

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


###### About:

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

###### How to:

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

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

###### Text card options:

**Color scheme:** Choose the desired color scheme

**Text:** Your advertisment goes here

**Link:** Redirect your customers to a particular page

**Link type:** Button / Card

**Button label:** Leave empty if you don't want to use a button

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

**Content position:** Top / Center / Bottom

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

**Content position for mobile:** Top / Center / Bottom

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

###### General settings for the card:

**Position:**  1 -- 28

_Note: If position number is higher than products per page number, products per page number will be used_

**Column factor:** 1 -- 4

**Row factor:** 1 -- 4

**Image:** Choose a background image for your text card

Collection template & Text Card

###### About:

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

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


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


###### How to:

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

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/color_schemes_1_79de284924.png" alt="Color Schemes 1" style="width: 38%;">
</div>

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

###### Categories and elements:

###### Background:

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

###### Typography:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/typography_2_fa0ffd9fda.png" alt="Typography 2" style="width: 42%;">
</div>

###### Buttons:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/buttons_3_f37ac7eb41.png" alt="Buttons 3" style="width: 42%;">
</div>

###### Other elements:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/other_elements_4_b0110dd21d.png" alt="Other Elements 4" style="width: 42%;">
</div>

###### Note: 

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

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

###### Precondition:

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


###### About:

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

###### General Settings:

**Heading** (used to add a title to your blog)

**Blog** (used to choose a blog from which articles will be displayed).

**Label** - Enter a label for the blog link (e.g., "Visit Blog").

**Layout** (there are two styles available, please refer to the theme to see the changes each style brings)

**Card Media Ratio**

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

**Options**

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

**Content Alignment:** Left / Center/ Right

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

###### How to add articles:

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

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


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

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

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

Blog articles

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

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


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

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




Password page

![Screenshot_17.png](https://cmsad.digifist.com/uploads/Screenshot_17_62c0804b89.png)


###### About

The Multitile section provides a versatile layout for displaying multiple titles with customizable settings for text, media, and grid layout. With options to adjust color schemes, section width, spacing, and more, you can create visually engaging sections tailored to your website's design.

###### General Settings

**Multitile:** Enable to add a multitile section to your page.

**Swap Order for Mobile:** Choose whether to swap the order of titles for better mobile responsiveness.

###### Title Settings

**Tile:** Specify the title settings for the multitile section.

**Show on:** Choose where to display the title:
- Desktop
- Mobile
- Both

**Grid Layout:** Divide the section into columns and rows.
- **Column Factor:** Set the number of columns.
- **Row Factor:** Set the number of rows.

###### Examples:
![Screenshot_19.png](https://cmsad.digifist.com/uploads/Screenshot_19_165affba42.png)

---

![Screenshot_18.png](https://cmsad.digifist.com/uploads/Screenshot_18_e75be56d72.png)


**Tile Aspect Ratio:** Adjust the aspect ratio of the tile.

**Color Scheme:** Customize the color scheme for the tile section.

**Custom Background Color:** Choose a custom background color for the tiles.

**Content Position:** Specify the position of the content within the tile:
- Start
- Center
- End

**Content Alignment:** Align the content within the tile:
- Left
- Center
- Right

###### Text Settings

**Heading:** Customize the heading settings for the multititle section.

**Heading Size:** Choose the size of the heading.

**Text:** Add text content to the section.

**Button:** Add an optional button to the section.

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

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

**Button Style:** Choose the style for the button.

###### Media Settings

**Image:** Upload images for the media section.

**Video:** Select a video or paste a link for the media.

**Show Video Controls:** Choose whether to show video controls.

###### Padding

Adjust the padding of the section for better spacing control.

- No
- S
- M
- L
- XL

Utilize the Multititle section to create visually appealing layouts with multiple titles, customizable text, and media options. With flexible settings for color schemes, content alignment, and grid layout, you can design captivating sections that enhance the visual appeal of your website.

Multitile

###### About:

This setting controls the search in your store. To have better results, it is recommended that you create a navigation manu in your store's backend > Online store > Navigation

###### Options:

**Enable predictive search:** On / Off 

**Search suggestions:** Present search suggestions with a navigation element created in the Navigation section of your store's backend.

###### Example:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Example_demo_store_search_navigation_379d5e7ff0.png" alt="Example Demo Store Search Navigation" style="width: 100%;">
</div>



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

###### About:

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

###### Functionality:

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

###### General Settings:

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

Width (Normal/Wider)

Height (Original/Adapt to section).

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

Normal width and original height:

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

Wider width and Adapt to section height:

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

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

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


###### Highlighted collections:

This section includes:

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

Highlighted collections

###### About:

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

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

###### General Settings:

**Swipe on Mobile** On / Off

**Autoplay Interval:** Set to 0 to disable autoplay

###### Content of blocks:

**Direction:** Horizontal / Vertical

**Alignment:** Start / Center / End

**Size:** Small / Medium / Large

**Color scheme for blocks:** Set your desired color scheme for your trust indicator blocks

###### Indicator Settings:

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

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

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

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

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

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


Trust Indicators

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/image_17_3577df3401.png" alt="image (17).png" style="width: 100%;">
</div>


###### About

The Age Verification Popup section allows you to create a mandatory popup that verifies the age of your website visitors before granting access to your site. This feature is crucial for websites that deal with age-restricted content, ensuring compliance with legal regulations and protecting younger audiences from inappropriate material.

###### Settings

**Show age verification popup**
Choose whether to display the age verification popup.
Options: Yes, No

**Show age verification popup in customizer**
Enable this option to preview the age verification popup while customizing your site.

###### Content

**Alignment**
Select the alignment for the content within the popup.

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

_Note: If an image isn't selected, the "Age verification pop-up" will appear as in the example below:_

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/image_18_0893e5c29d.png" alt="image (18).png" style="width: 100%;">
</div>

###### Heading:

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

**Text**
Enter the text content for the age verification popup.
Example: "By accepting, you also agree to our Cookie Policy & Privacy Policy. Make sure to only accept if your legal age is above 18 years."

**Display Blurred Backdrop for Sensitive Content**
Choose whether to display a blurred backdrop for sensitive content.

###### Buttons

**Confirmation button label**
Specify the label for the confirmation button.
Example: "Yes, I'm over 21"

**Confirmation button style**
Choose the style for the confirmation button.
Options: Filled, Outlined, Text

**Decline button label**
Specify the label for the decline button.
Example: "No, get me out of here"

**Decline button URL**
Provide the URL to redirect users who click the decline button.
Example: https://www.google.com

**Decline button style**
Choose the style for the decline button.
Options: Filled, Outlined, Text

###### Utilization tips

**Setting up the popup**
Decide whether to enable the age verification popup and preview it in the customizer.
Customize the alignment, heading, text, and optional image to align with your website's design and message.

**Configuring buttons**
Define clear and appropriate labels for both confirmation and decline buttons.
Choose suitable styles for the buttons to match the overall theme of the popup.
Provide a redirect URL for users who decline, ensuring they are taken to a relevant and safe webpage.


Age verification popup

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

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

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

Default Page

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


###### About:

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

###### Product Media Settings:

**Gallery Layout** Grid / Slideshow / Carousel

**Gallery Layout on Mobile** Slideshow / Carousel

**Gallery Thumbnails** Determine where and how thumbnails are displayed.

- None
- Both
- Desktop
- Mobile

*Note:* On mobile, thumbnails are horizontal and below the main image.
 
**Thumbnail Image Ratio:** Portrait / Square / Landscape

**Media Object Fit:** Cover / Contain

**Adaptive Ratio and Auto Height:** None / Adaptive ratio / Auto height

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

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

###### Navigation & Additional Settings

**Gallery Arrows Show On** Desktop / Mobile / Both

**Display Media Gallery Pagination** None / Over gallery / Under gallery / Mobile only

**Show Media Indicator:** On / Off

###### Media Gallery Info

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

###### General Settings

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

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

**Content Alignment** Left / Center / Right

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

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

**Product gallery position:** Start / End

**Space between gallery and content:**: No / S / M / L / XL

**Bottom spacing unit for the blocks:** From 0 and up to 4rem

###### Elements:

###### Badges:

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

###### Title

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

###### Price

**Show Tax Information** (Checkbox)

**Show Shipping Information** (Checkbox)

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

###### Description

**Behaviour:** Plain / Accordion / Tab

_Note: You need to add content tabs block to set tab._

**Heading:** Text Box

_This heading overwrites the default heading of the block._

**Truncate Line Limit:** Numeric Value

_Note: You can disable by setting 0._

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

**Custom Icon**
_Note: This will overwrite the default icon._

###### Variant Picker

_This field's purpose is to display the correct name across section blocks.__

**Variants Display** Dropdowns / Buttons

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

**Dropdown Layout** Rows / Columns

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

**Size Option Label** Text Box

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

###### Purchase Options

**Buy Buttons**

**Show Quantity (optional)**

**Quantity Type** Inline / Separate

**Show Dynamic Checkout Buttons**
_Note: Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay_

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

###### Inventory Notice

**Inventory Threshold:** Numeric Value

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

###### Content Grid

**Heading:** Text Box

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

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

Product Page

###### About:

This documentation presents the customization options available for the buttons and other input elements across the theme.

###### Buttons typography settings:

**Font size scale:** This option applies changes on all the buttons in your store, and it modifies them in a uniform manner to achieve the most optimized look. 

The range goes between 50% and up to 150%


**Letter spacing (em):** This option changes the spacing between the headings letters with the following options:
-0.04 / -0.02 / 0 / 0.1 / 0.2



**Text letter case:** Normal / Capitalize / Uppercase


**Fonts:**

They can be changed to match your design preference by clicking on the "Change" button.

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


This action will open a new window with the list of fonts available to you via Shopify's fonts database:

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

The font style can also be selected from here:

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Fonts_Style_01a34bca58.png" alt="Fonts Style">
</div>

###### Other settings:

**Shape:** Squared / Rounded 


**Input shape:** Squared / Rounded 
Note: This setting affects the input fields' corners.



**Icon stroke width:** Light / Medium / Bold



**Icon corner shape:** Rounded / Sharp


Buttons and inputs

![navigation_and_megamenu_1.png](https://cmsad.digifist.com/uploads/navigation_and_megamenu_1_251f51d3d3.png)


###### About:

The precondition to having a menu within the theme is creating it within your Shopify backend inside the Online Store > Navigation.

A menu gives your customers the quickest way to access relevant content available in your store, and it can range from products, collections, and blog pages to custom pages.

There are two default menu options available on every single page:

###### Main Menu & Footer Menu

The main menu is where your customers will find the quickest way to your products, collections and information about your business.

The footer menu is usually displayed as items across the width of the footer. A customer will  look at your footer menu for information about your store policies and contact information.

###### Tutorial: How to create and edit your navigation:

<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 transform the menu into a megamenu

The Image and text card feature is an innovative way of displaying relevant information across your store. This allows you to promote products or content across your store easily.

In order to activate the megamenu, you will have to add at least one "Image and text card block to your header and link it to your designated menu by following the steps below:

1. Go to your theme's Navigation in the customizer and expand it.
2. Add an Image and text card block
3. Link it to the 1st level menu link title that you wish to transfom into a megamenu by entering the name of the menu into the "Menu link title" box (i.e. if the “Shop” collection menu includes a drop-down with multiple components, you’ll have to enter the same “Shop” name so that you associate the image and text card with this collection).
4. Finish configuring the Image with text card as per your prefferences.

Additional customisation options of this feature include:

- Color scheme (chosen per your preference and design colour palette).
- Image
- Heading and subheading
- Content position
- Link (you can choose a link within your store where the customer will be redirected to)

**Note**: If only one card is present, it should be aligned to the right of the container

---

###### Types of menus:

###### 1. Classic menu with no images and text cards:
![standard.png](https://cmsad.digifist.com/uploads/standard_a39792050b.png)

###### 2. Megamenu - You can add up to 5 Images with text cards to the menu link title.

###### Example 1:

---

![m1.png](https://cmsad.digifist.com/uploads/m1_6a826303a4.png)

---

###### Example 2:

---

![m2.png](https://cmsad.digifist.com/uploads/m2_8a2f28d713.png)

---

###### Example 3:

---

![m3.png](https://cmsad.digifist.com/uploads/m3_251306b661.png)


Theme Helpcenter

Browse by theme

Browse by app

Stay connected