Category: Shopify

So, I am working on Shopify using the Responsive Theme and I was trying to figure out how to EDIT or REMOVE the short description on the Quick Shop Pop Up Screen.

This is the screen that appears as a pop up when you are on a collections page. If you roll your mouse over a product and see “Quick Shop” if you click this message, it will show a Pop Up of the product, with a short description, the quantity and a buy now button.

After you click on QUICK SHOP you will see the screen below

Initially the description was TRUNCATED. Meaning, it was only showing the first 100 characters or so of my description. This was annoying. I wanted to control what was placed in that section.

You can do a few things:

Remove the description altogether
Shorten or lengthen the description
Replace the short description for the quick shop popup with your own text

I opted for #1, Remove the description altogether, to keep this tutorial simple.

HOW TO:

In Shopify go to ONLINE STORE on the left. Then on the right click on ACTIONS next to CUSTOMIZE button then select EDIT CODE from the drop down
On the left side under SNIPPETS look for product-thumbnail.liquid
Click on the code in the window and type in CTRL + F (PC) or CMD + F (MAC) and find this code. <p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
It will be in two places. You can simple remove this entire line of code in both places and select save
Now when you click on the Quick Pop Up, you will no longer see a short description. Just the image, name, price, quantity, reviews(if you added them) and the add to cart button.

If you are interested in How To Replace the short description for the quick shop popup with your own text on the Responsive Theme for Shopify contact us directly for this integration ($75). Fee may vary depending on Theme and Coding of Store so contact us first. We can edit pretty much any theme.

If you are wondering how to add a product carousel on your Shopify Homepage, look no further!

by James Byrne, Information Architect (USMC VET)
After Dark Grafx

Depending on your Shopify Theme, you will need to adjust the code accordingly.

NOTE: The below integration requires a paid app. If you are interested in adding a home page product carousel to Debut, Brooklyn or any theme that uses SLICK then we offer a different integration for $85.00 that does not require an app – Contact Us Here.

Today, we are going to describe How To Add A Product Carousel Slider on a Shopify Homepage utilizing the VENUE THEME, found in the Shopify Theme Store.

This integration is for an advanced developer so be sure to backup your code before beginning this integration.

We will be editing the main theme liquid code of Shopify, uploading a few files then changing the way the template shows a featured collection on the homepage.

All themes are different, so you can use this information and code to troubleshoot your own theme or HIRE US and we will do it for you. There are many apps in the Shopify App Store but you have to pay for them or subscribe and pay for them on a monthly basis.

THEME: VENUE
CODE INTEGRATION: Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)
CODEPEN TESTING: Click here to see BASIC integration for HTML

We are assuming that you have a Shopify Account – if not, you can signup for one here. We are also assuming that you have purchased and installed the VENUE THEME.

STEP 1: Download Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)

Under DOWNLOADS on the page above right click and SAVE-AS and save these files to your computer. We usually start with the NON-MINIFIED versions so that we can edit them if needed. (note: screenshot below – you will have to go to the website above to download)

STEP 2: LOGIN TO SHOPIFY AND UPLOAD THESE FILES
a) Left side in Admin click on SETTINGS
b) Then click on FILES
c) Then upload all files

d) Copy each of the new links https://cdn.shopify….. to a new text document as you will need these later in this post.

STEP 3: Go to your theme and add the code references

a) On left click ONLINE STORE
b) On right click on the ACTIONS dropdown and select EDIT CODE
c) Under LAYOUT on the left fine theme.liquid (it is usually best to make a backup of this code before editing it.)

Scroll to the bottom of this file and paste for CDN referenced files below:

Do not use # as these were placed in this post to hide the numbers from our files 🙂 Just paste YOUR CDN files that you copied from STEP 2 above

Right above the closing </BODY>

STEP 4: Remember, we are using the VENUE THEME so finding where to make the following edits will be dependent on your theme.

Under SECTIONS on the left, find home-collection.liquid

Around line 31 find this code and ADD THE BOLD ITEMS IN BELOW

<div class=”home-products__grid”>
<div class=”o-layout o-layout–center{% if settings.product_grid_masonry %} o-layout–masonry{% endif %}{% if section.settings.grid == 8 %} o-layout–small{% endif %} layout-slider js-layout-slider js-layout-slider-{{ section.id }} carousel” data-flickity='{ “groupCells”: true }’>
{% for product in collection.products limit: product_limit %}
<div class=”o-layout__item {{ grid_item_width }} carousel-cell”>
{% include ‘product-grid-item’, grid_image_width: image_size, page: ‘home’ %}
</div>

Save the File.

STEP 5: ADD FEATURED COLLECTION TO HOMEPAGE

a) Click on ONLINE STORE on the left
b) Click on CUSTOMIZE BUTTON on the right
c) Scroll Down on the left and select ADD SECTION only is the FEATURED COLLECTION is not showing on the theme.

d) Select FEATURED COLLECTION
e) Select the FEATURED COLLECTION that you just added and name it to whatever you want.
d) Change the PRODUCTS per row to whatever you want
e) Change the ROWS to the maximum number. I chose 5.