How to make thumbnail photos and text into a uniform size, and both hyperlinked - Debut

wonderlandflora
New Member
6 0 0

Hi,

We are using the Debut theme and encountering the following problems:

1. The category thumbnails photos displayed in different sizes making the listing looking messy.  Although we tailored the original photos into the same aspect ratio and then the thumbnails displayed in a uniform size, we'd like to revise the code so that we don't have to work with the photo size individually.  The same issue with product thumbnails which involves a large amount of work.  It would be a lot better if we can change the code instead of working on individual photos.

2. Similar issue with the title text for both categories and products.  If the titles have different numbers of lines, they will be displayed in different sizes.  For better SEO, we'd like to have the title long with different lines.  Is it possible to have titles of different lengths but display only two lines like the listings in ETSY where only one line is displayed and the full title is shown when the customer click and open the product?

3. Currently, only the title is hyperlinked.  It is harder for a customer to find the hyperlink points.  Is it possible to have both thumbnail photo and the title hyperlinked together like what ETSY has?

Our website: wonderlandflora.come.  PW: ughaom.

Thanks a lot!

Replies 8 (8)

Tira
Shopify Staff (Retired)
1260 90 223

Hey, @wonderlandflora

Thanks for your questions and your store URL. This is helpful. I’m happy to provide some insight to help:

1) I appreciate all of the manual work that you’ve done to resize your images so that they are aligned. I’m hearing that you have a lot of images to work with and want a more streamlined solution to align your images without needing to adjust each image individually. If that’s right, there is a way to adjust your images all at once so that they align on your theme, but we highly recommend against this as it can crop your images in weird places and can negatively impact the flexibility of the containers that hold your images, which is important for your customer's viewing experience on all screen sizes. We recommend using image editing apps to resize all of your images. We also have a help doc where you can learn more about adjusting your images using our image editor.

However, if you would still like to add a code to your theme you can. 

If you would like to, before moving forward with making any customization to your store, I recommend duplicating your theme, understanding what level of support is available for your theme, and making sure to follow the requirements and learn the best practices for uploading images. Our help doc has more details for you to check out here: Editing theme code.

To duplicate your theme you can follow these steps:

  1.  From your Shopify admin, go to Online Store > Themes.
  2.  For the theme that you want to duplicate, click Actions > Duplicate.
  3.  The duplicate theme appears on the Themes page. It is named Copy Of + the name of the theme that you duplicated.

These steps might vary depending on the device you're using, you can check out our help doc to learn more here: Duplicating themes.

You can also roll-back your theme to an earlier version in your .liquid code should you need to go back to a time and date in your theme. 

I did some digging through the Shopify Community and found this thread where someone shared a snippet of code to help with aligning images on your store that might help: Debut theme custom page images not aligning in table

2) Great question. The length of your titles will typically depend on the theme that you’re using, we highly recommend having shorter titles for the interest of the customers that visit your store. Do you have a screenshot of an example of what you’re looking to do? I would love to know so that I can check with our themes team to see if this something we can support. 

3) On the Debut theme in my test store, I can see that both the image and title are hyperlinked to the product on the featured collection on my homepage. Is this where you’re looking to add hyperlinks? If it isn’t, could you please provide a direct link to the collection or products that you are referring to so that I can take a closer look with you? Thank you!

Talk soon,

To learn more visit the Shopify Help Center or the Community Blog.

wonderlandflora
New Member
6 0 0

Hi Tira,

Thanks for your response. Really appreciate it. I can tell that you read my questions carefully and really understand them.

1. We have stores with some online marketplaces. Every time we create a listing, we do need to pay a little attention to the aspect ratios. The photos may be cropped. However, the main body image may not be affected if we have enough white space around it.  No matter what, all listings are aligned very well. Please look at one of our online stores which is the format that we need:

https://www.etsy.com/shop/WonderlandFloraHP

and the listings with the Debut theme:

https://wonderlandflora.com/collections/air-purifiers

Please note, the images in the first line all manually adjusted to a 1:1 aspect ratio except for the last one – Monstera.

I tried the code in the thread that you referred. It does not work. Please let me know the result if you have tried it. If you have some code handy, I’d love to try it.

2. We were told that a longer title with more keywords helps SEO. In any case, it may be a solution by shortening whatever into one or two onlines. Again, please look at our ETSY webpage that I copied above. The title lines are shortened to one line. Otherwise, titles with different lengths will have negative visual effect as show by the Debut page above.

3. You are right for the collections in the subcategories on our site. It is not for those on our home page (wonderlandflora.com) where you can see the collection listings with only text hyperlinked.

Thanks again for your help, your time and effort.

wonderlandflora
New Member
6 0 0

@Tira Please see above.  Thanks.

Tira
Shopify Staff (Retired)
1260 90 223

Thanks for the tag, links and details, @wonderlandflora.

I wanted to note that while our Shopify Community is monitored 24/7, we don't have a guaranteed timeframe for responses. I appreciate your patience. 

1) I appreciate you giving the code a try. Did you get a chance to roll back your theme? If you haven't, I recommend rolling your theme back as I mentioned in my earlier post so that your code will remain the same as it was before.

