Skip to content

Theme settings

The Theme settings tab is where you’ll be able to make global changes to your store or sections, including text and background color changes, typography selection, and more.

Screenshot

These group functions in Theme settings can listing below:

General Settings

  • Page Direction

    Is the Select box option, with 2 options: Left to Right or Right to Left. Depend on option will make the layout showing style.

  • Default sharing image

    Is the Image option. When you share the site, it will get the image that you upload as main image in timeline.

  • Active Button to Top

    Is the Checkbox option. Active or Deactive the Scroll to top button that appear in the bottom/right of the page, helps scroll the page to top of the site.

  • Search articles

    Is the Checkbox option. Active or Deactive will include search result include article or not.

  • Notification

    • Cart Notification: Is the Checkbox option. Notify when add a product to cart.

    • Compare Notification: Is the Checkbox option. Notify when add a product to compare.

    • Wish list Notification: Is the Checkbox option. Notify when add a product to wist list.

Screenshot

Colors Setting

The group include a lot of Color options use to change the color style of the theme. Each color option have the description which area it will change to. Color option support color picker will easily to pick the idea color.

  • Global Colors

  • Mobile Page Colors

  • Desktop Page Colors

  • Mobile Header

  • Desktop Header

  • Desktop Breadcrumb

  • Mobile Footer

  • Desktop Footer

Screenshot

Dimension

The group include the option to change the Logo size.

Currency

Although you will be able to display prices on your store front in different currencies, But Shopify will still process orders in your shop's currency.

To make the function work, need follow these steps:

Step 1: Input Currency Syntax:

  1. From your Shopify admin, go to Settings

  2. Click to General area.

  3. Scroll to Store currency area at the bottom of the General Page.

  4. Click to Change formatting link

  5. Change the HTML with currency field

    from ${{amount}} USD

    to <span class='money'>${{amount}} USD</span>

  6. Change the HTML without currency field

    from ${{amount}}

    to <span class='money'>${{amount}}</span>

Screenshot

Step2 : Setup the Setting for Currency:

  1. From your Shopify admin, go to Online Store > Themes > Customize > Theme settings > Currency

  2. Input the currency code that want show in the site into Currency you wish to support field.

Screenshot

Note:

  1. Shopify will still process orders in your shop's currency.

  2. The code don't work with the mode no decimals

  3. It can conflict with some Currency Apps. If you want use the Currency App, need contact us to remove this integrated feature.


Product Options - Filters

There are 2 field to control the Product options

Options Mapping

Option is the setting for the type of product option in Detail page.

There are 5 type:

  • Image
  • Color
  • Size
  • Dropdown
  • Radio

Syntax is: product_option_name : type | other_product_option_name : type

Example:

  • your product option is Color and you want set it display variant as color box, you need input Color:color

  • your product option is Color and you want set it display variant as image, you need input Color:image

Screenshot

Colors Mapping

Option is the setting for the custom color (hex color) of variant in Filter (Collection Page)).

Syntax is: color_name : color_hex_code | color_name : color_hex_code

Example: you have custom color called Teal and want set the hex color #009688 for it. You need input Teal:#009688

Screenshot

Product Item

All options to control the Product layout display in Home Pages, Collection Pages, Search result page,...

General settings

  • Image background

  • Image Width and Image Height: show the size of image display. Must be set a non-zero number

  • Enable retina image

  • Show description and Maximum character length of description: use to show short description with limit text and without HTML.

  • Show quick view button

  • Show compare button

  • Show wishlist button

  • Show rating: also need install the Shopify Apps to show it.

  • Show option and Show Color Available as color, not as image: use to show option when you hover it.

Screenshot

Product label

Option Show labels to enable/disable the label.

Below is 3 labels appear in product.

Promotion label

Auto set when a product has special price. Leave the "Promotion label text" empty to disable this label. You can set the color of text and background.

Screenshot

New label

Set the value of "New label text" to your product tags. Leave the "New label text" empty to disable this label. You can set the color of text and background. You also need tag the tag new into product that want show this label.

Screenshot

Screenshot

Hot label

Set the value of "Hot label text" to your product tags. Leave the "Hot label text" empty to disable this label. You can set the color of text and background. You also need tag the tag hotting into product that want show this label.

Screenshot

Screenshot


Typography

There are 2 groups: Mobile Fonts and Desktop Fonts.

  • Fonts embed code: import Google Fonts into the site.

  • Paragraph font: input the Font name. Please enter the correct font name.

  • Title font: input the Font name. Please enter the correct font name.

Screenshot

How to get Google Font embed code

  1. Go to Google Fonts

  2. Search the font want to use

  3. click to Select this font

  4. in the popup, copy the link

Screenshot


Social media

This settings use to show social icons in some area have social area. Example in Footer or Mobile menu.

Screenshot

There are 2 groups: Social accounts and Your custom social media

Social accounts: Input the social url into these option fields:

  • Behance

  • Blogger

  • Dribble

  • Facebook

  • Google Plus

  • Instagram

  • Linkedin

  • Pinterest

  • Snapchat

  • Tumblr

  • Twitter

  • Vimeo

  • YouTube

Screenshot

Your custom social media: Use it when above social icons don't suitable with your network. You need upload the social image, name and link.

Screenshot


Social media sharing

This settings use to show social share icons in Product Detail and Article (Post) page.

Currently only have 3 options can using share function: Share Facebook, Share Twitter, Share Pinterest


Favicon

This settings use to show Favicon in the windows bar.

Screenshot


Checkout

This settings use to Customize the Checkout page. This option automatically render by Shopify. Because the Checkout page was controlled by Shopify. They only allow the field to custom the page such as upload Logo, change font, color,... these fields can not change.

Screenshot

Important Note

Note

  • Each theme can have diffirent group functions and options. Such as Theme A have Color of Shipping bar, but Theme B don't have it.

  • Options/Functions don't work, report this to Technical Support staff by submit a Ticket!

  • The demo image from Marco Beauty theme.