Category: Shopify How To

Shopify Developer - Shopify Desginer - Shopify Expert - Shopify Setup

How To Use The Debut Shopify Theme Part 1 of 2

Part 1: How To Edit and Setup Debut Theme for Shopify v2.0

 

In this video, I am going to show you how to SETUP Shopify SETTINGS for your Shopify Account.  We usually do this first before working on a store so that these items are completed and ready for use once the site is ready to launch.

 

 

Sign Up for a Free 14 Day Free Trial with Shopify Here

Yes, the above link is an affiliate link and we will get a small commission if you decide to sign up for a Shopify Paid plan.

We ARE Shopify Experts, so if you do not feel like doing this yourself, contact us and we will do it for you.

How to Show Other Products from the Same Collection on a Product Page Venture Theme Shopify

How To Add Products from the Same Collection To The Product Page for Shopify Venture Theme

How to Show More Products from the Same Collection on Product Page in Shopify.

 

This article will cover how to edit the Venture Theme from Shopify to display additional products from the same collection that the product is in at the bottom of your product page.

 

You can watch this online tutorial on How to Show Additional Products from the same collection on the product page for the Venture Theme or keep reading below.

 

1) Go to ONLINE STORE –> ACTIONS and select EDIT CODE

 

2) Scroll Down and Find the SECTIONS area and select ADD NEW SECTION and call the page

 

products-in-this-collection

 

3) Paste the following code:

 

<div class=”product-recommendations”>
<div class=”page-width”>

<div class=”section-block__header text-center”>
<h4 class=”h1–mini section-block__title”>More Products by <a style=”color:red;” href=”/collections/{{ product.vendor | handleize }}”>{{ product.vendor }}</a></h4>
</div>

<div class=”section-block”>
<div class=”grid grid–no-gutters grid–uniform”>

{% assign mycollection = product.vendor | handle %}

{%- for product in collections[mycollection].products limit: 5 -%}

<div class=”grid__item small–one-half medium-up–one-fifth{% if forloop.index == 6 %} medium-up–hide{% endif %}”>
{%- include ‘product-card’, product: product, collection: collection -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>

 

4) On the left scroll up to the TEMPLATES area and find  product.liquid   – it will have this code in it…

 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-template’ %}
{% section ‘product-recommendations’ %}

{% if collection %}…… rest of the code is after this

add this line of code

{% section ‘products-in-this-collection’ %}

right after  this code

{% section ‘product-recommendations’ %}

so it looks like this

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section ‘product-template’ %}
{% section ‘product-recommendations’ %}
{% section ‘products-in-this-collection’ %}

{% if collection %} ,,, rest of code after this

 

5) SAVE the product.liquid  page and you are DONE!


Conclusion:

At After Dark Grafx, we specialize in providing in-depth app recommendations to help merchants get the most from their online stores. We are a Shopify Expert, Shopify Developer and Shopify Partner.

 

Sign Up for a Free 14 Day Free Trial with Shopify Here

Yes, the above link is an affiliate link and we will get a small commission if you decide to sign up for a Shopify Paid plan.

We ARE Shopify Experts, so if you do not feel like doing this yourself, contact us and we will do it for you.

 

If you have any questions or need help please feel to contact us, a qualified Shopify expert for a free installation into your store. You don’t need to be an After Dark Grafx client, but that doesn’t hurt either 😊

 

How To Fix Shopify Photo Alignment and Photo Sizing

How To Fix Product Sizes in Shopify

Are your products misaligned in Shopify? This is typically due to your product images being different sizes, cropped differently, etc. Images downloaded from the web are usually the biggest culprits.

 

Shopify Product Image Not Aligned on Collection Page

 

It is always best to photograph your own images for your eCommerce store so that all of your product images are the same width and height. The easiest way to fix the issue of image alignment on collection and home pages is to always upload all of your product photos at the exact same size.

This involves adding extra space around product photos.

Here is a FREE way to solve this problem.

a) Watch This Video below or via this link: https://youtu.be/Na3Jp0OExH8

 

b) Go to: https://www.photopea.com(you can also use photoshop, affinity, gimp or other image software but this online version is just like photoshop and it’s FREE)

 

Photopea.com

 

c) Find an image that you would like to use for your website

 

d) In the Photo editor from B above, Create a NEW FILE and make the image size of that file 800px width by 800px tall. Some people like to make the images larger at 1200px by 1200px or larger, so for the instruction of this post, we will use 800×800

 

e) Fill the background color with white or the color you would like to use for the background of your images OR leave it transparent. ie: if leaving transparent, you should export your files as PNG files instead of JPGs as below to maintain the transparency

 

f) Open up the image you would like to use for your product in the editor. You now have the editor with the 800×800 px file and the product image you just uploaded.

 

g) Select the product image and select ALL then copy the image

 

h) Go back to the 800×800 file and PASTE this image. It will be larger or smaller depending on image selected. Select Transition or Scale the product image to fit on the 800×800 file. I will usually add a guideline towards the bottom of the file a few pixels above the bottom so that all of my product images will all have the same BASELINE. This is good if you have multiple products shown on your COLLECTIONS or CATEGORY pages, and will fix the alignment so they are all in a row.

 

i) Once you have the image centered on the 800×800 file. Select FILE — EXPORT or SAVE AS JPG – if you want a transparent background – save as PNG file.

 

j) One last step is to optimize this image so it loads quickly. Head over to tinyjpg.com or tinypng.com (free) and upload your image(s). Then download the optimized files.

 

k) Upload a few product images that will next to each other in category. If you did this correctly, all of your images should look the same height and width and be in a row and look awesome!

 

How To Align Product Images in Shopify

 

That’s It!

James Byrne is an Information Architect, USMC VET and the owner of After Dark Grafx

After Dark Grafx – Since 1992
“We Work After Dark, So You Don’t Have To!”

Home