The Buttons with Icon section is a versatile feature for adding interactive buttons with icons that enhance the visual appeal and usability of your store.
How to add a Buttons with icon section to your Shopify store
Steps:
In the theme editor (Customize), click Add section
Locate Buttons with icon section
Make necessary changes
Save.
How to edit a Buttons with icon section
Section settings
Section header
See settings
Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
Heading: Enter the primary title for your banner.
Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
Description: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.
Description size: Select the size of the description text.
Button label: Input the text for the call-to-action button.
Button link: Add a link to the button to direct users to a specific page, product, or collection.
Button style: Choose a style for the button.
Text alignment:
Align the text in the section to the Left, Center, or Right.
Adjust alignment based on your banner’s design and layout.
Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.
Item settings
Content alignment: Align the content within the buttons (left, center, or right).
Button style: Choose between styles for your buttons.
Carousel settings
Enable or disable the carousel function on desktop. Turning this on allows users to swipe through buttons interactively.
Mobile Layout
Allow users to swipe through buttons for a seamless mobile experience.
Block settings
Each button comes with a Button label, Button link, and an Icon for it.
Pro tip : Icons should complement the button text and enhance the message (e.g., use a checkmark for "Eco-Certified" or a cart for "Shop Now").
