✨Theme settings
These settings are the Shark theme’s general settings for the Shopify store.
Preloader
Enable preloader | Select the checkbox to enable the preloader. |
Logo | Choose any image for the preloader logo image. |
Enable preloader on | Choose from 'Home page only' or 'all pages' to determine the page-specific visibility of the preloader. |
Preloader will appear | Choose from the following options, the frequency of preloader appearance: - Only for the first time website loads. - All time website loads. |
Color scheme | Choose any color scheme. |
Colors
Default color scheme: Choose any color scheme for the body background. It works with the rounded corners setting of each section. Schemes:
Background | Choose the background color. |
Alternate background | Choose the alternate background color. |
Heading | Choose color for the heading text. |
Text | Choose color for the text. |
Button background | Choose the button background color. |
Button border | Choose the button border color. |
Button text | Choose the button text color. |
Button hover background | Choose the button background color on hover. |
Button hover border | Choose the button border color on hover. |
Button hover text | Choose the button text color on hover. |
Link | Choose the text color of links. |
Image background | Choose the background color of images. |
Input background | Choose the background color of inputs. |
Input border | Choose the border color of inputs. |
Input text | Choose the text color of inputs. |
Divider | Choose the divider color. |
Slider> Arrow icon | Choose the icon's color of slideshow/carousel. |
Slider> Arrow icon background | Choose the icon's background color of slideshow/carousel. |
Product card | Product border Choose the border color of products. Product background Choose the background color of products. Product title Choose the title color of products. |
Global colors:
Sale badge text | Choose the sale badge text color. |
Sale badge background | Choose the sale badge background color. |
Custom badge text | Choose the custom badge text color. |
Custom badge background | Choose the custom badge background color. |
Sold-out badge text | Choose the sold-out badge text color. |
Sold-out badge background | Choose the sold-out badge background color. |
Product discount text | Choose the product discount's text color. |
Product discount background | Choose the product discount's background color. (Note: This background color shows in featured product section discount text, but on grids, this background color works as a text color.) |
Star rating color | Choose the product review star rating's color. |
Header & footer color
Header | Background Choose the background color. Text Choose color for the text. Hover Choose the text color on hover. |
Submenu/mobile menu | Background Choose the background color. Text Choose color for the text. Hover Choose the text color on hover. Border Choose the border color of submenus for the mobile view. |
Footer | Background Choose the background color. Heading Choose color for the heading text. Text Choose color for the text. Link Choose color for the links. Link hover Choose the links color on hover. |
Newsletter | Text Choose color for the text. Input background Choose the input background color. |
Secondary footer | Background Choose the background color. Text Choose color for the text. Link Choose color for the links. |
Advanced settings:
Page overlay background | Select any color for the page overlay background color. |
Opacity | Adjust the range bar to determine the overlay opacity. |
Enable blur effect | Select this checkbox to enable the blur effect in the overlay. |
Typography
Heading | Font Choose the font of the heading text. Font scale Adjust the range bar to set the font size scale. Line height Adjust the line height for headings used in all sections. Letter spacing Choose the letter spacing from the multiple options like -75 to 250. |
Body | Font Choose the font of the body text. Font scale Adjust the range bar to set the font size scale. Line height Adjust the line height for headings used in all sections. Letter spacing Choose the letter spacing from the multiple options like -75 to 250. |
Animation
Enable animation | Select this checkbox to show animations in the sections and the text. |
Layout
Page width | Choose from small, medium or large to determine the page width. |
Styling | Desktop Button radius Adjust the range bar to determine the button radius on the desktop view. Input radius Adjust the range bar to determine the input field's radius on the desktop view. Product cards Adjust the range bar to determine the product card's radius on the desktop view. Blocks Adjust the range bar to determine the block's radius on the desktop view. Mobile Button radius Adjust the range bar to determine the button radius on the mobile view. Input radius Adjust the range bar to determine the input field's radius on the mobile view. Product cards Adjust the range bar to determine the product card's radius on the mobile view. Blocks Adjust the range bar to determine the block radius on the mobile view. Others(icon,badges,arrows) Layout Choose from rounded or sharp to determine the layout of icons, arrows or badges. |
Button
Font family | Choose the font family from the heading or body fonts. |
Text transform | Choose the text transform options from uppercase or capitalize. |
Hover effect | Choose the button hover effect from modern, standard or none. |
Border thickness | Adjust the range bar to determine the button border's thickness. |
Product
Enable preorder | |
Show saved amount | Tick the checkbox to show the saved amount i.e. difference between the Sale price and Compare price. |
Option style | Choose from Dropdown or Swatch to show the product options style. |
Product card
Font type | Choose the font family from the heading or body fonts. |
Content alignment | Choose from left, center or right to determine the content alignment. |
Grid image ratio | Choose the image ratio from the following options: -Auto -Landscape -Portrait -Square |
Image fit | Choose from cover or contain to determine the image fit. |
Style | Choose the card style from standard or card options. |
Enable border | Tick this checkbox to show border around products. |
Border thickness | Adjust the range bar to determine the button border's thickness. |
Show second image on hover | Tick this checkbox to show the second image on product hover. |
Show product vendor | Tick this checkbox to show the product vendor name in the grid. |
Show product rating | Tick this checkbox to show the product ratings in the grid. Note: To show a rating, add a product rating app. |
Show product savings | Tick this checkbox to show the product savings amount in the grid(which is calculated from the product compare and sale price.) |
Show video on grid | Tick this checkbox to show the autoplay videos in the grid. It is applicable for the product's Shopify-hosted videos only. |
Show product inventory | Tick this checkbox to show the product inventory in the grid. Note: To set it up, go to the 'Theme Settings > Product Inventory'. |
Low inventory threshold | Adjust the range bar to determine the threshold limit in case of low inventory. (Note; Show inventory quantity in yellow when quantity is below the threshold. Choose 0 to always show in stock if available.) |
Show shipping details | Tick this checkbox to show the shipping details in the product grid. |
Default shipping days | Enter the day's number in digits. Note: For dynamic days for each product create a metafield name "shipping_days". |
Shipping text | Enter the shipping related text to display in the product grid. |
Enable swatches | Tick this checkbox to show the product swatches in the product grid. |
Show on hover color swatch and inventory position (Desktop) | Tick this checkbox to show the product swatches and inventory on product grid's hover only. |
Steps to set up the default shipping days using a meta-field
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:
Now, go to the Shopify dashboard > product settings and add any desired integer value in this meta-field, as shown below: (You can set it for multiple products, one by one.)
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.
Product badges
Sale badge | Show 'Sale' badge Tick this checkbox to show the 'Sale' badge on product grids. |
Sold out badge | Show 'Sold out' badge Tick this checkbox to show the 'Sold out' badge. |
New label | New badge text Type the new badge text for the product grids. Show 'New' badge for products in the following collections Tick this checkbox to show the new badge based on the collections selected below. 'New' collections Select the collections on whose products, the new badge will be displayed. (Note: This has a higher priority than the days range bar-based badges.) Show 'New' badge for products with the following tag Tick this checkbox to show the new badge based on the product tags added below. 'New' tag Add the product tags added in the products to show new badge. Show 'New' label for products created within this many days Tick this checkbox to show the new badge based on the product's creation date, as specified below. Days ago created Use the range bar to set the number of days. (Note: If set to 5, products created within the last 5 days will be labelled as 'New'.) |
Preorder badge | Show 'Preorder' badge Tick this checkbox to show the preorder badge on the grids for products having preorder enabled from the theme settings. |
Custom badge | Show custom badge Tick this checkbox to show the custom badge based on the product tags added below. Product tag Add the product tags added in the products to show custom badge. Badge text Add the custom badge text. |
Swatches
Show variant image as color | Check this checkbox to show variant image instead of the color swatches. |
Color swatches style | Choose from Circle or Square to display the required swatch style. |
Color options name | Add the product option name that holds the colors. E.g.: Color, Colour, Material, etc. |
Custom color codes/images | Enter the custom color codes of the swatches using the hex colors. To add a color code with the option name: For example: Chilli: #ff0000 Here the 'Chilli' is the variant name. For hex color codes, refer to codes. To add the swatch image: Upload image in Content>Files. Add the image name with extension. This will link the option name with the image. |
Size options name | Add the product option name that that holds the size. E.g.: Size, Taille, etc. |
Quick view
Enable quick view | Select the checkbox to enable the quick view on the product grid. |
Show quick view on mobile | Tick this checkbox to show the quick view in the grid on the mobile view. (Note: To show quick view on mobile, it must be enabled from the above setting.) |
Quick view style | Choose from a grid, popup or drawer to determine the quick view style. |
Title size | Choose the heading size in between H1 to H6. |
Desktop grid image ratio | Choose the product image ratio from the following options for the desktop view: -Auto -Landscape -Portrait -Square |
Mobile grid image ratio | Choose the product image ratio from the following options for the mobile view: -Auto -Landscape -Portrait -Square |
Blog posts
Grid image ratio | Choose the image ratio from the following options: -Auto -Landscape -Portrait -Square |
Show content as overlay | Select this checkbox to show blog post content as overlay text. |
Content overlay colors | Background Choose any background overlay color. Heading Choose the heading color. Text Choose the text color. Overlay opacity Adjust the range bar to determine the overlay opacity. |
Cart
Enable cart drawer | Tick this checkbox to enable the cart drawer. |
Enable cart notes | Tick this checkbox to show the cart notes in the cart drawer. |
Gift wrap | Enable gift wrap Tick this checkbox to enable the gift wrap feature in the cart. Product Choose any product to add as a gift wrap in the cart. Text Type any text to show with the gift wrap checkbox. |
Shipping bar | Enable shipping bar Tick this checkbox to enable/disable the shipping bar on the cart drawer. (Note: This feature only works with a shipping method. If you're using multiple shipping methods, it might show false values to the customer.) Minimum shipping price Type any price for providing free shipping to the customers. After reaching this price, the user will be shown a success message. (Note: Users must write a number, no letters or special characters.) Message Type any relevant message to notify users about the amount saved in this field. (Note: Use ||amount|| to display the amount within the message.) Success message Enter text to show the success message after the user has reached the minimum shipping price. |
Cart recommendation | Enable recommendation Tick this checkbox to enable the cart recommendations. Heading Type any text to show as a title of the cart recommendations. Products Choose the products list. |
Empty cart | Show continue shopping Tick this checkbox to show the 'Continue shopping' button. Continue shopping custom link Add the link to redirect the 'Continue shopping' button. Heading Type any text to show as a title in the empty cart. Menu Choose any menu to display in the empty cart. (Note: This menu won't show dropdown items.) |
Cart notification bar | Text Enter the text to display as the notification bar on the cart drawer and cart page. |
Search drawer
Enable search drawer | Tick this checkbox to enable the search drawer on click of search icons. |
Enable recent search | Tick this checkbox to enable the recent searches view in the search drawer. |
Enable related queries | Tick this checkbox to enable the related queries view in the search drawer. |
Enable collections | Tick this checkbox to enable the collections search in the search drawer. |
Enable articles | Tick this checkbox to enable the articles search in the search drawer. |
Enable pages | Tick this checkbox to enable the page search in the search drawer. |
Grid image ratio | Choose the image ratio from the following options: -Auto -Landscape -Portrait -Square |
Suggestions | Enable suggestions Tick this checkbox to enable the suggestions view in the search drawer. Heading Type heading text of the suggestions in the search drawer. Product Choose products to show as suggestions in the search drawer. |
Drawer/popup
Drawer | Color scheme Select the color scheme. Note: These can be managed from Theme settings> Color schemes. |
Popup | Color scheme Select the color scheme. Note: These can be managed from Theme settings> Color schemes. |
Social media
X(Twitter) | Add link to your Twitter handle |
Add link to your Facebook handle. | |
Add link to your Pinterest handle. | |
Add link to your Instagram handle. | |
TikTok | Add link to your TikTok handle. |
Tumblr | Add link to your Tumblr handle. |
Snapchat | Add link to your Snapchat handle |
YouTube | Add link to your YouTube handle. |
Vimeo | Add link to your Vimeo handle. |
Social sharing
Select this checkbox to share products on the Facebook page. | |
X(Twitter) | Select this checkbox to share products on the X(Twitter) page. |
Select this checkbox to share products on the Pinterest page. |
Newsletter popup
Enable newsletter popup | Choose the checkbox to display a newsletter pop-up on the storefront. |
Image | Choose an image for your newsletter section. |
Heading | Type text to display as a title on the “Newsletter pop-up” section. |
Description | Type text to display as a brief about the newsletter section. |
Set cookie for newsletter popup (days) | 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. |
Style | Choose from default or rounded style. |
Age verification popup
Enable age verification popup | Select the checkbox to display the age verifier pop-up on the storefront. |
Heading | Enter any text to show as the title. |
Description | Enter text to display as a description on the popup. |
Approve button text | Enter text to display as approve button text on the age verifier. |
Decline button text | Enter text to display as decline button text on the age verifier. |
Under 18 title | Enter text to display on the under 18 popup as a title. |
Under 18 description | Enter text to display on the under 18 popup as a description. |
Decline button text | Enter text to display as decline button text on the under 18 popup. |
Privacy policy popup
Enable privacy policy | Tick this checkbox to enable the privacy banner, which appears at the bottom of the displays. |
Heading | Enter text to display as a title. |
Description | Enter text to display as a description on the popup. |
Accept button text | Enter text to show as approve button text on the privacy banner. |
Decline link text | Enter text to display as decline button text on the privacy banner. |
Scroll to top
Enable scroll to top | Select this checkbox to enable the scroll to top icon. |
Position | Users can adjust the position from the given options : -Left -Center -Right |
Position bottom | Adjust the range bar to determine the icon's space gap from the bottom. |
Colors | Background Choose any background color. Icon Choose any icon's color. |
Google map
Google maps API key | Enter the Google maps API key. |
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.
Create a new: “Google cloud project” in the Cloud console: Create a new project
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.
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.
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 and Relationships between organizations, projects, and billing accounts.
Click on the Create button.
Creating API keys:
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 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
Icon | Choose ay image for the favicon. |
Checkout
With these settings, you can change look and feel of the checkout page.
Banner | Background image Upload a background image for the checkout banner section. |
Logo | Add your brand’s logo to the banner section. |
Position | Select any required position from Left, Center & Right |
Logo size | - Select the logo size from the given options; -Small -Medium -Large |
Main content area | Background image Upload a background image for the main content area. Background color Select any color for background. Form fields Select form field for the given options; -White -Transparent |
Order summary
Background image | Add background image for the order summary. |
Background color | Select any background color. |
Typography
Heading | Select the suitable font for headings. |
Body | Select the suitable font for body. |
Colors
Accents | Select the suitable colors for accents on the checkout page |
Buttons | Select the suitable colors for buttons. |
Errors | Select the suitable colors for errors. |
Last updated
