✨Theme settings

These settings are the Fame theme’s general settings for your Shopify Store.

Configure theme settings

Go to Customize theme.

Click on Theme settings to access theme-wide settings.

Customize the sections by utilizing the settings described below:

RTL

Enable RTL: Select this checkbox to enable the RTL. Enabling this RTL changes the whole store to the RTL. This feature is helpful with languages like Arabic, Hebrew etc. Languages support RTL: Enter the language code. (Note: Enter ISO language code, separate these by a comma. Leave this blank to enable for all languages Check ISO language code.)

Global color scheme

You can use the following settings to change the colors of the header, footer, scroll to the top, and badges.

Header

Background

Select any color for the header background.

Text

Select any color for the header text.

Hover

Select any color that appears on hover of header items.

Divider

Select any color for the dividers on the header.

Icon

Select any color for the header icons.

Icon background

Select any color for the header icons background.

Submenu

Background

Select any color for the submenus background.

Text

Select any color for the submenus text.

Hover

Select any color that appears on hover of submenus.

Footer

Background

Select any color for the footer background.

Text

Select any color for the footer text.

Hover

Select any color that appears on hover of footer items.

Divider

Select any color for the dividers on the footer.

Form background

Select any color for the form bakground on the footer.

Form text

Select any color for the form text on the footer.

Form border

Select any color for the form border on the footer.

Scroll to top

Background

Select any color for the background of the scroll to the top button.

Color

Select any color for the icon of the scroll to the top button.

Badges

These settings are for the sold-out badges.

Background

Select any color for background of badge.

Text

Select any text color of the badge.

Preorder badge

Background

Select any color for background of badge.

Text

Select any text color of the badge.

Custom badge

Background

Select any color for background of badge.

Text

Select any text color of the badge.

Primary color scheme

This section is to set the primary color scheme.

Background

Select any color of the background.

Alternate Background

Select any color of the alternate background.

Gradient

Select any gradient of the background.

Heading

Select any color of the heading.

Text

Select any color of the text.

Link Text

Select any color of the link text.

Hover

Select any color on the hover.

Main button

This section is to set the color of the button throughout the theme.

Background

Select any color of the button.

Text

Select any color of the text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Alternate button

This section sets the color of the alternate button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Product

This section is to set the color of the product border.

Border

Select any color to set the color of the product border.

Discount

This section is to set the color of the discount.

Background

Select any color of the discount background.

Text

Select any color of the text.

Form Input

This section is to set color of the form inputs.

Background

Select any color of the background.

Text

Select any color of the text.

Border

Select any color of the border.

Slider arrows

This section is to set color of the slider arrows.

Background

Select any color of the background.

Icon

Select any of the icon.

Others

This section is to set color for other section like divider, image background and more.

Divider

Select any color of the divider.

Image background

Select any color of the image background.

Highlight text

Select any color of the highlight text.

Secondary color scheme

This section is to set a secondary color scheme throughout the store.

Background

Select any color of the background.

Alternate Background

Select any color of the alternate background.

Gradient

Select any gradient of the background.

Heading

Select any color of the Heading.

Text

Select any color of the Text.

Link text

Select any color of the link text.

Hover

Select any color of the Hover.

Main button

This section is to set the color of the button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Alternate button

These settings are to set the color of the alternate button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Product

This section is to set the color of the product border.

Border

Select any color of the border.

Discount

This section is to set the color of the discount.

Background

Select any color of the background.

Text

Select any color of the text.

Form Input

This section is to set the color of the form input.

Background

Select any color of the background.

Text

Select any color of the text.

Border

Select any color of the border.

Slider arrows

This section is to set the color of the slider arrows.

Background

Select any color of the background.

Icon

Select any of the icon.

Others

This section sets color for others like divider, image background, and more.

Divider

Select any color of the divider.

Image background

Select any color of the image background.

Highlight text

Select any color of the highlight text.

Tertiary color scheme

This section is to set the tertiary color scheme throughout the store.

Background

Select any color of the background.

Alternate Background

Select any color of the alternate background.

Gradient

Select any gradient of the background.

Heading

Select any color of the Heading.

Text

Select any color of the Text.

Link Text

Select any color of the link text.

Hover

Select any color of the Hover.

Main button

This section is to set the color of the button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Alternate button

This section sets the color of the alternate button throughout the store.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Product

This section is to set the color of the product border.

Border

Select any color of the border.

Discount

This section is to set the color of the discount.

Background

Select any color of the background.

Text

Select any color of the text.

Form Input

This section is to set the color of the form input.

Background

Select any color of the background.

Text

