Customizing Call to Action element

The Call to Action element(s) is usually added by default based on themes.

• Note: This feature is only available for App Lib V3, please contact us for further instructions.

On this page

• Access the Call to Action element
• Call to Action configuration
  • Styling configuration
  • How does it look?

If the Call to Action element(s) has not been added or has been removed, add a Call to Action element:

Access the Call to Action element

1. From the app's admin, go to Theme > 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.

Call to Action configuration

OVERALL

1. The button type has 3 options:
   • Selection options/Add to cart
   • Quick view
   • View product
2. The value will change depending on the type of button selected.
   • Show on desktop only

   • Show on desktop and mobile

     Tick the checkbox to show button when hovering

BUTTON STYLE

1. Button display
   • Text with icon
   • Text only
   • Icon only
2. Button shape
   • Circle
   • Square
   • Rectangle
   • Rounded rectangle
3. Button text: The text that appears on a button depends on the button type.
4. Icon settings: Depending on each variant, you can add an image for icon and choose to display its position to the left or right.

Icon image: Upload image or drop file to upload.

Icon position: When you choose "Text with icon" as the button display option, you can set the icon position.

Select options/Add to cart button

• The Select options/Add to cart button is designed to present thebutton for any product. This element is a should-have for any product listed on a page. When visitors click on this button, it will automatically add a product to their cart.
• "Select options" onclick: There are 2 options after clicking on Select options button.

• Show popup
• Go to product page
  • If you add on Product Image, we has 3 options:

    • Show popup

      

    • Show Quick Add to cart

      

    • Go to product page

Button text:

• Add to cart text: Text appears on button. – “Add to cart”, for example
• Select options text: Text appears on button. – “Select options”, for example
• Adding text: enter custom text when a product is adding to cart. – “Adding…”, for example
• Added text: enter custom text when a product is added successfully.– “Added!”, for example
• Sold out text: enter custom text when a product is sold out.– “Sold out”, for example.

Quick view button

Button text:

• Quick view text: Text appears on button. – “Quick view”, for example.

View product button

Button text:

• View product text: Text appears on button. – “View product”, for example.

DIMENSION

To adapt the button width to the row it’s put in, there are 3 options:

• Auto
• Full width
• 50%

Otherwise, you can manually adjust your button's width and height by entering values in the fields below.

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.

How does it look?

Otherwise, our presets are designed to match your theme's default layout as closely as possible. You can choose in the Layout Library.