Amely – Clean & Modern Shopify Theme

Theme Settings

General

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> General

Within General, you can config:

  • Width: Container width for all site wide.
  • Favicon: Favicon of website.
  • Display back to top icon: Display the back to top icon or not.
  • Settings on Body Background: Config background color, image, position, size.
  • Settings on Page title: Config background color, image, color of title, breadcrumb.

Color

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Color

Within Color, you can config the color of these elements:

  • Text & link: Color of text, link, product name & price.
  • Primary button: Color & border radius of primary button.
  • Secondary button: Color & border radius of secondary button.
  • Form field: Color & border radius of input, label in a form.
  • Form message: Color of the success & error message (such as account form’s message, subscribe newsletter’s message).

Typography

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Typography

Within Typography, you can config the font of these elements included font family, font size, font weight, font style:

  • Body Text: Normal text on website.
  • Headings Text: Heading include h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6.
  • Main menu links: Font on main menu item.
  • Form field: Included label & input text.
  • Buttons: Included primary & secondary buttons.
  • Custom element: To setting font for some specific elements. Eg: some Class, ID or some HTML tags.

Social

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Social

Within Social, you can config:

  • Social links: Social link of facebook, instagram, twitter…
  • Snapppt embed code: The embed code of Snapppt to make Instagram Shop section.

Header

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Header

Within Header, you can config:

  • Header version: We have 7 types of header for you.
  • Header absolute: To make header absolute or not.

Header absolute:

Header not absolute:

  • Sticky header: Enable sticky menu on desktop.
  • Sticky header on mobile: Enable sticky menu on mobile.
  • Announcement bar: Config announcement bar that show above the header.
  • Logo settings: Settings for logo desktop & mobile.
  • Elements: Show or hide currency dropdown, social links, newsletter subscription & custom HTML content such as phone number.
  • Settings on Search: We have 2 types of search layout: always show search box & toggle on click the search icon.
  • Settings on Background: Settings for background of header.
  • Settings on Border: Settings for border of header.
  • Background settings for each part of header: We separated the header to 3 parts: top, middle & bottom header. We can change the background, text, links & icons color of each part. Each version of header will have some parts or all of 3 parts.

Eg: Header version 6 has 3 parts

Eg: Header version 4 has 2 parts

Mini Cart

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Mini Cart

Within Mini Cart, you can config:

  • Type: Dropdown or Slide out cart.
  • Settings for Color: Color of text, icon, background of child elements.
  • Dropdown cart

Slide out cart

Collection Page(Landing)

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Collection Page(Landing)

Within Collection landing, you can config:

  • Default landing layout: We have 3 types of layout: Grid, Masonry & Lookbook.

With Amely you can use 3 types of layout at the same time for collection landing page. It means we can have collection A using Grid, collection B using Masonry & collection C using Lookbook at the same time. Please check 32.Collection landing page to see how to setup it.

  • Category-tree navigation: Choose the navigation will be the category-tree for all collection landing page on website. Each collection landing page will get it’s sub categories follow this navigation.
  • Settings on For Grid & Masonry collections: Number of item per row for 2 type of layout: Grid & Masonry.
  • Settings on Container width for each type of layout: Settings the container width for each type of layout. Choosing Default to make it inherit from General - Width.
  • Layout Grid

Layout Masonry

Layout Lookbook

Collection Page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Collection Page

Within Collection page, you can config default settings for all type of collection layout:

If you want to setup collection filter & settings for specific layout, please check 33.Collection page

  • Default page layout: We have 4 types of layout: 1 column, 2 columns left, 2 columns right & 3 columns.With Amely you can use 4 types of layout at the same time for collection page. It means we can have collection A using 1 column, collection B using 2 columns left & collection C using 2 columns right & collection D using 3 columns at the same time.
  • View mode: Default view mode: Grid, List, Grid(default)/List & List(default)/Grid.
  • Category description position: Above or below the products.
  • Pagination type: Pagination or Load more button.
  • Settings on Page width: Settings width of container for each layout.
  • Settings on Number of products & rows per page: Number of product per page will be calculated by Number of product per row * Number of row per page.
    If you choose View mode: List, it will automatically show 1 product per row.
  • Settings on Product badge: Setup text, color for product badge that show on product in homepage & collection page.
  • Settings on Product elements: Show or hide review, buttons on product in homepage & collection page.
  • Layout 1 column

Layout 2 column

Layout 3 column

Search Page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Search Page

Within Search page, you can config:

  • View mode: Grid or List.
  • Number of products & rows per page.
  • Layout Grid

Layout List

Product details page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Product Details Page

Within Product Details Page, you can config default settings for all type of product page layout: If you want to setup sidebar column & settings for specific layout, please check 34.Product details page

  • Default page layout: We have 4 types of layout: 1 column, 2 columns left, 2 columns right & 3 columns.

With Amely you can use 4 types of layout at the same time for collection page. It means we can have collection A using 1 column, collection B using 2 columns left & collection C using 2 columns right & collection D using 3 columns at the same time.

  • Default template: Gallery list, Vertical thumbnail, Horizontal thumbnail, No thumbnail & Full screen multiple slide.
  • Zoom: Light box, Hover zoom & No zoom. This is zoom mode for main product image.
  • Pagination type: Pagination or Load more button.
  • Settings hide or show buttons: Hide or show wishlist, compare & payment button.
  • Static content: Custom content that show below the add to cart button. It can be text, HTML, image…
  • Related product position: Sidebar (for 2 & 3 columns layout), Main content or No display.
  • Settings for Additional tab: Title & content of additional tab.
  • Settings on Page width: Settings width of container for each layout.
  • Product options layout: To specify which product option will show as Swatch or Color swatch on website.

You can choose different template for each product layout. Eg:

Layout 1 column with template Vertical thumbnail

Layout 2 columns left with template Horizontal thumbnail

Layout 3 columns with template Full screen multiple slide

404 Page

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> 404 Page

Within 404 Page, you can config:

  • Content: Content of 404 page. Leave blank to use default 404 page of Shopify.
  • Settings for Alignment & color of content: Content alignment, text alignment, color of heading, text & link.
  • Settings for Background: Background for 404 page.

Newsletter Popup

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Newsletter Popup

Within Newsletter Popup, you can config:

  • Enable: Enable or disable newsletter popup.
  • Display on mobile: Enable or disable newsletter popup on mobile.
  • Settings for Content: Title & text.
  • Settings for Background: Background image desktop & mobile.
  • Popup width: Width of popup in px.
  • Delay time to show popup: Popup will show after X seconds after visit website.

Currency

Go to Admin -> Online Store -> Themes -> Customize -> Theme settings -> Currency

Within Currency, you can config:

  • Enable currency conversion: Enable or disable currency conversion.
  • Format: Choose the format of currency.
  • Supported currencies: List of currency you want to show on website. Separate your currency codes with a space.
  • Default currency: Default currency code.
Copy Link