Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Option setting
  • Option images
  • Option colors

Was this helpful?

Product variants

In case you need to add custom colors as product swatches or in the Sidebar, a section “Product variants” should be added.

PreviousPre-OrderNextHeader

Last updated 1 year ago

Was this helpful?

Sections -> Product variants

In order to get this section, you need to enable it in Theme settings -> Product -> Variants. Be sure that the “Enable advanced design for variants” is activated in your store as well. More information you can read . Once you have this block you can additionally customize variants either for all products or just for one.

IMPORTANT! A capital letter is required since these are case-sensitive settings.

Option setting

Please note, in order to configure custom images for the Sidebar, use the “Option setting” block.

In this block, you can choose the color settings either for one product or for all. This block can be added several times, depending on the number of color variants you want to add. In the “Product”, you can select a particular product to which the settings should apply. If no product is selected, the settings will apply to all products. In the “Property”, you should write “Color”.

In the “Value”, you can write the type of the color, e.g.: White, Blue, etc. You can also select the unique shade of the color in the “Color” palette if you want this color to be displayed. If you need an image to be displayed instead of the color in the product’s variants, you need to select an image in the “Image”. Then you can decide where to assign these settings, e.g.: all, product, or filters. Simply choose the option from the dropdown list in the “Assign to”. In case you do not want the default color and the default image to be shown, you can disable these options in “Disable default color” and “Disable default image”.

This is an example of the unique option setting for the color:

Option images

In order to have the images as product variants and not colors, you need to change the option type first. Go to Theme settings -> Product variants -> Option types -> Option type “Circle image” or Option type “Square image”.

In this block, you can add up to 10 images as unique color options, where only images will be shown as a color option and not the color itself. This block can be added several times, depending on the number of color variants you want to add. In the “Product”, you can select a particular product to which the settings should apply. If no product is selected, the settings will apply to all products. In the “Property & Value #1-10” you can write the property and its value, e.g.: Color|Black/White. In the “Image”, you need to select the proper image as a color option for the product:

Option colors

In order to have colors as product variants and not images, you need to change the option type first. Go to Theme settings -> Product variants -> Option types -> Option type “Circle color” or Option type “Square color”.

Once you did this, you can work with the block “Option colors”. In this block, you can add up to 10 unique color options. This block can be added several times, depending on the number of color variants you want to add. In the “Product”, you can select a particular product to which the settings should apply. If no product is selected, the settings will apply to all products. In the “Property & Value #1-10” you can write the property and its value, e.g.: Color|White. In “Color #1-10” you can choose the unique color from the palette, that suits best the description of your products in the “Property & Value #1-10”:

VIEW DEMO
VIEW DEMO
here