Button

Author: Sarah Pham 954 views

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

1. Add button

From the Basic tab, you can drag and drop the Button element to anywhere that you want to add content.

1. Configure button

2.1. Content

Button

You can set the name, link, ID, and icon for the button here.

  • 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 along with its position, spacing, and animation of it.

Tracking

Here you can add a tracking ID for the button to track it. This ID will be sent to the Analytics of the app when the button is clicked. You can learn more about EComposer Analytics here.

Below is the result on the Analytic page.

2.2. Design

Button

  • Alignment: Set the horizontal alignment of a 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¬†the Horizontal¬†and¬†Vertical¬†attributes.
  • Box Shadow: Set the shadow for the button content.

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

Please follow this video below for details:

Icon

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

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

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

Please follow this video below for details:

1 Comment

  • andrew

    August 12, 2023

    Ho do i get a shop no buttom to scroll down to a particular section. i.e. button in section 1 – scroll to section 4

    Reply

Leave a Comment

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