---
description: These settings are the Shark theme’s general settings for the Shopify store.
---

# Theme settings

## **Preloader**

<table><thead><tr><th width="203"></th><th></th></tr></thead><tbody><tr><td>Enable preloader</td><td>Select the checkbox to enable the preloader.</td></tr><tr><td>Logo</td><td>Choose any image for the preloader logo image.</td></tr><tr><td>Enable preloader on</td><td>Choose from 'Home page only' or 'all pages' to determine the page-specific visibility of the preloader.</td></tr><tr><td>Preloader will appear</td><td>Choose from the following options, the frequency of preloader appearance:<br>- Only for the first time website loads.<br>- All time website loads.</td></tr><tr><td>Color scheme</td><td>Choose any color scheme.</td></tr></tbody></table>

## **Colors**

**Default color scheme:** Choose any color scheme for the body background. It works with the rounded corners setting of each section.\
\
**Schemes:**

<table data-header-hidden><thead><tr><th width="203"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Choose the background color.</td></tr><tr><td>Alternate background</td><td>Choose the alternate background color.</td></tr><tr><td>Heading</td><td>Choose color for the heading text.</td></tr><tr><td>Text</td><td>Choose color for the text.</td></tr><tr><td>Button background</td><td>Choose the button background color.</td></tr><tr><td>Button border</td><td>Choose the button border color.</td></tr><tr><td>Button text</td><td>Choose the button text color.</td></tr><tr><td>Button hover background</td><td>Choose the button background color on hover.</td></tr><tr><td>Button hover border</td><td>Choose the button border color on hover.</td></tr><tr><td>Button hover text</td><td>Choose the button text color on hover.</td></tr><tr><td>Link</td><td>Choose the text color of links.</td></tr><tr><td>Image background</td><td>Choose the background color of images.</td></tr><tr><td>Input background</td><td>Choose the background color of inputs.</td></tr><tr><td>Input border</td><td>Choose the border color of inputs.</td></tr><tr><td>Input text</td><td>Choose the text color of inputs.</td></tr><tr><td>Divider</td><td>Choose the divider color.</td></tr><tr><td>Slider> Arrow icon</td><td>Choose the icon's color of slideshow/carousel.</td></tr><tr><td>Slider> Arrow icon background</td><td>Choose the icon's background color of slideshow/carousel.</td></tr><tr><td>Product card</td><td><strong>Product border</strong><br>Choose the border color of products.<br><br><strong>Product background</strong><br>Choose the background color of products.<br><br><strong>Product title</strong><br>Choose the title color of products.</td></tr></tbody></table>

#### Global colors:

<table><thead><tr><th width="204"></th><th></th></tr></thead><tbody><tr><td>Sale badge text</td><td>Choose the sale badge text color.</td></tr><tr><td>Sale badge background</td><td>Choose the sale badge background color.</td></tr><tr><td>Custom badge text</td><td>Choose the custom badge text color.</td></tr><tr><td>Custom badge background</td><td>Choose the custom badge background color.</td></tr><tr><td>Sold-out badge text</td><td>Choose the sold-out badge text color.</td></tr><tr><td>Sold-out badge background</td><td>Choose the sold-out badge background color.</td></tr><tr><td>Product discount text</td><td>Choose the product discount's text color.</td></tr><tr><td>Product discount background</td><td>Choose the product discount's background color.<br>(Note: This background color shows in featured product section discount text, but on grids, this background color works as a text color.)</td></tr><tr><td>Star rating color</td><td>Choose the product review star rating's color.</td></tr></tbody></table>

## **Header & footer color**

