Welcome to the world of online commerce with the Frameshop Plugin. This guide is designed to help you leverage the full potential of Frameshop to create a customized, secure, and efficient online store directly within Framer. Whether you are a designer, developer, or entrepreneur, the Frameshop Plugin provides all the tools you need to launch your e-commerce site on the Framer platform.
What is the Frameshop Plugin?
The Frameshop Plugin is a comprehensive solution that enables you to build an integrated online store directly within Framer. With Frameshop, you can:
Set up your online store quickly: Access predefined and customizable components to add products, manage carts, and process transactions, all within Framer’s intuitive interface.
Fully customize your store: Tailor every detail of your store’s appearance and functionality to reflect your brand identity and meet your customers' specific needs.
Ensure secure transactions: Integrate secure payment solutions to protect customer data and ensure transaction reliability.
The Frameshop Plugin simplifies the creation of an online store by eliminating the technical complexities often associated with e-commerce development. This guide will help you make the most of Frameshop’s features, enabling you to launch your online store with confidence and success.
The Frameshop Plugin is organized into several key pages, each designed to help you effectively manage a different aspect of your store. Here’s an overview of each page:
Login Page:
The entry point to the plugin, where you authenticate your access to Frameshop’s tools. Users must accept the Terms & Conditions and the Privacy Policy before continuing. A link to the CMS Configuration is also available here, which is essential for ensuring the plugin functions correctly. For login, simply follow the steps to connect via Stripe. If you don’t have an account, you can create one directly from the interface.
Dashboard Page:
This is the control center of your store. Here, you’ll find an overview of sales statistics, subscription management options, and navigation links to other parts of the plugin. The dashboard provides insights into your store’s performance, allowing you to track sales, view top-selling products, and manage your subscription. You’ll also find your ShopID here, which is linked to your Stripe account, as well as a daily sales tracking dashboard that shows the total sales amount for the day, the number of new customers, and payment count, along with a logout button.
CMS & Products Page:
Manage all your store’s products from this page. You can add new products, edit existing ones, and delete items that are no longer in stock. This is also where you sync your product data with Stripe to enable secure transactions. This page is essential for keeping your product catalog up-to-date and ensuring efficient inventory management. You can directly sync products created in the CMS with Stripe, and use the Reset Sync button to initialize a new sync. Additionally, the list of synchronized products automatically updates with each sync.
Components Page:
Here you’ll find all the core elements needed to build your store within Framer. Each component is designed for easy integration and customization, so you can tailor the shopping experience to suit your brand. Available components include:
Add to Cart Button: Allows customers to add items to their shopping cart effortlessly. This button can be customized to match your store’s design.
Cart Component (Item Count): Displays a dynamic Item Count that updates in real-time with the number of items in the cart. Clicking this icon provides customers with an overview of their selected items.
Cart List Component: Presents a detailed view of all items in the cart, with options to adjust quantities or remove items.
Total Cart Component: Automatically calculates and displays the total cost of items in the cart, giving customers a clear picture of their expenses before checkout.
Empty Cart Button: Lets customers clear their entire cart with one click, making it easy for them to start over if needed.
Checkout Button: Guides customers to the final stage of their shopping experience, where they can enter payment and shipping information to complete their purchase.
Help Page:
This page provides resources and support to help you make the most of Frameshop. It includes a link to the Frameshop Starter Template, contact information, and a link to the documentation for further details. The Help Page also features a comprehensive FAQ, quick-start guides, and video tutorials that cover common tasks like syncing products with Stripe and customizing components.
To ensure a smooth setup and optimal functionality with the Frameshop Plugin, it is recommended to start by using the Frameshop Starter Template. This template provides the essential components needed to guarantee that all plugin features will be fully integrated and operational in your Framer project.
Login Steps
Accept the Terms & Conditions and Privacy Policy
Before accessing the plugin’s features, you must accept Frameshop’s Terms & Conditions and Privacy Policy. This step is required to confirm that you understand and agree to the service’s terms of use.Connect via Stripe
Once you have accepted the terms, you will be able to log in with your Stripe account. If you already have an account, simply log in using your Stripe credentials.Create a Stripe Account (if needed)
If you don’t have a Stripe account yet, you can create one directly from the Frameshop login interface. The account creation process is straightforward and secure:Click on the option to create a new Stripe account.
Follow the instructions provided by Stripe to complete your account setup.
Once your account is created and configured, you will be redirected back to the Frameshop plugin, where you can log in and start using all the features.
By following these steps, you will have full access to Frameshop with complete Stripe integration, allowing you to manage your products and perform transactions securely. Be sure to finish the initial setup on Stripe to take full advantage of the management and payment options offered by the plugin.
Once the connection is established, a ShopID is generated and linked to your Stripe account. This unique identifier is essential for securely managing your transactions and checkout processes. The ShopID ensures that all transactions are correctly associated with your account, providing a secure and reliable framework for your e-commerce operations.
Using the ShopID
The ShopID is a key element in facilitating secure checkouts through Frameshop. It allows you to:
Authenticate and manage payments securely through Stripe.
Ensure that all transactions are directly associated with your unique account, offering peace of mind for both you and your customers.
Copying the ShopID
For convenience, the ShopID can be easily copied for use in your setup. Simply click the Copy button located to the right of the ShopID, and it will be ready to paste wherever needed. This functionality makes it quick and easy to integrate the ShopID into your checkout processes or any other part of your store configuration.
Initialization of the Frameshop CMS
Initialization of the Frameshop CMS
Before creating your products, you need to initialize the Frameshop CMS. Follow these steps:
Open the Frameshop plugin:
Launch Frameshop in Framer to access its features.Locate the "COPY CMS CONFIGURATION" button:
You can find this button directly on the plugin's homepage (before logging in).
Alternatively, it is available in the Help section if needed.
Copy the CMS configuration:
Click the "COPY CMS CONFIGURATION" button.Paste the configuration into the Framer canvas or CMS page:
On Windows: Press
Ctrl + Vto paste.On Mac: Press
Cmd + Vto paste.
Once pasted, the CMS collection will be automatically imported. You can then modify and customize it as needed, while ensuring you maintain the column structure defined by Frameshop.
Login Page: Click on the COPY CMS CONFIGURATION button (as shown in the image) and then paste it into the Framer canvas or CMS page using Ctrl + V on Windows or Cmd + V on Mac.
Help Page: Click on the COPY CMS CONFIGURATION button (as shown in the image) and then paste it into the Framer canvas or CMS page using Ctrl + V on Windows or Cmd + V on Mac.
Key Considerations for Product Creation:
Unique FrameshopArticleID
Each product must have a unique FrameshopArticleID. This identifier is crucial as it ensures that products are correctly linked and managed within Frameshop. Make sure to assign a different ID to each product to avoid conflicts and errors during synchronization.Product Status: Active or Inactive
Only products marked as Active will be sent to Stripe. Be sure to set the status of each product correctly, depending on whether it is ready to be sold. Inactive products will remain in the CMS but will not be available in the checkout or visible to customers.Product Type: Physical or Service
Specify whether the product is a physical item (Good) or a service (Service). This classification helps in managing product listings and ensures accurate information is relayed to Stripe.Stock Quantity
Define the stock quantity for your physical products. This feature is included in the free plan of Frameshop and is essential for managing inventory levels directly within your CMS. By tracking stock quantities, you can ensure that products are available for purchase and automatically update their status when stock runs out.
Adding Products via the CMS:
The product creation process is managed directly within Framer’s CMS. To add a product:
Duplicate an Existing Row or Create a New Row: Start by duplicating an existing product row in the CMS or create a new row to input details for a new product.
Enter Product Details: Fill in all necessary fields with your product’s characteristics, such as name, description, price, and images.
Important: Do not delete or modify any CMS columns, as they are integral to Frameshop’s functionality. You may, however, modify option collections to customize product filters based on your needs, ensuring that they align with your store’s product organization.
By following these steps and adhering to the provided CMS structure, you can effectively manage your product catalog and ensure seamless integration with Stripe. The Frameshop Starter Template provides all the foundational elements you need, so make sure to utilize it fully to avoid disruptions.
*Ensure each product has a unique FrameshopArticleID, as shown in the red outline, for proper identification and synchronization.
*Only products marked as Active in the CMS will be included in the synchronization with Stripe.
When creating product variants in the Framer CMS for items that have multiple options—such as different sizes or colors—you can easily duplicate the base product and adjust the relevant attributes. Each variant should have a unique FrameshopArticleID to ensure proper tracking and integration with the Frameshop Plugin. Here’s how you can approach this:
Duplicate the Base Product: For each variant, duplicate the base product entry in the CMS. This allows you to keep consistent attributes such as the product name, description, and type.
Adjust the Variant Attributes: Modify the attributes for each duplicated entry according to the specific variant options. For example, if you're selling a T-shirt, you would adjust the "Size" and "Color" fields to represent each available option.
Assign Unique FrameshopArticleIDs: Each variant needs a unique FrameshopArticleID. This identifier distinguishes each variant as a separate item within your store, allowing customers to select the exact version they want to purchase.
Example Setup: If you’re offering a T-shirt in Blue and Red colors, with sizes ranging from XS to XL, create an entry for each combination. Assign a distinct FrameshopArticleID for each one, such as "TSHIRT-BLUE-S" or "TSHIRT-RED-L," to ensure they’re recognized individually during checkout.
By following these steps, you can effectively manage product variants within the CMS, making it easy for customers to choose their preferred options, while maintaining accurate inventory and order tracking for each specific variant.
After creating your products, you can easily synchronize them with Stripe using the Synchronization Button on the CMS & Products page of the plugin. Here’s how to sync your products:
Steps to Synchronize Products
Select the Collection
From the CMS & Products page, choose the Frameshop Products CMS collection. This selection ensures that all items within this specific collection will be included in the synchronization process.Click Synchronize with Stripe
Once the correct collection is selected, click the Synchronization with Stripe button. This will automatically create all active products in Stripe, making them ready for transactions.
Updating Products and Resetting Synchronization
If you make changes or updates to your product list, it’s important to Reset the Synchronization before re-syncing to reflect the latest updates. Here’s how to proceed:
Reset Synchronization
Use the Reset Sync button on the CMS & Products page to clear the current synchronization data. This step ensures that any modifications you made are recognized and included in the next sync.Re-synchronize Products
After resetting, follow the same steps as before: select the Frameshop Products CMS collection and click Synchronize with Stripe. This process updates Stripe with the latest changes to your product catalog.
By following these steps, you can efficiently manage and update your products in Stripe, ensuring that your store remains accurate and up-to-date with your latest inventory.
*Select the Frameshop Products CMS collection and click Synchronize with Stripe to add your products automatically.
*View your synced products within the plugin, ensuring all active items are ready for checkout.
After syncing your products, the next step is to import the various components available within the Frameshop Plugin’s Components page into your project. Each component is crafted to provide maximum customization flexibility, allowing you to fine-tune the look and functionality to align with your store's unique identity.
Component Customization Overview
Each component in the Frameshop Plugin is designed with versatility in mind, enabling you to adapt it seamlessly to meet the visual and functional demands of your online store. In the following sections, we will explore the customization options available for each component in detail. Here’s why customization is essential:
Brand Alignment: Customization lets you adjust elements such as colors, fonts, and layouts to match your brand’s visual aesthetics. This capability ensures that your store delivers a cohesive brand experience to your customers.
User Experience Adaptation: Tailoring component functionalities allows you to address specific user needs effectively, enhancing their overall shopping experience on your site.
Adding Components to the Canvas
To add a component to your canvas, simply navigate to the Components page within the plugin, click on the desired component, and it will automatically be imported into your canvas, ready for use. This quick action makes it easy to integrate and start customizing components instantly.
What’s Next: Component Details
In the upcoming sections, each component will be covered individually. For each one, we’ll provide guidance on the following aspects:
Key Features: Discover the primary functions of each component and understand how they contribute to a smoother user experience.
Customization Options: Learn about the customizable properties, including how to adjust colors, fonts, sizes, and other visual elements.
Integration and Functionality: Understand how to integrate the component into your Framer project, and explore how it interacts with other components or your backend setup.
Each section aims to equip you with the knowledge to utilize these components fully, enabling you to create a store that is not only visually appealing but also functionally robust.
Introduction to Functionality
The FrameshopAddToCart button is designed to make adding products to the shopping cart a seamless experience. Once you select the button within your Framer workspace, you'll see the configuration panel appear on the right side. Here's how to quickly set up your button for all the items in your store:
Configuration Panel Breakdown:
At the top of the FrameshopAddToCart component’s configuration panel in Framer, you will find fields such as FrameshopArticleID, Product Name, Price, and Product Image.
Setting Up the Button:
To make your button functional, it’s best to place it within a CMS Collection List or on a product page. This setup allows you to use the Set Variable function to link each variable from the CMS to the corresponding property of the button. By using Set Variable, as shown in the example image (not displayed here), you can integrate CMS data directly with the button’s functionality.
Customizing Button Appearance
Below the functional properties in the configuration panel, there are numerous style options that allow you to customize the appearance of your Add To Cart button to fit your brand's aesthetic:
Style Customization Options: You can extensively modify the button’s visual attributes. Options include adjusting the button’s color, font, size, padding, borders, and more. This level of customization ensures that the button complements your store’s visual theme while performing its function effectively.
Applying Custom Styles:
Each style option is intuitive, allowing you to easily apply changes and see them reflected immediately. Whether you want to match your brand colors or adjust the button size to better fit your layout, these tools provide you with the flexibility needed to create a cohesive and appealing user interface.
Finalizing and Testing
Ensure Functionality: Once you've configured and customized your button, test it within your store to ensure it works correctly. Verify that the button adds the correct items to the cart and that all linked data displays appropriately.
Review and Adjust: After testing, make any necessary adjustments to the button's functionality or style based on user feedback or your observations to enhance the shopping experience.
By following these steps, the FrameshopAddToCart button can be fully integrated and customized within your Framer project, making it an effective tool for driving sales and enhancing the customer shopping experience.
The FrameshopStock component allows you to display the real-time stock availability of each product in your store. This component is ideal for informing users about product availability and effectively managing customer expectations.
Usage
To make the FrameshopStock component functional, you need to provide two identifiers:
SHOPID: The unique identifier for your store, available in your Frameshop account settings.
FrameshopArticleID: The unique identifier for the specific product you want to display, available in your product catalog.
Configuration Example
Here's how to configure the FrameshopStock component in your project:
Add the FrameshopStock component to your page.
Enter the following properties in the component's Property Controls:
SHOPID: Enter your store's identifier.
FrameshopArticleID: Enter the identifier of the product whose stock you want to display.
Once configured, the component will automatically connect to your store and display the current stock level of the specified product.
Features
Real-time display: The component shows the current stock level of the product and updates based on sales or restocks.
Availability indication: If stock is zero, a notification can be displayed to inform users that the product is out of stock.
Make sure your SHOPID and FrameshopArticleID are correct to ensure proper stock display. This component is compatible with all products configured in your store via Frameshop.
Functionality of the FrameshopCart Component
The FrameshopCart component is designed to seamlessly display the number of items in your customers' shopping cart, offering flexibility for users to fully customize how the cart is represented on their site. Rather than a fixed button, the FrameshopCart is a compact badge that shows the item count, allowing you to overlay it onto any element of your choice, such as a cart icon, text, or other indicators.
Connecting to Your Custom Cart Display
The FrameshopCart component is just the item count indicator, giving you the freedom to position it as an overlay on a cart button or any other element. This setup allows you to creatively integrate the cart functionality into your site’s design, whether by using a cart icon, custom text, or another visual cue to signify the cart to your users.
Customizing the FrameshopCart Appearance
Unlike traditional cart buttons, the FrameshopCart component offers flexibility in terms of layout and integration. You are free to adjust its appearance to perfectly fit the design of your store:
Style Options: You can easily customize the appearance of the FrameshopCart badge, adjusting the color, size, font, and background to match your brand aesthetics. These options enable you to ensure that the cart indicator integrates seamlessly with your chosen cart button or overlay.
Flexible Integration: Since FrameshopCart is independent of a specific button layout, you don’t need to worry about adjusting dimensions or alignment. You can simply place the badge over any element on your site, such as a cart icon or a custom-designed overlay, providing maximum flexibility.
Applying Styles
The FrameshopCart component’s styling controls are intuitive, allowing you to make quick changes directly within the configuration panel. You can:
Modify the badge color and text to align with your visual theme.
Adjust the size to ensure the badge is prominent yet cohesive within your layout.
Choose a background and font style that fits with your brand’s overall look and feel.
Finalizing and Testing the Cart Badge
After configuring the FrameshopCart component, it’s important to test it within your store setup to ensure it displays accurately and that interactions are intuitive. Check that the badge updates dynamically as items are added or removed from the cart and that it integrates well with the overlay or cart icon of your choice.
This component allows you to provide a visually engaging and flexible cart experience, enhancing both the functionality and aesthetics of your online store. By using FrameshopCart, you offer a clear, adaptable, and customizable indicator of the cart status, which can contribute to a more satisfying user experience.
The FrameshopCartList component is essential for showcasing each item that users add to their cart. Unlike the FrameshopCart button that provides access to the cart, the FrameshopCartList is responsible for dynamically displaying the items within the cart.
Functionality of the FrameshopCartList
Automatic Item Display:
The FrameshopCartList component automatically lists all items added to the shopping cart. No additional functional setup is required, as it inherently fetches and displays the cart contents.
Customizing the FrameshopCartList
Style Customization:
Every aspect of the FrameshopCartList component can be styled to match the aesthetics of your website. You can modify properties such as color, font, and layout to ensure the cart list complements the overall design of your store.Height Adjustment:
It is advisable to fix the height of this component, especially if your cart may contain many items. Setting a fixed height helps maintain a clean and organized appearance, preventing the cart from expanding excessively and potentially disrupting the visual flow and aesthetic of the page. If you set the height to fit content, the cart’s height will increase as more items are added, which may lead to a cluttered display.
Recommendations for a Cohesive Design
Maintain a Consistent Look:
Ensure that the styling of the FrameshopCartList aligns with other components in your store. Consistency in design elements like color schemes, fonts, and button styles enhances the user experience and strengthens your brand identity.Test the Interaction:
Regularly test how the cart list behaves as items are added or removed. This helps ensure that the user interface remains user-friendly and functional, regardless of cart size. By focusing on these elements, the FrameshopCartList can be an effective tool for enhancing the shopping experience on your site. It allows customers to see what they have added to their cart at a glance, providing a clear and straightforward way to review their potential purchases.
Visualizing Items in the CartList
To see your products displayed in the CartList instead of just a placeholder message, you need to add items to the cart and then view your site in preview mode on Framer. Here’s a step-by-step guide on how to do this:
Add Products to the Cart:
Ensure that your FrameshopAddToCart buttons are correctly set up on your product pages. Each button should be linked with the respective product details such as FrameshopArticleID, Name, Price, and Image.Enter Preview Mode:
Switch your Framer project to preview mode. This mode allows you to interact with the project as if it were live, enabling you to test functionalities like adding items to the cart.Test the FrameshopAddToCart Button:
Navigate to the page where your products are displayed and click on the FrameshopAddToCart buttons for one or more products. This action simulates the customer experience of adding items to their shopping cart.View the CartList:
After adding items, visit the page or component where your FrameshopCartList is located. You should now see the items you added listed in the CartList. This component will dynamically update to show all products currently in the cart, along with options to adjust quantities or remove items.
Why Use Preview Mode?
Using preview mode in Framer is crucial for testing the real-time functionality of your e-commerce setup. It helps ensure that all interactive elements, like your add-to-cart and cart-listing features, work as intended before you publish your site.
Additional Tips
Verify Data Bindings:
Make sure that all data bindings from the FrameshopAddToCart button to the FrameshopCartList are correctly configured to reflect updates immediately.Continuous Testing:
Regularly test these functionalities as you make changes to your project to ensure that the shopping experience remains smooth and error-free.
By following these steps, you can effectively demonstrate and test how products are added to and displayed in the cart, providing a seamless transition from shopping to checkout for your users.
The FrameshopTotalCart component is designed to give users a clear and concise view of the total cost of items in their shopping cart. This component is kept separate to allow for flexible display options within your store layout.
Customizing the FrameshopTotalCart
Text and Size Properties:
This component allows you to modify text properties and size, including changing the font, color, and size of the displayed text. These simple adjustments can significantly impact how the total is perceived by shoppers. Tailoring these properties ensures that the total cart amount is both legible and visually harmonious with the rest of your store’s design.Styling Flexibility:
While basic customization options cover most needs, you have the flexibility to add further stylistic elements directly within Framer. For example, if you want the total cart amount to stand out more prominently, you could place the component on a colored background or within a distinct frame. This approach allows you to enhance the visibility and aesthetic appeal of the total amount, making it easier for customers to see the total at a glance and reinforcing the checkout incentive.
Implementation Tips
Consistency in Design:
Ensure that the styling of the FrameshopTotalCart matches the overall theme of your online store. Consistent use of colors, fonts, and design motifs helps create a cohesive shopping experience that can enhance customer satisfaction and brand loyalty.Enhancing Visibility:
Consider the placement of the FrameshopTotalCart component carefully. It should be positioned in a location that is easily visible during the shopping process, such as near the Cart button or at the bottom of the shopping cart summary page.Test for Clarity:
Regularly test the display of the total cart amount, especially after making style or text adjustments. Ensure that the information is always easy to read and understand at a glance, which is crucial for providing a seamless checkout process.
By focusing on these customization and implementation strategies, the FrameshopTotalCart component can effectively communicate the total cost to your customers, encouraging them to proceed to checkout. Properly integrating and styling this component within your Framer project enhances the functionality and aesthetic of your online store, contributing to a better overall user experience.
The FrameshopEmptyCart button is a crucial component for any online store, providing users with a straightforward method to reset their shopping cart. This function enhances user control over their shopping experience by allowing them to easily remove all items if they decide to start over or change their mind.
Customizing the FrameshopEmptyCart Button
Style Customization:
Like other buttons in the Frameshop Plugin, the FrameshopEmptyCart button offers extensive style customization options. You can modify its appearance to match the design of your online store. This includes adjusting the button’s colors, fonts, size, and more to ensure it fits seamlessly within your site’s aesthetic. Styling this button to be clear and conspicuous is important as it performs a critical function. It should be easily identifiable but also harmonize with the overall design theme of the cart and checkout area.Visual Consistency:
Ensure that the FrameshopEmptyCart button maintains visual consistency with other interactive elements in your store. Use similar styling cues from other buttons like the FrameshopAddToCart and FrameshopCart buttons to create a cohesive user interface. Consider using distinctive colors or icons that intuitively communicate the button's function to empty the cart, which can prevent accidental clicks and improve user experience.
Implementation Considerations
Placement and Visibility:
The placement of the FrameshopEmptyCart button should be strategic. It’s typically best placed near the cart summary or checkout area, where it’s visible but not overly prominent, reducing the risk of accidental use. Ensure the button is accessible but also offers a confirmation step or undo option to mitigate accidental cart empties, which can frustrate users.Testing Functionality:
Thoroughly test the functionality of the FrameshopEmptyCart button to ensure it works as expected. Verify that it clears the cart effectively and refreshes the page or updates the cart status without any issues. Testing should also include ensuring that the button does not interfere with other functionalities or lead to unexpected behaviors within the shopping cart experience.
By carefully integrating and styling the FrameshopEmptyCart button, you enhance the shopping experience by providing users with clear, easy-to-use control over their cart contents. This button, while simple, plays a vital role in the shopping process and should be handled with attention to detail to maintain a positive user experience.
The FrameshopCheckout button is a pivotal component of the Frameshop Plugin, enabling users to proceed to the payment page and complete their purchases securely. This button integrates seamlessly with Stripe using your ShopID, allowing for a smooth transaction process that aligns with the aesthetic of your online store.
Setting Up the FrameshopCheckout Button
ShopID:
In the button’s properties, you’ll find a field labeled ShopID. Enter the ShopID provided to you on the Dashboard page of the plugin after logging in. This ID is essential for integrating with Stripe’s payment processing capabilities, enabling secure transactions tied directly to your account.Success and Cancellation URLs:
You’ll need to specify URLs for both successful transactions and cancellations:Success URL: This URL directs users to a page confirming the transaction success, thanking them for their purchase, and perhaps offering next steps like order tracking.
Cancellation URL: This URL directs users to a page if they choose to cancel the checkout. This page can encourage them to continue shopping or provide further assistance.
Important: Ensure these URLs begin with "https://", as secure URLs are required for a reliable and trusted checkout experience.
Address and Phone Number Collection:
The FrameshopCheckout button includes options to Collect Address and Collect Phone Number. You can activate or deactivate these fields based on your needs. Note that for some payment methods, such as Klarna, phone number collection is mandatory, so adjust these settings according to the requirements of the payment methods you’ve enabled in Stripe.
Customizing the FrameshopCheckout Button
Visual Design Enhancements:
You have full control over the button’s appearance, including colors, fonts, sizes, and more. Consider using hover effects and active states to make the button interactive and visually engaging, which can help guide user behavior.Fonts and Typography:
Customize the typography to align with your brand’s style, including options for letter spacing, line height, and text shadow to enhance readability and visual impact.Dimensions:
Adjust the button’s size, padding, and margins to ensure it’s optimally positioned within your layout. Proper placement enhances accessibility, especially on various devices, contributing to a seamless user experience.Borders and Corners:
Experiment with border styles, such as dotted or dashed lines, as well as color gradients, to further customize the button's look. This can make the button stand out or blend in as needed by your design strategy.
Implementation Considerations
Payment Method Management in Stripe:
Note that the management of accepted payment methods, including those that require additional information (e.g., Klarna may require phone number collection), is handled directly within your Stripe account settings. Make sure to configure these settings in Stripe to match your store’s requirements.Testing and Optimization:
Regularly test the checkout flow to ensure the button functions correctly and directs users as intended. Confirm that the button leads to the appropriate success and cancellation pages, and that all interactions are smooth and intuitive. Ongoing testing and adjustments help reduce cart abandonment and enhance the user experience.
Enhancing the User Experience
By integrating and customizing the FrameshopCheckout button, you enhance your store’s checkout process, encouraging secure and efficient transactions. Adhering to secure URL formats and configuring payment methods properly will reinforce customer trust and facilitate a seamless checkout experience. Through thoughtful customization and continuous refinement based on user feedback, the FrameshopCheckout button can help drive conversions and build lasting customer relationships.
*Enter the ShopID from the Dashboard here, as shown, to ensure correct integration with Stripe.
*Specify the success and cancellation URLs in this format: https://www.example.com. Avoid using just www.example.com.
*Toggle these options to enable or disable the collection of shipping addresses and phone numbers as needed.
*Shipping Option for Checkout
Final Thoughts
We hope this documentation has provided you with all the necessary information to successfully integrate and utilize the Frameshop Plugin in your projects. Our goal is to ensure you have a smooth and enjoyable experience creating and managing your online store, enhancing both functionality and aesthetics with our comprehensive toolset.
Need Assistance?
If you encounter any challenges or have questions while setting up or customizing the Frameshop Plugin, we're here to help! Our dedicated support team is committed to providing you with the assistance you need to make the most of your experience with Frameshop.
Contact Us:
Email Support: For detailed inquiries or if you need step-by-step assistance, feel free to email us at support@frameshop.io. We strive to respond to all emails promptly.
Social Media: Follow us on Twitter @Frameshop_io for the latest updates, tips, and community insights. You can also reach out to us here for quick questions or to share your success stories.
Stay Connected
To keep up with new features, updates, helpful tutorials, and community stories, make sure to connect with us on our social media platforms. Your feedback and success stories inspire us to continually improve and expand our offerings.