How do I show custom color swatches?

Transcription

1 How do I show custom color swatches? Sometimes when using color swatches for your product variants it isn't possible for the colors to automatically show a true reflection of the color of your product. When you name a color in your product variants, that color can be matched to a color in the HTML color spectrum simply by its name. Not all colors or shades could possibly be accounted for, here is a quick reference to the colors that you can see based on the naming of your variants: Instead of relying on these swatches you can also upload your own swatch images, here is how. Take a small 50px x 50px screenshot of the product where you can see a good proportion of the color. Save this image using the following setup If the color being used is called: Light Grey Save the image as... lightgrey.png *all in lowercase with spaces replaced with hyphens "-" 2. If the color is one word... Gold save the image as... gold.png *all lowercase again 3. Once you have a few images saved in your admin click on themes > customise theme > theme options ( top left ) > Edit HTML / CSS On the next page Click on Assets and click the Add a New Asset button Upload each of your swatch images Once ready and you have your images uploaded go to Themes > Customize Theme > Product Page, here you will see an option for Custom Swatches. Make sure that this is checked and click save. Now when Light Grey is used or Gold or any other image that you have setup it will load in place of the standard color box.

2 How do I configure a mega dropdown menu? A mega menu is available on all of the above themes and allows you to show several menus from one drop down in your stores main navigation. Open your Shopify admin and go to: themes > customize theme On the left Sections menu open the section named: Header and scroll down until you see an area labelled: Mega Dropdown In the field marked: Mega dropdown link title Enter the name of the link which you would like the mega dropdown to appear from. For example: A store has the following links in their main menu: Home Shop Blog About us Shop is entered within the Mega drop down link title field. When the Shop link will now show a mega menu containing those 3 menus. What you enter in that Mega dropdown link title field will decide what is shown... This must be the same name and case as a link in your main menu... Without that it will not show a mega dropdown. Under the Content > Add menu section at the bottom you may choose up to 4 menus each of which will show when the mega dropdown menu is hovered. What size and ratio images should I use for the slideshow? Slideshow images should always follow the Landscape orientation (wider than they are tall). The height of the slideshow on your site is completely dictated by the height of the images you use. Taller images will appear taller on the screen, shorter images will reveal more below them when the page loads. Your slideshow will automatically allow for taller or shorter images there are just a few small steps that you need to take to make sure that everything works seamlessly.

3 If your Slideshow is full browser width use images that are 1920px wide If the slideshow is not full browser width use images that are 1200px wide Some good resolutions to use are: 1920px x 900px ( full width only ) 1200px x 800px ( not full width ) Make sure all of the images in your slideshow are the same width and height. This will ensure that you do not have any unnecessary white space underneath the slides. How do I configure a mega dropdown menu? FREE THEME SUPPORT Our free theme support service is limited to and includes support of the base configuration and design of your TRENNDERPRO Shopify theme. The support covers assistance in using the built-in theme options and also assistance in correcting any theme related bugs that you might come across. We can not offer code changes as part of our free theme support, nor can we offer support on modifications that have been applied to the original code of the theme. Part of the beauty of Shopify is the ability to delve into any part of the code within your Shopify theme to make basic or more complex theme changes. When making code changes that impact on the design of the theme or any parts of the theme layout, care and time should be taken to ensure that the changes being made do not make a negative impact elsewhere within your store. WATCH OUT FOR RED CODE Shopify's HTML & CSS editor is easy to use and carries its own built-in warnings to give you a visual guide if there is a problem.when editing code always look below what you have changed, if the code is red, you have a problem. Changes should not be attempted by those inexperienced in working with code and do not have the experience in debugging problems.

4 WHERE TO GET HELP Shopify's forums offer a wealth of resources and free help, often from Shopify staff on how to add functions to your store. Not all code offered within these will work as every theme is coded differently. Shopify's docs also offer many guides on how to add new features and explain how to use every aspect of your main Shopify dashboard. Once again though, the tutorials for theme code changes may not always work with your theme due to every theme being coded differently. HIRING HELP Shopify provides a large list of potential companies who can customize your store to any level. If you are looking to make changes to your store we offer a great theme tweak/customization service here in house which you can learn more about here: Otherwise, there are many companies in the marketplace, all are Shopify partners and have to meet strong criteria to be included on this list. DESIGNERS Are you a designer using TRENNDEPRO theme? We understand that you work with clients and sometimes take on work that is outside the scope of your skill set. We can not offer free code changes nor can we offer step-by-step instructions to designers based on requirements that your client has asked you for based on expertise that you have offered to them.

5 My Logo is blurry, how do I fix it? When adding a logo to your store the theme will show that at it's true uploaded size. This will on retina screens blur the images as they are being shown on a greater scale than their true size. Correcting the sharpness is simple and does not require that you have 2 different logo images for different resolutions, here is how to sharpen that up. 1. From your Shopify Admin click on Themes > Customize Theme > Actions > Edit Code 2. On the next page open the Assets folder and choose Stylesheet.css.liquid 3. Scroll to the bottom of the page and after all other code paste in the following: #logo img { max-width: 220px; } You can increase the 220px or decrease this as needed, but click save when done. Then go to Themes > Customize Theme and open the section named Header upload a large version of your logo that would be oversized for the site. This will upload that large logo but the code that you added above will limit its size helping it to display in sharp quality on all screen sizes. What can be found in the Sections tab? The sections tab is where you will find the settings and configurations for the exact template you have selected in the template picker. You will also find the settings for the Header, Footer, and Mobile Navigation. The available settings in the sections tab will change depending on the template your viewing.

6 What are Editable + Re-orderable Sections? Editable sections are chunks of editable content with a specific layout that can be reused on your site homepage. For example, the featured collections section or slideshow section. Editable sections can be re-ordered using drag and drop and can be repeated when you have different content but need the same layout. Editable sections may also be deleted and then re-added later. What are Editable + Re-orderable Blocks? While editable sections may define an area of content, editable blocks make up the content of each section. For example, a slideshow is a section, but a slide within the slideshow section would be a block. Like editable sections, editable blocks can be added, re-ordered with drag and drop or deleted within their section. This makes it simple for you to change the order in which images appear within a slideshow section. The best part, adding sections or blocks to your store does not require code editing! What are Fixed Sections? You will notice as you navigate through your site, while in the theme editor, there are a few Sections under the Sections tab that remain fixed. In the Icon theme by Underground, the fixed sections are Header, Footer, and Mobile navigation. These sections are fixed because they appear on all templates of your site. Fixed sections cannot be repeated or re-ordered.