Megamenu

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Megamenu

Section settings:

Settings for Level 1: Color for main navigation links of megamenu.
Settings for Dropdown: Menu dropdown’s background, text & link color.

Block settings: Each block will be a main navigation link & it’s dropdown. We have 4 type of dropdown.

Normal menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Settings for Label: Text & background of main menu item’s badge.

Advanced menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Fullwidth dropdown: The width of dropdown will have 100% width of megamenu if this option is enabled.

Fullwidth

Not Fullwidth

Dropdown columns: Number of columns will show inside of the dropdown.
Settings for Static content: Text & width of the static content inside of the dropdown, includes: top, right, bottom, left static content.

Settings for Label: Text & background of main menu item’s badge.

Static content menu item:

Title: Title of main navigation link.
URL: URL of main navigation link.
Menu: Choose the navigation will be show on dropdown.
Fullwidth dropdown: The width of dropdown will have 100% width of megamenu if this option is enabled.
Dropdown columns: Number of columns will show inside of the dropdown.
Static content: HTML content will show on dropdown.
Settings for Label: Text & background of main menu item’s badge.

Text link menu item: No dropdown, it’s just main menu item.

Title: Title of main navigation link.
URL: URL of main navigation link.
Settings for Label: Text & background of main menu item’s badge.

Footer

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Footer

Section settings:

Footer width: Default (follow setting Width on Theme Settings – General) or Full width.
Settings for Background: Settings for footer’s background.
Settings for Border & Spacing: Settings for footer’s border & margin, padding.
Settings for Top, middle & bottom footer: We’ve separated the footer to 3 parts: top, middle & bottom footer. We can change the background, text, links & icons color of each part. Each version of footer will have some parts or all 3 parts.

Block settings: We have 7 types of block so you can modify the layout of footer as you want.

Text column with image:

Image: Image that will show on block.
Image position: Above or below, left or right of the HTML content.
Image alignment: Setting the alignment of image on this block. Left, center or right.
Image width (optional): Setting the width of image on this block. This is optional.
Content: HTML content will show on block.
Content alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Newsletter subscribe:

Heading content: Heading HTML content.
Show social links: Show social links below the form.
Content alignment: Define the alignment of content on this block.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Vertical link list:

Heading content: Heading HTML content.
Choose Navigation: Define the Navigation that will show on this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Horizontal link list:

Heading content: Heading HTML content.
Choose Navigation: Define the Navigation that will show on this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Text:

Content: Define content of this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Banner with text:

Image: Define content of this block.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.
Other settings of this block are same as block of section Banner.

Socials:

Heading content: Heading HTML content.
Alignment: Setting the alignment of all elements on this block. Left, center or right.
Position: Define this block will show on top, middle or bottom footer.
Columns: Define width of this block.

Slideshow

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Slideshow

Section settings:

Auto rotate slide: The slider will go to the next slide after X seconds.
Settings for Navigation & Dots: Define the layout & color of Navigation & Dots of slider.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Image: Define the slide’s image.
Mobile image: Define the slide’s image on mobile.
Action URL: When click on slide it will redirect to this URL.
Content: Define the HTML content of slide.

Animation on slide’s element: We can make the animation for each element on slide content by adding classes to it. You can preview the class and animation from this link: Animate.css.

Customize the spacing between elements & layout of a tag: We have defined some helper class for you:

Spacing & alignment classes: value is from 0 5 10 … 70. Eg: margin0, margin5, margin-left10, padding10, padding-top10…

margin[value]
margin-top[value]
margin-bottom[value]
margin-left[value]
margin-right[value]
padding[value]
padding-top[value]
padding-bottom[value]
padding-left[value]
padding-right[value]
text-[align-value]: align-value is left, center, right.

Button classes for a tag

rounded: Add this class to HTML a tag to make it bordered as a button instead of underline.
btn: Add this class to HTML a tag to make it same as a primary button instead of underline.
btn-2: Add this class to HTML a tag to make it same as a secondary button instead of underline.
line-before: Add this class to HTML a tag to make it have line before when hover.

Settings for Text & link color: Define the color of text & link of slide’s content.
Width: Custom width of slide’s content.
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There’re 9 fixed positions & 3 custom positions.If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom vertical, middle Horizontal, the content will be aligned center of the slide & you need to define the vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

If you choose Custom horizontal, middle Vertical, the content will be aligned middle of the slide & you need to define the horizontal alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Banner

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Image with content inside:

Columns: Define the width of this banner by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.

Customize the spacing between elements & layout of a tag: We have defined some helper class for you:

Spacing & alignment classes: value is from 0 5 10 … 70. Eg: margin0, margin5, margin-left10, padding10, padding-top10…

margin[value]
margin-top[value]
margin-bottom[value]
margin-left[value]
margin-right[value]
padding[value]
padding-top[value]
padding-bottom[value]
padding-left[value]
padding-right[value]
text-[align-value]: align-value is left, center, right.

Button classes for a tag

rounded: Add this class to HTML a tag to make it bordered as a button instead of underline.
btn: Add this class to HTML a tag to make it same as a primary button instead of underline.
btn-2: Add this class to HTML a tag to make it same as a secondary button instead of underline.
line-before: Add this class to HTML a tag to make it have line before when hover.

Settings for Text & link color: Define the color of text & link of banner’s content.
Width: Define the width of banner’s content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There’re 9 fixed positions & 3 custom positions. It’s same as position of slide’s content on Slideshow section.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, …

