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