Skip to content

Theme Configuration

  • Getting started
    • Overview of Vincent
    • Updating Vincent
  • Theme configuration
    • Theme customization options
    • Header and Footer setup
    • Announcement bar
    • Search bar
    • Newsletter popup
    • Age verifier
    • Languages & Currencies
  • Sections
    • Collection collage
    • Collection list
    • Faq
    • Featured blog posts
    • Featured collection
    • Featured product
    • Hero banner
    • Image banner
    • Image column
    • Image with text
    • Logo list
    • Map
    • Multimedia collage
    • Email signup
    • Promotional grid
    • Rich text
    • Slideeshow
    • Store message
    • Testimonials
    • Video with text
    • Video
  • Products and collections
    • Product page
    • Collection page
    • Multiple variant images
  • Cart
    • Cart page
    • Quick Add to Cart button
  • Pages
    • Contact page
    • FAQ page
    • Blog

Theme customization options

Colors

Bringing your website’s vibe to life is a breeze with our color customization options. In Theme Settings, you can easily update the color scheme, adding unique colors to each section or page with just a few clicks.

Here’s how to infuse your site with the perfect hues:

  1. Open the Theme Editor.
  2. Head to Theme Settings > Colors.
  3. Add or update the existing scheme.

With these simple steps, you can effortlessly tailor the color scheme, bringing a personalized touch to the visual appeal of your website.

Each color scheme gives you complete control, from background and text to input and button colors. Customize everything to express your website’s unique style perfectly.

Typography

Customizing the fonts throughout your store is a breeze, allowing you to tailor the look and feel to suit your brand perfectly. Feel free to experiment with various font families, sizes, and styles for headings, body text, and navigation. Here’s a simple step-by-step guide on how to change fonts:

  1. Open the Theme Editor.
  2. Navigate to Theme Settings > Typography.
  3. Choose your desired font, and with a click of the ‘Select‘ button, apply the change instantly.
  4. Don’t forget to save your changes by clicking the ‘Save‘ button on the top right side of your browser.

Button

Give your buttons a personalized touch with our easy customization options. From border width and shape to width and button padding, you have the flexibility to tailor the look exactly how you want it. Follow these simple steps to make your buttons stand out:

  1. Open the Theme Editor.
  2. Go to Theme Settings > Button.

Input

Fine-tune the appearance of your input fields by customizing the border width and padding. Here’s how to do it:

  1. Open the Theme Editor.
  2. Go to Theme Settings > Input.

Card

Customize the look of your article and product card images effortlessly by adjusting the overlay opacity and text styling. Here’s how to do it:

  1. Open the Theme Editor.
  2. Go to Theme Settings > Card.

Sidebar

In our theme, the sidebar is where you’ll find the search form, results, and other components that pop out from the right side of the window.

Customize your sidebar’s color scheme, background opacity, and sidebar button style effortlessly to match your unique vision. Follow these simple steps:

  1. Open the Theme Editor.
  2. Go to Theme Settings > Sidebar.

If you’re looking to switch up the color scheme, head to Theme Settings > Colors for quick and easy customization.

Popup

Across the website, popups are handy for showcasing forms or extra elements in a separate window. Customize the styling of these popups easily in Theme Settings.

  1. Open the Theme Editor.
  2. Go to Theme Settings > Popup.

If you’re looking to switch up the color scheme, head to Theme Settings > Colors for quick and easy customization.

Header and Footer setup

Header

In a website, the header is the top section that includes the logo, navigation menu, and key information. It serves as a visual introduction and navigation hub for users.

How to set up the header section

Setting up the header section is a breeze with these steps:

  1. Open the Theme Editor and navigate to the Header section within the Header Group.
  2. Customize your navigation menu.
  3. Choose the layout—either ‘All elements in a single row‘ or ‘Two rows.’
  4. Opt for a Dropdown or Mega menu for your menu type.
  5. Enable sticky header if you want it fixed at the top while scrolling.
  6. Upload your logo and adjust the logo width.
How to configure ‘Added to Cart’ popup
  1. Choose ‘Show vendor‘, ‘Show variant‘, or ‘Show checkout button‘ to tailor details in the popup.
  2. Manage the ‘Popup duration‘ to control how long the popup stays visible after users add items to the cart.
How to change the mega menu