Select any color of the text.

Border

Select any color of the border.

Slider arrows

This section is to set the color of the slider arrows.

Background

Select any color of the background.

Icon

Select any of the icon.

Others

This section sets the color for others like a divider, image background, and more.

Divider

Select any color of the divider.

Image Background

Select any color of the image background.

Highlight text

Select any color of the highlight text.

Quaternary color scheme

This section sets the color of the quaternary color scheme throughout the store.

Background

Select any color of the background.

Alternate Background

Select any color of the alternate background.

Gradient

Select any gradient of the background.

Heading

Select any color of the Heading.

Text

Select any color of the Text.

Link text

Select any color of the link text.

Hover

Select any color of the Hover.

Main button

This section is to set the color of the button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Alternate button

This section is to set the color of the alternate button throughout the theme.

Background

Select any color of the background.

Text

Select any color of the Text.

Border

Select any color of the border.

Hover background

Select any hover color for the button background.

Hover text

Select any hover color for the button text.

Hover border

Select any hover color for the button border.

Product

This section is to set the color of the product border.

Border

Select any color of the border.

Discount

This section is to set the color of the discount.

Background

Select any color of the background.

Text

Select any color of the text.

Form Input

This section is to set the color of the form input.

Background

Select any color of the background.

Text

Select any color of the text.

Border

Select any color of the border.

Slider arrows

This section is to set the color of the slider arrows.

Background

Select any color of the background.

Icon

Select any of the icon.

Others

This section sets the color for others, like a divider, image background, and more.

Divider

Select any color of the divider.

Image Background

Select any color of the image background.

Highlight text

Select any color of the highlight text.

Typography

This setting allows customizing fonts.

Headings

Font

Select the font of the heading text.

Font scale

Adjust the slide to set the size Line height

Adjust the line height for headings used in all sections. Enable heading uppercase Select this checkbox to show headings in the uppercase.

Body

Font

Select the font of the heading text.

Font scale Adjust the slide to set the size.

Line height

Adjust the line height for body used in all sections.

Border radius

Product grid

Desktop Adjust the range bar to select the border radius of product grids on the desktop view. Mobile Adjust the range bar to select the border radius of product grids on the mobile view.

Images

Desktop Adjust the range bar to select the border radius of images on the desktop view. Mobile Adjust the range bar to select the border radius of images on the mobile view.

Input

Desktop Adjust the range bar to select the border radius of input fields on the desktop view. Mobile Adjust the range bar to select the border radius of input fields on the mobile view.

Product quantity selector

Desktop Adjust the range bar to select the border radius of the product quantity selector on the desktop view. Mobile Adjust the range bar to select the border radius of the product quantity selector on the mobile view.

Buttons

Enable round button

Select/deselect this checkbox to show/hide the rounded buttons throughout the store.

Button radius

Select from the options small or large to show the relevant button radius.

Style

Select from classic or modern to show the buttons.

Classic button hover

Select from None or Show arrow to determine the classic (style) button hover style.

Animations

Enable animations

Select/deselect this checkbox to show/hide the animations on the product grids throughout the store.

Images

Pass through colors

Enable on product images

Select this checkbox to merge the theme background color with the product images having white color in the background. This setting is deal with light-colored theme backgrounds and product images with white backgrounds.

Breadcrumbs

Enable breadcrumbs

Select/deselect this checkbox to show/hide the page breadcrumbs.

Swatches

Show variant image as color

Select checkbox to show variant image as color.

Color style

Select from circle, tiles or square to show the swatches style. (Note: Tiles is not applicable with the variant image.)

Color options name

Enter the option name that holds the colors. E.g., Color, Colour, etc.

Custom color codes

Add color codes for the options as per the following details: The left-side options will be the names of the categories that hold the colors (e.g., Color, Material), while the right-side values will be the corresponding color codes, separated by an equals sign. For example, if the variant name is "plaid" under the "Color" category, the color code should be entered as "plaid:#ccc." (Please note that the color option names are case-sensitive.)

Size options name

Enter the option name that holds the size. E.g.: Size,Taille, etc.

How to set up the color swatch images:

Upload swatch image in the Content>Files, as shown below:

Type the variant name(case sensitive) and the image name(case sensitive) in the Custom color codes, as shown below: The variant name on the left side in the theme editor, as shown below :
Type the color swatch image name including the image extension on the right side in the theme editor, as shown below :

4. Type the names, as shown below: The format must be-> Variant name: Color-code

It will show like these:

Product

Enable preorder :

Select/deselect this checkbox to show the Preorder button on the products having "continue selling out of stock" checked from the Shopify product page.

