Shopify Action Button Section

Description of the Section

The Action Button section allows you to create a fixed floating action button (FAB) on your Shopify store. This button can be customized with various icons, images, or videos, and it can be linked to any URL, redirecting customers to a specific page or performing a desired action, enhancing user interaction and conversion rates.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Action Button"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Contact Us Button: Add a floating button that directs customers to your contact page or initiates a chat with customer support.
2. Promotional Offers: Highlight ongoing sales or promotions by linking the button to a specific product or collection.
3. Cart Reminder: Use a cart icon that directs customers to their shopping cart, reminding them of pending purchases.
4. Feedback Collection: Collect customer feedback by linking the button to a survey or feedback form.
5. Social Media Links: Direct customers to your brand's social media pages using easily recognizable icons.

Overview of the Configuration Settings

Text Settings:

1. Text Font (text_font): Choose the font family for the button text. Default is sans-serif.
2. Text Size (text_size): Set the text size, ranging from 10px to 50px. Default is 15px.
3. Alignment (alignment): Select the button alignment, either left or right. Default is right.

Color Settings: 4. Text Color (text_color): Choose the color for the button text. Default is #111.

Dimensions Settings: 5. Padding Top (padding_top): Set top padding in pixels. Default is 10px. 6. Padding Bottom (padding_bottom): Set bottom padding in pixels. Default is 10px. 7. Padding Left (padding_left): Set left padding in pixels. Default is 10px. 8. Padding Right (padding_right): Set right padding in pixels. Default is 10px.

Icon Settings: 9. Icon Background (icon_background_color): Set the background color for the icon. Default is a linear gradient. 10. Icon Color (icon_color): Choose the color for the icon. Default is #fff. 11. Icon Size (icon_size): Define the icon size in pixels. Default is 25px. 12. Icon Shape (icon_shape): Choose between square, rounded, or circle. Default is circle. 13. Icon Padding (icon_padding): Set padding around the icon in pixels. Default is 10px. 14. Icon Type (icon): Select from various predefined icons like cart, gift, shipping, etc. Default is tag.

Image Settings: 15. Image Picker (image): Optional image to replace the icon.

Video Settings: 16. Video Picker (video): Optional video to replace the icon. 17. Play Inline (video_inline): Boolean to play video inline. Default is true. 18. Autoplay (video_autoplay): Boolean to autoplay the video. Default is true. 19. Loop Video (video_loop): Boolean to loop the video. Default is true. 20. Show Video Controls (video_controls): Boolean to show video controls. Default is false. 21. Mute Video (video_muted): Boolean to mute the video. Default is true.

Content Settings: 22. Action Text (text): Inline rich text editor for button text. 23. Link (link): URL to redirect when the button is clicked.