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

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.
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 or square to show the swatches style.
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:

  1. 1.
    Upload swatch image in the Content>Files, as shown below:
  1. 2.
    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 :
  2. 3.
    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
  1. 5.
    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.
Marquee text opacity
Adjust the range bar to select the marquee text opacity in the 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
Text
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.

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

Drawer / Popup

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.
  1. 1.
    Create a new: “Google cloud project” in the Cloud console: Create a new project
  2. 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.
    • 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.
  3. 3.
    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.

Social Media

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

Social Accounts

Facebook
Add Link to your Facebook Handle.
Twitter
Add Link to your Twitter Handle.
Instagram
Add Link to your Instagram Handle.