A mega menu is like the organizational whiz-kid of navigation menus, neatly arranging numerous links and categories. It’s a fantastic solution for simplifying complex menu structures. Choosing the right menu layout is key—it helps customers effortlessly locate desired products or collections and can significantly boost conversions.

To personalize the navigation menu, simply add a Mega menu block when selecting Mega menu as the menu type. This allows you to tailor the menu to your preferences, providing a seamless and user-friendly browsing experience.

Footer

Dive into our footer for quick access to navigation menu, social links, and more. It’s your handy guide to navigate seamlessly and discover additional resources, all conveniently located at the bottom of every page.

How to set up the footer section

Setting up the footer section is a breeze with these steps:

  1. Open the Theme Editor and navigate to the Footer section within the Footer Group.
  2. Add or Modify the ‘Text‘ block or ‘Footer menu‘ block to fit your needs.

Announcement bar

The announcement bar, positioned just below the header at the top of the page, serves as a conspicuous area for sharing crucial updates, promotions, or time-sensitive messages to captivate visitors and prompt specific actions. Enhancing its flexibility, you can effortlessly add more announcements by incorporating them as individual blocks.

Each announcement block allows you to update text and links, providing users with clickable links leading to different URLs upon interaction. This feature offers a dynamic and efficient way to keep your audience informed and engaged.

How to set up the announcement bar
  1. Open the Theme Editor.
  2. Navigate to the Announcement bar section within the Header Group.

Search bar

How to configure the search sidebar
  1. Open the Theme Editor and navigate to the Header section within the Header Group.
  2. Enhance the user experience by clicking ‘enable predictive search‘.
  3. Tailor search results by clicking ‘Show vendor‘ and ‘Show price‘.
  4. Adjust the ‘number of items‘ to determine how many search results you’d like to display.

Newsletter popup

A newsletter popup on a website is a small window that appears to encourage visitors to subscribe to the site’s newsletter. It typically offers incentives like discounts or early access, helping businesses build and maintain a direct line of communication with their audience.

How to set up a Newsletter popup
  1. Open the Theme Editor and navigate to the Newsletter popup within the Footer Group.
  2. Click ‘Enable in edit mode‘ to bring it to life in the Theme Editor.
  3. Tweak the Heading, Subheading, Body text, or Form blocks to add your personal touch.
  4. If you fancy, toss in an image by uploading it. Easy as that!

Age verification

An age verification on a website is a tool used to confirm a visitor’s age before granting access to specific content or products. It’s commonly employed in industries with age restrictions, ensuring legal compliance and a responsible online experience. Users typically input their birthdate or confirm their age through a pop-up or separate page. This measure helps websites adhere to regulations and maintain a safe online environment.

How to set up an Age verification
  1. Open the Theme Editor and navigate to the Age verification popup within the Footer Group.
  2. Click ‘Enable in edit mode‘ to bring it to life in the Theme Editor.
  3. Customize the block to match your preferred input type. If you want users to enter their birthdate, add the ‘Birthdate input‘ block. If you prefer a simple yes or no, go for the ‘Yes or No Buttons‘ block.

Languages & Currencies

When selling globally, it’s crucial to cater to diverse audiences with different languages and currencies. Our themes are fully equipped to support sales in multiple languages and currencies. However, the setup process is handled in the Shopify admin area.

How to add languages

Adding languages is not a function handled by the theme itself; instead, it’s done through the Shopify languages page in the admin area. For detailed instructions on how to add languages, refer to the Shopify languages support docs, which provide a step-by-step guide to walk you through the process.

How to add currencies

Adding currencies is not a task performed directly within the theme; it’s managed through the Shopify markets page in the admin area. For comprehensive guidance on adding currencies, please consult the Shopify markets support docs. These documents offer detailed instructions to assist you through the entire process.

How to enable the language/currency selector

Controlling language and currency selectors is a breeze, and you have the flexibility to place them in either the Header for the mobile menu or the Footer section, depending on your preference.

Enable the language/currency selector in the footer:

  1. Open the Theme Editor and head to the Footer within the Footer Group.
  2. Simply click on ‘Show language selector‘ and ‘Show currency/country selector‘ to activate them.

If you prefer having them in the header, follow these steps:

  1. Open the Theme Editor and navigate to the Header within the Header Group.
  2. Add the ‘Mobile Menu‘ block and click it.
  3. Activate them by clicking on ‘Show the language menu item‘ and ‘Show the currency/country menu item‘.

Customizing your website’s language and currency options has never been simpler!