Impress your customers with this clean and contemporary theme.

Clothing & Fashion, Jewelry and accessories, Health and beauty

High-volume stores, Physical stores, Visual storytelling

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

The new standard in customizability and speed

This theme is great for

Cart and checkout

Marketing and conversion

Merchandising

Product discovery

Internationalisation

Our promise

Built for speed & reliability

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

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

large_Essence-Desktop.jpg

medium_Essence-Desktop.jpg

small_Essence-Desktop.jpg

thumbnail_Essence-Desktop.jpg

Essence-Desktop.jpg

Release

Grasse

Serenity

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

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

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

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

###### About:

Typography represents the place where you can set up the fonts, letter spacing and font scale in your store. 
You can find it by going to the Theme's Settings > Typography

Release, like every other DigiFist theme, uses Shopify's database for fonts. This means that the fonts are pre-set and it does not include all of the fonts that are available on the www. However, although you may not find the exact font you're looking for, all fonts belong to a family of fonts, and with a search on any Search Engine, you can indentify the font closest to the one you may want to use.

###### Note:

Custom fonts are not currently supported as Release **does not** include an option to add **custom fonts**.
If you are proficient in coding and wish to add them yourself via custom-coding, you may do so, however, any issue related to this fall outside of our Support's scope, therefore, we recommend against adding custom fonts to your theme.


###### Heading typography settings:

**Font size scale:** This option applies changes on all the headings (from H1 tags, all the way to H6) 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%

**Note:** Although the size scale changes, the default tag's designation will remain the same. In short, you're just maginifying the size, not the actual H tag.


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

**Word break:** Normal / All / Word

###### Body typography settings:

**Font size scale:** This option applies changes on all the body text 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



**Fonts:** Can be changed to match your design preference by clicking on the "Change" button.

###### Italic typography settings:

**Font size scale:** This option applies changes on all the body text 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%


**Fonts:** Can be changed to match your design preference by clicking on the "Change" button.




Typography

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











Header

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

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

###### About:

The marquee is a design element used to display scrolling or animated text, images, or a combination of both. It is often used to create a dynamic and attention-grabbing feature on a website's homepage or other pages. The marquee effect gives the appearance of content moving horizontally right to left making it ideal for highlighting key messages, promotions, or announcements.

###### Settings:

**Enable animation:** On / Off

**Animation speed:** Between 1 and 10.

_Note: This is not counted in seconds, but the speed at which the text moves, and the same speed can appear to be slower on two different marquees sections if the text inside them is longer._

###### Desktop layout settings:

**Element size:** Between 1 and 6

**Element spacing:** Between 0 and 6 px

_Note: These options are only available for the desktop and tablet layouts._

###### Text item:

You can add the text item by clicking on the "Add block" button underneath the marquees section you've created.

**Icon:** Leave this text box blank if you wish to hide the icon, otherwise, enter the name of an icon available in our Icons documentation.

**Custom icon:** You can add a custom icon you've already uploaded in your store's files.

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

**Link:** Make the item clickable and redirect to a specific link in your store or outside of it.





Marquees

###### About:

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


###### Breadcrumbs:
 **Show on all other pages:** On / Off
 
**Back to Top Button:** Disable / Filled / Outlined

###### Currency codes:

 **Show currency codes on prices:** On / Off
 
 ###### Timer:
 
 
 **Timezone GMT:** Configure countdown timers for promotional events or limited-time offers. Select your store's timezone (GMT) to ensure accurate countdowns.
 
###### Product video:

**Show video controls on product media:** On / Off

###### Newsletter form:

**Newsletter form terms** Define the terms of your newsletter here

**Show newsletter form terms checkbox:** On / Off
 
 



Extras

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

###### About:

This is where you can link your social media so the icons display in the footer.

_Note: In order for the icons to appear, you must enter a correct link in the corresponding box._

###### Social media links:

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



###### Sharing options:

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


Social media

###### About:

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

###### Vendor:

