Featured Categories
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 "Featured collections".
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.
Desktop columns count
Select the column count for the section to render. On Mobile viewport, the column count is 1.
Background color
Apply the color for the section background.
Background gradient
Apply the gradient color for the section background.
Background image
Upload an image as the section background.
Section header
Title
Enter the title for the section.
Show title border
Toggle the partial line through underneath the title.
Title color
Apply color on the title of the section.
Title font size
Determine the font size of the title.
Title font size on mobile
Determine the font size of the title on mobile device.
Button label
Enter the text for button below the section title.
Button link
Specify the link for the button to redirect to on clicked.
Button label color
Apply color on the button text.
Button font size
The font size of the button text.
Button icon
Enter the svg icon code for the button icon in front of its text.
Button icon color
Apply color on the svg icon of the button.
Alignment
Select the text alignment of the title and button relative to the section. The options are: Left, Right and Center.
Mobile layout
Enable swipe on mobile
Toggle the slideshow mode for the columns instead of list layout on mobile device
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).
Menu
Select a menu to show on the block. Note: Select the menu to display a list of submenus when hovering over an image.
Image
Upload/Select an image as a background for the block.
Alignment
Select the position of the menu text to the Left, Right or Center of the block width.
Title
Enter the title of the block.
Title color
Apply color on the block title.
Title font size
Determine the font size of the block title.
Link color
Apply color on the menu item text.
Link hover color
Apply color on the menu item text on hovered.
Link font size
Determine the font size of the menu item text.
Button icon
Button label
Enter the text for the button at the block bottom.
Button link
Specify the URL for the button to navigate to.
Button label color - Button border color - Button background color - Button background gradient - Button label hover color - Button border hover color - Button background hover color - Button background hover gradient
Set the color for the text, border, and background of the button for both normal and hovered/clicked states.
Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.
Enter the svg icon for the button at the block bottom. Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.