Show saved amount: Select/deselect this checkbox to show the saved amount on the product page. Option style: Select from Swatch or dropdown to show the product options.

Quick view

Enable quick view

Select checkbox to show the quick view icon on products.

Enable fullwidth

Select the checkbox to show the quick view in full width.

Enable product title marquee

Select the checkbox to show the marquee text of the product name in the quick view.

Enable description

Select the checkbox to show the product description in quick view.

Marquee text opacity

Adjust the range bar to select the marquee text opacity in the quick view.

Full width popup animation

Select the full width popup animation from boom or rings.

Gallery style

Select the gallery style from list or grid.

Emphasize first image in grid view

Select the checkbox to emphasize the first image in the grid view of quick view.

Color scheme

Select the color scheme options from the options;

-Primary

-Secondary

-Tertiary

-Quaternary

These can be managed from Theme settings> color schemes.

Product grid

Manage the look and feel of the product grid with the following settings:

Space between grids desktop

Adjust the range bar to select the columns gap in product grids on the desktop view.

Space between grids mobile

Adjust the range bar to select the columns gap in product grids on the mobile view.

Hover options

Select the hover options from the options below;

-None

-Carousel

-Second Image Note: The variant's color swatches on the product grids work with the None hover options.

Carousel navigation

Select from arrows or tiles to show the carousel navigation style in the product grids.

Enable border

Select/deselect the checkbox to show/hide product borders.

Border width desktop

Adjust the range bar to select the border width of product grids on the desktop view.

Border width mobile

Adjust the range bar to select the border width of product grids on the mobile view.

Show grid shadow

Select this chieckbox to show the product grid's shadow.

Show vendor

Select/deselect the checkbox to show/hide the product vendor name.

Enable quick view

Select/deselect the checkbox to show/hide a quick view icon from the product grids.

Enable ATC button

Select/deselect the checkbox to show/hide add to cart icon from the product grids. (Note: This icon shows on products with one variant only.)

Show inventory

Select/deselect this checkbox to show the inventory status of products in the product grids.

Low inventory threshold

Adjust the slider to select the minimum inventory threshold.

Enable swatches

Select/deselect the checkbox to show/hide the color swatches from the product grids.

Desktop position

Select from On image or Below image to show color swatches on the desktop.

Mobile position

Select from On image or Below image to show color swatches on the mobile.

Product label 1-5

Add the product labels set up in the metafields as explained below.

Badges

Show sold out badge Select/deselect the checkbox to show/hide the sold-out badge. Show price savings Select/deselect the checkbox to show/hide price savings badge. Show preorder badge Select/deselect the checkbox to show/hide the preorder badge.

Custom badge

Product tag Add the product tag, for which the custom badge will start showing. Badge text Enter the custom badge text.

Product labels:

Enter product labels like custom.product_label setup from the store settings and then product page meta fields. For more information related to meta fields, check the below details. Firstly, the meta fields needed to be set up in the Store settings> Custom data>Products>Product meta field definitions.

Then add the meta field definitions inside Theme settings > Product Card > Product labels.

The product labels must be set in the products too, as shown below:

It shows like this on the storefront:

Cart