<table data-header-hidden><thead><tr><th width="207"></th><th></th></tr></thead><tbody><tr><td>Header</td><td><strong>Background</strong><br>Choose the background color.<br><br><strong>Text</strong><br>Choose color for the text.<br><br><strong>Hover</strong><br>Choose the text color on hover.</td></tr><tr><td>Submenu/mobile menu</td><td><strong>Background</strong><br>Choose the background color.<br><br><strong>Text</strong><br>Choose color for the text.<br><br><strong>Hover</strong><br>Choose the text color on hover.<br><br><strong>Border</strong><br>Choose the border color of submenus for the mobile view.</td></tr><tr><td>Footer</td><td><strong>Background</strong><br>Choose the background color.<br><br><strong>Heading</strong><br>Choose color for the heading text.<br><br><strong>Text</strong><br>Choose color for the text.<br><br><strong>Link</strong><br>Choose color for the links.<br><br><strong>Link hover</strong><br>Choose the links color on hover.</td></tr><tr><td>Newsletter</td><td><strong>Text</strong><br>Choose color for the text.<br><br><strong>Input background</strong><br>Choose the input background color.</td></tr><tr><td>Secondary footer</td><td><strong>Background</strong><br>Choose the background color.<br><br><strong>Text</strong><br>Choose color for the text.<br><br><strong>Link</strong><br>Choose color for the links.</td></tr></tbody></table>

## Advanced settings:

<table><thead><tr><th width="205"></th><th></th></tr></thead><tbody><tr><td>Page overlay background</td><td>Select any color for the page overlay background color.</td></tr><tr><td>Opacity</td><td>Adjust the range bar to determine the overlay opacity.</td></tr><tr><td>Enable blur effect</td><td>Select this checkbox to enable the blur effect in the overlay.</td></tr></tbody></table>



## **Typography**

<table data-header-hidden><thead><tr><th width="203"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td><strong>Font</strong><br>Choose the font of the heading text.<br><br><strong>Font scale</strong><br>Adjust the range bar to set the font size scale.<br><br><strong>Line height</strong><br>Adjust the line height for headings used in all sections.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the multiple options like -75 to 250.</td></tr><tr><td>Body</td><td><strong>Font</strong><br>Choose the font of the body text.<br><br><strong>Font scale</strong><br>Adjust the range bar to set the font size scale.<br><br><strong>Line height</strong><br>Adjust the line height for headings used in all sections.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the multiple options like -75 to 250.</td></tr></tbody></table>

## Animation

<table data-header-hidden><thead><tr><th width="212"></th><th></th></tr></thead><tbody><tr><td>Enable animation</td><td>Select this checkbox to show animations in the sections and the text.</td></tr></tbody></table>

## Layout



<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td>Page width</td><td>Choose from small, medium or large to determine the page width.</td></tr><tr><td>Styling</td><td><p><strong>Desktop</strong><br><strong>Button radius</strong></p><p>Adjust the range bar to determine the button radius on the desktop view.</p><p><br><strong>Input radius</strong></p><p>Adjust the range bar to determine the input field's radius on the desktop view.</p><p><br><strong>Product cards</strong></p><p>Adjust the range bar to determine the product card's radius on the desktop view.</p><p><br><strong>Blocks</strong></p><p>Adjust the range bar to determine the block's radius on the desktop view.</p><p><br><strong>Mobile</strong></p><p><strong>Button radius</strong></p><p>Adjust the range bar to determine the button radius on the mobile view.</p><p><br><strong>Input radius</strong></p><p>Adjust the range bar to determine the input field's radius on the mobile view.</p><p><br><strong>Product cards</strong></p><p>Adjust the range bar to determine the product card's radius on the mobile view.</p><p><br><strong>Blocks</strong><br>Adjust the range bar to determine the block radius on the mobile view.<br><br><strong>Others(icon,badges,arrows)</strong></p><p><strong>Layout</strong><br>Choose from rounded or sharp to determine the layout of icons, arrows or badges.</p></td></tr></tbody></table>

## **Button**

<table data-header-hidden><thead><tr><th width="220"></th><th></th></tr></thead><tbody><tr><td>Font family</td><td>Choose the font family from the heading or body fonts.</td></tr><tr><td>Text transform</td><td>Choose the text transform options from uppercase or capitalize.</td></tr><tr><td>Hover effect</td><td>Choose the button hover effect from modern, standard or none.</td></tr><tr><td>Border thickness</td><td>Adjust the range bar to determine the button border's thickness.</td></tr></tbody></table>