Image: Same as above but don’t have content inside. Just image & link.

Columns: Define the width of this banner by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, …

Banner With Side Text

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Banner with side text

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Banner: Same as Banner Section - Image with content inside

Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner’s content.
Width: Define the width of banner’s content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There’re 9 fixed positions & 3 custom positions.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Hover effect: We have 10+ hover effect for you inlucded: zoom, hover & zoom, flashed, …
Columns: Define the width of this banner by X columns / 12 columns total.

Text:

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.
Columns: Define the width of this banner by X columns / 12 columns total.

Parallax Banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Parallax banner

Section settings:

This section will have parallax scrolling effect and always have full width & full height of the screen.
Common settings: Margin top & bottom for this section.

Block settings: Same as Banner Section - Image with content inside.

Image: Banner image.
Image (mobile): Banner image on mobile.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner’s content.
Width: Define the width of banner’s content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There’re 9 fixed positions & 3 custom positions.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Countdown Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Countdown

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Countdown:

Settings for Date: Define the date of countdown: day, month, year.
Settings for text & number color: Define the color of text & number.

Product Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Widget

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Products:

Collection: Define the collection that showing product on this section.
Layout: Section will show product list as Grid or Slider.
Product layout: Each product will show as Bottom details or Right-side details.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Limit: Number of products will show on this section.Grid – Bottom details

Slider – Bottom details

Grid – Right-side details

Product Tab Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Tab Widget

Section settings:

Layout: Product list on each tab will show as Grid or Slider.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Product limit: Number of products will show on each tab.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings: Each block is one tab.

Title: Define the title of column. Leave blank to use collection title as tab’s title.
Collection: Define the collection that showing product on this column.

Grid

Slider

Product Column Widget

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product Column Widget

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Products: each block is one column.

Title: Define the title of column. Leave blank to use collection title as tab’s title.
Collection: Define the collection that showing product on this column.
Columns: Define the width of this block by X columns / 12 columns total.
Product layout: Each product will show as Bottom details or Right-side details.
Product per row: Number of product per row when using Layout - Grid or number of product per slide when using Layout - Slider.
Product limit: Number of products will show on this column.

Product & Banner

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Product & Banner

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Product:

Product: Define the product will show.
Columns: Define the width of this block by X columns / 12 columns total.

Image with content inside: Same as block on Banner Section

Columns: Define the width of this block by X columns / 12 columns total.
Image: Banner image.
Action URL: When click on this banner it will redirect to this URL.
Content: HTML content.
Settings for Text & link color: Define the color of text & link of banner’s content.
Width: Define the width of banner’s content (optional).
Text alignment: Left, center or right alignment.
Settings for Position: Position of content on slide. There’re 9 fixed positions & 3 custom positions. It’s same as position of slide’s content on Slideshow section.

If you choose Custom, you need to define the horizontal & vertical alignment information on tab ONLY APPLICABLE ON CUSTOM POSITIONS.

Product & Right banner

3 Products

Instagram Feed

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Instagram feed

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Instagram slider:

Access token: Define the access token of your instagram.
Setting for Slider: Define the settings for navigation, dots, rotate, number of item per slide.

Instagram Shop

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Instagram shop

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Instagram shop:

Snapppt Embed Code: Define the Snapppt Embed Code of your instagram shop.1. Go to https://snapppt.com/users/sign_in, login with your instagram account.2. Go to https://snapppt.com/embeds to configuration and get embed code.

Testimonial

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Testimonial

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings: each block will show as a slide on slider.

Title: HTML title.
Content: HTML content.
Settings for Author: Define the avatar, name, job of the author.

Logo List

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Logo list

Section settings:

Settings for Slider: Number of logo per slide on desktop, tablet, mobile.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Logo:

Image: Logo image.
URL: When click on logo image it will redirect to this URL.

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Newsletter

Section settings:

Layout: We have 2 type of layouts. Just different style of input form.
Form width: To customize the form width. This is optional.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.Layout Bordered

Layout Borderless

Blog Post

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Blog post

Section settings:

Blog: Choose the parent blog.
Articles per row: Number of article per row.
Limit: Number of article will show on this section.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Text

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Text

Section settings:

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.
Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background… for section.

Text Columns & Image

Go to Admin -> Online Store -> Themes -> Customize -> Sections -> Text columns & image

Section settings:

Common settings, Padding & margin: On each homepage section, we have these settings in order to manage the spacing, container width, background… for section.

Block settings:

Heading content: This block appear on almost sections on homepage in order to add the heading title for each section.

Content: HTML content.
Text alignment: Left, center or right.
Settings for text & link color: Define the color of text & link.

Text column with image:

Image: Image show on this column.
Image position: Left, right, above or below content.
Image alignment: Left, center or right self-align.
Image width (optional): Customize width of image.
HTML content: Content show on this column.
Content alignment: Alignment of content.
Columns: Define the width of this column by X columns / 12 columns total.

Amely – Clean & Modern Shopify Theme

Home Page

Megamenu

Footer

Slideshow

Banner

Banner With Side Text

Parallax Banner

Countdown Widget

Product Widget

Product Tab Widget

Product Column Widget

Product & Banner

Instagram Feed

Instagram Shop

Testimonial

Logo List

Newsletter

Blog Post

Text

Text Columns & Image