Creating a cohesive theme in Rebuy is a strategic step towards ensuring that all widgets and email templates seamlessly match the design and branding of your Shopify e-commerce store. To customize your Rebuy widgets and overall theme to better align with your brand's aesthetic and functional requirements, follow these steps in the Rebuy admin panel:
Where do I edit my "Rebuy Theme?"
Access Theme Settings
Navigate to the settings page in your Rebuy admin.
Click on 'Themes' to open the theme customization options.
Or simply click the link below and we will take you there!
Editing your Theme
Edit Your Theme Name: Rename your theme to something descriptive that reflects its purpose or design.
Logo URL: Update the URL for your logo to ensure it displays correctly across all widgets.
What is the logo URL for?
The Logo URL Setting is an important feature that allows you to display your company's logo on our Reorder Landing Pages and Rebuy Retention Emails. This helps to create a consistent and professional brand image for your customers.
To set up your logo, simply copy and paste the image address of your logo into the designated field in the Logo URL Setting. This will automatically display your logo on all of your Reorder Landing Pages and Rebuy Retention Emails.
For example, if your logo image url is "https://www.yourcompany.com/logo.png", it will be displayed at the top the Reorder Landing Page as shown below:
Global Settings
These settings apply color's for button's, pricing, widgets, the Smart Cart, Reorder Landing Pages, and Email Campaigns.
Button Customizations:
Button Text: Specify the text displayed on buttons.
Button Background: Choose a color for the button backgrounds.
Button Border Color: Select a color for button borders.
Button Border Width: Set the thickness of the button borders (e.g., 0px for no border).
Button Radius: Determine the corner radius of buttons (e.g., 5px for slightly rounded corners).
Price and Sale Displays:
Price: Style settings for how prices are displayed.
Sale Price: Customize the appearance of sale prices.
Compare at Price: Format the display of comparison prices.
Input Field Customizations:
Input Text: Style the text inside input fields.
Input Background: Choose a background color for input fields.
Input Border: Set the border color for input fields.
Input Border Focus Color: Specify the border color when an input field is focused.
Email-Specific Settings:
Email Background: Choose a background color for emails sent through Rebuy.
How do I change the color of the Tiered Progress Bar Meter?
The color of the Tiered Progress Bar Meter and every Button in the Smart Cart can be changed via the 'Button Background settings:
What is Button Radius?
The Button Radius Slider affects how round a button is! 0px means the button will be completely squared. Increase the px (pixel) count, increase the roundness!
Here's an example of giving the Button's in the Smart Cart a Button Radius of 0px, and a Pink Button Border Color with extra Border Width:
Widget Specific Color Settings
Supertitle, Title, Description: Style these textual elements to match your branding.
Product Title, Product Description, Product Reviews Text: Customize these product-specific elements.
Product Reviews Foreground, Product Reviews Background: Adjust the color scheme for product review sections.
Carousel Controls Text, Carousel Controls Background, Carousel Paging Dots: Style the carousel controls to improve navigation visibility and aesthetics.
Important to note: When applying styles to Rebuy Widgets from these settings, the styles will apply to all instances of that widget on your website unless specified in the widget's "Style" tab in their settings
If you find that a particular widget requires a unique style that deviates from the global settings, you have the flexibility to customize it:
Custom Theme for Specific Widgets: Select "Custom Theme" from the "Styles" section within the widget settings. This allows you to apply unique styling options directly to that widget, overriding the global theme settings.
Not all widget types allow for advanced customizations due to different limitations. If you have questions about which do and do not then check out their specific help docs. If you still need help, then reach out to support to confirm functionality.
Smart Cart Specific Settings
Banner Text, Banner Background: Customize the text and background of banners within the smart cart.
Timer Banner Background, Timer Text: Style the countdown timer within the smart cart.
Visible Focus Outline Color: Set the color for outlines that appear when elements are in focus, enhancing accessibility.
Banner Background & Text Color
The color selected for this setting will determine the color of the Background and Text within the Announcement Bar banner at the top of the cart.
*The Smart Cart Banner is the Announcement Bar which can be created in the Smart Cart Settings.
Timer Background & Text Color
This sets the background color for the timer banner and the color of the timer text, when enabled for widgets.
*The Timer's can be enabled in the Widget's Settings in the "Timer" tab
Visible Focus Outline Color
This is the color of the outline that appears when you tab through the Smart Cart.
When someone uses the Tab key to move through the elements on a page, the Visible Focus Outline appears around the active element to indicate where the keyboard focus is currently located. This is particularly useful for users with visual impairments or those who cannot use a mouse due to physical limitations.
This is used to adhere to ADA accessibility compliance by utilizing the :focus-visible pseudoelement with the color you specify. The screenshot below is an example of the Visible Focus Outline Color being used when someone uses the Tab key:
Custom CSS
Add your own Custom CSS to further tailor the appearance and functionality beyond the provided settings. You can apply custom CSS directly within the Rebuy settings to enhance or modify the appearance and behavior of elements like the Smart Cart and various widgets. This CSS is loaded alongside Rebuy, meaning there is no need to alter your Shopify theme code, simplifying management and deployment.
BEST PRACTICE: The Custom CSS box here is best for adding code that you want applied globally to all current and future created Widgets and Smart Carts.
*KEEP YOUR CODE ORGANIZED: Any widget specific CSS styling is best placed into the Widget's Settings directly to keep your styling code more organized.
For more detailed instructions and examples on implementing custom CSS and other advanced customizations, you can refer to our CSS guides.
NOTICE: Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page
FAQs for Common Queries
What is border-radius?
Border-radius refers to the curvature of the corners of a UI element, such as buttons. A border-radius of 0px means the corners are sharp, giving the button a square appearance. Increasing the pixel count rounds the corners, softening the overall look of the button.
What is the Logo URL for?
The Logo URL is crucial for branding; it is used to embed your logo on various pages managed by Rebuy, such as Landing Pages and Retention Campaigns. This helps maintain brand consistency across your marketing and sales platforms.
Will this affect my Online Store's theme?
No, changes made in Rebuy will not impact your Shopify store’s theme. Rebuy uses its own separate styling system, termed as a "theme" within Rebuy, which only applies to elements created and managed through Rebuy. This ensures that any modifications you make in Rebuy will not interfere with your primary Shopify theme.
Questions about commonly used terms or acronyms? check out our glossary!
Want to learn more about Rebuy features? Book a demo with our team today!