Author: Sarah Pham 526 views

From the left side, you will see Button element in the list of elements. Drag and drop it to any positions of the selected structure.

1. Add button

From Basic tabyou can drag and drop the Button element to anywhere that you are wanting to add content to.


1. Configure button

2.1. Content

  • Button Label: Edit button text.
  • Button Link: Make a button clickable with a link.
  • Button ID: Attach an ID to this button then from the other places, you can quickly navigate to this ID(button).
  • Icon: Set the icon for the button.

2.2. Design


  • Alignment: Set the horizontal alignment of an button text. it can be left or right aligned or centered.
  • Typography : Change the style of the button text.
  • Text Shadow: Choose a color > Adjust the position of Shadow using Horizontal and Vertical attribute.
  • Box Shadow: Set the shadow for the button content.

Also, you can set effect for button when Hover over it: You can set up Width, Text color, Background, Border, Border Radius, Spacing as normal and set an Hover Animation and also Transition Duration. These settings are only applied when hovering.

Please follow to this video below for details:


  • Size: Set up the size of the icon for each device.
  • Rotate: Allow to set the rotate degree for each device.

You can use different stypes below between normal and hover state.

It includes Color, Background, Border, Box shadow, Border radius fields that are applicable to icon.

Please follow to this video below for details:

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.