This document will outline some basic information on Smart Cart custom templates. For up to date information on our custom templates, please visit out developer hub. Custom templates are updated from time to time, so if you encounter odd behavior, please check back to see when the latest update to the template was.
This template has been made available for developers to use in order to push the default layouts/ styles of the Smart Cart. If you do not have a developer, but would like some custom work done, you can speak with our partner team who can help connect you with the right partner for your request.
Our support services cover all aspects directly linked to Rebuy, providing assistance and guidance for standard features and functionalities. Please note that we do not offer support for third-party plugins or customizations like custom templates as outlined in this document. For a comprehensive list of supported items, please refer to our policy page. Please be mindful of this when proceeding.
Component-Level Custom Templates
To provide more flexibility for merchants, we have updated our Smart Cart to allow for component-level custom templating. This means that within any component settings in the cart editor (e.g., Announcement Bar, Cart Items, Tiered Progress Bar), you can select "Enable Custom Template" and edit only that component’s code.
This new approach offers multiple benefits:
Smaller Scope of Customization: Merchants will only be responsible for managing the custom template for a specific component, rather than the entire cart.
Full Access to Settings: Merchants will still have full access to the settings within the component and other areas of the cart, including rearranging components via drag-and-drop and adjusting the configuration of a custom-templated component within the UI.
Which Components Can Be Custom Templatized?
Cart Subtotal
Checkout Area
Cart Title / Title Bar
Login Button
Announcement Bar
Discount Code Input
Order Notes
Tiered Progress Bar
Which Components Cannot Be Custom Templatized?
Due to the nature of these components, they are either already the smallest unit of code required to provide their functionality or are intended to be non-customizable by template:
Custom Code Block
Cross-Sell Widget
Smart Cart App
Enabling a Component-Level Custom Template
Navigate to the Smart Cart
From the dashboard, locate the navigation menu.
Click on Smart Cart to open the list of available carts.
Select the Smart Cart to Update
Find the specific Smart Cart you wish to customize from the list.
Click on the name of the Smart Cart to open its configuration page.
Find the Specific Component
Within the Smart Cart configuration page, locate the component you want to customize.
Expand the 'Advanced' Section
Click on the component to reveal its settings.
Scroll down and find the Advanced section.
Click on it to expand this section if it's not already visible.
Enable Custom Template
Look for the Enable Custom Template toggle within the advanced settings.
Toggle this switch to the ON position.
Edit the Code
Once the custom template is enabled, a button labeled Edit Code will appear.
Click on Edit Code to open the code editor.
Customize the Template
Give the template a unique name to keep track of your work.
Make the necessary changes to match your design and functionality requirements.
Review Your Changes
After editing the code, click on the view changes button to apply the changes.
Ensure you review your changes to confirm they appear and function as expected.
Save Your Changes
Once you view your changes in the previewer then click save to confirm that they have been saved.
Full-Cart Smart Cart Custom Templates
Enabling a Full-Cart Smart Cart Custom Template
Before confirming this change, please read the following carefully.
By enabling a custom template:
Your cart will be saved immediately.
You will lose access to the drag and drop editor.
You are responsible for the code - be cautious with what you update.
If you decide to use a custom template, you will need to check back regularly for updates to ensure your code is compatible with the latest version of the Smart Cart. We cannot guarantee that your custom template will work with future versions of the Smart Cart.
To enable a Smart Cart custom template, follow these instructions:
Log in to your Rebuy account.
Navigate to the section where your smart carts are listed after logging in.
Select the specific smart cart that you wish to update with a custom template.
Access the settings for the selected smart cart.
Look for the option to enable the custom template within the settings menu.
Click on the "Enable Custom Template" option.
Review any conditions or terms presented by the platform upon enabling the custom template.
Once you agree to the terms and conditions you can click edit to begin updating your custom template.
Make your changes and click done. This will save your changes immediately.
Returning to Default Full-Cart Smart Cart Template
Before confirming this change, please read the following carefully.
By reverting a custom template:
Your custom template will NOT be lost.
You can change settings and return to the Custom Template when you're ready.
In order to support your latest settings, you may be asked to make some updates to your Custom Template when re-enabling it.
To return to a default full-cart template follow these steps:
Log in to your Rebuy account.
Navigate to the section where your smart carts are listed after logging in.
Select the specific smart cart that you wish to update with a custom template.
Click 'revert to default.'
Agree to the terms and conditions.
Update Your Full-Cart Custom Template
If you switch from using a custom template back to a default template for making updates, and then decide to re-enable the custom template, you'll encounter a screen that compares the last custom template used for this cart with the current default template (which reflects your latest settings). The Custom Template on the left will serve as a reference for updating your Default Template on the right. This updated Default Template will then become the new Custom Template.
FAQs
Important Caveats and Considerations When Making Changes to Custom Templates:
Component Identifiers: These should always be on the containing element. Adding another element in your template that is a sibling of the original container may disrupt the rendering logic. Keep additional markup inside the element that contains the component identifiers (data attributes, v-if conditions), or update the template to use a new wrapper that has these attributes/conditions to maintain the render logic.
data-rebuy-* Attributes: Avoid removing these attributes. They are component identifiers that the Smart Cart uses for functionality and styling. Removing these attributes may cause the component to cease functioning as intended.
Vue-Specific Syntax: Avoid removing Vue-specific syntax unless you know what you are doing. Syntax that uses Vue attributes, directives, arguments, or modifiers should be kept intact to support the intended functionality. Modify Vue syntax only if absolutely necessary and if you understand the implications and trade-offs.
Descriptive Template Names: Name your templates descriptively to reflect the changes or additions made. This will help when you need to make updates later.
Frequent Saves: Templates are not saved until the entire cart is saved. Save frequently, especially when working with Component Custom Templates.
Avoid <style> or <script> Tags: These tags will not function properly inside a Vue template. Add specific identifiers (id, class, or data-* attributes) and select them in the Custom CSS or Event Callbacks areas of the “Settings” panel in the editor. If a <style> tag is necessary, render one using <component is=style></component>. Avoid using <script> tags; instead, use Event Callbacks for custom JavaScript.
What If I Break My Component When Changing the Custom Template?
One risk of having code-level access to a component is the potential to break your Smart Cart implementation. If the cart disappears in the Previewer or the component no longer works as expected, you have options:
Undo Changes: If you have not yet saved your changes, use the “Undo” button in the editor’s top-right corner to revert your changes to a working state.
Disable Custom Template: If you need a working component immediately and have already saved your breaking changes, navigate to the component’s settings and toggle the “Enable Custom Template” option back to a disabled state. This will render the default component template without any customization, allowing you time to troubleshoot.
Note: We recommend duplicating your Live Smart Cart and making changes to your duplicate copy (similar to a Draft Mode) rather than editing your Live Cart directly.
Start New Template: To start over with a new Custom Template, select “Edit Code” under the “Enable Custom Template” option to open the Custom Template Modal. Once open, select “Start New Template” in the modal’s bottom-left corner. This will set up a new template based on the component’s defaults, allowing you to re-add your customizations and save them with a new name.
Note: Your broken template will still be saved unless you overwrite/delete it, so you can compare it with a working template to understand what went wrong originally.
Can I use code to toggle on or off SCv2 templates? For example, for general A/B testing purposes?
No, Smart Cart templates can only be activated through the Smart Cart editor.
Which takes priority: a SCv2 custom template or a Liquid custom template?
The new Smart Cart templates do not accept templates from the theme files; only the templates created within the editor are recognized by SCv2. If you are using a legacy cart, it will continue to recognize the .liquid templates.