Meta Tags in Shopify
// October 29th, 2007 // No Comments » // Design, SEO, Shopify, Web Builders, eCommerce
Alright, we’re back. It’s been some time since I’ve posted last. Lots of projects going on at work, at home, and school. One of such projects has been playing around with Shopify. My most recent discovery with Shopify is how to create custom meta tags. Although, I’m still trying to figure out how to create custom meta tags for each page, you can still create custom meta tags for your individual products. What this does basically, is automatically turn the description for your product into the meta description and turn the tags assigned to your product into meta keywords. That’s better than nothing and with using Shopify your main focus is going to be on your products, anyway. Here is what you will need to do to get these this to work:
1. Login to your Shopify admin.
2. Navigate to “Assets” (Shopify recently changed “Look and Feel” to “Assets”). Then click on where it says “Theme Editor”
3. Now click on “Theme.liquid” to open up your layout code for your template.
4. Near the top of the code will be where the header code starts. Look for “<head>”. After the <head> tag enter the following code:
{% if template == “product” %}
<meta name=”description” content=”{{ product.description | strip_html }}” />
<meta name=”keywords” content=”{{ product.tags | join: “,” }}” />
{% endif %}
5. Click “save” when finished for it to take effect.
a. Cropping: After clicking on the Crop button at the top of the screen, click and drag one of the red boxes to change the area you would like to crop. Press enter or double click to apply the crop.
c. Enhancing: I’m putting the rest of the options into this category. There are a lot of different things you can do with this. Clicking on “Enhance” will automatically alter your image for you, correcting the lighting, contrast, etc. Clicking on “Adjust” will give you options where you can change the size of the image (yes, you can resize it here too), tilt the image (this keeps the dimensions of the image but moves the contents of the image around. Just play around with it, you’ll understand), change the brightness (how light are dark the image as a whole is), change the contrast (how light the lights are and how dark the darks are), change the saturation (how concentrated the colors of the image are), change the hue (that’s the color), and change the sharpness (how blurry the image is).
4. When finished with your changes save your image. You can actually save in a variety of formats: to your computer (JPG, GIF, PDF, PSD, PNG, and TIF) or to the web (WebShots and Flickr). (I went over WebShots in a previous post).
Before
After
