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.
• Image mobile: Banner image for mobile.
• Action URL: When click on this banner it will redirect to this URL.
• Text style: Type of style for content of banner.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.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.
• 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, …
• Margin bottom: Spacing of next row of banner.