Counter Positions Image Banner
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Counter positions image banner".
Section width
Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop
Determine the left and right spacing of the full width layout.
Image
Select/Upload image for the "Content 1 & 2".
Image text
Enter in the text for the "Content 1 & 2".
Image text font size
Specify the font size of the text on tablet and desktop.
Image text font size on mobile
Specify the font size of the text on mobile.
Image text font weight
Select the font weight of the text
Image text color
Apply a color to the text.
Heading
Enter in the heading for the "Content 1 & 2".
Heading color
Apply a color to the heading for the "Content 1 & 2".
Heading letter spacing
Enter the letter spacing for the heading.
Heading line height
Determine the line height of the heading text.
Heading font size
Specify the font size of the heading on tablet and desktop.
Heading font size on mobile
Specify the font size of the heading on mobile.
Heading top margin
Determine the spacing of the title from top.
Heading margin bottom on mobile
Determine the spacing of the title from bottom on Mobile.
Heading font weight
Select the font weight of the title.
Description
Enter the description text for the image block.
Description font size
Determine the font size of the description text on tablet and desktop.
Description font size on mobile
Determine the font size of the description text on mobile.
Description font weight
Select the font weight of the description text.
Description bottom margin
Determine the spacing of the description text from bottom.
Description color
Apply a color to the description text for the "Content 1 & 2".
Maximum content width
Determine the maximum width of the content.
Button label
Enter the text for the button.
Show button text underline
Show Button Text Underline when hover
Button link
Enter URL for the button to redirect to.
Button font size
Determine the font size of the button.
Button width
Determine the width of the button.
Text color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient
Set the text color, background and border color for both the normal and hover states of the buttons.
Button label style
Transform the text of the button to be either none, uppercase, lowercase, or capitalize.
Button font weight
Select the font weight of the button.
Button spacing bottom
Determine the spacing of the button from bottom.
Block 2 right spacing
Determine the spacing of the block 2 from right.
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet
Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile
Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