**Show product vendor:** Check to display, uncheck to hide
###### Media Settings:

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

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

**Media Fit:** Cover / Contain

###### Badges:

**Show product card custom badges:**  Check to display, uncheck to hide

**Show product card discount badges:**  Check to display, uncheck to hide

**Show product card sold out badges:**  Check to display, uncheck to hide

**Badge display position:** Start / End

**Discount badge background color:** Choose desired color

**Discount badge text color:** Choose desired color

_Note: The two settings above only apply to the Discount badge "Sale" that's only triggered when the "Compare-at-price" of the product has been activated in the product backend._

**Price display position:** Normal, Next to title

###### Actions:

**Buttons color scheme:** Choose desired color scheme

**Enable quick add to cart drawer for multi variant products:** On / Off

**Enable quick add to cart button for single variant products:** On / Off

###### Add to cart button content:

**Icon:** Displays only an icon on the add to cart button.

**Icon with hover:** Will display the "+" icon and text when you hover over the icon.

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

**Text:** Displays only text on the add to cart button.

###### Add to cart button text:

You can set button text when you select Icon with hover text


###### Variants:

**Variant option names:** List of option names to show the variants "Color, Material, etc"
 
**Variants Desktop display options:** None / Info / Buttons

**Variants Mobile display options:** None / Info / Buttons

**Variant option button size:** Between 1.6 and 4 rem

**Variant options display limit:** Between 2 and 8

**Swatch type variant shape:** Square / Circle

**Show product groups:** On / Off

**Product options position:** Normal / Inline





Product cards

###### About:

This section refers to the drawers across the theme including the "Country drawer" that's used as a language and currency selector.

###### Color scheme for drawers:

This is the general setting for the drawers color scheme. If you have one set up already, you can directly assign it to your drawers.

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


###### Additional settings:

**Show heading:** On / Off

**Show content:** On / Off

**Display options:** Choice dropdown with the options below:

-Country name, currency code and symbol

-Country name and currency code

-Country name

-Currency code and symbol


Drawers

###### About:

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

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

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

