Vino: Theme settings

To open Theme settings, click the gear icon located on the left sidebar of the theme editor.

theme settings.png

Vino provides a variety of settings that you can use to adjust and personalize your store’s design.

  • Colors

    In Vino, theme sections include an option to select a color scheme for styling text and background colors. Color schemes make it easy to maintain a polished, consistent look throughout your storefront. You can customize each scheme and apply it across your theme wherever a color scheme picker is available.

    Nine preset color schemes are available for you to use and customize. You can also create additional schemes, up to a total of 21.

    color schemes.png

    Clicking on any color scheme opens its editing options, where you can adjust:

    edit color scheme.png

    Primary color: sets the text and icon colors.

    Secondary color: sets the background color.

    Color defaults

    The Colors section in Theme settings allows you to edit the color scheme for the following:

    color setting defaults.png

    Body:  controls the main text color and background color applied across the theme.

    Product tiles: applies to the product grid in theme sections and on collection pages.

    Product tags: applies to product tag styling (learn how to set up product tags here).

    Sale tags: applies to sale tags shown in the product grid when a product has a compared-at price.

    Price: sets the primary color for product prices.

    Save price: sets the primary color for the displayed savings amount.

  • Typography

    Use the Typography settings to change the overall font family and adjust text sizes across your store.

    Headings

    Use Shopify’s font picker to choose a Font and adjust its Base size, Letter spacing, and Line height. You can also enable Capitalize to convert heading text to uppercase.

    heading.png

    The heading settings apply to: 

    • Heading fields within sections

    • Page titles

    • Product titles on product pages

    • Headings in sidebars

    • Footer column headings

    Body text

    Use Shopify’s font picker to choose a Font and adjust its Base size, Letter spacing, and Line height.

    body text.png

    The body text settings apply to: 

    • Text fields within sections

    • Product descriptions

    • Button labels

    • Announcement bar text

    • Breadcrumb links

    • Sort by/tag filter

    • Pagination

    • Product tags and labels

    • Product grid text

    • Header and footer menus

    • Most texts throughout the theme

    Text direction lets you set the overall text flow of your site to either Left to right or Right to left.

    text direction.png

  • Design

    General 

    You can set the edge style of theme elements to either Square or Round. 

    General.png

    This setting apply to:

    • Collection filters

    • Product labels

    • Newsletter form

    • Gallery images

    • Form fields

    Product tags

    Product tag edges can be styled as Square or Round. Learn how to set up product tags here.

    product tags.png

    Product specs

    You can set the style of the Product specifications bar to either Square or Round. Enabling Show increment dividers adds small vertical lines between each percentage segment. Learn how to set up product specs here.

    Product specs.png

  • Products

    Implement product-related design adjustments throughout the theme.

    Products.png

    Enable Show cents as superscript to display the cents portion of product prices in superscript format.

    price superscript.png

    When a product has a compared-at price, enabling Show saved amount will display the savings beside the product price on both the product grid and the product page. You can choose to show the savings as either an amount or a percentage.

    saved amount.png

    Show vendor adds the vendor name in the product grid.

    Enable Show product prefix to display product prefixes throughout your store. Learn how to setup product prefix here.

    The Swatch size setting controls how large the color swatches appear throughout the theme (30–80 px). 

  • Product tiles

    The product tile or product grid displays products in a structured layout, showing key details such as the product image, title, price, and labels. It appears in sections that feature products, including collection pages and search results.

    product grid.png

    You can use Content alignment to align text in the product grid to the left, right, or center.

    Product grid image

    Force image size controls the size and shape of the product grid images. You can choose between the following options: 

    • Natural 

    • Square (1:1)

    • Landscape (4:3)

    • Portrait (2:3)

    When the grid image size is not set to Natural, Zoom image to fill space zooms the product image to fit the space. With Hover to reveal second image enabled, the second product image appears when hovering over the product grid image.

    Add to cart

    The Enable add to cart setting shows an Add to cart button at the bottom of each product tile, allowing customers to add items directly to their cart without visiting the product page.

    On desktop, hovering over this button turns it into a quantity selector so customers can choose how many items to add. Clicking the plus (+) button adds the product to the cart immediately, without redirecting to the cart page or opening the cart drawer.

    add to cart desktop.gif

    For products with variants, a Show options button appears instead. Selecting this button opens the quick view popup where customers can choose their desired variant before adding the item to the cart.

    If Enable add to cart is disabled, the Quick add and Quick shop buttons show in the top-right corner of the product on hover. On mobile devices, only the Quick add button appears at the top-right of the image.

    quick add & quick view.gif

    Color swatches

    Enable Color swatches to display swatches on the product grid. You can set the swatch style to either Round or Square. Learn how to set up color swatches here.

    Product tags

    Enable Product tags to show them on the product grid. Learn how to set up product tags here.

    Design

    Set the Product tile style to either Round or Square. Use Image breathing room to adjust the spacing around the product image in the grid.

    Recently viewed

    Use Desktop products per row to choose how many items appear in each row, and Maximum products to show to set the total number of products displayed in the Recently viewed section.

  • Collection tiles

    The collection tiles settings affect the Collection list section, Collection list page, and Subcollections section.

    collection tiles.png

    Collection tile style controls the size and shape of the collection grid images. You can choose between the following options: 

    • Square (1:1)

    • Landscape (4:3)

    Use the Image setting to select whether the tile displays the collection’s featured image or the image from the first product in the collection.

  • Cart

    Refer to this article for more information: Vino: Cart types

  • Social media

    Account links

    Enter your social media links here to have them appear in sections that feature social media buttons.

    social media links.png

    The theme supports these social media icons:

    • Facebook

    • X

    • Pinterest

    • Instagram

    • Snapchat

    • TikTok

    • Tumblr

    • LinkedIn

    • YouTube

    • Vimeo

    social icons.png
    Social media icons in the announcement bar.

    Sharing options

    Control which sharing options appear on product pages and blog posts.

    sharing options.png

    You can enable the following:

    • Share on Facebook

    • Tweet on X

    • Pin on Pinterest

    share this icons.png
    Sharing options displayed in the blog post sidebar.

  • Favicon

    This setting lets you upload a favicon, a small icon that appears in the browser tab and on search results to represent your website.

    favicon.png

    For best results, upload a favicon at 32 × 32 pixels in PNG format.

  • Search

    Enable Predictive search so customers see suggestions and auto-complete results as they enter a search term.

    search.png

    You can use Shopify's Search & Discovery app to access advanced search settings and features that improve your store’s search experience.

  • Extras

    Use Show breadcrumbs to display a breadcrumb trail on your store.

    breadcrumbs.png

    When Show collections page in breadcrumb list is enabled, the collections list page is added to the breadcrumb trail on collection pages and on product pages accessed from a collection.

    breadcrumb with collections link.png

  • Custom CSS

    The Custom CSS section lets you add your own CSS code to make small design adjustments to the theme. It’s useful for simple styling changes without editing the theme’s core code.

    custom css.png

    Please note that you’ll need basic knowledge of HTML and CSS to use this section. If you’re not familiar with coding, consider reaching out to a Shopify Expert for assistance.

  • Theme style

    Vino includes built-in style presets that combine fonts and colors to help you change the look and feel of your store.

    Vino theme styles.png
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Related articles