Vogal Premium Shopify Theme
View DemosOpen a Store for FREEBuy VogalOther ThemesTheme Support
  • Greeting
  • INSTALLATION
    • Install Theme
    • Recommended Apps
    • Theme Changelog
    • Update Theme
  • Basic Configuration
    • Enable Customer Accounts
    • Set Up Shipping Rates
    • Currency Settings
    • Menu Setup
  • Theme Settings
    • Layout Style
    • General
    • Fonts & Colors
    • Header
    • Cart
    • Search
    • Product Page
    • Products Grid
    • Currency & Language
    • Social Media
    • Popup Quickview
    • Popup Newsletter
    • Popup Someone Purchased
    • GDPR Cookie Popup
    • Checkout
    • Custom Css
  • Theme Sections
    • Featured Product
    • Collection List
    • Slideshow
    • Newsletter
    • Contact Form
    • Video
    • Custom Liquid
    • Blog List
    • Custom Block
    • Custom Block(Masonry)
    • Section Divider
    • FAQ
    • Featured Banner
    • Grid Banners
    • Hero Banner
    • Hero Banner(CTA)
    • Icons and Text
    • Image & Text (2 columns)
    • Image & Text (4 columns)
    • Image Gallery
    • Instagram
    • Instagram Shop
    • Logo List
    • Lookbook Shop
    • Map
    • Masonry Banner
    • Products + Banner
    • Products Columns
    • Products Rows
    • Products Slider
    • Products Tabs
    • Promotion Bar
    • Rich Text
    • Round Banners
    • Scrolling Text
    • Shop The Look
    • Testimonials
    • Text Column(Top Image)
  • General Sections
    • Footer
    • Mobile Toolbar
    • Custom Colors
    • Exit Intent Popup
  • Common Settings
    • Common Settings in Section
  • Collection Page
    • Breadcrumb
    • Collection Banner
    • Sub Collections
    • Collection Main
  • PRODUCT PAGE
    • Breadcrumb
    • Product Main
    • Product Tabs
    • Related Products
    • Recommended Products
    • Recently Viewed Products
    • Upsell Product Bundle
    • Group Products
    • More Products Color
  • Page Setup
    • Wishlist
    • About Us
    • Contact Us
    • FAQs
    • Our Brands
    • Store Locations
    • Portfolio
    • Blog
    • Create Custom Page
    • Cart
  • Vogal FAQs
    • How to display links in megamenu without column title?
    • Show product recommendation in cart drawer
    • Limit color swatch to display on products grid
    • How to add external product link/affiliate link?
  • Translations
Powered by GitBook
On this page
  • Product Swatch
  • Size Chart
  1. Theme Settings

Product Page

Settings for product swatch and size chart that display on product detail page. Set other product detail page options and settings from Product page section.

PreviousSearchNextProducts Grid

Last updated 1 year ago

Steps:

  • In the theme editor, click Theme settings

  • Locate Product Page,

  • Make necessary change and click save.

Product Swatch

Please make sure that you set variants for your products in order to display product swatches on your store.

From Shopify admin > Products > Select product to add variants > Scroll down to Variants > Click Icon to Add Variants and add color, size, etc as your products suit.

Swatch Type : Choose product swatch type to Color Swatch Or Variant Swatch.

For Color Swatch, make sure you have define all custom colors. Custom colors can be add from Sections -> Scroll down to Custom Color section. You can find Custom Color section next to footer section

For Variant Swatch, Please make sure you have uploaded variant images From Shopify admin > Products > Select product to add variants > Scroll down to Variants.

Variant Image Position: Set variant image position. Set variant image position. Either you can set to display it from center or top.

Swatch Size: Select swatch size to small, medium or large.

Border Radius: Set rounded corner for swatch.

Add variant title to show as color swatches: Add all variant name that will display as color swatch. i.e. Color, couleur, Farbe, Kleur, Farge

Set swatch text background, text, border and active swatch colors.

Size Chart

Show size chart for all products on your store.

Show Size Chart Link? Enable to show size chart link above size swatch that will display size chart popup when user click.

Size Chart Type: Choose how you want to display size chart. You can set size chart by default,

Add variant title to active size chart link and tab: You need to add all variant name here that you want for size chart to work. i.e. Size, Dimension, Taille, Velikost, talla, Taglia

You can also display size chart in product tabs . You need to add size chart tab from product page tab section.

By Brand, By Type Or Different for each products.

Click to know more in detail
preview color swatch
preview variant swatch