## **Product**

<table data-header-hidden><thead><tr><th width="222"></th><th></th></tr></thead><tbody><tr><td>Enable preorder</td><td>Tick the checkbox to enable the preorder.<br>Preorder will work when, 'continue selling when out of stock' option is enabled. <br><br><img src="https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FCugFm7cvWbcv4yRRyVtu%2Fimage.png?alt=media&#x26;token=3b48dae0-324a-4a48-a328-5f752dcce251" alt=""></td></tr><tr><td>Show saved amount</td><td>Tick the checkbox to show the saved amount i.e. difference between the <strong>Sale</strong> price and <strong>Compare</strong> price.</td></tr><tr><td>Option style</td><td>Choose from <strong>Dropdown</strong> or <strong>Swatch</strong> to show the product options style.</td></tr></tbody></table>

## **Product card**

<table data-header-hidden><thead><tr><th width="231"></th><th></th></tr></thead><tbody><tr><td>Font type</td><td>Choose the font family from the heading or body fonts.</td></tr><tr><td>Content alignment</td><td>Choose from left, center or right to determine the content alignment.</td></tr><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Image fit</td><td>Choose from cover or contain to determine the image fit.</td></tr><tr><td>Style</td><td>Choose the card style from standard or card options.</td></tr><tr><td>Enable border</td><td>Tick this checkbox to show border around products.</td></tr><tr><td>Border thickness</td><td>Adjust the range bar to determine the button border's thickness.</td></tr><tr><td>Show second image on hover</td><td>Tick this checkbox to show the second image on product hover.</td></tr><tr><td>Show product vendor</td><td>Tick this checkbox to show the product vendor name in the grid.</td></tr><tr><td>Show product rating</td><td>Tick this checkbox to show the product ratings in the grid.<br><em>Note: To show a rating, add a product rating app.</em></td></tr><tr><td>Show product savings</td><td>Tick this checkbox to show the product savings amount in the grid(which is calculated from the product compare and sale price.)</td></tr><tr><td>Show video on grid</td><td>Tick this checkbox to show the autoplay videos in the grid. It is applicable for the product's Shopify-hosted videos only.</td></tr><tr><td>Show product inventory</td><td>Tick this checkbox to show the product inventory in the grid.<br><em>Note: To set it up, go to the 'Theme Settings > Product Inventory'.</em></td></tr><tr><td>Low inventory threshold</td><td>Adjust the range bar to determine the threshold limit in case of low inventory.<br><em>(Note; Show inventory quantity in yellow when quantity is below the threshold. Choose 0 to always show in stock if available.)</em></td></tr><tr><td>Show shipping details</td><td>Tick this checkbox to show the shipping details in the product grid.</td></tr><tr><td>Default shipping days</td><td>Enter the day's number in digits.<br><em>Note: For dynamic days for each product create a metafield name "shipping_days".</em></td></tr><tr><td>Shipping text</td><td>Enter the shipping related text to display in the product grid.</td></tr><tr><td>Enable swatches</td><td>Tick this checkbox to show the product swatches in the product grid.</td></tr><tr><td>Show on hover color swatch and inventory position (Desktop)</td><td>Tick this checkbox to show the product swatches and inventory on product grid's hover only.</td></tr></tbody></table>

## Steps to set up the default shipping days using a meta-field

1.  Go to the store settings > Custom data > Products > Add definition & add a meta-field named '**shipping\_days**' with type **Integer** and **One value**, as shown below:\
    \


    <figure><img src="https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FTsqEiREKvBaJGoWiDE2G%2Fimage.png?alt=media&#x26;token=5909101a-5fb4-432c-915c-0252f15d388e" alt=""><figcaption></figcaption></figure>
