đ In this article, we are going to learn more about the Button element which you can add to 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.
About Button element
The 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 the Button look?
Add a new button on the Product Image:
Add a new button on the Product Image
Add a new button on Product Information:
Add a new button on the 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 the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the General settings section > Select Product Item section.
3. Click the Dropdown icon of Product Item section > Select Product Information section > Select Button 1 or Button 2.
4. Drag and drop the button and then start using it.
Styling configuration
Overall
Button type
There are two options:
Selection options/Add to cart: to add the selected product to the customerâs cart directly, allow them to select their desired variants before adding it to the cart, or visit the product page.
When this option is selected, it enables the "Select options" action on click settings. There are three options:
Popup
Quick Add to cart
Go to the product page: Once clicked, the customer will be redirected to the productâs Product Page.
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 another Button element in the Product Item section.
Click the Save button to save all changes you have made.
Show button
This setting 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 setting is enabled. The button will be hidden and only appear when the Product Image is hovered.
đĄ This setting will only work when the Button element is added within the Product Image section.
Click the 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 the 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 the Save button to save all changes you have made.
Icon Image
â ď¸ This setting will not be available if you select the Text only option from the Button Display settings.
You can add your custom icon to personalize your buttonâs content by simply uploading your file here:
đŞ To avoid visual breakage, your custom file will be automatically scaled down to 16x16px.
Click the 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 according 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 the index that you find fits your preference best:
Click the 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 from:
Left
Center
Right
Styling configuration
You can check more information about the STYLING tab here.
Click the 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 [email protected].