![Header.jpg](https://cmsad.digifist.com/uploads/Header_4bfb31d0a0.jpg)

![Header Dropdown.jpg](https://cmsad.digifist.com/uploads/Header_Dropdown_a4235bcbb7.jpg)

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

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

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

![Compare Slider.jpg](https://cmsad.digifist.com/uploads/Compare_Slider_096a23c832.jpg)

![Product Cards.jpg](https://cmsad.digifist.com/uploads/Product_Cards_374c361e0d.jpg)

![Featured Collections.jpg](https://cmsad.digifist.com/uploads/Featured_Collections_9912967dd4.jpg)

![Featured Products.jpg](https://cmsad.digifist.com/uploads/Featured_Products_51b6e52392.jpg)

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

![Featured Collections (Variant).jpg](https://cmsad.digifist.com/uploads/Featured_Collections_Variant_28a7124c70.jpg)


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






Recommended image dimensions

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

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

1. How to create the **Product groups metaobject**.
2. How to create the **Product options type values metaobject**.
3. How to link the metaobjects in the **theme's settings**.
4. How to **test** your product groups.

###### What are "Product groups"?

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.

###### What are "Product options type values"?

The Product options type values refer to the four settings your products can be displayed in. They are:

1. Image
2. Swatch
3. Text
4. Option

Each of these options can be selected for the "Cards" and "Page".
The "Cards" refers to the product cards that can be found on the collection pages or the theme's sections.
The "Page" refers to the actual product page.

###### How to create the product groups metafield:

###### Step 1: 

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

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

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

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>

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

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>

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

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>

1. In the Name filed, type in: "Type on Card"
2. Select "Single value"
3. Check the box for "Limit to preset choices"
4. In the text field below, type in: Image
5. Click on "Add item" to add a new text field
7. In the second field, type in: Swatch
8. Click on "Add item" to add a new text field
7. In the third field, type in: Text
8. Click on "Add item" to add a new text field
9. In the forth field, type in: Product
10. Click "Add"

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

1. In the Name filed, type in: "Type on Page"
2. Select "Single value"
3. Check the box for "Limit to preset choices"
4. In the text field below, type in: Image
5. Click on "Add item" to add a new text field
7. In the second field, type in: Swatch
8. Click on "Add item" to add a new text field
7. In the third field, type in: Text
8. Click on "Add item" to add a new text field
9. In the forth field, type in: Product
10. Click "Add"

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

###### Step 8:

Add a new field and select "True or false"

1. In the Name filed, type in: "Custom Label on Page"
2. Click "Add"

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

_Note: **Make sure you have all of the fields above, and then hit "Save", to save your "Product groups" metaobject**_

###### How to create "the Product options type values" metaobject:

###### Step 1:

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

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

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

<div style="text-align: center;">
    <img src="_____________________" alt="Step 1" style="width: 70%;">
</div>



###### Step 2: 

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>

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

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>

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

Add a new field "Color"

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


1. In the name field, type in: Swatch
2. Select "One value"
3. Click "Add"

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

###### Step 5:

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>

1. In the Name filed, type in: Name
2. Click "Add"


_Note: **Make sure you have all of the fields above, and then hit "Save", to save your "Product options type values" metaobject**_

###### 3. How to link the metaobjects in the theme's settings:

Go to your theme > Theme Settings > Product options

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


1. In the **"Metaobject for product groups"** field, type in: product_groups
2. In the **"Metaobject for product options type value"** field, type in: product_options_type_values

Save the theme changes.

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

###### 4. How to create a group of products:

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

1. Name your test entry.
2. Select two or more products that can form a group
3. In "Group by option" select "Color"
4. In "Type on card" select one of the values
5. In "Type on page" select one of the values.
6. Click save

_Note: Except for the "Product" value, all of your other values will need to be configured inside the "Product options type values" metaobject._






Product groups setup

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


###### About

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

###### Slideshow settings

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

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

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

**Slideshow navigation position:** Sides / Left / Center


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

_Important note: To change the colors of the hero banner's arrows, you'll have to change the color of the "Filled button" inside your chosen color scheme_

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

###### Slideshow pagination style:

**Style 1 example:**

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




**Style 2 example:**

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


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

###### Slider settings

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

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


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



###### Example Full:

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


###### Example 70/30:

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


###### Example 30/70:

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


###### Example Split:

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


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

###### Media desktop

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

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

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


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

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

###### Media mobile

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

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

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

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

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

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

###### Content

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

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

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

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

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

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

###### Buttons:

**First button type** Button / Card 

_Note: **Card** type will make the entire slider clickable with redirect, instead of having to use the button._

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

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

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

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

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

Hero Banner

<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

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

###### About:

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

###### General Settings:

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

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

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

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

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

###### Product Slide

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

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

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

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

Horizontal Coordinates
Vertical Coordinates

###### Utilization Tips

**Setting Up the Heading**

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

**Selecting Layout**

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

**Image and Pulse Dots**

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

**Adding Products**

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



Shop the look

![highlightedproduct.png](https://cmsad.digifist.com/uploads/highlightedproduct_287f14a8ca.png)

###### About

The Highlighted Product section enables you to draw attention to a specific product on your website, showcasing its features and encouraging visitors to engage with it further.

###### General Settings:
**Product:** Select the product you want to highlight in this section.

**Heading:** Enter a title to introduce the highlighted product, such as "Item of the Week."


###### Product Media

**Media Object Fit:** Choose how the product media fits within its container:

**Cover:** The media will cover the entire container.

**Contain:** The media will be contained within the container.

**Adaptive Ratio and Auto Height:**

**Default:** Maintain the original aspect ratio of the media.

**Adaptive Ratio:** Adjust the media's aspect ratio based on the container size.

**Adaptive Ratio with Auto Height:** Adjust the aspect ratio and height of the media automatically.

**Transparent Background:** Toggle to enable or disable a transparent background for the media.

**Disable Media Zoom:** Toggle to enable or disable zoom functionality for the media.

**Show Media Index:** Toggle to display or hide the media index.

**Media Gallery Info:** Provide a short description to be displayed on the media gallery.

**Additional Featured Image:** Select an additional image to be featured alongside the main product media.

**Color Scheme for Arrows:** Customize the color scheme for navigation arrows.

###### Product Customization Options

This section allows you to customize the appearance of the selected product, including title, price, add to cart or buy buttons, and more, similar to a product page.

With these settings, you can effectively highlight a specific product on your website, drawing attention to its features and encouraging visitors to explore further or make a purchase.

Highlighted product

![Frame 991185.png](https://cmsad.digifist.com/uploads/Frame_991185_8828189e8f.png)

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

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

###### Template

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

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

Main content - this can be edited within the store’s: Online Store > Pages.

Additional customization settings:

**Show page title** - This option should be unchecked only if the page content has a “H1” heading.

**Show top navigation** - This will show this page’s breadcrumbs

**Additional info** - Heading
**Additional info** - Body text

_Note: The customization options are user friendly and you can see the changes live as you make them._

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

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

###### Map Section

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

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

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

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

Contact Us

<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

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

###### About:

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

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

The FAQ page’s template gives you free customization liberty

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


FAQ Page

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

###### About

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

###### Layout

Choose between two layout options to present your featured products:

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

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

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

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

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

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

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


###### Slideshow Settings

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

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

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

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

###### Tabs Settings

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

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

Featured products

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

![social media highlights.png](https://cmsad.digifist.com/uploads/social_media_highlights_aae8d187d8.png)

###### About:

Social media highlights is a powerful tool that can be used to display promotional messages or cards along with redirect buttons both to pages inside your store, such as products or collections, as well as to outside sources such as social media pages.

The cards are set to display as a rotating slideshow on a set time both in an orderly as well as disordely manner (card has its own dimensions, giving it the look of a colage) 

###### General settings:

**Layout:** Simple / Stacked

**Heading:** Text box for your heading

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

**Subheading:** Text box for your subheading

**Button label:** Insert a label to display the button, or leave this text box empty to hide the button.

**Button link:** Insert a link to your social media

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

**Button icon:** Add an icon from the list available in our documentation

**Color scheme:** Choose a preset scheme for this section

**Media aspect ratio:** Auto / Square / Landscape / Portrait

**Autoplay speed:** Between 0 and 10 seconds.

###### Image settings:

To add the image, please head to the customizer on the left side of the screen, and press on the "Add image" button, underneath the "Social media highlight" section.

**Image:** Select an image

**Image link:** paste a link or select one from your store.

**Card aspect ratio** options: Same as section / Auto / Square / Landscape / Portrait



Social media highlights

###### About:

We refer as "Cards" to the individual media (image and section specific content) of the various sections and pages across the theme, and this documentation includes their general settings.


###### Corner radius Settings:

This setting can be used to round-up the corners of the cards in your store going from square to round.

Square(min) 0rem - 2.4rem Round(max)

###### Example of 0rem (square):

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

###### Example of 2.4rem (round):

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



**Note:** You don't have to use the minimum or maximum values and can select anything in between as per your design or preferences.

###### Other settings:

**Text alignment:** Left / Center / Right

**Card ratio:** Auto / 1:1 / 3:4 / 4:3 / 16:9

**Card media ratio:** Auto / 1:1 / 3:4 / 4:3 / 16:9

**Media fit:** Normal / Cover / Contain / Fill

**Media overlay for desktop:** Sets the overlay effect on the media across your store.
Options: No overlay / Normal / Semi dark / Dark / Full Dark

**Media overlay for mobile:** Sets the overlay effect on the media across your store.
Options: No overlay / Normal / Semi dark / Dark / Full Dark

###### The default card options example from our demo stores:

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


Cards

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

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

<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

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



Search

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Theme_Grasse_Device_Mobile_3a728b5009.png" alt="Theme=Grasse, Device=Desktop.png" style="width: 100%;">
</div>


###### About:

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

---

###### Settings

**Text blocks behavior**

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

**Autoplay interval:** Set the interval in seconds for the text blocks to switch when using the Slideshow behavior.

**Font weight:** Normal / Medium / Bold

###### Blocks

To add blocks, please refer to the left hand side of the customizer, under Announcement bar > Add block

###### Localization:

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

###### Link:

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

**Link label:** Specify the label for the link

**Link:** Specify the link

**Icon:** Use an icon from the documentation, or add a custom icon

###### Text slide:

**Body text:** Add the text content for the announcement bar.

**Icon:** Leave blank to hide the icon / Add an icon from the documentation page of icons, or use your own custom icon.


###### Countdown timer:

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

Announcement bar

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


Footer

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


Navigation and megamenu

<div style="text-align: center;">
    <img src="https://cmsad.digifist.com/uploads/Comparison_Slider_ff92c98762.png" alt="Comparison Slider" style="width: 68%;">
</div>


###### About:

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

###### General Settings:

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

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

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

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

**Button Style** Filled / Outlined / Text

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

###### Before/After

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

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


###### Before & After blocks settings:

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



Compare slider

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

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

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

Colors

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

###### About

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

###### Where to find it:

The newsletter popup can be found in the theme's customizer (on the left hand side of the screen), in the Overlay category. By default, it should be right underneath the footer.

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

###### Settings

Disable pop-up: On / Off

Enable in customizer: On / Off

###### Color scheme:

Text: Default / Secondary / Inverse

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

Show newsletter after: Select between 4 and 30 seconds after the page is loaded to show the newsletter.

###### Media:

Image: Select an image for your newsletter

###### Text:

Heading: Add a heading to catch customers' attention

Body text: Make a promotiona offer to make them interested in leaving their email.

Button close text: Add a text for the close button

_Important note: If you choose to tell your customers hat they will receive a discount when signing up to the newsletter, please keep in mind that this section's only role is to collect emails for your marketing efforts. **It does not include the ability to send out discount codes to your customers**._

Newsletter popup

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

---

**Common settings** refer to the configuration options that are universally applicable across multiple sections of your theme. These settings are designed to streamline the customization process, ensuring consistency and ease of use when adjusting the appearance and functionality of different sections.

We aim to enhance the user experience by reducing clutter and avoiding repetitive information in the main documentation, by moving all of the common settings on a separate page. This approach allows you to find and adjust common settings quickly, without having to sift through multiple sections. It also ensures that you have a centralized location for all settings that apply broadly, making it easier to maintain consistency across your entire site.


Section width

- Normal: Standard width
- Fluid: Expands to the width of the screen.
- Full: Takes up the entire width of the viewport.

Color scheme


Common settings

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

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

###### About

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

###### Settings:

**Layout Options:** Layout 1 / Layout 2

**Enable Slideshow Overflow:** Allows the slideshow to extend beyond its container.
###### Heading

**Heading Text:** Customizable text for the heading of the recently viewed products section.

**Text Formatting:** Options to bold, italicize, or add a link to the heading text.

**Heading Size:** Choose from XS, S, M, L, XL for the heading size.

###### Subheading:

**Subheading Text:** Customizable text for the subheading of the recently viewed products section.
**Text Formatting:** Options to bold, italicize, or add a link to the subheading text.

###### Button:

**Button Label:** Text to display on the button (e.g., "View all").

**Button Link:** URL or search term to link the button to.

**Button Style:**

**Filled:** Solid background button.
**Outlined:** Button with an outline.
**Text:** Button with text, no background or outline.

###### Slideshow:

**Show Navigation Arrows:** Enable or disable navigation arrows for the slideshow.

**Autoplay Interval:** Set the interval (in seconds) for autoplay. Set to 0 to disable autoplay.

###### Tabs:

**Button Style:**

**Filled:** Solid background button.

**Outlined:** Button with an outline.

**Text:** Button with text only, no background or outline.

**Number of Products:** Set the maximum number of products to display (slider).

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


Highlighted collections

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

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

---

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

**Image optimization:** Best detailed / Optimized

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

###### Fine-tuning settings:

These settings allow precise control over the section's appearance.

As we can't pre-control the height of the page by default, we're introducing this feature where you can set the height yourself so that at the initial page load you won't see a shift.

**Default main offset:** introduce the value yourself e.g. "41" px.



Performance

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

###### Where to find it:

The age verification popup can be found in the theme's customizer (on the left hand side of the screen), in the Overlay category. By default, it should be right underneath the footer.

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

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

###### General:

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


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


###### Cart Page:

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

**Show Terms on:** None / Cart / Drawer / Both


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

---

###### Upsell Products:

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


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


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


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

Cart

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

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

You can leave a positive review by going to the theme’s landing page > click on reviews, and then on “Write a review”. Please note that you will also have to be logged in your Shopify account for this.

How can I leave a positive review?

**No** – By default, the theme doesn’t include an option where you can install your own font and use it within the theme. Our theme does include a multitude of font-related features, but as for the actual fonts, they are from the Shopify’s Fonts Library. That said, we recommend you try and find an alternative font from the same font family that does exist within the theme, rather than trying to add your own font. 

Can I add my own font?

**Yes **– Changing the theme’s code can interfere with the update. In the cases where the update cannot be performed due to the code changes, you will no longer see the option to update the theme. In the case where the previous code change doesn’t interfere with the update, your theme will be updated, but it will not include the custom-coding you’ve performed. 

Will I lose the custom-coding that my developers made to the theme if I want to update?

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

Do you support custom code by 3rd party developers?

**Yes** – the theme is only in its initial stages, and we’ll be constantly working on bringing amazing features, bug fixes, and general improvements to the theme.

Will the theme be updated in the future?

The theme is translation ready via the “Translate and Adapt” app

Can Release have multiple languages?

We don’t have an exact schedule – We will release updates as soon as we have improvements available

How often do you update the theme?

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

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

Does Sahara have infinite scroll?

**No **– Due to the number of requests our support can only be contacted via the ticketing system.

Can I get support for Release via the phone?

**No **- Release has gone through a lengthy testing process made by Shopify developers before it received the approval to be launched. This includes compatibility with the majority of apps available within Shopify.

Does Release have any restrictions on the use of apps?

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

When is your support available?

This is not covered by our free support, no. Our development team is constantly working on improving the theme so that all of our members can benefit from our hard work, therefore, we cannot accept such requests via our Support. However, you can reach out to our Sales department if you’re interested in a paid solution. 

Can I place custom-coding requests with your theme support?

**Yes** – with the pre-condition that you activate the currencies within your Shopify backend.

Does Release Support multiple currencies?

In te case where an app isn’t working as advertised, you will have to reach out to the app’s developer so they can take a look and fix it for you (you are the customer in this case, and the code that’s not working belongs to them). Our recommendation is that you always create a duplicate of the theme before installing a new app as to avoid irreversible changes made by the apps code and lose the hard work you’ve put into customizing the theme.

If an app breaks something within the theme, should I contact you or the app developer?

**No** - The theme’s price is fixed, and discounts cannot be offered as we’re exclusively selling the theme via the Shopify Themes Store.

Can you offer me a discount on the theme’s price?

**No **– The update process is easy to follow, as all you have to do is to press a couple of buttons and a copy of the latest version that includes your previous theme’s customizations will be added to your store’s Themes Library. You can then preview the updated theme and publish it if everything’s in order with it.

Documentatie

Additional configurations

Header and footer

Overlay

Templates

Sections

Blijf verbonden