2.  Now, go to the Shopify dashboard > product settings and add any desired integer value in this meta-field, as shown below:\
    &#xNAN;_(You can set it for multiple products, one by one.)_\
    \


    <figure><img src="https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FvcTn7XUu0YaXlhseKVk1%2Fimage.png?alt=media&#x26;token=031aa57b-ef44-4c83-b4c5-b9a6baf2bd59" alt=""><figcaption></figcaption></figure>
3.  Go to the theme settings > product card. \
    \
    Select the checkbox of **'Show shipping details'** and add an integer in '**Default shipping days.'** This value will work with all products of the store except the ones having the meta-field set up as shown in steps 1 and 2.\
    \


    <figure><img src="https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FNmDhDAeiVQsRGfMzr00q%2Fimage.png?alt=media&#x26;token=81d461bf-3165-4d46-9526-9f46034799b4" alt=""><figcaption></figcaption></figure>
4. On the storefront, it works like this: \
   \
   \- Products with the added metafield will show the shipping date after 7 days. \
   \- For products without the metafield, the shipping date will be displayed after 30 days.\
   \
   **Product with added metafield**( Today is 2024-04-11)\
   \
   &#x20;![](https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FmCUDoqhtSVyjj5BKy1H3%2Fimage.png?alt=media\&token=a6c111d6-92d0-4fba-981c-ec7d25192372):\
   \
   **Product with no meta field:**( Today is 2024-04-11)\
   \
   ![](https://570180373-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYWSUNUY27kSWmpCP5tbi%2Fuploads%2FzjTrWy8krL12GH3tsIZD%2Fimage.png?alt=media\&token=c4c6ed80-de93-4a4c-b1b4-c6be0dc9b669)\


## **Product badges**

<table data-header-hidden><thead><tr><th width="239"></th><th></th></tr></thead><tbody><tr><td>Sale badge</td><td><strong>Show 'Sale' badge</strong><br>Tick this checkbox to show the 'Sale' badge on product grids.</td></tr><tr><td>Sold out badge</td><td><strong>Show 'Sold out' badge</strong><br>Tick this checkbox to show the 'Sold out' badge.</td></tr><tr><td>New label</td><td><strong>New badge text</strong><br>Type the new badge text for the product grids.<br><br><strong>Show 'New' badge for products in the following collections</strong><br>Tick this checkbox to show the new badge based on the collections selected below.<br><br><strong>'New' collections</strong><br>Select the collections on whose products, the new badge will be displayed.<br>(Note: This has a higher priority than the days range bar-based badges.)<br><br><strong>Show 'New' badge for products with the following tag</strong><br>Tick this checkbox to show the new badge based on the product tags added below.<br><br><strong>'New' tag</strong><br>Add the product tags added in the products to show new badge.<br><br><strong>Show 'New' label for products created within this many days</strong><br>Tick this checkbox to show the new badge based on the product's creation date, as specified below.<br><br><strong>Days ago created</strong><br>Use the range bar to set the number of days.<br>(Note: If set to 5, products created within the last 5 days will be labelled as 'New'.)</td></tr><tr><td>Preorder badge</td><td><strong>Show 'Preorder' badge</strong><br>Tick this checkbox to show the preorder badge on the grids for products having preorder enabled from the theme settings.</td></tr><tr><td>Custom badge</td><td><strong>Show custom badge</strong><br>Tick this checkbox to show the custom badge based on the product tags added below.<br><br><strong>Product tag</strong><br>Add the product tags added in the products to show custom badge.<br><br><strong>Badge text</strong><br>Add the custom badge text.</td></tr></tbody></table>

## **Swatches**

<table data-header-hidden><thead><tr><th width="246"></th><th></th></tr></thead><tbody><tr><td>Show variant image as color</td><td>Check this checkbox to show variant image instead of the color swatches.</td></tr><tr><td>Color swatches style</td><td>Choose from <strong>Circle</strong> or <strong>Square</strong> to display the required swatch style.</td></tr><tr><td>Color options name</td><td>Add the product option name that holds the colors. E.g.: Color, Colour, Material, etc.</td></tr><tr><td>Custom color codes/images</td><td>Enter the custom color codes of the swatches using the hex colors.<br><br><strong>To add a color code with the option name:</strong><br><em>For example:</em> <br>Chilli: #ff0000<br><em>Here the 'Chilli' is the variant name.</em><br><br>For hex color codes, refer to <a href="https://htmlcolorcodes.com/">codes.</a><br><br><strong>To add the swatch image:</strong><br>Upload image in Content>Files.<br>Add the image name with extension.<br>This will link the option name with the image.<br></td></tr><tr><td>Size options name</td><td>Add the product option name that that holds the size. E.g.: Size, Taille, etc.</td></tr></tbody></table>

## Quick view

<table><thead><tr><th width="251"></th><th></th></tr></thead><tbody><tr><td>Enable quick view</td><td>Select the checkbox to enable the quick view on the product grid.</td></tr><tr><td>Show quick view on mobile</td><td>Tick this checkbox to show the quick view in the grid on the mobile view.<br><em>(Note: To show quick view on mobile, it must be enabled from the above setting.)</em></td></tr><tr><td>Quick view style</td><td>Choose from a grid, popup or drawer to determine the quick view style.</td></tr><tr><td>Title size</td><td>Choose the heading size in between H1 to H6.</td></tr><tr><td>Desktop grid image ratio</td><td>Choose the product image ratio from the following options for the desktop view:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Mobile grid image ratio</td><td>Choose the product image ratio from the following options for the mobile view:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr></tbody></table>

## Blog posts

<table><thead><tr><th width="268"></th><th></th></tr></thead><tbody><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Show content as overlay</td><td>Select this checkbox to show blog post content as overlay text.</td></tr><tr><td>Content overlay colors</td><td><strong>Background</strong><br>Choose any background overlay color.<br><br><strong>Heading</strong><br>Choose the heading color.<br><br><strong>Text</strong><br>Choose the text color.<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr></tbody></table>

## **Cart**&#x20;

<table data-header-hidden><thead><tr><th width="251"></th><th></th></tr></thead><tbody><tr><td>Enable cart drawer</td><td>Tick this checkbox to enable the cart drawer.</td></tr><tr><td>Enable cart notes</td><td>Tick this checkbox to show the cart notes in the cart drawer.</td></tr><tr><td>Gift wrap</td><td><strong>Enable gift wrap</strong><br>Tick this checkbox to enable the gift wrap feature in the cart.<br><br><strong>Product</strong><br>Choose any product to add as a gift wrap in the cart.<br><br><strong>Text</strong><br>Type any text to show with the gift wrap checkbox.</td></tr><tr><td>Shipping bar</td><td><p><strong>Enable shipping bar</strong><br>Tick this checkbox to enable/disable the shipping bar on the cart drawer.</p><p><em>(Note: This feature only works with a shipping method. If you're using multiple shipping methods, it might show false values to the customer.)</em><br><br><strong>Minimum shipping price</strong><br>Type any price for providing free shipping to the customers. After reaching this price, the user will be shown a success message.</p><p><em>(Note: Users must write a number, no letters or special characters.)</em><br><br><strong>Message</strong><br>Type any relevant message to notify users about the amount saved in this field.</p><p><em>(Note: Use ||amount|| to display the amount within the message.)</em><br><br><strong>Success message</strong><br>Enter text to show the success message after the user has reached the minimum shipping price.</p></td></tr><tr><td>Cart recommendation</td><td><strong>Enable recommendation</strong><br>Tick this checkbox to enable the cart recommendations.<br><br><strong>Heading</strong><br>Type any text to show as a title of the cart recommendations.<br><br><strong>Products</strong><br>Choose the products list.</td></tr><tr><td>Empty cart</td><td><strong>Show continue shopping</strong><br>Tick this checkbox to show the '<strong>Continue shopping</strong>' button.<br><br><strong>Continue shopping custom link</strong><br>Add the link to redirect the '<strong>Continue shopping</strong>' button.<br><br><strong>Heading</strong><br>Type any text to show as a title in the empty cart.<br><br><strong>Menu</strong><br>Choose any menu to display in the empty cart.<br><em>(Note: This menu won't show dropdown items.)</em></td></tr><tr><td>Cart notification bar</td><td><strong>Text</strong><br>Enter the text to display as the notification bar on the cart drawer and cart page.</td></tr></tbody></table>

## **Search drawer**

<table data-header-hidden><thead><tr><th width="256"></th><th></th></tr></thead><tbody><tr><td>Enable search drawer</td><td>Tick this checkbox to enable the search drawer on click of search icons.</td></tr><tr><td>Enable recent search</td><td>Tick this checkbox to enable the recent searches view in the search drawer.</td></tr><tr><td>Enable related queries</td><td>Tick this checkbox to enable the related queries view in the search drawer.</td></tr><tr><td>Enable collections</td><td>Tick this checkbox to enable the collections search in the search drawer.</td></tr><tr><td>Enable articles</td><td>Tick this checkbox to enable the articles search in the search drawer.</td></tr><tr><td>Enable pages</td><td>Tick this checkbox to enable the page search in the search drawer.</td></tr><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options:<br>-Auto<br>-Landscape<br>-Portrait<br>-Square</td></tr><tr><td>Suggestions</td><td><strong>Enable suggestions</strong><br>Tick this checkbox to enable the suggestions view in the search drawer.<br><br><strong>Heading</strong><br>Type heading text of the suggestions in the search drawer.<br><br><strong>Product</strong><br>Choose products to show as suggestions in the search drawer.</td></tr></tbody></table>

## Drawer/popup

<table data-header-hidden><thead><tr><th width="256"></th><th></th></tr></thead><tbody><tr><td>Drawer</td><td><p><strong>Color scheme</strong><br>Select the color scheme.</p><p><em>Note: These can be managed from Theme settings> Color schemes.</em></p></td></tr><tr><td>Popup</td><td><p><strong>Color scheme</strong><br>Select the color scheme.</p><p><em>Note: These can be managed from Theme settings> Color schemes.</em></p></td></tr></tbody></table>

## **Social media**

<table data-header-hidden><thead><tr><th width="267"></th><th></th></tr></thead><tbody><tr><td>X(Twitter)</td><td>Add link to your <strong>Twitter</strong> handle</td></tr><tr><td>Facebook</td><td>Add link to your <strong>Facebook</strong> handle.</td></tr><tr><td>Pinterest</td><td>Add link to your <strong>Pinterest</strong> handle.</td></tr><tr><td>Instagram</td><td>Add link to your <strong>Instagram</strong> handle. </td></tr><tr><td>TikTok</td><td>Add link to your <strong>TikTok</strong> handle.</td></tr><tr><td>Tumblr</td><td>Add link to your <strong>Tumblr</strong> handle.</td></tr><tr><td>Snapchat</td><td>Add link to your <strong>Snapchat</strong> handle</td></tr><tr><td>YouTube</td><td>Add link to your <strong>YouTube</strong> handle.</td></tr><tr><td>Vimeo</td><td>Add link to your <strong>Vimeo</strong> handle.</td></tr></tbody></table>

## Social sharing

<table><thead><tr><th width="274"></th><th></th></tr></thead><tbody><tr><td>Facebook</td><td>Select this checkbox to share products on the Facebook page.</td></tr><tr><td>X(Twitter)</td><td>Select this checkbox to share products on the X(Twitter) page.</td></tr><tr><td>Pinterest</td><td>Select this checkbox to share products on the Pinterest page.</td></tr></tbody></table>

## **Newsletter popup**

<table data-header-hidden><thead><tr><th width="271"></th><th></th></tr></thead><tbody><tr><td>Enable newsletter popup</td><td>Choose the checkbox to display a newsletter pop-up on the storefront.</td></tr><tr><td>Image</td><td>Choose an image for your newsletter section.</td></tr><tr><td>Heading</td><td>Type text to display as a title on the “Newsletter pop-up” section.</td></tr><tr><td>Description</td><td>Type text to display as a brief about the newsletter section.</td></tr><tr><td>Set cookie for newsletter popup (days)</td><td>Set the time (days) for which you want the cookies to expire. For example, if you set the time as two days, and the user closes the newsletter popup or submits their email for subscription, after two days, the popup will reappear on the storefront for that user.</td></tr><tr><td>Style</td><td>Choose from default or rounded style.</td></tr></tbody></table>

## **Age verification popup**

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Enable age verification popup</td><td>Select the checkbox to display the age verifier pop-up on the storefront.</td></tr><tr><td>Heading</td><td>Enter any text to show as the title.</td></tr><tr><td>Description</td><td>Enter text to display as a description on the popup.</td></tr><tr><td>Approve button text</td><td>Enter text to display as approve button text on the age verifier.</td></tr><tr><td>Decline button text</td><td>Enter text to display as decline button text on the age verifier.</td></tr><tr><td>Under 18 title</td><td>Enter text to display on the under 18 popup as a title.</td></tr><tr><td>Under 18 description</td><td>Enter text to display on the under 18 popup as a description.</td></tr><tr><td>Decline button text</td><td>Enter text to display as decline button text on the under 18 popup.</td></tr></tbody></table>

## **Privacy policy popup**

<table data-header-hidden><thead><tr><th width="287"></th><th></th></tr></thead><tbody><tr><td>Enable privacy policy</td><td>Tick this checkbox to enable the privacy banner, which appears at the bottom of the displays.</td></tr><tr><td>Heading</td><td>Enter text to display as a title.</td></tr><tr><td>Description</td><td>Enter text to display as a description on the popup.</td></tr><tr><td>Accept button text</td><td>Enter text to show as approve button text on the privacy banner.</td></tr><tr><td>Decline link text</td><td>Enter text to display as decline button text on the privacy banner.</td></tr></tbody></table>

## **Scroll to top**

<table data-header-hidden><thead><tr><th width="288"></th><th></th></tr></thead><tbody><tr><td>Enable scroll to top</td><td>Select this checkbox to enable the scroll to top icon.</td></tr><tr><td>Position</td><td><p>Users can adjust the position from the given options :</p><p>-Left </p><p>-Center </p><p>-Right</p></td></tr><tr><td>Position bottom</td><td>Adjust the range bar to determine the icon's space gap from the bottom.</td></tr><tr><td>Colors</td><td><strong>Background</strong><br>Choose any background color.<br><br><strong>Icon</strong><br>Choose any icon's color.</td></tr></tbody></table>

## Google map



<table data-header-hidden><thead><tr><th width="291"></th><th></th></tr></thead><tbody><tr><td>Google maps API key</td><td>Enter the Google maps <strong>API</strong> key.</td></tr></tbody></table>

Google maps **API** key: This setting is for adding the Google maps **API** key for the Maps section to function correctly.

**Google Maps API key steps**

**Using API keys:**

Google Maps platform products are protected from unauthorized use by limiting **API calls** to people with the proper authentication credentials. These are an **API key -** a unique alphanumeric string that associates **a Google billing account** with the project and the specific **API/SDK.**

This guide displays how to create, restrict, and use your **API Key** for the **“Google Maps platform.”**

**Before you start:**

Before you begin using the **“Maps JavaScript API,”** you need a project with a billing account and the **“Maps JavaScript API”** enabled. To understand more, see [Set up in Cloud Console.](https://developers.google.com/maps/documentation/javascript/cloud-setup)[ ](https://developers.google.com/maps/documentation/javascript/cloud-setup)

1. Create a new: **“Google cloud project”** in the **Cloud console:**[ Create a new project](https://console.cloud.google.com/projectcreate?pli=1)
2. On the **New project** display, fill in the required details:
   * **Project name:** Accept the default name or enter a customized name. You can change the project name at any time. For more information, see [Identifying projects.](https://cloud.google.com/resource-manager/docs/creating-managing-projects)
   * **Project ID:** Accept the default or click on **“EDIT”** to add a **“Customized ID”** that **“Google APIs”** use as a unique identifier for the project. After users create the project, they cannot change the **“Project ID,”** so select an **ID** you'll be comfortable using for the project's lifetime. Do not include any sensitive information in **“Project ID.”**
   * **Billing account:** Choose a billing account for the project. You won't see this option if you haven't set up a billing account or only have one.
   * Users must be a **“Billing account administrator”** or **“Project billing manager”** to associate a project with the billing account. For more details, refer to [the billing access control documentation.](https://cloud.google.com/billing/docs/how-to/billing-access)
   * **Location:** If users have an organization to link the project to, click **Browse** and select it; otherwise, choose **"No organization."** For more details, check here [Creating and Managing Folders ](https://cloud.google.com/resource-manager/docs/creating-managing-folders)and [Relationships between organizations, projects, and billing accounts.](https://cloud.google.com/billing/docs/how-to/billing-access)
3.  Click on the **Create button.**\


    **Creating API keys:**&#x20;

    The **API key** is a **UID** (unique identifier), which authenticates all requests associated with the project for usage and the billing purposes. Users must have at least one **API key** associated with the project.

    To create an **API key:**

    * Open **“Google Maps platform > Credentials page.** For more details, refer to [Go to the Credentials](https://console.cloud.google.com/projectselector2/google/maps-apis/credentials?_ga=2.232575647.1812279178.1657180950-105875005.1657180950) page.
    * On the **Credentials** page, click on **Create credentials > API key.** The **API key-created** dialog displays your newly created **API key.**
    * Click on the **Close button.**

## **Favicon**

<table data-header-hidden><thead><tr><th width="235"></th><th></th></tr></thead><tbody><tr><td>Icon</td><td>Choose ay image for the favicon.</td></tr></tbody></table>

## Checkout

With these settings, you can change look and feel of the checkout page.

<table data-header-hidden><thead><tr><th width="238"></th><th></th></tr></thead><tbody><tr><td>Banner</td><td><p><strong>Background image</strong> </p><p>Upload a background image for the checkout banner section.  </p></td></tr><tr><td>Logo</td><td>Add your brand’s logo to the banner section.</td></tr><tr><td>Position</td><td>Select any required position from <strong>Left, Center &#x26; Right</strong></td></tr><tr><td>Logo size</td><td><p>- Select the logo size from the given options; </p><p>-Small </p><p>-Medium </p><p>-Large </p></td></tr><tr><td>Main content area</td><td><p><strong>Background image</strong> </p><p>Upload a background image for the main content area. </p><p><br><strong>Background color</strong> </p><p>Select any color for background. <br> <br><strong>Form fields</strong> </p><p>Select form field for the given options; </p><p>-White </p><p>-Transparent </p></td></tr></tbody></table>

#### Order summary

<table data-header-hidden><thead><tr><th width="240"></th><th></th></tr></thead><tbody><tr><td>Background image</td><td>Add background image for the order summary.</td></tr><tr><td>Background color</td><td>Select any background color.</td></tr></tbody></table>

#### Typography

<table data-header-hidden><thead><tr><th width="249"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td>Select the suitable font for headings.</td></tr><tr><td>Body</td><td>Select the suitable font for body.</td></tr></tbody></table>

#### Colors

<table data-header-hidden><thead><tr><th width="255"></th><th></th></tr></thead><tbody><tr><td>Accents</td><td>Select the suitable colors for accents on the checkout page</td></tr><tr><td>Buttons</td><td>Select the suitable colors for buttons.</td></tr><tr><td>Errors</td><td>Select the suitable colors for errors.</td></tr></tbody></table>

