How to customize Button element

📖 In this article, we are going to learn more about the Button element which you can add in the Product Image’s sections and how to use it to optimize your theme’s layout and make it look the way you’d like it to.

âš  This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.

On this page

About Button element

Button element here is also known as Call-to-action buttons (CTAs). CTAs are the buttons throughout a site that tell your customers what to do, where to click and what to buy. Having a clear call-to-action on every page allows you to steer the customer toward the most appropriate spot in your conversion funnel.

How does Button look?

  • Add a new button on Product Image:
Add a new button on Product Image
  • Add a new button on Product Information:
Add a new button on Product Information

Otherwise, our presets are designed to closely match your theme's default layout. You can choose in the Library > Section templates.

Sub-layout 1.1

Sub-layout 1.2

Sub-layout 1.3

Sub-layout 1.4

Sub-layout 2.1

Sub-layout 2.2

How to edit the Button with Visual editor

Access the Button element

  1. From the app's admin, go to Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. Under the General settings section > Select Product Item section.
  2. Click the Dropdown icon of Product Item section > Select Product Information section > Select Button 1 or Button 2.
  3. Drag and drop the button and then start using it.

Styling configuration

Overall

Button type

There are two options:

  1. Selection options/Add to cart: to add the selected product to customer’s cart directly, allow them to select their desired variants before adding it to cart, or visit the product page.
    1. When this option is selected, it enables the "Select options" action onclick settings. There are three options:

      1. Popup


      2. Quick Add to cart


      3. Go to product page: Once clicked, the customer will be redirected to the product’s Product Page.
  2. View product: Redirect customers to the product’s product page when clicked.

💡 The Button Styles settings options will vary depending on the type of button selected.

âš  Once an option is selected, you will not be able to use it again for other Button element in the Product Item section.

Click Save button to save all changes you have made.


Show button

This settings will help you decide on which device you’d like to show the CTAs. There are two options:

  • Show on desktop only: the CTAs will only show on desktop.
  • Show on desktop and mobile: the CTAs will show on both desktop and mobile.

  • Show button when hovering (available for Desktop only): when this settings is enabled. The button will be hidden and only appear when the Product Image is hovered.

💡 This settings will only work when the Button element is added within the Product Image section.

Click Save button to save all changes you have made.


Button styles

Button display

Decide how you’d like to display the content within your button. There are three options:

  • Text with icon
  • Text only
  • Icon only

Click Save button to save all changes you have made.


Button shape

Decide which shape suits best for your design. There are four options:

  • Circle
  • Square
  • Rectangle
  • Rounded rectangle

  • Click Save button to save all changes you have made.

Icon Image

âš  This setting will not be available if you select Text only option from the Button Display settings.

You can add your own custom icon to personalize your button’s content by simply upload your file here:

💪 To avoid visual breakage, your custom file will be automatically scaled down to 16x16px.

Click Save button to save all changes you have made.


Button text

Customize the text content for your CTA buttons.

âš  This setting will not be available if you select Text with icon from the Button Display settings.

Icon position

âš  This setting is only available if you select Icon only from the Button Display settings.

Decide how you'd like to position your icon content in your buttons. There are two options:

  • Left
  • Right

Dimension

Button width

This setting will help you adjust the button’s width size accordingly with the area where it is placed at. There are four options:

  • Auto: The button size will be adjusted automatically to fit best with the position it is put in.
  • Fullwidth: The button will stretch fully and match the size of the row it is put in.
  • 50%: The button will stretch 50% the size of the row it is put in.
  • Manual custom: The button’s width can be customized manually by you.

When the Manual custom option is selected, you just need to input your index that you find fit your preference best:

Click Save button to save all changes you have made.

Alignment

This parameter allows you to determine the position of the element on your page. There are three options to choose:

  • Left
  • Center
  • Right

Styling configuration

You can check more information about the STYLING tab here.

Click Save button to save all changes you have made.

Tutorial video

Watch our tutorial video to learn how to customize the Call-to-action button element:


If you need any further assistance, please do not hesitate to contact us at support@boostcommerce.net.