Cart drawer
Enable	Select this checkbox to show the cart drawer.
Enable notes	Select this checkbox to show the cart notes in the cart drawer.
Gift wrap>Enable gift wrap	Select this checkbox to enable the gift wrapping.
Gift wrap>Product	Select any product to include in the gift wrap.
Gift wrap>Text	Type any text to show with the gift wrapping checkbox.
Enable shipping bar	Select 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.
Empty cart	Heading Enter any text to appear as a title. Menu Choose any menu to display in case of empty cart. (Note: This menu won't show dropdown items.)

Cart drawer

Enable

Select this checkbox to show the cart drawer.

Enable notes

Select this checkbox to show the cart notes in the cart drawer.

Gift wrap>Enable gift wrap

Select this checkbox to enable the gift wrapping.

Gift wrap>Product

Select any product to include in the gift wrap.

Gift wrap>Text

Type any text to show with the gift wrapping checkbox.

Enable shipping bar

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

Empty cart

Heading Enter any text to appear as a title. Menu Choose any menu to display in case of empty cart. (Note: This menu won't show dropdown items.)

Gift card

Logo image

Select an image to add a logo on the gift card page.

Custom logo width

Adjust the slider to select the logo width.

Search drawer

Use this setting for adding search suggestions.

Color scheme

Select the color scheme options from the options;

-Primary

-Secondary

-Tertiary

-Quaternary

These can be managed from Theme settings> color schemes.

Suggestions

Heading Add text to the heading in the search drawer. E.g., Suggestions. Product Select products to show them under suggestions in the search drawer. Image ratio Select the image ratio from the given options:

-Auto

-Landscape

-Portrait

-Square Grid image fit Select the image fit from the following options: - Cover - Contain

Search results

Product image ratio

Select product image ratio from the given options:

-Auto

-Landscape

-Portrait

-Square

Grid image fit Select the image fit from the following options: - Cover - Contain

Article image ratio

Select the article image ratio from the given options:

-Auto

-Landscape

-Portrait

-Square

This section is to set primary color throughout your scheme.

Drawer

Color scheme Select the color scheme options from the options;

-Primary

-Secondary

-Tertiary

-Quaternary

These can be managed from Theme settings> color schemes.

Popup

Color scheme Select the color scheme options from the options;

-Primary

-Secondary

-Tertiary

-Quaternary

These can be managed from Theme settings> color schemes.

Google maps

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.

SEO

Disable microdata schema

Select this checkbox to disable the microdata schema. (Note: This will remove the schema.org markup from the page. Disable only if you are using a third-party app for SEO.) For more info, please go through docs.

Remove the collection portion from product URLs for better SEO

Select this checkbox to remove the collection portion from product URLs for better SEO.

Use this setting to link your Shopify store to your social media handles.

Facebook

Add Link to your Facebook Handle.

Twitter

Add Link to your Twitter Handle.

Instagram

Add Link to your Instagram Handle.

Add Link to your Pinterest Handle.

Snapchat

Add Link to your Snapchat Handle.

Add Link to your LinkedIn Handle.

TikTok

Add Link to your TikTok Handle.

YouTube

Add Link to your You Tube Handle.

Manage the look and feel of your newsletter pop-ups utilizing the following steps;

Enable newsletter popup

Select/deselect the checkbox to enable newsletter popup.

Heading

Add text to display as title on the Newsletter popup.

Sub heading

Add text to display subheading on the Newsletter popup.

Description

Add text to display as brief about the Newsletter popup.

Set cookie for newsletter popup (days)

Adjust the slider to set the time(days) for which you want the cookies to expire.

This shows the popup for age verification. This will prevent visitors from accessing the store until they click the "approve" button.

Enable age verification popup

Check the box to enable the age verification pop-up on the storefront.

Logo

Select any image to show as logo.

Heading

Type any text to show as heading on the popup.

Enable highlight text

Select the checkbox to show the highlighted text. (Note: Highlight text works on bold and italic text of the heading.)

Sub-heading

Type any text to show as sub-heading on the popup.

Description

Type any text to show as description on the popup.

Approve button text

Type any text to show above the approve button on the popup.

Decline button text

Type any text to show above the decline button on the popup.

Under 18 title

Type any text to show as a title on the popup when users click the decline button.

Under 18 description

Type any text to show as a description on the popup when users click the decline button.

Decline button text

Type any text to show above the decline button on the popup.

To make the privacy banner work, users must activate the customer privacy from Shopify admin Online store > Preferences > Customer privacy.

Enable privacy banner

Select the checkbox to enable the privacy banner.

Description

Type any text to show as a description on the privacy banner.

Accept button text

Type any text to show above the accept button.

Decline link text

Type any text to show as the decline link.

Scroll to top

This setting enables/disables and shows/hides the text.

Enable

Select this checkbox to enable the scroll to top icon.

SVG code

Add custom SVG code.

Horizontal position

Users can adjust the position from the given options :

-Left

-Center

-Right

Vertical position

Adjust the slider to set the vertical position of icon.

Favicon

Icon	Select any icon to appear as a 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.

PreviousFooter NextTemplate product

Last updated 16 days ago

Configure theme settings

RTL

Global color scheme

Header

Submenu

Footer

Scroll to top

Badges

Primary color scheme

Product

Discount

Form Input

Slider arrows

Others

Secondary color scheme

Product

Discount

Form Input

Slider arrows

Others

Tertiary color scheme

Product

Discount

Form Input

Slider arrows

Others

Quaternary color scheme

Product

Discount

Form Input

Slider arrows

Others

Typography

Border radius

Buttons

Animations

Images

Breadcrumbs

Swatches

How to set up the color swatch images:

Product

Enable preorder :

Quick view

Product grid

Product labels:

Cart

Gift card

Search drawer

Drawer / Popup

Google maps

SEO

Social Media

Social Accounts

Newsletter popup

Age verification popup

Cookie privacy banner

Scroll to top

Favicon

Checkout

Order summary

Typography

Colors