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

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

Typography

The theme support all Google Fonts. There are 2 group settings: MOBILE FONTS and DESKTOP FONTS, each group will be option to:

  • Fonts embed code: here is area to import Google fonts into the site. You need go to Google Fonts then select the font and copy link embed.

  • Paragraph font: input the font name for Paragraph.

  • Title font: input the font name for Title.

Screenshot

Screenshot

General Settings

  • Page Direction (Beta)

    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 Sticky Header Menu

    The Header Menu is sticked at the top of page when you scroll over it

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

  • Dimension

The option to change the Logo size.

Favicon

It located in the General Settings area. Due to important, so we moved it out as the heading.

Upload the image for Favicon

Screenshot

Mailing List Widget (Mailchimp) Popup

It located in the General Settings area. Due to important, so we moved it out as the heading.

Group options to control the Newsletter popup in Home page.

Screenshot

It will show in Home page front-end like

Screenshot

Follow the guide here to know how to get the Mailchimp Action Form url.

Suggestion/List Products popup

It located in the General Settings area. Due to important, so we moved it out as the heading.

Group options to control the products popup in the bottom/left.

You need set Active, set Title, Select Collection to show products, limit show and timer display.

Screenshot

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 3 field to control the Product options

Product Layout

Select the layout for Product Detail page (as default for all products). Capie have different 5 Product Detail layout

Screenshot

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


Collection Page

Select the layout for Collection page. Capie have different 4 Collection page layout

Screenshot


Blog Page

Select the layout for Blog page. Capie have different 3 Blog page layout

Screenshot


404 Page

Options to control the 404 page

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


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