We aren't trained in coding so any coding would be outside our scope of support. I highly recommend looking into hiring a Shopify Expert. Shopify Experts specialize in adding custom features and coding to enhance your store. Here is a link to Shopify Experts that help with design customizations on your store. I am also curious what the Shopify Community has to suggest!

2 & 3) It looks like there is a password page enabled on your store. Would you be able to remove the password for your password page so that I can take a look? 

To remove your password page, follow these steps:

  1. From your Shopify admin, go to Online Store > Preferences.

  2. Go to the Password protection area.

  3. Uncheck Enable password.

  4. Click Save.

These steps are also listed in our help doc: Remove password protection from your online store.

Once the password page is removed, I can take a look at your store and provide you with specific recommendations. You can then add your password page back once we’ve taken a look. Another option would be to post your password page password here, and the Shopify Community and I can dig further into your store.

Thanks for breaking down what you’re looking for in your titles and with its SEO. I hear that you were given some direction on enhancing your SEO by someone. Was that advised by a staff member at Shopify, or someone else? I’m curious to know!

I’m not sure if you’ve seen our help docs on SEO before, we do have a help doc that has tips on optimizing your site’s structure for SEO that you might find helpful here: Optimizing your site’s structure for search engines.

This help doc covers the best practices for SEO: content follows a logical hierarchy of categories, pages don’t use iframes, URLs use standard characters and simple, readable structure and will also walk you through optimizing your online store navigation, using descriptive file names for your images, and using descriptive link text for internal links.

Talk soon,

To learn more visit the Shopify Help Center or the Community Blog.

wonderlandflora
New Member
6 0 0

Thanks Tira @Tira for your reply and advice.  Really appreciate it.  About your questions and advices:

1. Store website access: We included our website info in the first post.  I'm posting them here again.

Store website: wonderlandflora.com

Password: ughaom,

 

2. The reason for me to post these issues here is because I saw several identical or similar questions elsewhere with code provided including the one that you referred.  I also believe the issues I brought up were basic ones and made sure that I'm not asking outrageous help here.  The reason for me not to use the code that I've seen and the one you referred just because either the source file name(s) cannot be found in the current version of Debut or the code does not work (for example, the one you referred).  If you or your colleague could provide the updated source file name(s) or tested out the one that does not work for mr, the issue could be solved.

Examples of wimilar questions and solutions:

(1). https://community.shopify.com/c/shopify-design/debut-theme-custom-page-images-not-aligning-in-table/...

This is the one that you referred.  I tested it and it does not have any impact on our site.

(2). https://community.shopify.com/c/technical-q-a/resize-thumbnails-under-product-picture-debut-theme/m-...

Cannot find theme.scss.liquid file in Asset.

(3) https://community.shopify.com/c/shopify-design/how-to-make-the-images-in-a-collection-same-size/td-p...

Again, cannot find theme.scss.liquid file in Asset.

 

3. Thanks for your advice about SEO.  I've read the linked article that you referred.

 

Thanks again and see you soon.

Tira
Shopify Staff (Retired)
1260 90 223

Thanks for pointing this out and the details, @wonderlandflora.

Coding customizations are outside our scope of support, however I did dig into my own test store to see if I could find the theme.scss.liquid file that you're looking to use. It looks like SCSS files have been depreciated so this file is no longer available, however there is a theme.css file available. Is this what you were looking for?

Have you tried to search for theme's files before? If you haven't here are the steps to search your theme files:

1) Login to your Shopify admin

2) Click on Online Store > Themes

3) Click on "Actions" next to your theme, and click on Edit code

4) In the search bar on the right of the screen, type in the file or code you are looking for. Hit "Enter" on your keyboard and a search will begin for files that match your keywords. 

Typically, this file can be found under the Assets folder of your theme's code. I want to let you know that any edits made to the Assets folder are irreversible, and you cannot roll back the theme to a previous edit once an edit has been made. I recommend creating a duplicate copy of your theme should you want to add your own customizations and need to go back to your previous theme files.

I am able to see your storefront with your storefront password but I am not sure which collection or page I should be looking at.

To make it easier for the community, do you have a direct link to the collection that you want to look at? 

Does anyone have any insights to help?

To learn more visit the Shopify Help Center or the Community Blog.

wonderlandflora
New Member
6 0 0

Thanks @Tira .   I'm not looking for the theme.css file since I know where it is located.  My question was what is the equivalent of the theme.scss.liquid file that is not longer among the the code files. 

Thanks a lot Tira.  Really appreciate your help.

Thanks for calling others to look into these issues.  Could @dmwwebartisan @KetanKumar take a look?  Thanks in advance!

Again, our store link: wonderlandflora.com, PW: ughaom

Tira
Shopify Staff (Retired)
1260 90 223

Thanks for clarifying that, @wonderlandflora. The theme.css file would be the replacement for the theme.scss.liquid files. 

I would love to know if that helps and I am curious to what the Shopify Community has to say! 

To learn more visit the Shopify Help Center or the Community Blog.