Button
Updated 1 month agoButton is a clickable element that directs users to products, collections, or specific actions. Use this element properly to guide users toward high-intent actions, and highlight key journeys like best sellers or offers.
Action
Choose what the button should do. You can link it to a product or a collection based on your requirement.
Under button, you can change:
-
Text - Update the button label with any text you want to display.
-
Font - Select the font style that matches your brand look.
-
Size/Weight - Adjust the font size and choose how bold or light the text should appear.
-
Line Height - Control the spacing between lines if your button text has multiple words or breaks.
-
Letter Spacing - Increase or decrease the space between each character.
-
Text Color - Pick a text color that fits your theme and keeps the button readable.
-
Alignment - Choose how the text should be positioned inside the button.
-
Capitalization - Decide whether the text appears in uppercase, lowercase, or sentence case
Border
-
Color - Choose the border color that matches your button style or theme.
-
Width - Adjust how thick or thin you want the border to appear.
Left Icon
-
Select or Upload - Choose an icon from the library or upload your own to match your branding.
-
Color - Set the icon color to blend with your button style.
Right Icon
-
Select or Upload - Choose an icon from the library or upload your own based on what fits your design.
-
Color - Set the icon color to match the rest of your button style.
Advanced Settings
-
Background Color - Choose the button background color to match your theme.
-
Radius - Adjust the corner roundness of the button.
-
Padding - Control the inner spacing around the button text and icons.
-
Relation - Set how elements sit inside the button. You can keep them side by side or spaced apart.
-
Format - Choose between a compact layout or a full width button.
-
Position - Decide where the button should appear within the section.
Background and Spacing
-
Set the background color for this block.
-
Adjust the radius to control how rounded the corners appear.
-
Update the padding to manage inner spacing.
-
Modify the margin in pixels to control the outer spacing around the block.
Border
-
Color - Pick a border color that fits your design.
-
Width - Adjust how thick the border should appear.
-
Sides - Choose which sides of the block should have a border.
Related Articles
